? ? ? ? 在移動(dòng)端原型設(shè)計(jì)中阴绢，動(dòng)態(tài)面板可以說是使用率非常非常非常之高的元件之一，而具體什么時(shí)候應(yīng)該使用動(dòng)態(tài)面板呢喉童？
? ? ? ? 1.?頁面內(nèi)容超出手機(jī)屏幕撇寞，需要垂直滾動(dòng)時(shí)：
? ? ? ? 這個(gè)很容易理解，當(dāng)我們的頁面內(nèi)容多到一屏無法展示的時(shí)候堂氯，就需要使用動(dòng)態(tài)面板作為一個(gè)“容器”去裝下這些內(nèi)容蔑担，當(dāng)然如果你將頁面尺寸設(shè)置為移動(dòng)端的大小并在虛線下的白色區(qū)域布置內(nèi)容后，其實(shí)點(diǎn)擊預(yù)覽時(shí)頁面依舊會(huì)產(chǎn)生一個(gè)下拉滾動(dòng)的效果咽白，只不過這個(gè)效果是全屏下拉钟沛，如果在屏幕頂端有放status bar的時(shí)候，status bar就會(huì)跟隨一起下拉局扶。這時(shí)我們僅僅在需要滾動(dòng)地方放置動(dòng)態(tài)面板即可恨统，建議選中所有需要滾動(dòng)的部分，點(diǎn)擊右鍵——轉(zhuǎn)化為動(dòng)態(tài)面板三妈，之后稍加調(diào)整動(dòng)態(tài)面板的尺寸即可畜埋。
?
? ? ? ?2.?元件/頁面需要滑動(dòng)（拖動(dòng)）操作時(shí)：
? ? ? ?當(dāng)需要制作類似于滑動(dòng)翻頁，拖動(dòng)滑塊功能時(shí)畴蒲，一般需要?jiǎng)討B(tài)面板來進(jìn)行制作悠鞍。例如制作圖片瀏覽功能時(shí)，左劃時(shí)切換照片。亦或時(shí)制作類似微信好友列表中左劃出現(xiàn)刪除按鈕等等功能時(shí)咖祭，都會(huì)用到動(dòng)態(tài)面板掩宜。后續(xù)有時(shí)間的話我會(huì)做一些實(shí)際制作過程來進(jìn)行演示。
?
? ? ? ? 3.?元件的樣式需要有條件的改變時(shí)：
? ? ? ? ?“我如何設(shè)置用戶點(diǎn)擊鼠標(biāo)時(shí)改變按鈕的顏色呢么翰？”“點(diǎn)擊時(shí)這個(gè)交互下面也沒有更改元件顏色或者改變元件中字體大小和顏色的選項(xiàng)呀牺汤？”這些是剛剛開始學(xué)習(xí)交互編寫的朋友可能會(huì)遇到的問題，誠然Axure在功能設(shè)計(jì)時(shí)并不支持編寫交互時(shí)直接對某個(gè)元件的內(nèi)部屬性進(jìn)行調(diào)整浩嫌，而需要用戶首先將需要修改樣式后的元件制作出來檐迟，并與原來的元件共同組合成一個(gè)含有不同狀態(tài)的動(dòng)態(tài)面板，之后通過點(diǎn)擊鼠標(biāo)等觸發(fā)事件來切換動(dòng)態(tài)面板的狀態(tài)來實(shí)現(xiàn)之前所說的點(diǎn)擊鼠標(biāo)改變按鈕顏色等等功能码耐。
? ? ? ? 4.?元件/內(nèi)容有規(guī)律的改變時(shí)：
? ? ? ? 這一點(diǎn)可能比較容易理解追迟，當(dāng)在做諸如輪播圖，HUD提醒骚腥，加載動(dòng)畫提示等等需要元件內(nèi)容有規(guī)律的改變時(shí)敦间，一般會(huì)使用動(dòng)態(tài)面板的幾個(gè)狀態(tài)來進(jìn)行切換，同時(shí)編寫切換狀態(tài)的交互邏輯來實(shí)現(xiàn)有規(guī)律/循環(huán)播放的效果束铭。
? ? ? ? 5.?當(dāng)切換頁面時(shí)：
? ? ? ? 頁面的切換在Axure中大致有四種方式：
? ? ? （1）鏈接跳轉(zhuǎn)（最簡單廓块，最暴力，但無切換動(dòng)畫效果）纯露；
? ? ? （2）元件隱藏顯示切換剿骨；（可設(shè)置顯示隱藏的動(dòng)畫代芜，但一層壓一層的千層餅的頁面編輯起來真的腦殼痛）
? ? ? （3）元件移動(dòng)埠褪；（同上，但是不僅僅是千層餅的問題了挤庇，還得算好千層餅的尺寸和需要移動(dòng)的距離）
? ? ? （4）動(dòng)態(tài)面板狀態(tài)切換钞速。（便于編輯，切換有動(dòng)畫效果嫡秕，但切換的頁面尺寸必須相同）
? ? ? ? 其中使用動(dòng)態(tài)面板切換頁面的好處是當(dāng)頁面內(nèi)容較多渴语，均需要上下拖動(dòng)時(shí)，如果僅僅通過顯示隱藏元件或移動(dòng)元件的方法無法實(shí)現(xiàn)昆咽，而顯示隱藏動(dòng)態(tài)面板或移動(dòng)動(dòng)態(tài)面板的做法又未免有點(diǎn)脫褲子放屁（當(dāng)然要切換的兩個(gè)頁面若是大小不同還是有必要的）驾凶。通過在動(dòng)態(tài)面板的不同狀態(tài)中分別編輯各個(gè)要切換的頁面，并用切換手勢或按鈕進(jìn)行狀態(tài)切換行為的觸發(fā)掷酗，切換時(shí)設(shè)置合適的切換動(dòng)畫即可實(shí)現(xiàn)漂亮的頁面切換效果调违。因?yàn)榫庉嫊r(shí)可以分狀態(tài)，終于不用所有頁面都?jí)涸谝黄鹆诵汉洌@種感覺試過一次都不想再用顯示隱藏那種方法了技肩。
? ? ? ? 以上是需要用到動(dòng)態(tài)面板的幾種場景，此外說一些使用動(dòng)態(tài)面板時(shí)的注意事項(xiàng)和小技巧：
? ? ? ? 動(dòng)態(tài)面板是可以“套娃”的浮声，一個(gè)動(dòng)態(tài)面板的狀態(tài)中可以嵌套另一個(gè)或多個(gè)動(dòng)態(tài)面板虚婿，目前我沒發(fā)現(xiàn)有什么數(shù)量限制旋奢，但是嵌套過多偶爾會(huì)出現(xiàn)一些滑動(dòng)bug并且瀏覽時(shí)性能也會(huì)有所下降，套娃時(shí)需要稍稍克制一下然痊。另外中繼器是不支持嵌套的至朗。
? ? ? ? 如何隱藏動(dòng)態(tài)面板下拉時(shí)的滾動(dòng)條？請將動(dòng)態(tài)面板的寬度增加15玷过，并使用一個(gè)同背景色的無線框矩形壓住這多出來的15寬度即可爽丹。
? ? ? ? 在設(shè)計(jì)需要頁面滑動(dòng)的移動(dòng)端原型時(shí)，請千萬不要打開動(dòng)態(tài)面板的自適應(yīng)功能辛蚊，否則多一放一點(diǎn)內(nèi)容粤蝎，動(dòng)態(tài)面板就跟著變大一圈，最后滑動(dòng)變成了整個(gè)動(dòng)態(tài)面板的滑動(dòng)袋马，而不是動(dòng)態(tài)面板中內(nèi)容的滑動(dòng)初澎。
——————————————————文章目錄——————————————————
Chapter 1
開始前的準(zhǔn)備
2.?沒有完整構(gòu)想的產(chǎn)品上來直接開畫就是耍流氓碑宴。
4. 移動(dòng)端的相關(guān)規(guī)范桑谍，多多少少還是要知道一點(diǎn)點(diǎn)的延柠。
Chapter?2
開始做吧,初學(xué)時(shí)懵逼的問題：
8. 如何使用url及變量鏈接頁面并實(shí)現(xiàn)跳轉(zhuǎn)
9.?關(guān)于命名規(guī)范：頁面、元件雹仿、組增热。
10. 什么時(shí)候該使用動(dòng)態(tài)面板？
12. 交互峻仇、變量、函數(shù)我該怎么著手學(xué)習(xí)邑商？
Chapter3
實(shí)戰(zhàn)教程摄咆，未完待續(xù)...
