網易雲音樂的介面設計（網易雲音樂怎麼自定義背景）

2023-07-26 09:32:53

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

製作示例如下：

網易雲音樂發現介面

1.動態面板實現輪播功能

動態面板實現輪播功能

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

輪播圖片動態面板

序號動態面板

序號1

序號2

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

頁面載入時用例1

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