Home » 線上教學 » 第八章 進階 Dynamic Panel » 8-2 進階互動設計:Accordion Tab

8-2 進階互動設計:Accordion Tab

第八章:進階互動設計 ─ Dynamic Panel(動態面板)

本節學習目標

  • 學會使用進階Dynamic Panel
  • 透過Dynamic Panel製作Tab

本節學習主要透過Dynamic Panel製作 Tab 的效果,共可分為四部分:

1

1. 設置Tab標題及內容
首先,先將製作Tab所需要的物件(Label、Paragraph或Rectangle)從Widgets窗格內拖曳至Wireframe,即可輕鬆建立每一節Tab的標題及內容。


2
2. 編輯Dynamic Panel與命名
基本設置完成後,必須將Tab的「內容」區塊,點選滑鼠右鍵,選擇「Convert to Dynamic Panel」轉換為Dynamic Panel,成為兩個Dynamic Panel。利用右上方Widget Interactions and Notes窗格的「Dynamic Panel Name」分別為這兩個Dynamic Panel命名為「Section 1 Content」、「Section 2 Content」。命名完畢後可以在右下方Widget Manager檢視剛才所建立的Dynamic Panel與命名,並且將這兩個Dynamic Panel透過上方工具列或使用右鍵隱藏(Hidden)。

6
3. 編輯觸發事件
接著點選Tab標題,必須加上觸發事件(Event),才能呈現點擊標題後展開Tab內容的互動效果。所以我們要選擇Axure畫面右上方Widget Interactions and Notes窗格內Interactions中的「OnClick」游標點擊時的觸發事件進行編輯。

開啟事件編輯器後,可以看見四個窗格

  • Case description: 此事件的描述,可以對事件命名
  • Click to add actions:顯示所有動作型態(Action),我們可以點擊此觸發事件需要的動作型態即可
  • Organize actions:已經選擇的動作型態和Configure actions內的設定皆會出現在此區塊
  • Configure actions:設定動作型態的細節內容
4
在本節,我們需要兩個步驟設定觸發事件

  • 步驟一:新增假設條件(Add Case)
    • 開啟事件編輯器後,在左方Click to add actions窗格中的Dynamic Panel中選擇「Show/Hide」。此時會在Organize actions中增加一個假設條件(Case):Show/Hide。
  • 步驟二:設定假設條件
    • 點選剛才所增加的假設條件Show/Hide,在Configure actions窗格中勾選「Section 1 Content (Dynamic Panel)」,於下方Visibility選擇「Toggle」滑動與切換的顯示方式,並將勾選下方「Push/Pull Widgets」在展開隱藏物件後,將下方的物件一起展開至的點選的物件下方。

其他的Tab也重複上述步驟一、二說明。


     
4. 預覽成果
設置完成後,將Tab標題及內容放置適當位置,就可以透過工具列 Preview或F5預覽成果了。

Leave a Reply