AXURE實現QQ音樂APP部分原型功能

什麼是AXURE

AXURE是一款專業的快速原型設計工具。其設計的文件一般後綴名帶有.rp。rp文件是快速原型的縮寫——Rapid Prototyping。在項目的設計中，一般用來進行開始階段的原型確定。

設計QQ音樂APP
如何學習一個軟件最快速的方式就是模仿並總結思考，下面本人將通過AXURE模仿設置QQ音樂APP的功能。 素材獲取

1.確定手機模型的外殼，設置其中的內部大小。當然這個也可以通過AXURE中一些基本元件的變化很容易得到。
2.從手機中進行截取QQ音樂APP的圖片，通過PS進行P圖，獲得大部分的素材。
3.獲得一些需要實現的動態圖標，比如播放按鈕、紅心變化、音樂符號等

設置母版 母版的主要作用在於減少一些重複性的操作，比如QQ音樂中搜索框、下方中的頁面切換、音樂小播放按鈕轉動的圖片。‘

設置分界面

本項目分爲五個界面和一個母版。五個界面分別根據QQ音樂中的四個切換界面和音樂播放界面仿照而成，母版是在五個界面相似的基礎上建立而成。並且本項目運用了六組交互。下面將根據頁面來進行說明。

音樂館界面：

該界面運用了三個交互：

1.搜索框的使用
通過點擊上方的搜索框，可以顯示並彈出鍵盤組合，最後通過在輸入框鍵盤輸入需要搜索的歌名等信息，點擊確定後，信息會自動顯示在搜索框。

2. 輪播圖的轉換
   通過使用動態面板來切換不同的轉播圖，同時通過條件設置狀態改變時、頁面載入時、下方小按鈕點擊時等交互設計完成該模型。
   
   
   
   

3.界面切換和播放按鈕點擊旋轉的轉換
下方的點擊切換界面和播放按鈕



通過設置四種不同的組合，設置點擊時設置選中、打開鏈接來實現不同界面的選中顏色和切換界面。最後通過點擊播放按鈕，設置旋轉並且旋轉圖片設置旋轉時來實現播放時持續旋轉。

推薦界面：

該界面新增一個交互：
拖動時界面移動和特定條件下拖動結束時返回。

拖動事件

拖動界面總覽

動態界面：

動態界面

該頁面新增加一個交互。
通過設置動態面板來設置滑塊的切換，設置單擊時，切換到下一個狀態，設置滑塊移動到達的位置，切換狀態。並且更換不同的板塊。

播放界面：

進入播放界面

該界面新增加一個交互
通過構造全局變量play2和play來設置時間軸來進行計算播放時間的計算，並且通過點擊右上方的分享界面可以進行分享。通過時間的變化設置進度條的尺寸大小，達到實現實時更新的目的。

我的

四、 模型缺點
這裏的缺點是指本項目中沒有達到設計的目的，並且最後沒能修改成功。
1.音樂館界面中第一個輪播圖總是默認選中

輪播圖bug

2.動態圖界面中需要單擊兩次才進行切換，預期是隻要單擊一次即可

初始界面

第一次單擊

第二次單擊

總結

模型總存在很多的不足，用了3天完成。希望以後可以得心應手。