Axure教程：網(wǎng)易云音樂首頁原型設計

時間：2023-07-06 20:39:01 | 來源：網(wǎng)站運營

時間：2023-07-06 20:39:01 來源：網(wǎng)站運營

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

制作示例如下：







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

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

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

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







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







序號動態(tài)面板







序號1







序號2

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







頁面載入時用例1

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







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

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

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

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







外側動態(tài)面板

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







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

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







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

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







拖動時用例設置







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

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

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

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