UI設計師教你作音樂App

在當下的互聯(lián)網(wǎng)音樂服務中，真正算得上是音樂管理軟件的是Apple Music。視覺設計精致，全平臺統(tǒng)一，在歐美和古典音樂上資源非常豐富，是一流的音樂流媒體服務產(chǎn)品，也是筆者最常用的軟件之一。最近也正好關注到，國民原型設計工具Mockplus舉辦了一場以音樂APP為主題的原型設計大賽，其中也不乏有許多出眾的設計作品。借此時機，為大家整理和分享10款優(yōu)秀的音樂APP設計，滿足你視覺、聽覺上的完美體驗。

1. Intimate

簡介：Intimate是一款非常輕量的APP，去除繁雜的功能，打造專業(yè)化、個性化、年輕化。打開APP時，會親切的詢問用戶當前的心情狀態(tài)，來自動篩選符合當前心情的音樂，實現(xiàn)智能推送，成為你用戶真正懂你的密友。

工具：Mockplus、Sketch

評價：這款播放器非常簡潔，去除了繁雜的功能，操作簡單易用，滿足基本訴求的基礎上，交互方式新穎，整體流程清晰。配色上明艷大氣，頗具國際范兒。

2. Listen

簡介：Listen是一種潮流音樂生活方式。為沉溺在勞碌中的上班族帶來新的輕松與潮流。更具獨特的交互體驗，讓歌曲更能貼近心靈的深處。通過場景、情感等，智能推薦適合當下的專屬歌曲，讓用戶不用在歌海中苦苦尋覓自己的歸處。

工具：Mockplus、Sketch

評價：這款原型的時候會讓人眼前一亮，風格非常一致，界面整齊，顏色非常靚麗。同時，界面切換采用上下切換的模式也是與眾不同。該原型可以根據(jù)用戶選擇的心情來推薦音樂。產(chǎn)品基于情緒和場景定義產(chǎn)品并進行信息架構搭建，具有新意，視覺寫實風與繪畫風混搭，交互上不落窠臼，聚焦于用戶體驗。

3. Zero Player

簡介：Zero player是一款能夠根據(jù)個人喜好，暗號時代，類型等個性化標簽，去提供定制化音樂服務的音樂應用。一切從一個問題開始：“什么是好的音樂服務”，作者認為好的音樂服務是用自己最喜歡的音樂裝點你的生活。摒除復雜，讓一切從Zero開始吧。

工具：Mockplus、Photoshop

評價：配色舒心，簡練大方。個性化的界面設置，別具一格的格局，貫徹整個APP的呼吸按鈕升華了體驗，呈現(xiàn)給用戶強烈的生命力。

4. TEMPO

簡介：TEMPO是一款基于運動場景的音樂App，每個人運動時都有自己的節(jié)奏，每段音樂也有自己的節(jié)奏，使用者可以在40-180BPM范圍選擇音樂來適應當下運動的速度，或者某一運動對應的適宜節(jié)奏速度，當他們調(diào)整好合適的節(jié)奏速度時，可以在界面內(nèi)任意切換同速率不同的藝術家的音樂，避免了傳統(tǒng)聽歌方式速度不統(tǒng)一而影響運動的尷尬情形，解決運動時聽音樂不好選的痛點，在一定程度上激勵和提升運動表現(xiàn)，不同于一般的音樂播放器的分類方式，TEMPO的音樂是按照運動的種類及音樂的節(jié)奏速度劃分的，曲庫是精準篩選的運動音樂。

工具：Mockplus、Sketch

評價：TEMPO 最創(chuàng)新的地方，是在健身這個場景進行了深入挖掘，針對特定的 BPM 匹配特定節(jié)奏的音樂，提升體驗和健身效果。此外 TEMPO 的基礎部分也做得不錯，首頁展示了熱搜詞、運營 banner 和推薦曲目信息流，保證了內(nèi)容豐富程度和分發(fā)效率。UI 上采用深色主題，藍綠漸變的品牌色貫穿各處，有自己的特色。

5. Re/ Machine Learning & AI Music Player

簡介：電子音樂改變了用戶欣賞音樂的方式，純粹逐利販賣訂閱的音樂APP捆綁了用戶的選擇，靜態(tài)的播放列表一成不變。Re是一款機器自動學習，利用人工智能技術的音樂播放器，能夠智能地推送讓你驚喜的音樂。

工具：Photoshop, Adobe XD, Apple XCode

評價：這款音樂播放器背后有一套完整的智能識別引擎，設計純粹澄凈，盡力降低用戶在使用中的干擾因素，使用中機器還會進一步學習，深層次了解用戶需求。

6. Musician Hub. Design Conept

工具：Photoshop、Adobe After Effects、Adobe Illustrator

簡介：這款APP功能聚焦于音樂人尋找自己想要的樂隊，建立賬號后就會在首頁呈現(xiàn)完整的樂手信息，通過內(nèi)置的樂器篩選器還能精準尋找自己喜好的不同對應流派。

評價：整體信息架構簡單清晰，仍然保持了完整的功能性。

7. Spotify Redesign | Mobile & Desktop

簡介：作者對Spotify進行了出色的再設計，整體色系采用紅灰兩色，增強了現(xiàn)代感和高貴感。后臺也會通過你的使用習慣智能推送用戶的偏好音樂。

工具：Photoshop，Adobe Illustrator，Adobe After Effects

評價：風格大膽，在一款成熟的音樂APP下仍然做出了突破和創(chuàng)新。

8. Melody

簡介：作者設計這款APP的宗旨是讓用戶能夠在忙碌的生活中，能夠碎片化地欣賞音樂。

工具：Photoshop，Adobe Illustrator，Adobe After Effects

評價：界面清新潔凈，風格化突出。

9. Human Pitch

簡介:這是一款概念性的音樂社交APP，用戶可以結(jié)交和參加跟自己志趣相同的社群，參考巴納姆效應，能夠通過聲線識別你所對應的特性，從而加入符合你特性的群組。

評價：這款APP立意十分有深度，作者關注于種族隔離的社會問題，用這種基于音樂和聲線的方式成為了隔離種族的新形式。作者希望通過這樣一個設計，以輕松而諷刺的方式。呼吁人們相互理解包容，和諧共存。

10. 韓熙載夜宴圖-故宮出品

簡介：南唐末年，朝廷重臣韓熙載為避免陷入政治的泥潭，故意沉溺于夜宴笙歌、不問世事。后主李煜心生疑問，派宮廷畫師顧閎中深夜?jié)撊腠n府，目識心記，畫下了不朽名作《夜宴圖》。

根據(jù)這幅院藏珍品，故宮博物院以專業(yè)的學術資料、豐富的媒體內(nèi)容及創(chuàng)新的交互美學，精心研發(fā)了《韓熙載夜宴圖》App。

評價：整個app的設計希望是一種沉浸式的，讓觀者能夠多角度解讀了解這幅名作，采用了手勢操作的方式進行一些頁面切換。設計用心，交互賞畫模式獨創(chuàng)極致。

總結(jié)

以上的10款音樂類APP設計風格各異，各具特色，包括播放器、音樂社交和音樂藝術鑒賞等形式。伯牙鼓琴，游魚出聽。音樂類APP迷人之處在于，可以將藝術、科技和體驗自然結(jié)合，從而將人文精神和技術達到和諧而統(tǒng)一。希望以上的作品帶給你靈感和啟發(fā)。
相關文章--《UI設計師大?？偨Y(jié)的引導頁設計方法，超實用！》