什么是動態(tài)面板

動態(tài)面板是Axure的高級交互元件，由不同的狀態(tài)面板組成，是我們制作交互過程中運用頻率最高的元件，很多交互效果需要依賴動態(tài)面板實現(xiàn)。動態(tài)面板的狀態(tài)面板就像是一個容器，我們可以在里面放置任何東西，自由發(fā)揮我們的設(shè)計創(chuàng)意，甚至是為面板中的設(shè)計元素添加交互事件，這一切就好像是在一個新的畫布當(dāng)中進(jìn)行頁面設(shè)計。

添加動態(tài)面板

在Axure中我們有兩種方法添加動態(tài)面板。

方法一：從Default元件庫直接拖拽動態(tài)面板元件至設(shè)計區(qū)域。

方法二：選中需要轉(zhuǎn)換的目標(biāo)元件，鼠標(biāo)右鍵單擊選擇操作命令【轉(zhuǎn)換為動態(tài)面板】。

編輯動態(tài)面板

動態(tài)面板是由不同的狀態(tài)組成，每一個狀態(tài)里面都可以包含多個元件。同一時間，動態(tài)面板只能顯示一個狀態(tài)，通過控制這些面板的顯示狀態(tài)，可以實現(xiàn)很多豐富的交互效果。

編輯動態(tài)面板狀態(tài)：雙擊動態(tài)面板選擇狀態(tài)進(jìn)行編輯，進(jìn)入狀態(tài)面板中，我們會看到中間有一個虛線框，虛線框內(nèi)部為設(shè)計區(qū)域。我們的設(shè)計工作就是在這個虛線框內(nèi)部完成，我們可以通過改變動態(tài)面板的尺寸來調(diào)整虛線框的大小。

管理動態(tài)面板狀態(tài)：雙擊動態(tài)面板進(jìn)入狀態(tài)編輯模式，點擊設(shè)計區(qū)域上方可以管理動態(tài)面板的狀態(tài)，在這里可以增加狀態(tài)、復(fù)制狀態(tài)、刪除狀態(tài)。

隔離模式：默認(rèn)情況下，動態(tài)面板的狀態(tài)就像一個封閉的黑盒，將動態(tài)面板與外面的世界進(jìn)行了隔離，在這個盒子當(dāng)中看不到外在的東西。當(dāng)我們點擊狀態(tài)面板右上角的隔離按鈕，這個封閉的黑盒將變成透明的黑子，可以看到動態(tài)面板以外的設(shè)計元素，但這個盒子依舊是封閉的，對于動態(tài)面板以外的設(shè)計元素，我們只能查看，不能進(jìn)行操作。

關(guān)閉狀態(tài)：點擊狀態(tài)面板右上角的關(guān)閉按鈕，則退出動態(tài)面板狀態(tài)，回到頁面視角。

動態(tài)面板樣式

滾動條：當(dāng)動態(tài)面板尺寸小于內(nèi)容尺寸時，需要為動態(tài)面板設(shè)置滾動條以便查看完整內(nèi)容。滾動條有四種樣式設(shè)置，包含：禁止?jié)L動、按需滾動、垂直滾動和水平滾動。選中動態(tài)面板，在右側(cè)樣式面板中下拉選擇滾動條樣式。

100%寬度：選擇此項后，在瀏覽中查看原型時，動態(tài)面板的寬度將自適應(yīng)瀏覽器寬度，不會出現(xiàn)水平滾動條，一般用于通欄設(shè)計。需要注意的是動態(tài)面板的內(nèi)容寬度要大于瀏覽器的寬度。選中動態(tài)面板，可以通過右側(cè)的樣式面板進(jìn)行設(shè)置。

固定到瀏覽器：始終固定在窗口的某個特定位置，如App的底部導(dǎo)航，資訊類產(chǎn)品的頂部標(biāo)簽導(dǎo)航都可以利用“固定到瀏覽器”的樣式效果。選中動態(tài)面板，點擊右側(cè)樣式面板的“固定到瀏覽器”，勾選固定到瀏覽器窗口，選擇固定位置的方向，設(shè)置邊距，勾選保持在前面(將動態(tài)面板圖層置頂)。

動態(tài)面板事件

動態(tài)面板作為Axure的高級元件，有一些自己專有的交互事件，如：動態(tài)面板狀態(tài)改變時、拖動時、拖動結(jié)束時、向左/右/上/下拖動結(jié)束時、滾動時、向上滾動時、向下滾動時。

01狀態(tài)改變時

該事件是由“設(shè)置面板狀態(tài)”動作觸發(fā)的。這個事件常用于需要進(jìn)行不停改變面板狀態(tài)的一連串交互動作，如輪播圖的循環(huán)播放。

02拖動事件

拖動時、向左/右/上/下拖動結(jié)束時，允許我們針對拖動過程中，拖動結(jié)束后設(shè)置不同的交互，其中拖動結(jié)束后還可以根據(jù)拖動的方向設(shè)置不同的交互。如果你有拖動方面的需求，可以將這些需要拖動的元件或元件組合轉(zhuǎn)換為動態(tài)面板。

拖動時：用于面板的拖動過程中。

向左拖動結(jié)束時：面板向左拖動，且完成拖動動作。

向右拖動結(jié)束時：面板向右拖動，且完成拖動動作。

向上拖動結(jié)束時：面板向上拖動，且完成拖動動作。

向下拖動結(jié)束時：面板向下拖動，且完成拖動動作。

03滾動事件

滾動時、向上滾動時、向下滾動時，允許我們針對滾動過程中，不同的滾動方向設(shè)置不同的交互。我們希望向上或向下滾動時，顯示不同的內(nèi)容，這個時候我們就可以將這些有滾動需求的元件轉(zhuǎn)換為動態(tài)面板。有些時候，還需要根據(jù)滾動的距離顯示不同的頁面或內(nèi)容。

---

交互案例

案例1：進(jìn)度條加載

1. 在設(shè)計區(qū)域中添加一個動態(tài)面板，命名為“狀態(tài)指示器”，為動態(tài)面板添加兩個空狀態(tài)。

2. 添加兩個相同尺寸的矩形，將其中一個矩形填充為橙色，并與另一個矩形重合對其。將橙色矩形轉(zhuǎn)換為動態(tài)面板，命名為“進(jìn)度條”，將進(jìn)度條動態(tài)面板的寬度設(shè)置為1，另外一個矩形命名為“背景”。

3.點擊頁面空白處，點擊【新建交互】按鈕，選擇【頁面載入時】事件，添加動作【設(shè)置面板狀態(tài)】，設(shè)置狀態(tài)指示器向后循環(huán)切換，循環(huán)間隔100毫秒。

4. 選中狀態(tài)指示器動態(tài)面板，點擊【新建交互】按鈕，選擇事件【狀態(tài)改變時】，添加動作【設(shè)置尺寸】，為“進(jìn)度條”動態(tài)面板設(shè)置尺寸，寬度尺寸設(shè)置為[[LVAR2.width+LVAR1.width/100]]，其中LVAR1為背景，LVAR2為進(jìn)度條動態(tài)面板，如下圖所示，高度設(shè)置為進(jìn)度條動態(tài)面板的高度。點擊添加情形，設(shè)置邏輯條件，當(dāng)進(jìn)度條寬度小于背景寬度，執(zhí)行剛才的【設(shè)置尺寸】動作，設(shè)置如下圖所示。

5. 選中狀態(tài)指示器動態(tài)面板，為指示器添加添加第二個情形，添加動作【設(shè)置面板狀態(tài)】，將狀態(tài)指示器設(shè)置為停止循環(huán)。

6. 拖動文本標(biāo)簽至設(shè)計區(qū)域，命名為“百分比”。選中進(jìn)度條動態(tài)面板，點擊【新建交互】按鈕，添加【尺寸改變時】事件，添加【設(shè)置文本】動作。設(shè)置百分比文本的內(nèi)容為[[Math.floor(LVAR1.width/LVAR2.width*100)]]%，其中LVAR1為進(jìn)度條，LVAR2為背景。Math.floor為向下取整函數(shù)，獲取小于等于指定數(shù)值的最大整數(shù)。

7. 設(shè)置完畢，點擊預(yù)覽按鈕，在瀏覽器中查看原型。

案例2：音量調(diào)節(jié)器

1. 從元件庫拖動喇叭圖標(biāo)、矩形、圓至設(shè)計區(qū)域，為矩形和圓設(shè)置填充色，調(diào)整好矩形和圓的尺寸，調(diào)整時，注意圓的高度大于矩形的高度。將矩形命名為“音量桿”。

2. 選中圓，鼠標(biāo)右鍵單擊選擇命令“轉(zhuǎn)換為動態(tài)面板”，動態(tài)面板命名為“調(diào)節(jié)球”。選中動態(tài)面板，點擊【新建交互】按鈕，選擇【拖動時】事件，選擇【移動】動作，設(shè)置調(diào)節(jié)球沿水平直線移動，設(shè)置調(diào)節(jié)球移動邊界，左側(cè)大于音量桿的水平坐標(biāo)，右側(cè)小于音量桿的水平坐標(biāo)+音量桿的寬度。移動邊界的表達(dá)式為左側(cè)>[[LVAR1.x]]，右側(cè)＜[[LVAR1.x+LVAR1.width]]，其中變量LVAR1為音量桿。

3. 設(shè)置完畢，點擊預(yù)覽按鈕，在瀏覽器中查看原型。

案例3：輪播圖

1. 拖拽動態(tài)面板元件至設(shè)計區(qū)域，雙擊動態(tài)面板，進(jìn)入編輯狀態(tài)。為面板添加3個狀態(tài)，并且為每個狀態(tài)分別導(dǎo)入一張同樣尺寸的圖片。

2. 選中動態(tài)面板，點擊【新建交互】按鈕，選擇【載入時】事件，選擇【設(shè)置面板狀態(tài)】動作。選擇當(dāng)前元件，狀態(tài)設(shè)置為下一項，勾選向后循環(huán)，進(jìn)入和退出動畫選擇向左滑動，動畫時間為500毫秒，循環(huán)間隔設(shè)置為2000毫秒，點擊“完成”按鈕。

3. 設(shè)置完畢，點擊預(yù)覽，在瀏覽器中查看原型

---

寫在末尾

感謝大家的耐心閱讀，如果你有興趣學(xué)習(xí)原型設(shè)計或Axure交互設(shè)計，不妨關(guān)注下我的新書《Axure RP9實用教程：原型+高保真+交互+設(shè)計》馬上就要上市了，這是我十年來作為產(chǎn)品經(jīng)理的實戰(zhàn)經(jīng)驗總結(jié)。這本書由淺入深講解了Axure RP9的基礎(chǔ)功能，講解過程中結(jié)合具體的案例幫助大家加深對元件交互功能的理解。最后兩個章節(jié)，都是滿滿的干貨案例，旨在通過具體的元件交互案例和頁面制作案例，幫助大家找到Axure RP9的交互使用場景，同時也是檢查并鞏固理論學(xué)習(xí)的過程。讀完這本書，你一定能夠輕松駕馭Axure這款工具的使用，絕對物超所值。下圖是本書的封面及目錄結(jié)構(gòu)。

本書在京東商城、當(dāng)當(dāng)網(wǎng)均有銷售，當(dāng)然您也可以關(guān)注我的專欄學(xué)習(xí)Axure RP9教程。

總結(jié)

以上是生活随笔為你收集整理的xcode动态改变窗口大小_详细的理论要点+3个经典案例，帮助你深入理解动态面板...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。