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

離上一次發文到現在，已經很久沒有寫了，趁著這兩天心血來潮，臨摹一個 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）

#專欄作家#

Donny，微信公眾號：UE_diary，人人都是產品經理專欄作家。工作兩年多的產品交互設計師，不定分享一些產品交互細節。

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

題圖來自Unsplash，基于CC0協議