離上一次發文到現在，已經很久沒有寫了，趁著這兩天心血來潮，臨摹一個 QQ 音樂的播放界面，因為個人能力有些不足，在這里還要感謝?Phoenix 老師、牧逸的指導，我才能夠把整個效果做完 ！！！
本次教程面向于有一定基礎的 Axure 使用者（本文只講解制作流程，不包含細節內容，因為都寫的話實在是太多了，見諒！！），如果覺得有點難的可以看我前面的一些教程。
先看一下成品吧：
有電腦、網絡不差的可點擊鏈接觀看：https://m9srm2.axshare.com
看過我之前的教程的，這次我可能不會寫得那么詳細。因為做這個的時候，花了2、3天業余時間，確實有點懵了，但我還把一個制作流程講一遍，還請各位小伙伴多多擔待 。
一、準備元件
首先把所有的元件先搭建好，然后我們才能準備好下一步的工作。大家在畫靜態原型時，可以先把你手機里面的 QQ音樂 截一個圖，然后放在 Axure 里面照著畫，這樣能夠保持高還原度。有些人覺得這是 UI 的工作，不喜歡做得那么細，在這里就看個人喜好了 。
二、設置交互樣式/動態面板
第一步，把一些簡單動態面板/樣式補全，播放按鈕在整個制作中算比較重要的，因為在后面點擊播放時需要由它來觸發用例，由它觸發的用例有：
a.唱片循環
b.播放時間循環
c.進度條循環
d.歌詞循環
第二步，我們把唱片的樣式都給補全了，為了在后面左右切換的效果，在切換的同事底部還有一個根據內容切換而改變樣式的小圓點，這些都需要做成動態面板（不知道怎么做的可以看看我之前的文章）。
這一步需要完成幾個點：
a.圓形唱片
b.歌曲詳情頁
c.歌詞（只為了學習效果的，只需要放入部分字段即可）
d.小圓點
第三步，我們該補充一下進度條的樣式，進度條我們需要做一個靜態的做一個背景、一個 X 軸為 1 的作為動態進度條，動態進度條的顏色需要和靜態的區分顏色，然后做一個小圓球作為可以手動滑動進度條的點；還有就是左右兩側的時間字段了，右側是顯示真個歌曲的時間，簡單用輸如文字就可以了，左側需要因為需要做成動態的，我們需要用文本框來一個秒針和一個分針的，方便后面做效果。
這一步需要完成幾個點：
a.靜態進度條、動態進度條
b.小圓點（用于拖動）
c.分針、秒針樣式（左側用文本框、右側用文本）
第四步，我們做一些播放方式的動態面板，里面有順序播放、單曲循環、隨機播放的功能，這里小伙伴們可以選擇可做可不做的操作，對于那些喜歡追求細節的小伙伴，可以做得更細致一點。這一步需要完成幾個點：
a.播放方式（順序播放、單曲循環、隨機播放）
b.喜歡（喜歡、取消喜歡）
c.自行補充…
這樣我就把準備工作做到一半了，其實還算簡單的；后面要做的會有點難度，小伙伴們慢慢琢磨就可以啦。
三、設置交互用例
第一步，做三個動態面板分別叫：循環1、循環2、循環3，每個動態面板都需要做兩個層；觸發效果做在播放按鈕上面“點擊時，循環動態面板”，停止播放的按鈕設置為“停止循環”。
這一步需要完成幾個點：
a.做三個動態面板，均需兩個層
b.播放按鈕設置：循環動態面板（1、2、3），停止按鈕設置：停止循環
第二步，設置進度條的用例，在秒針里面，設置文本改變時的用例。
這一步需要完成幾個點：
a.秒針文字為 01 ~ 09 之間時，前面需要有一個 0 ，大于時則不需要
b.秒針文字到達60時，秒針邊為 00 ，分針需要有0[[LAVR1+1]]
第二步，設置“進度球”的用例，移動時，要控制 動態進度條的跟隨效果，以及控制分針、秒針的效果兩者需要按比例進行 ；拖動時的用例，進度球設置為水平移動，以及限制左右兩側的移動范圍；還有當進度球滾動時，歌詞需要跟著進度球、動態進度條，按比例進行上下活動。
這一步需要完成幾個點：
a.設置動態進度條的跟隨效果
b.進度球的操作方式以及操作范圍
c.歌詞需要跟隨進度條，按比例上下滾動（唱片的為小歌詞，從右向左滑動的為大歌詞）
第三步，設置“大歌詞”的用例，只需要設置歌詞操作方式和操作范圍，還有拖動歌詞時進度球、小歌詞的跟隨效果。
這一步需要完成幾個點：
a.歌詞的操作方式和操作范圍
b.大歌詞拖動時，進度球、小歌詞需要跟隨
emmm…這樣就把基本的實現方式講解完了，因為這兩天我被這個搞得有點蒙，也不知各位小伙伴能不能看懂呢？（尷尬臉.jpg）
本文為@運營喵原創，運營喵專欄作者。
