動(dòng)態(tài)面板是Axure中使用頻率最高的元件之一，動(dòng)態(tài)面板專(zhuān)門(mén)用于設(shè)計(jì)原型中的動(dòng)態(tài)功能，它可以包含一個(gè)或多個(gè)狀態(tài)，每個(gè)狀態(tài)就是一個(gè)頁(yè)面，在這里可以任意編輯，通過(guò)控制狀態(tài)的切換或顯示/隱藏來(lái)實(shí)現(xiàn)一些我們常見(jiàn)的交互效果。

特定的交互事件

動(dòng)態(tài)面板有一些自己專(zhuān)用的特定事件：動(dòng)態(tài)面板狀態(tài)改變時(shí)、尺寸改變時(shí)、拖動(dòng)時(shí)、滾動(dòng)時(shí)和載入時(shí)。有一些事件是通過(guò)其他用例中的動(dòng)作設(shè)置從而觸發(fā)進(jìn)行，比如顯示或移動(dòng)動(dòng)態(tài)面板。你可以使用這些事件來(lái)創(chuàng)建高級(jí)交互，比如展開(kāi)折疊區(qū)域或者輪播廣告。使用拖拽事件可以制作拖拽的交互效果，并且針對(duì)拖拽過(guò)程中的3個(gè)狀態(tài)，開(kāi)始、進(jìn)行、結(jié)束可以分別設(shè)置我們想要的交互。本文通過(guò)一些案例來(lái)講述這些特定事件的應(yīng)用。

案例說(shuō)明

01 狀態(tài)改變時(shí)

這個(gè)事件是由“設(shè)置面板狀態(tài)”這個(gè)動(dòng)作觸發(fā)。這個(gè)事件一般用來(lái)觸發(fā)動(dòng)態(tài)面板狀態(tài)改變的一連串交互。

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

在設(shè)計(jì)區(qū)域中添加一個(gè)動(dòng)態(tài)面板，命名為狀態(tài)指示器，添加兩個(gè)相同的矩形。將其中一個(gè)矩形填充顏色，并與另一個(gè)矩形重合對(duì)其，將帶有填充色的矩形轉(zhuǎn)換為動(dòng)態(tài)面板，命名為進(jìn)度條，將進(jìn)度條動(dòng)態(tài)面板的寬度設(shè)置為1，另外一個(gè)矩形命名為背景框。為狀態(tài)指示器動(dòng)態(tài)面板添加3個(gè)空白狀態(tài)。

頁(yè)面載入時(shí)用例：設(shè)置狀態(tài)指示器動(dòng)態(tài)面板向后循環(huán)，循環(huán)間隔為100毫秒。

狀態(tài)改變時(shí)用例：為狀態(tài)指示器動(dòng)態(tài)面板添加狀態(tài)改變時(shí)用例，首選設(shè)置用例的條件為如果進(jìn)度條動(dòng)態(tài)面板的寬度小于背景框的寬度，則為進(jìn)度條動(dòng)態(tài)面板執(zhí)行設(shè)置尺寸動(dòng)作。動(dòng)作配置中寬度設(shè)置為進(jìn)度條現(xiàn)在的寬度加上背景框?qū)挾鹊陌俜种?，高度設(shè)置為背景框的高度，選擇線(xiàn)性動(dòng)畫(huà)，時(shí)間為50毫秒。通過(guò)定義局部變量可以實(shí)現(xiàn)這里的寬高效果設(shè)置。添加另一個(gè)用例，停止?fàn)顟B(tài)指示器動(dòng)態(tài)面板的狀態(tài)循環(huán)。至此，所有交互設(shè)置完畢，預(yù)覽查看效果。

頁(yè)面載入與狀態(tài)改變

指示器面板狀態(tài)切換與進(jìn)度條面板尺寸改變的動(dòng)畫(huà)幾乎是同時(shí)進(jìn)行的，因此指示器面板狀態(tài)切換的時(shí)間間隔需大于進(jìn)度條面板尺寸變化的動(dòng)畫(huà)時(shí)長(zhǎng)，否則會(huì)造成尺寸大小的改變先于狀態(tài)切換完成，造成進(jìn)度條面板寬度超出背景框?qū)挾?%。

02 尺寸改變時(shí)

改變大小時(shí)事件是當(dāng)動(dòng)態(tài)面板大小改變時(shí)，由“設(shè)置面板尺寸”動(dòng)作觸發(fā)的。當(dāng)“設(shè)置面板尺寸”這個(gè)動(dòng)作用在其他元件上時(shí)，可以用來(lái)觸發(fā)一連串事件。

案例：進(jìn)度條百分比

在上一個(gè)案例基礎(chǔ)上添加一個(gè)文本標(biāo)簽，命名為進(jìn)度百分比。

尺寸改變時(shí)用例：為進(jìn)度條面板添加尺寸改變時(shí)用例，為百分比文本標(biāo)簽設(shè)置一個(gè)變量表達(dá)式，即這里顯示的值=進(jìn)度條面板的寬度/背景框的寬度*100%，對(duì)計(jì)算結(jié)果進(jìn)行取證。對(duì)應(yīng)的表達(dá)式[[Math.ceil(LVAR1.width/LVAR2.width*100)]]%, LVAR1和LVAR2分別為進(jìn)度條寬度和背景框?qū)挾?。點(diǎn)擊預(yù)覽，查看原型效果，我們可以看到當(dāng)進(jìn)度條寬度增加的同時(shí)，文本標(biāo)簽顯示的百分比數(shù)據(jù)也同步變化。

添加尺寸改變

03 拖動(dòng)時(shí)

拖動(dòng)事件是由面板的“拖動(dòng)”或者快速點(diǎn)擊、拖、釋放而觸發(fā)的。這個(gè)事件通常用于App原型中的輪播圖、音量調(diào)節(jié)等。

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

拖動(dòng)喇叭圖標(biāo)、矩形、圓至設(shè)計(jì)區(qū)域，調(diào)整好矩形和圓的尺寸，調(diào)整時(shí)，圓的高度大于矩形的高度，為圓和矩形填充顏色。將圓轉(zhuǎn)換為動(dòng)態(tài)面板，命名為調(diào)節(jié)球，矩形命名為音量桿。

拖動(dòng)時(shí)用例：為調(diào)節(jié)球添加拖動(dòng)用例，移動(dòng)調(diào)節(jié)球，選擇水平移動(dòng)，調(diào)節(jié)球需要在音量桿水平方向移動(dòng)。因此這里的移動(dòng)界限可以設(shè)置為大于音量桿X坐標(biāo)，小于音量桿X坐標(biāo)+音量桿寬度-音量桿X坐標(biāo)。寫(xiě)成表達(dá)式為左側(cè)>[[LVAR1.x]]，右側(cè)＜[[LVAR1.x+LVAR1.width]]，變量LVAR1為音量桿，LVAR2位調(diào)節(jié)球。設(shè)置完成，預(yù)覽查看原型。

拖動(dòng)用例添加移動(dòng)動(dòng)作

設(shè)置移動(dòng)邊界

設(shè)置界限時(shí)，需要準(zhǔn)確設(shè)定移動(dòng)的坐標(biāo)，因此在設(shè)定右側(cè)范圍時(shí)需要寫(xiě)明一個(gè)完整的表達(dá)式，而不能直接寫(xiě)成音量桿的寬度（LVAR1.width)。本案例為水平移動(dòng)，因此只需要設(shè)定橫坐標(biāo)移動(dòng)范圍。

04 滾動(dòng)時(shí)

動(dòng)態(tài)面板的滾動(dòng)事件是由動(dòng)態(tài)面板滾動(dòng)欄的滾動(dòng)所觸發(fā)的。如果需要滾動(dòng)到固定位置觸發(fā)交互，在用例中可以添加條件，如[[this.ScrollX]]或[[this.ScrollY]]。

案例：滾動(dòng)切換面板狀態(tài)

拖動(dòng)一個(gè)動(dòng)態(tài)面板至設(shè)計(jì)區(qū)域，為面板添加3個(gè)狀態(tài)，每個(gè)狀態(tài)添加一個(gè)相同大小的矩形，為了保證效果直觀，矩形高度大于設(shè)備屏幕高度，設(shè)置為1600。為每個(gè)矩形填充不同的顏色，在每個(gè)矩形正中央添加不同的文本內(nèi)容，以便切換時(shí)能夠明顯區(qū)分不同狀態(tài)。將動(dòng)態(tài)面板的高度縮小，設(shè)置為700，在屬性面板中設(shè)置自動(dòng)顯示垂直滾動(dòng)條。

滾動(dòng)時(shí)用例：為用例添加條件，當(dāng)動(dòng)態(tài)面板在垂直方向上滾動(dòng)距離超過(guò)150時(shí)，表達(dá)式為[[This.scrollY]]>150，則動(dòng)態(tài)面板切換為下一個(gè)狀態(tài)，并向后循環(huán)。設(shè)置完成，預(yù)覽查看原型效果。

編輯條件、設(shè)置面板切換動(dòng)作

05 載入時(shí)

動(dòng)態(tài)面板的載入事件，是由頁(yè)面初始加載動(dòng)態(tài)面板觸發(fā)?？梢允褂么耸录骓?yè)面載入時(shí)事件。

案例：簡(jiǎn)書(shū)輪播圖

拖拽動(dòng)態(tài)面板元件至設(shè)計(jì)區(qū)域，添加6個(gè)狀態(tài)，為每個(gè)狀態(tài)導(dǎo)入一張圖片。將動(dòng)態(tài)面板命名為輪播圖，為輪播圖添加載入時(shí)用例，設(shè)置面板狀態(tài)自動(dòng)向后循環(huán)，循環(huán)間隔設(shè)置為2000毫秒，進(jìn)入和退出動(dòng)畫(huà)均為向左滑動(dòng)，動(dòng)畫(huà)時(shí)間為500毫秒。設(shè)置完畢，預(yù)覽查看原型效果。

設(shè)置狀態(tài)切換動(dòng)畫(huà)

這里僅僅設(shè)置了自動(dòng)輪播的效果，手動(dòng)切換幻燈片的交互效果，這里就不做說(shuō)明了。

上述內(nèi)容通過(guò)幾個(gè)簡(jiǎn)單的案例說(shuō)明了動(dòng)態(tài)面板的強(qiáng)大之處，實(shí)際上動(dòng)態(tài)面板能夠?qū)崿F(xiàn)的交互效果遠(yuǎn)非與此，更多的交互動(dòng)畫(huà)等待著我們一起去探索研究，希望大家能夠挖掘出更大的價(jià)值，使得原型保真效果在上一個(gè)新臺(tái)階。

最后在這里分享案例的源文件，鏈接：https://pan.baidu.com/s/1smlOE2h 密碼：2z0u

本文由 @拼搏的80后 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議