離上一次發(fā)文到現(xiàn)在，已經(jīng)很久沒有寫了，趁著這兩天心血來潮，臨摹一個(gè) QQ 音樂的播放界面，因?yàn)閭€(gè)人能力有些不足，在這里還要感謝?Phoenix 老師、牧逸的指導(dǎo)，我才能夠把整個(gè)效果做完 ！?。?/p>

本次教程面向于有一定基礎(chǔ)的 Axure 使用者（本文只講解制作流程，不包含細(xì)節(jié)內(nèi)容，因?yàn)槎紝懙脑拰?shí)在是太多了，見諒?。。?，如果覺得有點(diǎn)難的可以看我前面的一些教程。

先看一下成品吧：

有電腦、網(wǎng)絡(luò)不差的可點(diǎn)擊鏈接觀看：https://m9srm2.axshare.com

看過我之前的教程的，這次我可能不會(huì)寫得那么詳細(xì)。因?yàn)樽鲞@個(gè)的時(shí)候，花了2、3天業(yè)余時(shí)間，確實(shí)有點(diǎn)懵了，但我還把一個(gè)制作流程講一遍，還請(qǐng)各位小伙伴多多擔(dān)待 。

一、準(zhǔn)備元件

首先把所有的元件先搭建好，然后我們才能準(zhǔn)備好下一步的工作。大家在畫靜態(tài)原型時(shí)，可以先把你手機(jī)里面的 QQ音樂 截一個(gè)圖，然后放在 Axure 里面照著畫，這樣能夠保持高還原度。有些人覺得這是 UI 的工作，不喜歡做得那么細(xì)，在這里就看個(gè)人喜好了 。

二、設(shè)置交互樣式/動(dòng)態(tài)面板

第一步，把一些簡(jiǎn)單動(dòng)態(tài)面板/樣式補(bǔ)全，播放按鈕在整個(gè)制作中算比較重要的，因?yàn)樵诤竺纥c(diǎn)擊播放時(shí)需要由它來觸發(fā)用例，由它觸發(fā)的用例有：

a.唱片循環(huán)

b.播放時(shí)間循環(huán)

c.進(jìn)度條循環(huán)

d.歌詞循環(huán)

第二步，我們把唱片的樣式都給補(bǔ)全了，為了在后面左右切換的效果，在切換的同事底部還有一個(gè)根據(jù)內(nèi)容切換而改變樣式的小圓點(diǎn)，這些都需要做成動(dòng)態(tài)面板（不知道怎么做的可以看看我之前的文章）。

這一步需要完成幾個(gè)點(diǎn)：

a.圓形唱片

b.歌曲詳情頁

c.歌詞（只為了學(xué)習(xí)效果的，只需要放入部分字段即可）

d.小圓點(diǎn)

第三步，我們?cè)撗a(bǔ)充一下進(jìn)度條的樣式，進(jìn)度條我們需要做一個(gè)靜態(tài)的做一個(gè)背景、一個(gè) X 軸為 1 的作為動(dòng)態(tài)進(jìn)度條，動(dòng)態(tài)進(jìn)度條的顏色需要和靜態(tài)的區(qū)分顏色，然后做一個(gè)小圓球作為可以手動(dòng)滑動(dòng)進(jìn)度條的點(diǎn)；還有就是左右兩側(cè)的時(shí)間字段了，右側(cè)是顯示真?zhèn)€歌曲的時(shí)間，簡(jiǎn)單用輸如文字就可以了，左側(cè)需要因?yàn)樾枰龀蓜?dòng)態(tài)的，我們需要用文本框來一個(gè)秒針和一個(gè)分針的，方便后面做效果。

這一步需要完成幾個(gè)點(diǎn)：

a.靜態(tài)進(jìn)度條、動(dòng)態(tài)進(jìn)度條

b.小圓點(diǎn)（用于拖動(dòng)）

c.分針、秒針樣式（左側(cè)用文本框、右側(cè)用文本）

第四步，我們做一些播放方式的動(dòng)態(tài)面板，里面有順序播放、單曲循環(huán)、隨機(jī)播放的功能，這里小伙伴們可以選擇可做可不做的操作，對(duì)于那些喜歡追求細(xì)節(jié)的小伙伴，可以做得更細(xì)致一點(diǎn)。這一步需要完成幾個(gè)點(diǎn)：

a.播放方式（順序播放、單曲循環(huán)、隨機(jī)播放）

b.喜歡（喜歡、取消喜歡）

c.自行補(bǔ)充…

這樣我就把準(zhǔn)備工作做到一半了，其實(shí)還算簡(jiǎn)單的；后面要做的會(huì)有點(diǎn)難度，小伙伴們慢慢琢磨就可以啦。

三、設(shè)置交互用例

第一步，做三個(gè)動(dòng)態(tài)面板分別叫：循環(huán)1、循環(huán)2、循環(huán)3，每個(gè)動(dòng)態(tài)面板都需要做兩個(gè)層；觸發(fā)效果做在播放按鈕上面“點(diǎn)擊時(shí)，循環(huán)動(dòng)態(tài)面板”，停止播放的按鈕設(shè)置為“停止循環(huán)”。

這一步需要完成幾個(gè)點(diǎn)：

a.做三個(gè)動(dòng)態(tài)面板，均需兩個(gè)層

b.播放按鈕設(shè)置：循環(huán)動(dòng)態(tài)面板（1、2、3），停止按鈕設(shè)置：停止循環(huán)

第二步，設(shè)置進(jìn)度條的用例，在秒針里面，設(shè)置文本改變時(shí)的用例。

這一步需要完成幾個(gè)點(diǎn)：

a.秒針文字為 01 ~ 09 之間時(shí)，前面需要有一個(gè) 0 ，大于時(shí)則不需要

b.秒針文字到達(dá)60時(shí)，秒針邊為 00 ，分針需要有0[[LAVR1+1]]

第二步，設(shè)置“進(jìn)度球”的用例，移動(dòng)時(shí)，要控制 動(dòng)態(tài)進(jìn)度條的跟隨效果，以及控制分針、秒針的效果兩者需要按比例進(jìn)行 ；拖動(dòng)時(shí)的用例，進(jìn)度球設(shè)置為水平移動(dòng)，以及限制左右兩側(cè)的移動(dòng)范圍；還有當(dāng)進(jìn)度球滾動(dòng)時(shí)，歌詞需要跟著進(jìn)度球、動(dòng)態(tài)進(jìn)度條，按比例進(jìn)行上下活動(dòng)。

這一步需要完成幾個(gè)點(diǎn)：

a.設(shè)置動(dòng)態(tài)進(jìn)度條的跟隨效果

b.進(jìn)度球的操作方式以及操作范圍

c.歌詞需要跟隨進(jìn)度條，按比例上下滾動(dòng)（唱片的為小歌詞，從右向左滑動(dòng)的為大歌詞）

第三步，設(shè)置“大歌詞”的用例，只需要設(shè)置歌詞操作方式和操作范圍，還有拖動(dòng)歌詞時(shí)進(jìn)度球、小歌詞的跟隨效果。

這一步需要完成幾個(gè)點(diǎn)：

a.歌詞的操作方式和操作范圍

b.大歌詞拖動(dòng)時(shí)，進(jìn)度球、小歌詞需要跟隨

emmm…這樣就把基本的實(shí)現(xiàn)方式講解完了，因?yàn)檫@兩天我被這個(gè)搞得有點(diǎn)蒙，也不知各位小伙伴能不能看懂呢？（尷尬臉.jpg）

#專欄作家#

Donny，微信公眾號(hào)：UE_diary，人人都是產(chǎn)品經(jīng)理專欄作家。工作兩年多的產(chǎn)品交互設(shè)計(jì)師，不定分享一些產(chǎn)品交互細(xì)節(jié)。

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

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