在上下班的路上,听几首自己喜欢的音乐来打发无聊的等公交车和地铁的时间是现代年轻人的常态。音乐作为最能鼓动人心的“语言”,也成为了人们在互联网生活里占比例最高的消费活动之一,一款好看,功能又全面的音乐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迷人之处在于,可以将艺术、科技和体验自然结合,从而将人文精神和技术达到和谐而统一。希望以上的作品带给你灵感和启发。