Home » 線上教學 » 第八章 進階 Dynamic Panel » 8-3 進階互動設計:Mega menu

8-3 進階互動設計:Mega menu

本節學習目標

  1. 學會使用進階 Dynamic Panel
  2. 透過 Dynamic Panel 製作 Mega menu

本節學習主要透過Dynamic Panel(動態面板)製作Mega menu,共可分為四部分:

1. 設置Mega menu

首先,先將製作Mega menu所需要的物件(Label)從Widgets窗格內拖曳至Wireframe,即可輕鬆建立Mega menu。

5


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

7
3

3. 編輯觸發事件

接著點選Mega menu標題,必須加上觸發事件(Event),才能呈現滑鼠移置Mega menu後顯示menu內容的互動效果。所以我們要選擇Axure畫面右上方Widget Interactions and Notes窗格內Interactions中的「OnMouseEnter」當游標移置物件上時的觸發事件(Event)進行編輯。

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

6

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

在本節,我們需要兩個步驟設定觸發事件(Event)

  • 步驟一:新增假設條件(Add Case)
    • 開啟事件編輯器後,在左方Click to add actions窗格中的Dynamic Panel中選擇「Show/Hide」。此時會在Organize actions中增加一個假設條件(Case):Show/Hide。
  • 步驟二:設定假設條件(Case)
    • 點選剛才所增加的假設條件(Case)Show/Hide,在Configure actions窗格中勾選「Menu 1 (Dynamic Panel)」,於下方More Options選擇「treat as flyout」當滑鼠移至物件會彈跳出視窗。

9

 

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


4.  預覽成果

設置完成後,就可以透過工具列 Preview或F5預覽成果了。

Leave a Reply