中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

制作示例如下：

網易云音樂發現界面

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

動態面板實現輪播功能

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

輪播圖片動態面板

序號動態面板

序號1

序號2

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

頁面載入時用例1

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

序號1熱區用例設置

2?動態面板隱藏滾動條

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

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

外側動態面板

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

內側動態面板

新建完成后，我們在內側動態面板狀態1中填充要展示內容。

內側動態面板狀態1

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

拖動時用例設置

動態面板無滾動條實現水平滾動

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

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

公眾號：產品小新學樂園

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

題圖來自Unsplash，基于CC0協議