在上下班的路上,聽幾首自己喜歡的音樂來打發無聊的等公交車和地鐵的時間是現代年輕人的常態。音樂作為最能鼓動人心的「語言」,也成為了人們在網際網路生活裡佔比例最高的消費活動之一,一款好看,功能又全面的音樂APP往往最打動用戶的心。
在當下的網際網路音樂服務中,真正算得上是音樂管理軟體的是Apple Music。視覺設計精緻,全平臺統一,在歐美和古典音樂上資源非常豐富,是一流的音樂流媒體服務產品,也是筆者最常用的軟體之一。最近也正好關注到,國民原型設計工具Mockplus舉辦了一場以音樂APP為主題的原型設計大賽,其中也不乏有許多出眾的設計作品。藉此時機,為大家整理和分享10款優秀的音樂APP設計,滿足你視覺、聽覺上的完美體驗。
1. Intimate
瀏覽地址:https://run.mockplus.cn/AzuXw/index.html
簡介:
Intimate是一款非常輕量的APP,去除繁雜的功能,打造專業化、個性化、年輕化。打開APP時,會親切的詢問用戶當前的心情狀態,來自動篩選符合當前心情的音樂,實現智能推送,成為你用戶真正懂你的密友。
工具:Mockplus、Sketch
評價:
這款播放器非常簡潔,去除了繁雜的功能,操作簡單易用,滿足基本訴求的基礎上,交互方式新穎,整體流程清晰。配色上明豔大氣,頗具國際範兒。
2. Listen
瀏覽地址:https://run.mockplus.cn/AVmsj/index.html
簡介:
Listen是一種潮流音樂生活方式。為沉溺在勞碌中的上班族帶來新的輕鬆與潮流。更具獨特的交互體驗,讓歌曲更能貼近心靈的深處。通過場景、情感等,智能推薦適合當下的專屬歌曲,讓用戶不用在歌海中苦苦尋覓自己的歸處。
工具:Mockplus、Sketch
評價:
這款原型的時候會讓人眼前一亮,風格非常一致,界面整齊,顏色非常靚麗。同時,界面切換採用上下切換的模式也是與眾不同。該原型可以根據用戶選擇的心情來推薦音樂。產品基於情緒和場景定義產品並進行信息架構搭建,具有新意,視覺寫實風與繪畫風混搭,交互上不落窠臼,聚焦於用戶體驗。
3. Zero Player
瀏覽地址:https://run.mockplus.cn/HnCNS/index.html
簡介:
Zero player是一款能夠根據個人喜好,暗號時代,類型等個性化標籤,去提供定製化音樂服務的音樂應用。一切從一個問題開始:「什麼是好的音樂服務」,作者認為好的音樂服務是用自己最喜歡的音樂裝點你的生活。摒除複雜,讓一切從Zero開始吧。
工具:Mockplus、Photoshop
評價:
配色舒心,簡練大方。個性化的界面設置,別具一格的格局,貫徹整個APP的呼吸按鈕升華了體驗,呈現給用戶強烈的生命力。
4. TEMPO
瀏覽地址:https://run.mockplus.cn/mhKpd/index.html
簡介:
TEMPO是一款基於運動場景的音樂App,每個人運動時都有自己的節奏,每段音樂也有自己的節奏,使用者可以在40-180BPM範圍選擇音樂來適應當下運動的速度,或者某一運動對應的適宜節奏速度,當他們調整好合適的節奏速度時,可以在界面內任意切換同速率不同的藝術家的音樂,避免了傳統聽歌方式速度不統一而影響運動的尷尬情形,解決運動時聽音樂不好選的痛點,在一定程度上激勵和提升運動表現,不同於一般的音樂播放器的分類方式,TEMPO的音樂是按照運動的種類及音樂的節奏速度劃分的,曲庫是精準篩選的運動音樂。
工具:Mockplus、Sketch
評價:
TEMPO 最創新的地方,是在健身這個場景進行了深入挖掘,針對特定的 BPM 匹配特定節奏的音樂,提升體驗和健身效果。此外 TEMPO 的基礎部分也做得不錯,首頁展示了熱搜詞、運營 banner 和推薦曲目信息流,保證了內容豐富程度和分發效率。UI 上採用深色主題,藍綠漸變的品牌色貫穿各處,有自己的特色。
5. Re/ Machine Learning & AI Music Player
瀏覽地址:https://www.behance.net/gallery/59378095/Re-Machine-Learning-AI-Music-Player
簡介:
電子音樂改變了用戶欣賞音樂的方式,純粹逐利販賣訂閱的音樂APP捆綁了用戶的選擇,靜態的播放列表一成不變。Re是一款機器自動學習,利用人工智慧技術的音樂播放器,能夠智能地推送讓你驚喜的音樂。
工具:Photoshop, Adobe XD, Apple XCode
評價:
這款音樂播放器背後有一套完整的智能識別引擎,設計純粹澄淨,盡力降低用戶在使用中的幹擾因素,使用中機器還會進一步學習,深層次了解用戶需求。
6. Musician Hub. Design Conept
瀏覽地址:https://www.behance.net/gallery/59026917/Musician-Hub-Design-Concept
工具:Photoshop、Adobe After Effects、Adobe Illustrator
簡介:
這款APP功能聚焦於音樂人尋找自己想要的樂隊,建立帳號後就會在首頁呈現完整的樂手信息,通過內置的樂器篩選器還能精準尋找自己喜好的不同對應流派。
評價:
整體信息架構簡單清晰,仍然保持了完整的功能性。
7. Spotify Redesign | Mobile & Desktop
瀏覽地址:https://www.behance.net/gallery/48938545/Spotify-Redesign-Mobile-Desktop
簡介:
作者對Spotify進行了出色的再設計,整體色系採用紅灰兩色,增強了現代感和高貴感。後臺也會通過你的使用習慣智能推送用戶的偏好音樂。
工具:Photoshop,Adobe Illustrator,Adobe After Effects
評價:
風格大膽,在一款成熟的音樂APP下仍然做出了突破和創新。
8. Melody
瀏覽地址:https://www.behance.net/gallery/56387011/Melody-Music-app
簡介:
作者設計這款APP的宗旨是讓用戶能夠在忙碌的生活中,能夠碎片化地欣賞音樂。
工具:Photoshop,Adobe Illustrator,Adobe After Effects
評價:
界面清新潔淨,風格化突出。
9. Human Pitch
瀏覽地址:https://www.behance.net/gallery/37918137/The-Human-Pitch-Mobile-App
簡介:
這是一款概念性的音樂社交APP,用戶可以結交和參加跟自己志趣相同的社群,參考巴納姆效應,能夠通過聲線識別你所對應的特性,從而加入符合你特性的群組。
評價:
這款APP立意十分有深度,作者關注於種族隔離的社會問題,用這種基於音樂和聲線的方式成為了隔離種族的新形式。作者希望通過這樣一個設計,以輕鬆而諷刺的方式。呼籲人們相互理解包容,和諧共存。
10. 韓熙載夜宴圖-故宮出品
瀏覽地址:https://www.behance.net/gallery/22662667/-The-Night-Revels-of-Han-Xizai
簡介:
南唐末年,朝廷重臣韓熙載為避免陷入政治的泥潭,故意沉溺於夜宴笙歌、不問世事。後主李煜心生疑問,派宮廷畫師顧閎中深夜潛入韓府,目識心記,畫下了不朽名作《夜宴圖》。
根據這幅院藏珍品,故宮博物院以專業的學術資料、豐富的媒體內容及創新的交互美學,精心研發了《韓熙載夜宴圖》App。
評價:
整個app的設計希望是一種沉浸式的,讓觀者能夠多角度解讀了解這幅名作,採用了手勢操作的方式進行一些頁面切換。設計用心,交互賞畫模式獨創極致。
總結
以上的10款音樂類APP設計風格各異,各具特色,包括播放器、音樂社交和音樂藝術鑑賞等形式。伯牙鼓琴,遊魚出聽。音樂類APP迷人之處在於,可以將藝術、科技和體驗自然結合,從而將人文精神和技術達到和諧而統一。希望以上的作品帶給你靈感和啟發。
掃描二維碼,關注 「摹客」 微信公眾號