Axure 教程:QQ音樂播放頁制作

32 評(píng)論 26881 瀏覽 80 收藏 9 分鐘

離上一次發(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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 那個(gè)唱片上的唱臂怎么畫呀?感謝解答一下

    來自四川 回復(fù)
  2. 可以出一期詳細(xì)視頻嗎?發(fā)在嗶哩嗶哩即可,感謝博主

    來自四川 回復(fù)
  3. 你好,請(qǐng)問循環(huán)3中的[[Target,y]]指的是什么,具體是在哪一項(xiàng)中?這塊不太明白

    來自山東 回復(fù)
  4. 原型鏈接:https://www.axureshop.com/a/276813.html

    來自廣東 回復(fù)
  5. 鏈接失效了能在補(bǔ)一份嘛 ??

    來自廣東 回復(fù)
    1. 樓上

      來自廣東 回復(fù)
  6. 請(qǐng)問源文件在哪啊

    來自上海 回復(fù)
    1. 樓上

      來自廣東 回復(fù)
  7. 鏈接失效了能再補(bǔ)一份嗎 ??

    來自四川 回復(fù)
    1. 微信號(hào): gd826353355,歡迎需要源文件的小伙伴

      來自廣東 回復(fù)
  8. 大佬們,誰有源文件的,能分享一下唄,拜托( ??? ? ??? )

    回復(fù)
  9. 誰有鏈接阿,發(fā)我一份唄,看了有點(diǎn)懵

    回復(fù)
  10. 這真是太簡(jiǎn)潔了 前邊的我學(xué)了都看不懂 還得自己慢慢摸索

    來自四川 回復(fù)
  11. 有源文件嗎

    來自四川 回復(fù)
    1. 下面有鏈接

      來自廣東 回復(fù)
  12. 哈?

    回復(fù)
    1. 嗯?

      來自廣東 回復(fù)
  13. 都是一個(gè)老師教的 為什么你這么優(yōu)秀,大佬求原型文件膜拜下,評(píng)論鏈接失效了 ??

    來自廣東 回復(fù)
    1. 已在下面更新鏈接

      來自廣東 回復(fù)
    2. 很好奇 你們?cè)谀睦飳W(xué)的 以及在哪里找的大神源文件~

      來自天津 回復(fù)
  14. 打開鏈接 已經(jīng)被刪除不存在了 ??

    來自上海 回復(fù)
    1. 重新發(fā)一下鏈接:https://pan.baidu.com/s/13j837V_MALFVZclLjZyvFQ 密碼:7e6b

      來自廣東 回復(fù)
    2. 謝謝你 ??

      來自上海 回復(fù)
    3. 大佬們,有這個(gè)源文件嘛,下面的鏈接失效啦

      回復(fù)
  15. 可否借原件觀賞一下,有幾處不是很明白

    來自浙江 回復(fù)
    1. 評(píng)論下方有源文件鏈接

      來自廣東 回復(fù)
    2. 你是后臺(tái)產(chǎn)品群里的tonny老師嗎?

      來自浙江 回復(fù)
    3. 不是

      來自廣東 回復(fù)
  16. 學(xué)習(xí)了

    來自廣東 回復(fù)
    1. 相互學(xué)習(xí)

      來自廣東 回復(fù)
  17. 你好,能否講解一下代碼,有點(diǎn)看不懂

    來自廣東 回復(fù)
    1. 評(píng)論可見源文件下載鏈接,可直接觀看

      來自廣東 回復(fù)