UI設計：如何在Axure中，用動態(tài)面板實現banner的輪播效果

更新時間:2017年11月29日15時59分來源:傳智播客瀏覽次數:

axure功能太強大，動態(tài)面板已經搞得我頭暈@_@眼花了，更別提7.0版本的中繼器了。。。

廢話不多說，還是和大家分享一下動態(tài)面板實現banner輪播的效果，對動態(tài)面板還不熟的，像我一樣的axure初學者，不妨來看看這個效果的制作過程，然后自己試著做一做，絕對增加自己的信心。

就拿大淘寶首頁banner輪播效果為例說明：

前期線稿圖，部件準備

1. 先畫個大概的位置線框圖，如下圖所示，做了3張banner的輪播效果

2.banner位置的占位符轉換為動態(tài)面板(鼠標右鍵，轉換動態(tài)面板)，給面板命名→_→這個不強制，在右側面板區(qū)找到動態(tài)面板(圖中為首頁banner)，選中，添加2個狀態(tài)，分別放banner2，banner3。

雙擊狀態(tài)名進入對應的面板頁面，會看到有藍色的框框，框內的部件將會在面板里顯示，框外的不顯示?？梢越o狀態(tài)修改名稱(選中狀態(tài)，然后單擊名稱即可修改，圖中狀態(tài)名稱修改為1,2,3對應第幾張banner)

3.添加banner輪播時，banner上面的狀態(tài)按鈕(圖中的圓點，會跟隨banner切換，顏色變化)，添加矩形部件，右鍵選擇形狀，然后選擇橢圓，然后在工具欄里修改橢圓的寬和高，變成一個圓(w：10，h：10)，復制部件2次，在右側部件名稱和注釋處給3個圓點分別命名圓點1，2，3

前期準備差不多了，現在開始動態(tài)效果準備

1. 準備工作差不多完成了，現在開始動態(tài)搭配效果。首先是banner要設置成自動輪播的。這要腫么設置呢?先給面板加動態(tài)效果：選中面板，在右側交互欄的“顯示”一項下添加用例，雜項里選擇等待2秒(用來展示banner，時間長短自行設置)，然后在動態(tài)面板下選擇”設置面板狀態(tài)“，選擇狀態(tài)“下一步”，設置進入退出動畫“向左滑動”，動作時間設置為500毫秒。重復“等待”，"設置面板狀態(tài)"兩次。

注意：banner輪播到第三張時，下一張連接第一張banner，在設置面板狀態(tài)時，勾選”從最后一個到第一個自動跳轉“，這樣才能實現banner1，2，3，1，2，3這樣的輪播順序。

2. 做到這里，在瀏覽器里預覽，發(fā)現banner怎么不動?莫急，要讓banner動，得有個觸發(fā)條件，首先將banner動態(tài)面板設置為不可見(選中動態(tài)面板右鍵，設為不可見)，然后在”頁面交互“中設置當頁面載入是，添加用例，顯示動態(tài)面板

3. 做到這里，你再試一試預覽，驚奇的發(fā)現，banner可以輪播了，是不是很開森?然后。。。。。。。停了?這是什么鬼?????告訴你，還沒做完，頁面加載只觸發(fā)了開始的輪播，一直重復還需要再觸發(fā)，要腫么再觸發(fā)呢????嗯，簡單，動態(tài)面板隱藏再顯示就又觸發(fā)了，有木有很神奇，哇哈哈。。。

在動態(tài)面板”顯示“一項的用例里最后添加隱藏面板，顯示面板，保存后預覽即可輪播

4. banner終于可以輪播了，開森!But，banner上的狀態(tài)圓點還木有變，都是一樣的狀態(tài)，現在來修改這3個圓點，讓3個圓點對應各自的banner。

給3個圓點添加交互樣式(選中圓點，右鍵添加交互樣式)，在"選中"下設置圓點樣式，選擇填充個顏色(紅色，自行設置)，3個圓點同理設置。

5. 然后將圓點的效果和動態(tài)面板聯(lián)系起來，在動態(tài)面板“顯示”一項的用例里繼續(xù)添加內容，部件里選擇“設置選擇/選中”，banner1顯示時，選中圓點1(選定狀態(tài)值：true)，圓點2和3為未選中狀態(tài)(選定狀態(tài)值：false)，以此類推設置即可。

注意：用例是一項一項執(zhí)行，不要把圓點的狀態(tài)放錯位置喲~圓點狀態(tài)要和對應的banner狀態(tài)一致哦~