作者利用Axure動态面闆功能對網易雲音樂首頁進行了一個簡單的原型設計，那如何利用Axure動态面闆功能實現輪播效果及交互功能以及隐藏醜陋的滾動條呢？下面來和我一起研究一下~

制作示例如下：

網易雲音樂發現界面

動态面闆實現輪播功能

對網易雲音樂界面觀察後發現，自用戶進入網易雲音樂首頁後一直有七組圖片在進行輪播，同時下方還包括了對圖片進行選擇的序号。這個時候，我們需要使用兩個動态面闆，其中一個設置輪播圖片，另一個設置下方序号。

輪播圖片動态面闆

序号動态面闆

序号1

序号2

在輪播圖片動态面闆的每個狀态下增添形狀相同内容不同的圖片，在序号面闆下增添序号标簽，選中哪個序号時就将該處原點設置為紅色，其它為暗灰色。接下來，我們在頁面載入時設置用例1，設置兩個面闆狀态皆為Next，需要注意的是動畫效果和循環間隔一定要保持一緻呀~

頁面載入時用例1

實現頁面載入時的輪播功能後，我們還需要設置當鼠标移入或者單擊序号點時，跳轉到序号對應的圖片中，這個時候就需要利用我們的熱區功能，為每個序号點增加熱區後設置用例，設置圖片動态面闆和序号動态面闆為一一對應的關系，注意保持動畫效果和循環間隔一緻呀~現利用序号1進行舉例說明。此時輪播效果及交互功能就設計完畢啦~

序号1熱區用例設置

我們在使用網易雲音樂的時候發現，一些模塊可以進行左右滑動卻沒有醜陋的滾動條顯示出來，這是為什麼呢？現在和我一起做，利用動态面闆功能一起來隐藏滾動條！

首先第一步我們需要新建一個動态面闆命名為外側

外側動态面闆

接下來我們在外側動态面闆狀态1中新建一個動态面闆命名為内側，注意其長度大于外側動态面闆，需包含要展示的所有内容

内側動态面闆

新建完成後，我們在内側動态面闆狀态1中填充要展示内容。

内側動态面闆狀态1

填充完内容後，我們對外側動态面闆拖動時設置用例，當拖動外側動态面闆時，内側動态面闆進行水平移動，同時設置左側邊界小于零，右側邊界小于外側動态面闆寬度（設置邊界需根據實際情況考慮完成），這樣我們就利用動态面闆實現了移動且隐藏了醜陋的滾動條，大功告成啦~

拖動時用例設置

動态面闆無滾動條實現水平滾動

動态面闆真的是功能多多呢~在制作網易雲音樂首頁原型設計的時候，還利用了動态面闆實現了基本的界面切換功能~

歡迎大家和我一起多多交流，共同進步~

本文由 @産品小小白原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!