動(dòng)態(tài)面板可以讓實(shí)際操作人員通過(guò)簡(jiǎn)單的配置，就能實(shí)現(xiàn)相對(duì)豐富的效果。那么在實(shí)際設(shè)計(jì)中，有哪些模塊可以利用動(dòng)態(tài)面板來(lái)實(shí)現(xiàn)？本篇文章里，作者做了拆解和分析，不妨一起來(lái)看一下。

【動(dòng)態(tài)面板】是 Axure 中另外一個(gè)神級(jí)的元件，它的江湖地位可以說(shuō)跟【中繼器】不相上下，【動(dòng)態(tài)面板】提供了簡(jiǎn)單的配置，卻可以實(shí)現(xiàn)非常豐富的效果，在實(shí)際設(shè)計(jì)中應(yīng)用非常廣泛。

對(duì)于剛?cè)腴T的產(chǎn)品經(jīng)理來(lái)說(shuō)，學(xué)習(xí)【動(dòng)態(tài)面板】要比學(xué)習(xí)【中繼器】容易得多，基本很快就能上手，但是很多人學(xué)習(xí)完之后不知道什么地方可以用到【動(dòng)態(tài)面板】，可以使用哪些屬性來(lái)更加輕松地完成設(shè)計(jì)，所以，今天分享一些簡(jiǎn)單的案例，基本都是用其他元件做起來(lái)非常費(fèi)力，甚至實(shí)現(xiàn)不了，但用【動(dòng)態(tài)面板】卻可以輕松完成的設(shè)計(jì)，所以說(shuō)，對(duì)于很多復(fù)雜的設(shè)計(jì)而言，動(dòng)態(tài)面板就是一次“救贖”。

一、導(dǎo)航欄

以人人都是產(chǎn)品經(jīng)理網(wǎng)站首頁(yè)為例，我們從下圖可以看到，當(dāng)我們左右調(diào)整窗口寬度的時(shí)候，導(dǎo)航欄的背景（白色通欄）會(huì)跟隨寬度一起調(diào)整，上下滾動(dòng)的時(shí)候，導(dǎo)航欄始終固定在頁(yè)面頂部：

接下來(lái)我們用【動(dòng)態(tài)面板】來(lái)實(shí)現(xiàn)一下這個(gè)效果。

首先在 Axure 工作區(qū)拖入一個(gè)動(dòng)態(tài)面板，如果動(dòng)態(tài)面板中沒(méi)有放任何內(nèi)容的話，在頁(yè)面中是看不到的，所以這里我們給動(dòng)態(tài)面板加一個(gè)填充色（頂部工具欄無(wú)法直接給動(dòng)態(tài)面板填充顏色，只能通過(guò)【樣式】工具中的【填充】板塊進(jìn)行設(shè)置，也可以填充圖片）：

接下來(lái)為了在頁(yè)面中能夠滾動(dòng)，我們需要讓頁(yè)面的內(nèi)容超過(guò)瀏覽器高度，這樣瀏覽器才會(huì)出現(xiàn)滾動(dòng)條，能夠進(jìn)行滾動(dòng)，這里的頁(yè)面內(nèi)容我們用【占位符】代替：

看一下網(wǎng)頁(yè)中的效果：

可以看到，通欄沒(méi)有占滿瀏覽器寬度，滑動(dòng)頁(yè)面的時(shí)候也不能固定在頂部。別急，我們還需要進(jìn)行一些設(shè)置。

首先我們?cè)凇緲邮健恐泄催x【100%寬度】：

接著我們點(diǎn)擊下方的【固定到瀏覽器】，在彈出的設(shè)置窗口中勾選【固定到瀏覽器窗口】，選擇【左側(cè)】：和【頂部】，勾選【始終保持頂層】：

再次預(yù)覽效果，就可以看到，通欄占滿瀏覽器的寬度，并且可以隨著瀏覽器寬度自動(dòng)調(diào)整，滾動(dòng)頁(yè)面時(shí)，通欄也會(huì)固定在頁(yè)面頂部：

為了讓大家更好地體會(huì)到【固定到瀏覽器】這個(gè)功能，我再舉一個(gè)例子，還是人人都是產(chǎn)品經(jīng)理的某個(gè)頁(yè)面的通欄，我們可以看到，當(dāng)我們對(duì)瀏覽器窗口寬度進(jìn)行縮放的時(shí)候，頭像并不會(huì)始終固定在某個(gè)位置，而是會(huì)貼著瀏覽器邊緣動(dòng)態(tài)變化：

我們?cè)趧倓偟幕A(chǔ)上進(jìn)行修改，實(shí)現(xiàn)這個(gè)效果。

我們?cè)偻先胍粋€(gè)動(dòng)態(tài)面板，放在通欄右邊，填充一個(gè)底色：

接下來(lái)再設(shè)置它【固定到瀏覽器】，這次選擇固定到【右側(cè)】，【邊距】設(shè)置10，不完全貼著右側(cè)，同樣固定在頂部不變，Axure 已經(jīng)自動(dòng)根據(jù)元件位置設(shè)置好頂部邊距：

預(yù)覽看看效果：

二、輪播圖

先看一下實(shí)際的網(wǎng)站效果，同樣也是來(lái)自人人都是產(chǎn)品經(jīng)理網(wǎng)站首頁(yè)：

輪播圖發(fā)展至今，每個(gè)網(wǎng)站的產(chǎn)品經(jīng)理都在竭盡所能設(shè)計(jì)出自己的風(fēng)格，但說(shuō)到底，輪播圖的核心，就是多張圖片的切換，其中包括了【自動(dòng)切換】、【手動(dòng)切換】和【指定切換】，接下來(lái)我們用動(dòng)態(tài)面板來(lái)實(shí)現(xiàn)這個(gè)功能。

首先還是拖入動(dòng)態(tài)面板，并在面板左右添加兩個(gè)按鈕，分別用來(lái)手動(dòng)切換【上一張】和【下一張】圖片：

接著雙擊動(dòng)態(tài)面板，進(jìn)入動(dòng)態(tài)面板編輯頁(yè)面：

在這里我們可以看到動(dòng)態(tài)面板的【狀態(tài)】，默認(rèn)給了一個(gè)狀態(tài)，我們可以添加多個(gè)狀態(tài)，并在每個(gè)狀態(tài)中放入一張輪播圖（一般輪播圖設(shè)計(jì)建議是3-5張）：

添加完點(diǎn)擊右上角【關(guān)閉】回到主工作區(qū)，接下來(lái)給切換按鈕添加【單擊時(shí)】【設(shè)置面板狀態(tài)】事件。

以下是【上一張】按鈕的事件，點(diǎn)擊的時(shí)候切換【上一項(xiàng)】（也就是動(dòng)態(tài)面板的上一個(gè)狀態(tài)），這里勾選了【向前循環(huán)】，表示可以直接從第一個(gè)狀態(tài)切換到最后一個(gè)狀態(tài)，然后我們給切換設(shè)置一個(gè)動(dòng)畫效果，常規(guī)切換上一張就是當(dāng)前的圖向右滑出，上一張圖片向右滑入，所以這里我們?cè)O(shè)置進(jìn)入動(dòng)畫是【向右滑動(dòng)】，時(shí)間是【500毫秒】，用【線性】動(dòng)畫即可，退出動(dòng)畫會(huì)自動(dòng)匹配合適的效果：

下一張的設(shè)置類似，但是注意切換的是【下一項(xiàng)】，并且動(dòng)畫效果也是跟上一張相反的：

預(yù)覽看看效果：

【手動(dòng)切換】功能就做完了，點(diǎn)擊按鈕可以前后切換圖片，并且可以循環(huán)切換，在【第一張圖】再次點(diǎn)擊【上一張】的時(shí)候，可以切換到【最后一張】（第三張圖）。

接下來(lái)我們來(lái)做【自動(dòng)切換】，給【動(dòng)態(tài)面板】添加【載入時(shí)】【設(shè)置動(dòng)態(tài)面板】的事件，由于【自動(dòng)切換】一般都是切換到【下一張】，所以這里設(shè)置的事件跟【下一張】按鈕的事件基本相同，但注意這里不同的地方是，我們需要設(shè)置【循環(huán)間隔】，這里的意思就是每隔【3000毫秒】自動(dòng)切換，同時(shí)這里需要勾選【首個(gè)狀態(tài)延時(shí)切換】，如果不勾選，頁(yè)面一上來(lái)就切換到第二張圖，用戶就看不到第一張圖了：

預(yù)覽看看效果：

【自動(dòng)切換】也做完了，最后來(lái)做【指定切換】，指定切換一般需要搭配【指示燈】使用，就是如下所示的圓點(diǎn)，用來(lái)指示當(dāng)前在第幾張圖片，也可以通過(guò)點(diǎn)擊切換到對(duì)應(yīng)的圖片。

我們?cè)诠ぷ鲄^(qū)繪制3個(gè)圓點(diǎn)作為【指示燈】：

接下來(lái)給【指示燈】添加【單擊時(shí)】【設(shè)置面板狀態(tài)】的動(dòng)作，在狀態(tài)這里直接選擇切換到對(duì)應(yīng)的狀態(tài)，比如第一個(gè)圓點(diǎn)對(duì)應(yīng)第一張圖，也就是狀態(tài)1，以此類推：

3個(gè)【指示燈】都設(shè)置完之后，就可以在幾張圖中任意切換了：

這個(gè)輪播圖還有點(diǎn)小問(wèn)題，第一個(gè)就是【手動(dòng)切換】或者【指定切換】之后，【自動(dòng)切換】會(huì)失效，這是因?yàn)檫@幾個(gè)地方的事件沒(méi)有【循環(huán)間隔】的設(shè)置，這個(gè)給【上下翻頁(yè)】和【指示燈】的【單擊時(shí)】事件加一個(gè)【觸發(fā)事件】，觸發(fā)動(dòng)態(tài)面板的【載入時(shí)】事件即可，這樣，每次【手動(dòng)切換】或【指定切換】之后，都會(huì)重新觸發(fā)一次【自動(dòng)切換】的動(dòng)作：

另外一個(gè)問(wèn)題就是這個(gè)輪播圖的【指示燈】沒(méi)有辦法指示當(dāng)前所在的圖，也需要進(jìn)行相關(guān)設(shè)置，首先選中3個(gè)【指示燈】，【右鍵】選擇【選項(xiàng)組】：

在彈出的選項(xiàng)組彈窗命名為【指示燈】并確定：

接下來(lái)給【指示燈】添加【交互樣式】，選中3個(gè)【指示燈】，右側(cè)找到【交互】面板，點(diǎn)擊【添加交互樣式】：

選擇【元件選中樣式】：

這里我們加個(gè)填充顏色即可：

接下來(lái)給【動(dòng)態(tài)面板】添加【狀態(tài)改變時(shí)】的交互，然后根據(jù)【面板狀態(tài)】的不同選中對(duì)應(yīng)的【指示燈】圓點(diǎn)即可：

最后，因?yàn)轫?yè)面剛載入時(shí)，已經(jīng)在第一張輪播圖，但是還沒(méi)有發(fā)生狀態(tài)的變化，所以【指示燈】都不會(huì)“點(diǎn)亮”，所以需要默認(rèn)選中第一個(gè)【指示燈】，選擇第一個(gè)【指示燈】，【右鍵】選擇【選中】即可：

預(yù)覽看看效果：

三、頁(yè)簽Tab

頁(yè)簽在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用非常廣泛，這里以人人都是產(chǎn)品經(jīng)理首頁(yè)社群板塊為例：

點(diǎn)擊標(biāo)題的時(shí)候，下方可根據(jù)標(biāo)題顯示對(duì)應(yīng)的內(nèi)容，這個(gè)其實(shí)跟上面輪播圖的【指定跳轉(zhuǎn)】是一個(gè)原理，就是點(diǎn)擊對(duì)應(yīng)的標(biāo)題時(shí)，下方通過(guò)切換到動(dòng)態(tài)面板的不同狀態(tài)來(lái)實(shí)現(xiàn)對(duì)應(yīng)效果，這里就不再設(shè)計(jì)實(shí)例。

四、固定尺寸

我們有時(shí)候會(huì)看到類似下方這樣的效果，一個(gè)頁(yè)面有多個(gè)板塊，為了頁(yè)面的美觀，每個(gè)板塊有固定的高度，每個(gè)板塊可以通過(guò)獨(dú)立的滾動(dòng)條控制：

在 Axure 中，每個(gè)板塊通過(guò)【動(dòng)態(tài)面板】來(lái)做，就可以實(shí)現(xiàn)類似這樣的效果，我們來(lái)實(shí)現(xiàn)類似上圖的效果。

先在工作區(qū)拖入兩個(gè)動(dòng)態(tài)面板，在動(dòng)態(tài)面板中的第一個(gè)狀態(tài)放一個(gè)【占位符】：

這里注意我們需要手動(dòng)調(diào)整動(dòng)態(tài)面板的高度，可以通過(guò)右側(cè)【樣式】檢查確認(rèn)沒(méi)有勾選【自適應(yīng)內(nèi)容】，并確保動(dòng)態(tài)面板內(nèi)的【占位符】高度超過(guò)動(dòng)態(tài)面板的高度：

接著我們選中兩個(gè)動(dòng)態(tài)面板，在右側(cè)【樣式】中將滾動(dòng)方式設(shè)置為【垂直滾動(dòng)】：

預(yù)覽就可以看到我們需要的效果：

這里幾個(gè)定義簡(jiǎn)單解釋一下：

• 自適應(yīng)內(nèi)容：動(dòng)態(tài)面板的寬度和高度會(huì)根據(jù)內(nèi)容自動(dòng)調(diào)整，如果有多個(gè)狀態(tài)，且每個(gè)狀態(tài)內(nèi)放置的內(nèi)容尺寸不一致，在切換到不同狀態(tài)的時(shí)候，動(dòng)態(tài)面板的尺寸也會(huì)自動(dòng)調(diào)整；
• 從不滾動(dòng)：固定動(dòng)態(tài)面板尺寸時(shí)，如果內(nèi)容超過(guò)動(dòng)態(tài)面板尺寸，只能看見(jiàn)與動(dòng)態(tài)面板尺寸相同的那部分內(nèi)容；
• 按需滾動(dòng)：固定動(dòng)態(tài)面板尺寸時(shí)，當(dāng)內(nèi)容寬度或高度超過(guò)動(dòng)態(tài)面板尺寸，動(dòng)態(tài)面板自動(dòng)出現(xiàn)垂直或水平滾動(dòng)條；
• 垂直滾動(dòng)：固定動(dòng)態(tài)面板尺寸時(shí)，當(dāng)內(nèi)容高度超過(guò)動(dòng)態(tài)面板高度，動(dòng)態(tài)面板自動(dòng)出現(xiàn)垂直滾動(dòng)條；
• 水平滾動(dòng)：固定動(dòng)態(tài)面板尺寸時(shí)，當(dāng)內(nèi)容寬度超過(guò)動(dòng)態(tài)面板寬度，動(dòng)態(tài)面板出現(xiàn)水平滾動(dòng)條。

五、拖動(dòng)內(nèi)容

顧名思義，就是在頁(yè)面上自由拖動(dòng)一個(gè)元件，這個(gè)設(shè)計(jì)不用動(dòng)態(tài)面板也可以做得到，但是我相信你會(huì)體會(huì)到什么叫“從入門到放棄”，而如果用動(dòng)態(tài)面板來(lái)做，你會(huì)忍不住喊出那句“so easy”，來(lái)吧，照樣先在工作區(qū)拖入一個(gè)動(dòng)態(tài)面板，填充顏色，然后添加【拖動(dòng)】交互，【跟隨拖動(dòng)】【移動(dòng)】當(dāng)前元件：

看看效果：

六、循環(huán)控制

有時(shí)候我們需要在我們的設(shè)計(jì)中循環(huán)執(zhí)行某一個(gè)動(dòng)作，但 Axure 是沒(méi)有提供循環(huán)的交互的，但是我們可以利用動(dòng)態(tài)面板來(lái)“曲線救國(guó)”，我們會(huì)用到動(dòng)態(tài)面板的兩個(gè)交互，一個(gè)是【自動(dòng)切換狀態(tài)】，讓動(dòng)態(tài)面板在狀態(tài)間循環(huán)切換，另外一個(gè)就是【狀態(tài)改變時(shí)】的交互，執(zhí)行我們需要循環(huán)的交互。

這樣面板會(huì)不但循環(huán)，每次循環(huán)時(shí)改變了狀態(tài)，就會(huì)執(zhí)行對(duì)應(yīng)的交互，這樣就能實(shí)現(xiàn)循環(huán)執(zhí)行某一動(dòng)作的效果。

這樣講可能有點(diǎn)抽象，各位可以看看我之前的文章《【Axure 動(dòng)態(tài)面板】讓你的動(dòng)畫變成“永動(dòng)機(jī)”》，相信你能對(duì)此深有體會(huì)。

動(dòng)態(tài)面板的內(nèi)容就分享到這里，各位覺(jué)得還有哪些做起來(lái)很難，但是可以通過(guò)動(dòng)態(tài)面板輕松實(shí)現(xiàn)的設(shè)計(jì)，歡迎評(píng)論區(qū)分享，感謝閱讀！