关于音乐播放App(应用软件)的分析与重设计如何设计出漂亮的音乐播放界面

时间：2016-01-29 22:37:37 阅读：283 评论：0 收藏：0 [点我收藏+]

　　一直对无线交互很感兴趣，这次就来练练手~
　　本次分析评测基于iOS平台，选取了两款有代表性的音乐播放器，QQ音乐和豆瓣FM。由于这两款产品在web端就有着庞大的用户基础，有一定的用户粘性，手机端是web端的延伸，目标用户、信息架构、核心体验等等也都继承了web端的鲜明风格。这两款产品可以代两类表定位不同的音乐播放器。一种是大而全的，功能全面，可满足用户管理本地音乐、同步其他设备音乐、发现好音乐等多种需求(类似应用：百度ting、酷我音乐盒、iScrob)。一种是小而简的，操作简单，就像使用收音机一样，打开就听，不喜欢就换台(类似应用：虾米FM、Console.fm)。
　　QQ音乐
　　1、界面总览
技术分享

　　2、需求分析
　　目标用户：热爱音乐的普通青年，QQ产品的忠实用户。
　　用户需求：随时随地听音乐，没有wifi时可以听本地音乐，有wifi时可以在线听，遇到喜欢的歌曲可以提供下载，能同步其他设备上收藏的歌曲。
　　设计目标：提供播放本地音乐、账号同步、在线收听、音乐搜索等功能。
　　3、信息架构
　　QQ音乐从本地音乐、我的音乐、在线音乐、更多，这四个方面对信息进行整合。
技术分享

　　“本地音乐”可以从歌手和专辑的维度对本地音乐进行播放，也可以自建本地音乐的歌单，还可以从这里查找已经下载过的缓存歌曲。
　　“我的音乐”同步了QQ账号在各个设备上收藏的歌曲和建立的歌单，这种同步服务可以提高用户的粘度，培养用户及时登录的好习惯。为了增强社交属性，这里还有“点歌”的二级菜单，QQ用户可以为好友点歌，送给你的歌曲就会出现在这里。
　　“在线音乐”是发现好音乐的地方。其中的“电台”类似于“豆瓣FM”，可以随机收听不同主题的音乐，系统还可以根据用户的收藏和收听习惯来猜你喜欢。这里同时提供了新歌和热歌的榜单，帮助用户最快的了解音乐流行趋势。这里还有类似于虾米音乐的精选集，为用户精选出具有主题的好音乐。
　　“更多”里面则是整合了一些次要信息，包括个人账号、缓存设置、定时消息通知、软件信息。
　　4、页面布局
技术分享

　　类似于大多数基于iOS的app布局，QQ音乐的list页采用了列表式的布局，便于查找和扩展。主导航固定于屏幕底部，二级导航在上，左上角是统一的返回上一级按钮，右上角是正在播放的歌曲详情页，便于用户快速找到正在播放的音乐，进行停止、播放、收藏、下载、分享等操作。
技术分享

　　歌曲播放界面采取了全屏展示，最常用的播放/暂停、上一曲/下一曲、音量调节默认显示，当用户点击歌曲封面时，歌曲进度、播放模式、收藏、下载、分享按钮会显示出来，用户可以在这里进行相应操作。
　　5、手势操作
技术分享

　　对于歌曲的操作并不复杂，QQ音乐采用了上线滑动、左右滑动、单击的操作手势，大多是都是用户常用、显而易见的手势操作。只有在查看歌词的时候，用户需要向左划开专辑封面，图片向左下方划去，歌词出现，这一操作并不是很容易发现。
　　豆瓣FM
　　1、界面总览
技术分享

　　2、需求分析
　　目标用户：热爱音乐的文艺青年，豆瓣产品的忠实用户。
　　用户需求：像豆瓣FM一样，只要一打开，不用任何操作，就能播放那些我喜欢的文艺范儿歌曲。
　　设计目标：界面清爽、操作简单、推荐精准、缩短播放歌曲的路径。
　　3、信息架构
技术分享

　　豆瓣FM的信息架构要简单许多，层级浅、操作简单，只要打开电台，就会播放歌曲。用户可以滑动歌曲上方选择兆赫，也可以通过列表选择。豆瓣不会让用户费心的去选择要听那首歌，用户只要挑选想听的类别，豆瓣就会自动推荐。豆瓣希望用户可以“用心养电台”，根据用户长期的使用习惯，分析用户加心或选择不再播放的歌曲，推荐符合用户喜好的歌曲。
　　4、界面布局
技术分享

　　豆瓣FM的界面非常简单，打开应用既是歌曲播放界面，界面上只有喜欢、不在播放和下一曲的按钮。滑动歌曲上方可以选择赫兹，正在播放的歌曲会渐渐消失，新的歌曲会渐渐响起，过度很平缓。
　　因为豆瓣的定位是电台，想听就打开，不想听就关上，所以播放连暂停按钮都简化了。点击专辑时封面会翻转，显示歌曲的评分。
技术分享

　　点击左上角按钮可以进入分类选择歌曲的列表页，列表页分为私人兆赫和公共兆赫。私人兆赫是豆瓣通过用户习惯推荐的歌曲和用户加心收藏的歌曲，公共兆赫随即推荐具有一定主题的好歌。
　　点击右上角的设置按钮，设置以提醒消息的形式出现，这又为豆瓣节省了一个界面。所以豆瓣FM真正做到了极简，只有两个页面，歌曲播放页和列表页。
技术分享

　　豆瓣FM的界面还采取了拟物化的设计隐喻，如未播放音乐时的背景就像收音机的喇叭，专辑背面的细节，做的也和真的CD背面一样。
　　音乐播放器的重设计
　　1、产品定位和信息架构
　　本次音乐播放器的重设计，定位于功能全面、可以解决用户多种场景下需求的音乐播放器，可以在线发现好音乐、对歌曲进行收藏和下载、管理和播放本地音乐、搜索音乐等。
　　通过对现有产品的分析，发现信息架构层级较深、推荐音乐内容较多。从用户的需求来看，无目的收听音乐时，用户希望有好的音乐可以推荐给自己，看看最近流行的音乐是什么。有目的收听音乐时，用户希望可以快速找到自己收藏过的音乐或本地音乐，或对想听的歌曲进行搜索。在分析现有产品时发现，很多app提供了各种电台、精选集、排行榜等令人眼花缭乱的精选推荐，让用户迷茫的同时，也使产品变得臃肿。
　　在重新定义产品功能时，希望合并功能类似的推荐，如电台和精选集，可以从主题和音乐人的不同维度进行推荐。同时希望扁平化信息架构，缩短用户操作路径。将不常使用的次要操作放在更多中，突出主要任务。以下是对信息架构进行的整理：
技术分享

　　2、产品原型设计
　　在对产品进行梳理之后，制作原型如下：
技术分享

　　参照信息架构，将产品一级导航置于屏幕底部，二级导航置于顶部
。扁平化的信息架构，除精选集外，没有二级页面。用户在一级导航间进行切换时，默认会显示第一个tab页，也就是用户最常用的页面，此时只需要一次点击，即可看到音乐列表。
技术分享

　　现有的音乐播放器，通常在点击歌曲后会进入新页面播放歌曲。如果用户想在浏览其他页面后想关闭音乐，需要再次进入播放页面，增加了页面深度。
　　可以将播放页面的操作和信息，如暂停、上一曲/下一曲、收藏、下载和播放进度，整合在比较小的区域内，置于音乐播放器列表页下部，方便随时进行操作。如用户想要查看歌词，可以向上滑动播放器，即可展开歌词。
技术分享

　　当用户看惯了点击浮出操作层时，也可以换换另一种方式。向右滑动歌曲，歌曲的下一层便会出现收藏、下载的操作。当然，第一次使用的时候需要新手引导一下。
　　微信可以摇一摇，音乐播放器当然也可以。当听到不喜欢的歌曲时，摇一摇就可以换首歌听。
技术分享

　　在Web界面中使用下拉菜单，是节省空间增加扩展性的好办法，手机端也可以借鉴下。对于不常用的次要操作，可以在点击时滑出。
　　搜索这项功能在音乐app中往往处于有点尴尬的位置，放在哪个页面好呢?如果放在某一个页面上，那就只能在这个页面内容的内部进行搜索，放在所有页面上又太啰嗦，单独有个搜索页面又没必要，毕竟不是常用功能。出于对搜索功能并不常用的考虑，这次将搜索放在了更多中，纵向滑出后还可以横向滑出搜索框，可以对线上和本地的全部内容进行全局搜索。
技术分享