UI設(shè)計師教你作音樂App

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

1. Intimate

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

工具：Mockplus、Sketch

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

2. Listen

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

工具：Mockplus、Sketch

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

3. Zero Player

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

工具：Mockplus、Photoshop

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

4. TEMPO

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

工具：Mockplus、Sketch

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

5. Re/ Machine Learning & AI Music Player

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

工具：Photoshop, Adobe XD, Apple XCode

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

6. Musician Hub. Design Conept

工具：Photoshop、Adobe After Effects、Adobe Illustrator

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

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

7. Spotify Redesign | Mobile & Desktop

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

工具：Photoshop，Adobe Illustrator，Adobe After Effects

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

8. Melody

簡介：作者設(shè)計這款A(yù)PP的宗旨是讓用戶能夠在忙碌的生活中，能夠碎片化地欣賞音樂。

工具：Photoshop，Adobe Illustrator，Adobe After Effects

評價：界面清新潔凈，風(fēng)格化突出。

9. Human Pitch

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

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

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

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

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

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

總結(jié)

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