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

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

一、原網站設計稿（Figma格式）

二、Axure原型稿

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

三、知識點

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

• 動態面板
• 全局變量／局部變量
• 條件判斷
• 點擊／移動

四、制作步驟

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

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

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

如下圖所示：左側為動態面板模式（無法通過鼠標滾動），右側為非動態面板模式（可以通過鼠標滾動，但與我們想實現的效果相違背）

第四步：進入動態面板，將推薦歌單的元件成組，命名為“list”，后續的交互以“list”為基礎。

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

這里我們先設置當“list”處于收縮狀態下的條件判斷，在上圖中我們可以看到使用到了變量[[sl.y]]，這個變量的作用就是判斷“list”的y軸坐標值，根據坐標值來判斷“list”是展開還是收縮。

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

同理，我們再添加一個判斷條件，判斷如果“list”處于展開狀態，我們再次點擊“list”的時候，歌單將會收縮。

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

五、結尾

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

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

題圖來自 Unsplash，基于 CC0 協議。