導(dǎo)讀：距離上一次分享高保真原型已經(jīng)有一段時間了，近期逛UI8，又發(fā)現(xiàn)了一款比較不錯的設(shè)計稿，因為本人喜歡聽歌，也會去參加一些歌迷線下活動等等的，所以將這款設(shè)計稿，制作成了Axure原型與大家分享。

一、原網(wǎng)站設(shè)計稿（Figma格式）

二、Axure原型稿

這個項目的原型頁面，主要包括9大類34個不同的頁面，制作原型時，有效果圖的加持，很快就完成了，這里選擇“推薦歌單”部分的交互制作，與大家分享。

三、知識點

我們需要實現(xiàn)在音樂播放頁面，顯示推薦歌單，點擊后彈出歌單列表的效果，這里會用到幾個知識點：

• 動態(tài)面板
• 全局變量／局部變量
• 條件判斷
• 點擊／移動

四、制作步驟

第一步：我們需要將頁面場景的頁面尺寸修改為設(shè)計稿的對應(yīng)尺寸，這里我們選擇375 x 812的尺寸，這樣設(shè)置的目的，是為了讓原型在演示時的效果，能更加真實的模擬手機端的體驗。

第二步：我們將原型中已有的內(nèi)容放置在頁面中，需要左上角對齊。效果如圖，虛線上方為預(yù)覽時手機端顯示區(qū)域，虛線下方在預(yù)覽時是不顯示的。

第三步：將所有內(nèi)容全選，設(shè)置為動態(tài)面板，然后將動態(tài)面板的告訴，設(shè)置為頁面的高度812px。這樣做的意義在于如果我們不使用動態(tài)面板，雖然在預(yù)覽時，手機端未顯示區(qū)域的內(nèi)容不顯示，但是用戶可以通過滾輪來查看其他的頁面內(nèi)容。使用動態(tài)面板后，我們可以控制用戶無法通過滾輪來顯示隱藏內(nèi)容。

如下圖所示：左側(cè)為動態(tài)面板模式（無法通過鼠標(biāo)滾動），右側(cè)為非動態(tài)面板模式（可以通過鼠標(biāo)滾動，但與我們想實現(xiàn)的效果相違背）

第四步：進入動態(tài)面板，將推薦歌單的元件成組，命名為“l(fā)ist”，后續(xù)的交互以“l(fā)ist”為基礎(chǔ)。

第五步：為list添加交互，交互設(shè)置這里，很簡單，當(dāng)點擊“l(fā)ist”時，移動“l(fā)ist”的位置，來實現(xiàn)效果，但是最終要的部分，我們需要添加“條件判斷”，如果沒有條件判斷，只依靠點擊，軟件無法獲知，本次點擊到底是展開歌單，還是收起歌單。

這里我們先設(shè)置當(dāng)“l(fā)ist”處于收縮狀態(tài)下的條件判斷，在上圖中我們可以看到使用到了變量[[sl.y]]，這個變量的作用就是判斷“l(fā)ist”的y軸坐標(biāo)值，根據(jù)坐標(biāo)值來判斷“l(fā)ist”是展開還是收縮。

在這個例子中，我們判斷如果list的Y軸坐標(biāo)值>=740，則將“l(fā)ist”的位置移動到12×199的位置。

同理，我們再添加一個判斷條件，判斷如果“l(fā)ist”處于展開狀態(tài)，我們再次點擊“l(fā)ist”的時候，歌單將會收縮。

完成以后，使用F5進行預(yù)覽，最終的效果如下圖所示。

五、結(jié)尾

希望本次分享能夠幫助到你，也歡迎大家有任何問題可以通過評論告訴我。如需下載源文件，請留言告知，避免文章放鏈接導(dǎo)致違規(guī)。

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

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