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

作者利用Axure動態面板功能對網易云音樂的搜索界面、歌手分類界面以及歌曲播放界面進行了一個簡單的原型設計，與大家分享。

在歌曲播放界面，我們實現了唱片的旋轉，帶時間的進度條，對喜歡的音樂進行標記等基礎效果。下面我們先來瀏覽一下總體的實現效果：

發現界面、搜索界面、歌手分類界面以及歌曲播放界面交互效果：

音樂播放界面：

在對已有的產品進行原型設計時，最重要的就是要熟練使用產品，了解每一個部分的交互效果，必要時我們可以采用腦圖將每個界面的功能及交互效果記錄下來~

一、搜索界面

通過我們對網易云音樂發現界面的觀察我們發現搜索框中帶有一個類似于放大鏡的標志，帶有搜索圖案的搜索框制作過程如下：

（1）拖入寬為305，高為33的矩陣，同時設置其圓角直徑為20，如下圖所示

（2）在矩形中添加“放大鏡”圖片，以及文本框，設置文本框為無邊框且寬度小于33，同時在文本框中添加提示文字：

（3）最后一步只要在矩形中添加熱區，對熱區設置單擊時交互效果就可以啦~

若有搜索歷史的話，我們默認將搜索歷史顯示出來；若需要對搜索歷史進行刪除的話，我們要有彈窗對用戶的行為進行確認，以防止用戶只是誤點了刪除按鈕：

首先設置一個黑色透明遮罩層以及提示框，將其隱藏；在我們單擊清除歷史記錄按鈕后將其顯示出來。

若單擊提示框的取消按鈕，則將黑色透明遮罩層以及提示框隱藏起來；

若單擊提示框的確認按鈕，在將黑色透明遮罩層以及提示框隱藏起來的同時，我們需要將歷史記錄及下邊的標簽隱藏起來，同時將熱搜榜向上移動。

二、歌手分類

在使用網易云音樂歌手分類界面時我們發現，進入頁面時默認顯示歌手分類標簽及熱門歌手；當滑動熱門歌手名單列表時，歌手標簽會自動隱藏起來，我們單擊篩選時又會自動顯示歌手標簽，下面我們來看一下這個功能的實現過程：

（1）首先，熱門歌手列表我們采用兩個動態面板的組合，之前的推文已經介紹過具體的實現過程；

（2）當滑動熱門歌手列表時，我們將歌手分類標簽隱藏起來，同時將動態面板向上移動，“全部歌手”以及“篩選”標簽顯示出來。

這里我們設置兩個用例，一個為拖動時，一個為拖動結束時：

（3）同理，當我們單擊篩選時，我們需要隱藏必要的標簽以及將動態面板根據固定坐標下移。

三、歌曲播放界面

通過對網易云音樂歌曲播放界面使用后，我們選取部分功能進行設計，即播放暫停音樂、對唱片封面進行旋轉、圓形動態效果、時間進度條、標記喜愛的音樂以及彈出分享窗口。

單擊音樂播放按鈕時，顯示暫停按鈕；同時唱片封面進行選擇，圍繞著唱片封面的原型呈現動態效果，時間增加以及進度條向前移動，針對以上我們設置如下用例：

1. 單擊播放按鈕時相關用例

將播放按鈕隱藏起來，顯示暫停按鈕并置于頂層；唱片封面以每100ms旋轉1°的速度；進度條標識以每1000ms的速度移動1；設置唱片封面周圍的動態圈為動態面板，在每個狀態中放入圓心相同、半徑不同的空心圓，將其設置為向后循環效果；

為使單擊暫停按鈕時，唱片封面停止旋轉以及動態圓圈停止動態變化，同時為保持旋轉等變化的一致性，我們對唱片封面圖片設置旋轉時的用例如下，需要注意的是，此時我們需要添加判斷條件，即當暫停部件可見時才會執行以下操作，暫停圖標隱藏時動作隨即停止：

為使時間隨著進度條標識的移動進行符合實際的變化，我們首先設置全局變量t，默認值為1000：

接下來，我們對進度條標識設置移動時的部分用例如下：

同上一步中為使單擊暫停按鈕時，進度條標識停止移動、時間停止變化，我們添加判斷條件，即當暫停部件可見時才會執行以下操作，暫停圖標隱藏時動作隨即停止。同時我們根據以下條件對全局變量t進行設置，更新時間文本：

2. 收藏喜愛的音樂

當我們單擊喜歡時，即可收藏喜愛的音樂，同時彈出提示框，兩秒后提示框自動消失。這時我們在設置用例時只需添加等待事件即可。

3. 分享窗口

這一部分比較簡單，只是涉及到了分享窗口的顯示與隱藏。

這樣看下來是不是制作一個原型非常的簡單呢。

歡迎大家與我交流，共同進步~

作者：產品小小白；公眾號：產品小新學樂園

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

題圖來自Unsplash，基于CC0協議