2023年【Axure 教程】動態(tài)面板的救贖

【Axure教程】動態(tài)面板的救贖【動態(tài)面板】是Axure中另外一個神級的元件，它的江湖地位可以說跟【中繼器】不相上下，【動態(tài)面板】供應(yīng)了簡潔的配置，卻可以實現(xiàn)特別豐富的效果，在實際設(shè)計中應(yīng)用特別廣泛。

對于剛?cè)腴T的產(chǎn)品經(jīng)理來說，學習【動態(tài)面板】要比學習【中繼器】簡單得多，基本很快就能上手，但是許多人學習完之后不知道什么地方可以用到【動態(tài)面板】，可以使用哪些屬性來更加輕松地完成設(shè)計，所以，今日共享一些簡潔的案例，基本都是用其他元件做起來特別費勁，甚至實現(xiàn)不了，但用【動態(tài)面板】卻可以輕松完成的設(shè)計，所以說，對于許多簡單的設(shè)計而言，動態(tài)面板就是一次“救贖”。

一、導(dǎo)航欄

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

接下來我們用【動態(tài)面板】來實現(xiàn)一下這個效果。

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

接下來為了在頁面中能夠滾動，我們需要讓頁面的內(nèi)容超過掃瞄器高度，這樣掃瞄器才會消失滾動條，能夠進行滾動，這里的頁面內(nèi)容我們用【占位符】代替：

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

可以看到，通欄沒有占滿掃瞄器寬度，滑動頁面的時候也不能固定在頂部。別急，我們還需要進行一些設(shè)置。

首先我們在【樣式】中勾選【100%寬度】：

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

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

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

我們在剛剛的基礎(chǔ)上進行修改，實現(xiàn)這個效果。

我們再拖入一個動態(tài)面板，放在通欄右邊，填充一個底色：

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

預(yù)覽看看效果：

二、輪播圖

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

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

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

接著雙擊動態(tài)面板，進入動態(tài)面板編輯頁面：

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

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

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

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

預(yù)覽看看效果：

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

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

預(yù)覽看看效果：

【自動切換】也做完了，最終來做【指定切換】，指定切換一般需要搭配【指示燈】使用，就是如下所示的圓點，用來指示當前在第幾張圖片，也可以通過點擊切換到對應(yīng)的圖片。

我們在工作區(qū)繪制3個圓點作為【指示燈】：

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

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

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

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

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

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

選擇【元件選中樣式】：

這里我們加個填充顏色即可：

接下來給【動態(tài)面板】添加【狀態(tài)轉(zhuǎn)變時】的交互，然后依據(jù)【面板狀態(tài)】的不同選中對應(yīng)的【指示燈】圓點即可：

最終，由于頁面剛載入時，已經(jīng)在第一張輪播圖，但是還沒有發(fā)生狀態(tài)的變化，所以【指示燈】都不會“點亮”，所以需要默認選中第一個【指示燈】，選擇第一個【指示燈】，【右鍵】選擇【選中】即可：

預(yù)覽看看效果：

三、頁簽Tab

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

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

四、固定尺寸

我們有時候會看到類似下方這樣的效果，一個頁面有多個板塊，為了頁面的美觀，每個板塊有固定的高度，每個板塊可以通過獨立的滾動條掌握：

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

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

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

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

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

這里幾個定義簡潔解釋一下：

自適應(yīng)內(nèi)容：動態(tài)面板的寬度和高度會依據(jù)內(nèi)容自動調(diào)整，假如有多個狀態(tài)，且每個狀態(tài)內(nèi)放置的內(nèi)容尺寸不全都，在切換到不同狀態(tài)的時候，動態(tài)面板的尺寸也會自動調(diào)整；從不滾動：固定動態(tài)面板尺寸時，假如內(nèi)容超過動態(tài)面板尺寸，只能觀察與動態(tài)面板尺寸相同的那部分內(nèi)容；按需滾動：固定動態(tài)面板尺寸時，當內(nèi)容寬度或高度超過動態(tài)面板尺寸，動態(tài)面板自動消失垂直或水平滾動條；垂直滾動：固定動態(tài)面板尺寸時，當內(nèi)容高度超過動態(tài)面板高度，動態(tài)面板自動消失垂直滾動條；水平滾動：固定動態(tài)面板尺寸時，當內(nèi)容寬度超過動態(tài)面板寬度，動態(tài)面板消失水平滾動條。五、拖動內(nèi)容

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

看看效果：

六、循環(huán)掌握

有時候我們需要在我們的設(shè)計中循環(huán)執(zhí)行某一個動作，但Axure是沒有供應(yīng)循環(huán)的交互的，但是我們可以利用動態(tài)面板來“曲線救國”，我們會用到動態(tài)面板的兩個交互，一個是【自動切換狀態(tài)】，讓動態(tài)面板在狀態(tài)間循環(huán)切換，另外一個就是【狀態(tài)轉(zhuǎn)變時