動態(tài)面板是Axure里最重要的元件之一，一些稍微高級一點的原型，都離不開動態(tài)面板的應(yīng)用，因此一定要掌握動態(tài)面板的用法。
作為動態(tài)面板的使用場景案例，導(dǎo)航菜單、自動幻燈片和屬性頁是非常適合于用來理解動態(tài)面板的用法。我們以微信的導(dǎo)航菜單為例，看看如何使用不同的方式來應(yīng)用動態(tài)面板，最終的交互效果是一致的。
第一個例子不復(fù)雜，但常常被作為典型案例來講解。
// 內(nèi)容區(qū)域+導(dǎo)航菜單作為一個動態(tài)面板
這是其中最簡單的實現(xiàn)方式，并且易于理解。
一、界面布局
簡單布局一下微信的界面，包括標題欄，內(nèi)容區(qū)域和導(dǎo)航菜單。
1、添加一個標題欄，大小448*48，黑底白字，文字大小為20，居左對齊，左邊距為10
2、添加一個有邊框矩形，大小448*580，灰色背景，只保留上、下邊框，雙擊矩形框，設(shè)置文字內(nèi)容為“微信內(nèi)容”，將矩形框放在標題欄下方
3、添加一個灰色無邊框矩形，大小112*60，文字顏色為深灰色，設(shè)置文字內(nèi)容“微信”，作為導(dǎo)航菜單的按鈕，放在內(nèi)容區(qū)域的下方
4、設(shè)置“微信”按鈕的交互樣式，選中按鈕，右鍵選擇“交互樣式”，設(shè)置選中狀態(tài)的文字顏色為綠色（#46C01B）
5、按ctrl鍵+“微信”按鈕拖動，復(fù)制三個相同矩形框，作為微信導(dǎo)航菜單的其它按鈕，修改文字分別為“通訊錄”、“發(fā)現(xiàn)”和“我”
二、動態(tài)面板處理
界面基本元件已經(jīng)添加完成，選中“微信內(nèi)容”矩形框和下方的四個導(dǎo)航按鈕，右鍵轉(zhuǎn)換為動態(tài)面板，命名為nav，將State1命名為“微信”：
微信的導(dǎo)航菜單分為四部分內(nèi)容，因此我們可以將動態(tài)面板的”微信”再復(fù)制3份，以通訊錄為例，在狀態(tài)“微信”上右鍵，選擇“復(fù)制狀態(tài)”：
修改復(fù)制出來的動態(tài)名稱為“通訊錄”：
雙擊通訊錄，打開動態(tài)面板，修改里面內(nèi)部部分的矩形框文字為“通訊錄列表”（這樣在切換導(dǎo)航菜單時可以看到確實切換到不同的狀態(tài)了）：
同理，復(fù)制為“發(fā)現(xiàn)”和“我”兩個狀態(tài)，并修改其中的文字內(nèi)容，完成后，動態(tài)面板有四個狀態(tài)：
微信在默認情況下，顯示的是導(dǎo)航菜單“微信”處于選中狀態(tài)，目前動態(tài)面板中狀態(tài)為“微信”是顯示在最上面，我們雙擊狀態(tài)“微信”打開，選擇“微信”按鈕，右鍵選擇“選中”：
同理：
雙擊打開狀態(tài)“通訊錄”，右鍵設(shè)置“通訊錄”按鈕為選中。
雙擊打開狀態(tài)“發(fā)現(xiàn)”，右鍵設(shè)置“發(fā)現(xiàn)”按鈕為選中。
雙擊打開狀態(tài)“我”，右鍵設(shè)置“我”按鈕為選中。
這樣，在切換到相關(guān)狀態(tài)時，當前狀態(tài)對應(yīng)的按鈕即為選中狀態(tài)。
三、動態(tài)面板事件處理
這里有兩個地方需要添加事件處理：
1、左右滑動內(nèi)容區(qū)域時切換動態(tài)面板狀態(tài)
選擇前面的動態(tài)面板，雙擊添加“向左拖動結(jié)束時”事件：
選擇動態(tài)面板
添加“向左拖動結(jié)束時”事件
設(shè)置面板狀態(tài)，選擇當前動態(tài)面板
在向左滑動結(jié)束時，我們將動態(tài)面板設(shè)置為下一個狀態(tài)，即為“Next”
設(shè)置動畫和退出動畫為“逐漸”，也就是淡入淡出效果
同更，添加“向右拖動結(jié)束時”事件，只是上面的第4步中的選擇狀態(tài)為“Previous”，其它設(shè)置相同。
2、點擊導(dǎo)航菜單按鈕切換動態(tài)面板狀態(tài)
擊導(dǎo)航菜單按鈕時的狀態(tài)切換，和上面的左右滑動的效果是一樣的。
我們先添加狀態(tài)“微信”中的四個按鈕。
雙擊打開第一個狀態(tài)——“微信”，選擇按鈕“微信”，添加單擊事件：
選擇“微信”按鈕
添加鼠標單擊事件
設(shè)置面板狀態(tài)
選擇動態(tài)面板nav
設(shè)置狀態(tài)為“微信”，進入退出動畫為逐漸
添加其它三個按鈕事件，步驟相同，選擇對應(yīng)按鈕時顯示對應(yīng)的狀態(tài)。
現(xiàn)在可以按下F5鍵預(yù)覽一下效果了：
左右拖動內(nèi)容區(qū)域查看
單擊導(dǎo)航菜單按鈕查看
// 僅內(nèi)容區(qū)域作為一個動態(tài)面板
導(dǎo)航菜單的實現(xiàn)方式有多種，下面我們使用另外一種方式，只將內(nèi)容區(qū)域作為動態(tài)面板，而將導(dǎo)航菜單按鈕獨立出來，不再放在動態(tài)面板中。
一、界面布局
界面布局部分和上面的方式完全一致，此處不再贅述，直接進入動態(tài)面板處理
二、動態(tài)面板處理
選擇內(nèi)容區(qū)域的矩形框，右鍵轉(zhuǎn)換為動態(tài)面板，命名為content，復(fù)制該狀態(tài)3個，修改狀態(tài)名稱分別為通訊錄、發(fā)現(xiàn)和我，并修改里面矩形框的文字內(nèi)容以便于識別：
將下方的四個按鈕分別命名為bWeixin,bTongxunlu,bFaxian,bWo，選擇按鈕“微信”，右鍵設(shè)置為選中狀態(tài)：
三、事件處理
同樣包括動態(tài)面板content的左右拖動處理，以及導(dǎo)航菜單按鈕的單擊事件。
1、左右滑動內(nèi)容區(qū)域時切換動態(tài)面板狀態(tài)
事件和第一種的方法一樣，只是需要再補充一下事件內(nèi)容，因為之前是整體切換動態(tài)面板的，而按鈕是在動態(tài)面板里的，但這次因為按鈕是獨立開來的，需要增加對按鈕的設(shè)置。
左右滑動的事件里，只是設(shè)置了顯示下一個或者上一個狀態(tài)，因此無法直接判斷出當前狀態(tài)在哪里，這樣就沒辦法去定位當前的導(dǎo)航菜單按鈕應(yīng)該顯示是哪個（左右滑動時，下方的導(dǎo)航按鈕也要正確對應(yīng)）。
注意：以下技巧很重要
利用“觸發(fā)事件”來處理復(fù)雜邏輯。
我們可以添加一個控制元件，例如熱區(qū)元件（因為不可見，比較適合，設(shè)置小一點），給它添加一下單擊事件（內(nèi)有邏輯判斷），然后在動態(tài)面板的左右滑動時觸發(fā)熱區(qū)元件的單擊事件，這樣就能達到邏輯判斷的目的了。
添加一個熱區(qū)元件，命名為control，添加單擊事件：
添加事件分支1
添加條件狀態(tài)，動態(tài)面板content當前狀態(tài)等于“微信”
先取消四個按鈕的選中狀態(tài)
設(shè)置“微信”按鈕為選中狀態(tài)
同理，添加其它三個事件分支，分別判斷動態(tài)面板content的當前狀態(tài)，設(shè)置對應(yīng)按鈕的選中狀態(tài)。（可以直接復(fù)制/粘貼事件，修改條件和事件）
下面，雙擊動態(tài)面板的Case1，修改動態(tài)面板content的左右拖動事件，觸發(fā)熱區(qū)事件：
添加等待600毫秒，因為在顯示淡入淡出動畫時用了500毫秒，我們希望在動畫顯示完成后，正確顯示下方對應(yīng)導(dǎo)航按鈕的選中狀態(tài)
觸發(fā)熱區(qū)的單擊事件
2、點擊導(dǎo)航菜單按鈕切換動態(tài)面板狀態(tài)
選擇“微信”按鈕
添加鼠標單擊事件
先取消四個導(dǎo)航按鈕的選中狀態(tài)
設(shè)置當前按鈕為選中狀態(tài)
設(shè)置動態(tài)面板content的狀態(tài)為“微信”
復(fù)制“微信”按鈕的事件，粘貼到其它三個按鈕的鼠標單擊事件，然后修改上面第5步動態(tài)面板狀態(tài)為對應(yīng)狀態(tài)。
事件處理完成，再一次按下F5鍵預(yù)覽一下效果。
// 內(nèi)容區(qū)域、導(dǎo)航菜單按鈕分別作為動態(tài)面板
最后，我們也可以將內(nèi)容區(qū)域作為一個動態(tài)面板，將導(dǎo)航菜單的4個按鈕也作為一個動態(tài)面板，同樣可以實現(xiàn)微信的導(dǎo)航菜單效果。
這個留給愛學(xué)習(xí)的你自己實踐一下吧?。ê竺娴脑次募幸烟峁┝舜藢崿F(xiàn)方式）
// 小結(jié)
實現(xiàn)原型的方式有多種，只要能達到想要的效果，哪種方式都可以，不局限于一定要用哪種方式，只需要你清楚你想要的原型效果。
這里是三種原型的實現(xiàn)方式下載地址：鏈接: https://pan.baidu.com/s/1o8Pnxiy 密碼: khur
本文由 @Axure原型設(shè)計工場 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
