作者利用Axure動態(tài)面板功能對網(wǎng)易云音樂首頁進(jìn)行了一個簡單的原型設(shè)計(jì)，那如何利用Axure動態(tài)面板功能實(shí)現(xiàn)輪播效果及交互功能以及隱藏丑陋的滾動條呢？下面來和我一起研究一下~

制作示例如下：

網(wǎng)易云音樂發(fā)現(xiàn)界面

1.動態(tài)面板實(shí)現(xiàn)輪播功能

動態(tài)面板實(shí)現(xiàn)輪播功能

對網(wǎng)易云音樂界面觀察后發(fā)現(xiàn)，自用戶進(jìn)入網(wǎng)易云音樂首頁后一直有七組圖片在進(jìn)行輪播，同時下方還包括了對圖片進(jìn)行選擇的序號。這個時候，我們需要使用兩個動態(tài)面板，其中一個設(shè)置輪播圖片，另一個設(shè)置下方序號。

輪播圖片動態(tài)面板

序號動態(tài)面板

序號1

序號2

在輪播圖片動態(tài)面板的每個狀態(tài)下增添形狀相同內(nèi)容不同的圖片，在序號面板下增添序號標(biāo)簽，選中哪個序號時就將該處原點(diǎn)設(shè)置為紅色，其它為暗灰色。接下來，我們在頁面載入時設(shè)置用例1，設(shè)置兩個面板狀態(tài)皆為Next，需要注意的是動畫效果和循環(huán)間隔一定要保持一致呀~

頁面載入時用例1

實(shí)現(xiàn)頁面載入時的輪播功能后，我們還需要設(shè)置當(dāng)鼠標(biāo)移入或者單擊序號點(diǎn)時，跳轉(zhuǎn)到序號對應(yīng)的圖片中，這個時候就需要利用我們的熱區(qū)功能，為每個序號點(diǎn)增加熱區(qū)后設(shè)置用例，設(shè)置圖片動態(tài)面板和序號動態(tài)面板為一一對應(yīng)的關(guān)系，注意保持動畫效果和循環(huán)間隔一致呀~現(xiàn)利用序號1進(jìn)行舉例說明。此時輪播效果及交互功能就設(shè)計(jì)完畢啦~

序號1熱區(qū)用例設(shè)置

2?動態(tài)面板隱藏滾動條

我們在使用網(wǎng)易云音樂的時候發(fā)現(xiàn)，一些模塊可以進(jìn)行左右滑動卻沒有丑陋的滾動條顯示出來，這是為什么呢？現(xiàn)在和我一起做，利用動態(tài)面板功能一起來隱藏滾動條！

首先第一步我們需要新建一個動態(tài)面板命名為外側(cè)

外側(cè)動態(tài)面板

接下來我們在外側(cè)動態(tài)面板狀態(tài)1中新建一個動態(tài)面板命名為內(nèi)側(cè)，注意其長度大于外側(cè)動態(tài)面板，需包含要展示的所有內(nèi)容

內(nèi)側(cè)動態(tài)面板

新建完成后，我們在內(nèi)側(cè)動態(tài)面板狀態(tài)1中填充要展示內(nèi)容。

內(nèi)側(cè)動態(tài)面板狀態(tài)1

填充完內(nèi)容后，我們對外側(cè)動態(tài)面板拖動時設(shè)置用例，當(dāng)拖動外側(cè)動態(tài)面板時，內(nèi)側(cè)動態(tài)面板進(jìn)行水平移動，同時設(shè)置左側(cè)邊界小于零，右側(cè)邊界小于外側(cè)動態(tài)面板寬度（設(shè)置邊界需根據(jù)實(shí)際情況考慮完成），這樣我們就利用動態(tài)面板實(shí)現(xiàn)了移動且隱藏了丑陋的滾動條，大功告成啦~

拖動時用例設(shè)置

動態(tài)面板無滾動條實(shí)現(xiàn)水平滾動

動態(tài)面板真的是功能多多呢~在制作網(wǎng)易云音樂首頁原型設(shè)計(jì)的時候，還利用了動態(tài)面板實(shí)現(xiàn)了基本的界面切換功能~

歡迎大家和我一起多多交流，共同進(jìn)步~

公眾號：產(chǎn)品小新學(xué)樂園

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

題圖來自Unsplash，基于CC0協(xié)議