作者利用Axure動(dòng)態(tài)面板功能對(duì)網(wǎng)易云音樂的搜索界面、歌手分類界面以及歌曲播放界面進(jìn)行了一個(gè)簡(jiǎn)單的原型設(shè)計(jì)，與大家分享。

在歌曲播放界面，我們實(shí)現(xiàn)了唱片的旋轉(zhuǎn)，帶時(shí)間的進(jìn)度條，對(duì)喜歡的音樂進(jìn)行標(biāo)記等基礎(chǔ)效果。下面我們先來瀏覽一下總體的實(shí)現(xiàn)效果：

發(fā)現(xiàn)界面、搜索界面、歌手分類界面以及歌曲播放界面交互效果：

音樂播放界面：

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

一、搜索界面

通過我們對(duì)網(wǎng)易云音樂發(fā)現(xiàn)界面的觀察我們發(fā)現(xiàn)搜索框中帶有一個(gè)類似于放大鏡的標(biāo)志，帶有搜索圖案的搜索框制作過程如下：

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

（2）在矩形中添加“放大鏡”圖片，以及文本框，設(shè)置文本框?yàn)闊o邊框且寬度小于33，同時(shí)在文本框中添加提示文字：

（3）最后一步只要在矩形中添加熱區(qū)，對(duì)熱區(qū)設(shè)置單擊時(shí)交互效果就可以啦~

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

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

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

若單擊提示框的確認(rèn)按鈕，在將黑色透明遮罩層以及提示框隱藏起來的同時(shí)，我們需要將歷史記錄及下邊的標(biāo)簽隱藏起來，同時(shí)將熱搜榜向上移動(dòng)。

二、歌手分類

在使用網(wǎng)易云音樂歌手分類界面時(shí)我們發(fā)現(xiàn)，進(jìn)入頁面時(shí)默認(rèn)顯示歌手分類標(biāo)簽及熱門歌手；當(dāng)滑動(dòng)熱門歌手名單列表時(shí)，歌手標(biāo)簽會(huì)自動(dòng)隱藏起來，我們單擊篩選時(shí)又會(huì)自動(dòng)顯示歌手標(biāo)簽，下面我們來看一下這個(gè)功能的實(shí)現(xiàn)過程：

（1）首先，熱門歌手列表我們采用兩個(gè)動(dòng)態(tài)面板的組合，之前的推文已經(jīng)介紹過具體的實(shí)現(xiàn)過程；

（2）當(dāng)滑動(dòng)熱門歌手列表時(shí)，我們將歌手分類標(biāo)簽隱藏起來，同時(shí)將動(dòng)態(tài)面板向上移動(dòng)，“全部歌手”以及“篩選”標(biāo)簽顯示出來。

這里我們?cè)O(shè)置兩個(gè)用例，一個(gè)為拖動(dòng)時(shí)，一個(gè)為拖動(dòng)結(jié)束時(shí)：

（3）同理，當(dāng)我們單擊篩選時(shí)，我們需要隱藏必要的標(biāo)簽以及將動(dòng)態(tài)面板根據(jù)固定坐標(biāo)下移。

三、歌曲播放界面

通過對(duì)網(wǎng)易云音樂歌曲播放界面使用后，我們選取部分功能進(jìn)行設(shè)計(jì)，即播放暫停音樂、對(duì)唱片封面進(jìn)行旋轉(zhuǎn)、圓形動(dòng)態(tài)效果、時(shí)間進(jìn)度條、標(biāo)記喜愛的音樂以及彈出分享窗口。

單擊音樂播放按鈕時(shí)，顯示暫停按鈕；同時(shí)唱片封面進(jìn)行選擇，圍繞著唱片封面的原型呈現(xiàn)動(dòng)態(tài)效果，時(shí)間增加以及進(jìn)度條向前移動(dòng)，針對(duì)以上我們?cè)O(shè)置如下用例：

1. 單擊播放按鈕時(shí)相關(guān)用例

將播放按鈕隱藏起來，顯示暫停按鈕并置于頂層；唱片封面以每100ms旋轉(zhuǎn)1°的速度；進(jìn)度條標(biāo)識(shí)以每1000ms的速度移動(dòng)1；設(shè)置唱片封面周圍的動(dòng)態(tài)圈為動(dòng)態(tài)面板，在每個(gè)狀態(tài)中放入圓心相同、半徑不同的空心圓，將其設(shè)置為向后循環(huán)效果；

為使單擊暫停按鈕時(shí)，唱片封面停止旋轉(zhuǎn)以及動(dòng)態(tài)圓圈停止動(dòng)態(tài)變化，同時(shí)為保持旋轉(zhuǎn)等變化的一致性，我們對(duì)唱片封面圖片設(shè)置旋轉(zhuǎn)時(shí)的用例如下，需要注意的是，此時(shí)我們需要添加判斷條件，即當(dāng)暫停部件可見時(shí)才會(huì)執(zhí)行以下操作，暫停圖標(biāo)隱藏時(shí)動(dòng)作隨即停止：

為使時(shí)間隨著進(jìn)度條標(biāo)識(shí)的移動(dòng)進(jìn)行符合實(shí)際的變化，我們首先設(shè)置全局變量t，默認(rèn)值為1000：

接下來，我們對(duì)進(jìn)度條標(biāo)識(shí)設(shè)置移動(dòng)時(shí)的部分用例如下：

同上一步中為使單擊暫停按鈕時(shí)，進(jìn)度條標(biāo)識(shí)停止移動(dòng)、時(shí)間停止變化，我們添加判斷條件，即當(dāng)暫停部件可見時(shí)才會(huì)執(zhí)行以下操作，暫停圖標(biāo)隱藏時(shí)動(dòng)作隨即停止。同時(shí)我們根據(jù)以下條件對(duì)全局變量t進(jìn)行設(shè)置，更新時(shí)間文本：

2. 收藏喜愛的音樂

當(dāng)我們單擊喜歡時(shí)，即可收藏喜愛的音樂，同時(shí)彈出提示框，兩秒后提示框自動(dòng)消失。這時(shí)我們?cè)谠O(shè)置用例時(shí)只需添加等待事件即可。

3. 分享窗口

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

這樣看下來是不是制作一個(gè)原型非常的簡(jiǎn)單呢。

歡迎大家與我交流，共同進(jìn)步~

作者：產(chǎn)品小小白；公眾號(hào)：產(chǎn)品小新學(xué)樂園

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

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