動態(tài)面板是Axure里最重要的元件之一，一些稍微高級一點的原型，都離不開動態(tài)面板的應用，因此一定要掌握動態(tài)面板的用法。

作為動態(tài)面板的使用場景案例，導航菜單、自動幻燈片和屬性頁是非常適合于用來理解動態(tài)面板的用法。我們以微信的導航菜單為例，看看如何使用不同的方式來應用動態(tài)面板，最終的交互效果是一致的。

第一個例子不復雜，但常常被作為典型案例來講解。

內容區(qū)域+導航菜單作為一個動態(tài)面板

這是其中最簡單的實現方式，并且易于理解。

一、界面布局

簡單布局一下微信的界面，包括標題欄，內容區(qū)域和導航菜單。

1、添加一個標題欄，大小448*48，黑底白字，文字大小為20，居左對齊，左邊距為10

2、添加一個有邊框矩形，大小448*580，灰色背景，只保留上、下邊框，雙擊矩形框，設置文字內容為“微信內容”，將矩形框放在標題欄下方

3、添加一個灰色無邊框矩形，大小112*60，文字顏色為深灰色，設置文字內容“微信”，作為導航菜單的按鈕，放在內容區(qū)域的下方

4、設置“微信”按鈕的交互樣式，選中按鈕，右鍵選擇“交互樣式”，設置選中狀態(tài)的文字顏色為綠色（#46C01B）

5、按ctrl鍵+“微信”按鈕拖動，復制三個相同矩形框，作為微信導航菜單的其它按鈕，修改文字分別為“通訊錄”、“發(fā)現”和“我”

二、動態(tài)面板處理

界面基本元件已經添加完成，選中“微信內容”矩形框和下方的四個導航按鈕，右鍵轉換為動態(tài)面板，命名為nav，將State1命名為“微信”：

微信的導航菜單分為四部分內容，因此我們可以將動態(tài)面板的”微信”再復制3份，以通訊錄為例，在狀態(tài)“微信”上右鍵，選擇“復制狀態(tài)”：

修改復制出來的動態(tài)名稱為“通訊錄”：

雙擊通訊錄，打開動態(tài)面板，修改里面內部部分的矩形框文字為“通訊錄列表”（這樣在切換導航菜單時可以看到確實切換到不同的狀態(tài)了）：

同理，復制為“發(fā)現”和“我”兩個狀態(tài)，并修改其中的文字內容，完成后，動態(tài)面板有四個狀態(tài)：

微信在默認情況下，顯示的是導航菜單“微信”處于選中狀態(tài)，目前動態(tài)面板中狀態(tài)為“微信”是顯示在最上面，我們雙擊狀態(tài)“微信”打開，選擇“微信”按鈕，右鍵選擇“選中”：

同理：

• 雙擊打開狀態(tài)“通訊錄”，右鍵設置“通訊錄”按鈕為選中。
• 雙擊打開狀態(tài)“發(fā)現”，右鍵設置“發(fā)現”按鈕為選中。
• 雙擊打開狀態(tài)“我”，右鍵設置“我”按鈕為選中。

這樣，在切換到相關狀態(tài)時，當前狀態(tài)對應的按鈕即為選中狀態(tài)。

三、動態(tài)面板事件處理

這里有兩個地方需要添加事件處理：

1、左右滑動內容區(qū)域時切換動態(tài)面板狀態(tài)

選擇前面的動態(tài)面板，雙擊添加“向左拖動結束時”事件：

1. 選擇動態(tài)面板
2. 添加“向左拖動結束時”事件
3. 設置面板狀態(tài)，選擇當前動態(tài)面板
4. 在向左滑動結束時，我們將動態(tài)面板設置為下一個狀態(tài)，即為“Next”
5. 設置動畫和退出動畫為“逐漸”，也就是淡入淡出效果

同更，添加“向右拖動結束時”事件，只是上面的第4步中的選擇狀態(tài)為“Previous”，其它設置相同。

2、點擊導航菜單按鈕切換動態(tài)面板狀態(tài)

擊導航菜單按鈕時的狀態(tài)切換，和上面的左右滑動的效果是一樣的。

我們先添加狀態(tài)“微信”中的四個按鈕。

雙擊打開第一個狀態(tài)——“微信”，選擇按鈕“微信”，添加單擊事件：

1. 選擇“微信”按鈕
2. 添加鼠標單擊事件
3. 設置面板狀態(tài)
4. 選擇動態(tài)面板nav
5. 設置狀態(tài)為“微信”，進入退出動畫為逐漸

添加其它三個按鈕事件，步驟相同，選擇對應按鈕時顯示對應的狀態(tài)。

現在可以按下F5鍵預覽一下效果了：

1. 左右拖動內容區(qū)域查看
2. 單擊導航菜單按鈕查看

僅內容區(qū)域作為一個動態(tài)面板

導航菜單的實現方式有多種，下面我們使用另外一種方式，只將內容區(qū)域作為動態(tài)面板，而將導航菜單按鈕獨立出來，不再放在動態(tài)面板中。

一、界面布局

界面布局部分和上面的方式完全一致，此處不再贅述，直接進入動態(tài)面板處理

二、動態(tài)面板處理

選擇內容區(qū)域的矩形框，右鍵轉換為動態(tài)面板，命名為content，復制該狀態(tài)3個，修改狀態(tài)名稱分別為通訊錄、發(fā)現和我，并修改里面矩形框的文字內容以便于識別：

將下方的四個按鈕分別命名為bWeixin,bTongxunlu,bFaxian,bWo，選擇按鈕“微信”，右鍵設置為選中狀態(tài)：

三、事件處理

同樣包括動態(tài)面板content的左右拖動處理，以及導航菜單按鈕的單擊事件。

1、左右滑動內容區(qū)域時切換動態(tài)面板狀態(tài)

事件和第一種的方法一樣，只是需要再補充一下事件內容，因為之前是整體切換動態(tài)面板的，而按鈕是在動態(tài)面板里的，但這次因為按鈕是獨立開來的，需要增加對按鈕的設置。

左右滑動的事件里，只是設置了顯示下一個或者上一個狀態(tài)，因此無法直接判斷出當前狀態(tài)在哪里，這樣就沒辦法去定位當前的導航菜單按鈕應該顯示是哪個（左右滑動時，下方的導航按鈕也要正確對應）。

注意：以下技巧很重要

利用“觸發(fā)事件”來處理復雜邏輯。

我們可以添加一個控制元件，例如熱區(qū)元件（因為不可見，比較適合，設置小一點），給它添加一下單擊事件（內有邏輯判斷），然后在動態(tài)面板的左右滑動時觸發(fā)熱區(qū)元件的單擊事件，這樣就能達到邏輯判斷的目的了。

添加一個熱區(qū)元件，命名為control，添加單擊事件：

1. 添加事件分支1
2. 添加條件狀態(tài)，動態(tài)面板content當前狀態(tài)等于“微信”
3. 先取消四個按鈕的選中狀態(tài)
4. 設置“微信”按鈕為選中狀態(tài)

同理，添加其它三個事件分支，分別判斷動態(tài)面板content的當前狀態(tài)，設置對應按鈕的選中狀態(tài)。（可以直接復制/粘貼事件，修改條件和事件）

下面，雙擊動態(tài)面板的Case1，修改動態(tài)面板content的左右拖動事件，觸發(fā)熱區(qū)事件：

1. 添加等待600毫秒，因為在顯示淡入淡出動畫時用了500毫秒，我們希望在動畫顯示完成后，正確顯示下方對應導航按鈕的選中狀態(tài)
2. 觸發(fā)熱區(qū)的單擊事件

2、點擊導航菜單按鈕切換動態(tài)面板狀態(tài)

1. 選擇“微信”按鈕
2. 添加鼠標單擊事件
3. 先取消四個導航按鈕的選中狀態(tài)
4. 設置當前按鈕為選中狀態(tài)
5. 設置動態(tài)面板content的狀態(tài)為“微信”

復制“微信”按鈕的事件，粘貼到其它三個按鈕的鼠標單擊事件，然后修改上面第5步動態(tài)面板狀態(tài)為對應狀態(tài)。

事件處理完成，再一次按下F5鍵預覽一下效果。

內容區(qū)域、導航菜單按鈕分別作為動態(tài)面板

最后，我們也可以將內容區(qū)域作為一個動態(tài)面板，將導航菜單的4個按鈕也作為一個動態(tài)面板，同樣可以實現微信的導航菜單效果。

這個留給愛學習的你自己實踐一下吧?。ê竺娴脑次募幸烟峁┝舜藢崿F方式）

小結

實現原型的方式有多種，只要能達到想要的效果，哪種方式都可以，不局限于一定要用哪種方式，只需要你清楚你想要的原型效果。

這里是三種原型的實現方式下載地址：鏈接: https://pan.baidu.com/s/1o8Pnxiy 密碼: khur

本文由 @Axure原型設計工場 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。