怎么设计才能让一个音乐APP看起来够专业？

所有人都热爱音乐。尼采也曾说过：“没有音乐，生活就会是个错误。”所以，不用争辩，音乐已经是我们生活中不可分割的一个重要组成。

很难说现在到底有多少音乐类的APP、网站和服务，但是我们可以预见到的是，它会继续发展，设计师依然会持续不断地收到需求，为不同的音乐类的服务设计界面和体验。这也是为什么今天我们会专门撰文，来探讨音乐类产品的界面设计。

用户对于流媒体音乐类产品的预期

流媒体音乐类的产品旨在为用户提供全世界各地不同流派的音乐曲目，不论是收费还是免费，在移动端还是在桌面端，它们的功能往根上讲就是两个字：听歌。当然，不同的流媒体音乐服务都有各自的个性，独有的卖点，但是它们在基本的功能和特性上，仍然有着大量的相通的地方。

音乐在线和离线状态下的播放。现如今的音乐播放器大多都集成了在线音乐播放的功能，确保了用户可以在不下载音乐的情况下直接聆听享受。但是网络不会始终都那么顺畅，总会有断网离线的状况发生，这个时候，离线下载的音乐就显得很有必要了。

播放列表。流媒体音乐服务能够提供成千上万的音乐曲目，但是即使最狂热、涉猎最广泛的音乐爱好者也不会将它们听遍。播放列表是音乐播放器的核心组件之一，让用户能够按照喜好将音乐编组，按照顺序播放，应对不同的情况，贴合不同情绪下的聆听需求。

随机音乐。当用户习惯了甚至厌倦了播放列表的音乐之后，会希望随机播放一些曲目，随机音乐通常会基于用户的喜好，提供随机的、不重复的随机音乐。

电台频道。现如今的网络电台也已经有着非常细致的流派分类，这些电台音乐同样是流媒体，虽然现在来看略小众，但是内容相比单纯的音乐，会显得更加丰富一些，聆听音乐电台的用户也不在少数。

付费购买。并非所有的音乐都可以免费下载和聆听，付费购买音乐也是一项钢需。

均衡器。不同人对于音乐风格和效果的偏好各不相同，而不同的音乐风格在均衡器的调节之下也能产生更好的效果。

BeatSync App

UI设计

基于上面所述的用户基本需求，音乐类服务的APP和网站在UI和体验设计上，已经有了一套近乎标准的设计。

首页

绝大多数的数字产品通常都会有一个首页，每次用户打开应用的时候，都是从首页进去，然后开始用户历程。也有人将首页称为“主页（Main Page）”。首页为用户提供了进入APP和网页的起点。

音乐流媒体服务类产品通常还会包含诸如个人页面、播放列表、搜索页和音乐商店之类的区域。通常，最新、最流行的音乐和相关的新闻会在首页上呈现，有的还会添加用户推荐的音乐列表。

通常情况下，音乐应用的首页会采用简约的设计风格，推荐的音乐列表和专辑都会用相关的艺术家和专辑的封面，下面搭配相应的名称。这样能让用户搜索或者浏览更加便捷和美观。

个人页面

用户登录之后，就可以打开相应的个人页面。在个人页面中，通常会允许用户自定义头像甚至APP的风格，这样就能让他们拥有个性化的音乐体验。对于APP或者音乐服务本身而言，用户的口味、偏好都能够作为反哺产品的数据支撑，供开发人员使用。根据这些数据，音乐服务可以更好地为用户推荐音乐。

除此之外，个人帐号也是让产品拥有更强社交属性的基础，用户可以在网络社区中交流，在音乐下方评论和留言。

个人页面原则上应该同整个产品设计保持一致，尽量保持清晰和简约直观，所以需要控制个人页面中的信息量，否则会让人觉得复杂而不好用。导航的直观性对于整个产品同样重要，不要让用户花费时间去猜。

Echo app

搜索页

找新歌是许多音乐爱好者日常使用中最重要的需求之一。设计师需要确保搜索功能易用，尽量给用户留下好印象。搜索页帮助用户获取和过滤音乐，通过关键词和不同的排序方式来找到他们想要的特定音乐。通常而言，音乐类服务的搜索页中，每一首歌都有流派、艺术家、专辑和发布时间这些字段，用户能够通过这些字段的筛选更快找到他们想要的音乐。

播放列表页

很多音乐爱好者会为自己创建不同的音乐列表，它们营造不同的情绪，在不同的时间和场合拿来播放，发挥不同的作用。显然每个音乐服务都会为用户提供这样的功能。音乐播放列表在很多应用当中都长得差不多：歌曲名称是列表中最主要的字段，后面是歌手名称、乐队以及播放时长等。设计师在设计播放列表的时候，可以让用户自定义列表封面等。

播放器界面

使用音乐服务来听音乐，绝大多数时候是在和播放器界面打交道。播放器界面涵盖了播放音乐时候的绝大多数的操作，暂停、播放、上一首、下一首是最基本的操作，不同的音乐服务的播放界面当中，还可能会集成下载、收藏、更多信息等按钮。通常相关操作的按钮会置于屏幕的下半部分，甚至贴近底部，音乐专辑封面常常会置于界面上方。这个界面其实也是展示设计师创意的地方。

Music App

音乐订阅页

如果这一音乐服务还提供了关注艺术家、用户之间互相关注的功能的话，还可以考虑设计一个订阅页。在订阅页当中，用户能够看到哪些艺术家又发布了新专辑，哪些好友点赞了某一首歌，这些新闻或者新信息能够让音乐服务的社交属性更浓。设计师应该尽量让信息流简明清晰，让用户能够更好更快速地扫视。

设置和均衡器

每个应用都会有一个设置界面，但是音乐类的产品则会要求更多一些，除了一些基础的设定之外，音乐类的产品还需要根据用户的偏好设置均衡器。用户通常可以选择内置的流行、摇滚或者古典的风格，还能自定义均衡器中的每一个项目，根据自己的需求达到相应的调节效果。

音乐商店

正如同我们在前文所说的，并不是所有的音乐都是免费的，这样一来，音乐商店就派得上用场了。音乐商店和首页、搜索页当中的设计有许多互通的地方，比如最新上架的音乐的推荐，还有筛选和搜索的设计，都应该是一致或者类似的。

Singify App

音乐无处不在。对于创意工作者而言，音乐甚至是很多灵感的重要来源。趋势会不断的变化，但是音乐本身的价值甚至可能比我们现在所熟悉的许多设计更加持久。

【这些文章同样来自Tubik Studio】

1. 《游戏化设计中，任务和挑战是怎么发挥作用的》
2. 《游戏化设计的精髓是结合用户历程进行UX设计》
3. 《帮你理清创意的情绪板，是设计项目前期的利器》
4. 《超详细解读：UI导航设计不仅仅指的是导航栏》
5. 《在设计流程中，通过这6种方式来运用信息架构》
6. 《看似简单的几个动效，在APP中实现过程并不简单》

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com