国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

制作示例如下：

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

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

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

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

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

序號(hào)動(dòng)態(tài)面板

序號(hào)1

序號(hào)2

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

頁(yè)面載入時(shí)用例1

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

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

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

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

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

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

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

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

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

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

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

拖動(dòng)時(shí)用例設(shè)置

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

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

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

公眾號(hào)：產(chǎn)品小新學(xué)樂(lè)園

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

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