设计初衷

酷我音乐重度使用者

网页端体验糟糕

重新规划、设计达到简洁易用的目的

---

已知缺陷

首先来看一下酷我默认首页的整体布局：

酷我音乐首页全貌 线框图及功能展示

从线框图上来看是十分规整的信息罗列式的网页，优点是强迫症的福音看起来整齐划一，但是缺点是犯了网页设计的大忌，没有视觉焦点，大篇幅扫过去很难找到所需要的信息。

通过进一步的分析主要有以下三大缺点：

1.信息缺失严重

2.缺少主次

3.逻辑不明

---

信息缺失严重

首页轮播

作为一个音乐网站 首页居然只提供了『歌单』和『歌手』两种筛选音乐的入口简直不可思议；

而且主banner的内容不知所云，可以看出酷我在大力推广其手机端产品，但是其做法是在每个轮播上都加了半透明遮罩提示下载客户端，这种做法无异于丢了夫人又折兵：

一是让本该引起用户兴趣的图片信息被遮盖了很大一部分，二是这种洗脑传销式的推广很容易让新用户产生反感，不但没有增加app端用户反而流失掉一部分web端用户。

缺少主次

歌单和歌手

从线框图上来看『歌单』和『歌手』两个栏目的排版几乎没有区别，易形成视觉疲劳，眼神根本没办法聚焦，让人不知所措。

逻辑不明

从菜单栏的分块来看『首页』、『榜单』和『歌手』及『下载客户端』为最重要的入口，后面的美女秀、酷我耳机和vip会员都是盈利型内容的小入口。

但是仔细思考下就会发现，首页这个入口的设置是没有意义的，因为在目前的首页上几乎没有什么有效信息，每个入口都是可以通过菜单栏进行进入的。

再来虽然把不同重要性的层级用字重和颜色相区分，但是次要层级所占面积却比主要层级还要大，排布集中且密集，造成了让所有按钮都不够突出，让用户容易忽视所有选项的尴尬局面。

把同一层级排布过长有个危险因素是——在用户第一眼看到『美女秀』却不敢兴趣时，会判断接下来同样排版同一层级的内容都为类似内容，所以很容易把『VIP会员』这一有效信息忽略掉。

更多服务下拉菜单

而且『更多服务』和『用户』与密集的推广小入口纠缠在一起，其重要性关系难以判断，信息传达率下降。

同时酷我又把『游戏』、『专辑』、『分类』和『MV』这类经常使用的入口都放入『更多服务』中，给用户增加了很多的成本。『更多服务』和上述几个栏目的关系完全被曲解。

在用户登录状态下点击用户名称或头像，用户期待应该是能直接进入『我的音乐』之类的页面，然而点击下拉菜单居然只有退出的选项！那到哪里去找喜欢收藏过的音乐呢？这种明显不符合用户预期的做法很容易造成用户的混乱。

搜索栏

接下来搜索栏放到了菜单栏最后，所占面积又小，而且采用同色系的暗底几乎太不显眼。输入后联想显示很快，但显示结果是一个拥挤没有任何主次的下拉菜单。

输入「Test」很快会显示出各种结果，但显示结果的是一个狭长拥挤、主次模糊的下拉菜单。既不能判断用户输入的关键字是歌手，也不能判断乐曲还是专辑名。在实际操作中，尽管已经输入歌手三个字中的两个字，还是没有精准定位需求内容。

用户做出搜索动机时，第一需求是快速找到目标。用户采用搜索，说明对目标有至少大概的了解，密集的文字明显不利于用户对信息进行筛选。

首页歌手栏目悬停

接下来是首页仅有的两个直接入口中的『歌手』栏目，卡片表面标有歌手姓名、代表作、歌曲数和喜爱数。

当鼠标悬停时，出现『热门单曲』列表，尴尬的是——再次点击后直接跳转到播放点击位置歌曲的页面，如果用户做出了从歌手入口进行选择的时候，大部分情况是出于对歌手本身的兴趣，歌手的热门单曲只充当一个辅助标签的作用比较合理。把用户期待的查看全部放在了最不容易引起视觉聚焦的左上角，增加了用户的误触率，引起用户反感。

可以把『播放全部』和『查看全部』调换一下位置，这样即使误触在第二层级还可以进行播放全部的操作。

点击进『查看全部』后 标签

先不说『查看全部』这个词表意不明，给用户带来了很多误导。比方说是查看全部的歌曲？还是查看全部的信息？查看全部的歌手？跳转进歌手主页后，原设计将『娱乐』与『歌曲』、『专辑』等并列为同一层级的标签，这是十分没有必要的，毕竟没人把一个音乐网站当成谷歌用，最后的『图片』更是多此一举。

歌曲列表

相似歌手一直存在在左侧，有点干扰可以尝试下沉重要层级，采取悬停出现或者出现在页面末端。

高亮按钮停在免费下载歌曲有点古怪，不符合使用习惯，常见流程应该是试听—喜欢／下载，同时增加按热度播放/新歌播放等。

MV页

整行整行的MV截图密集排列在一起，截图质量又不高，没有条理的信息堆砌，行距让人透不过气，难以一眼找到寻找到所需要的信息。我很怀疑是否会有用户去集中注意力阅读使用此版块。可以将这个模块和歌曲合并，增加mv标示，通过筛选来区分。

改进措施

现有信息划分

我重新梳理了原有界面的流程图，把专辑分类MV等重要的部分层级提高，把美女秀酷我耳机之类的盈利产品层级降低，同时增加了主要盈利窗口VIP的。再设计的流程图如下：

再设计后的信息划分 再设计的菜单栏

减少主菜单栏上罗列的入口，把用户兴趣不是很高的『美女秀』『 酷我耳机』等撤下来，把黄金位置让给『下载』和『VIP』这类转换率更高的内容。同时在『下载』和『VIP』左上角增加小标示，吸引用户点击。

把榜单歌手之类下移到展开的二级菜单栏，扁平化的结构有助于用户进行选择。

再设计后的主banner和subbanner

保留了原有sub banner与主banner的层级区分，鉴于sub banner是直接引起购买行为的入口，所以刻意强调了其重要性，放在视觉中心聚焦。

把主banner设计的更有跳跃感，露出后面的banner内容，吸引用户翻页。

再设计的榜单

采用了色块区分不同的榜单，用icon代替文字，结构清晰。

（偷懒复制了歌单，没有一个个地打，不影响整体效果233333）

再设计后的歌单

区分上面的排行榜采用无线式分割，增加类似于拿取CD盘一样的动效增加趣味性，颜色高亮显示目前播放的曲目。

特别提醒的是把『换一批』放在了大标题下而不是结尾『查看更多』的上方，一来是为了与『查看更多』相区分，二来是精准用户通常在菜单栏就能自主完成所要寻找的歌曲，而看到网页中段的用户一般目的都不是特别清晰，这一类用户往往不需要看完整个歌单就能判断是不是所预想的歌单内容，所以把『换一批』放在顶部更利于这一类人群的使用。

再设计后的搜索栏

划分出了歌曲、歌手和专辑区域，精准用户清晰一目了然。

再设计后的歌手模块

我们都知道越靠近底部的网页浏览量会越少，所以不仅要控制网页的内容也要控制好网页的整体长度。

通常能浏览到『歌手』这一模块的用户就是我们所说的没有明确目的随机用户，这一模块通过酷我音乐自带算法随机出现八个歌手，换一批按钮可以帮助用户进行选择，直到看到其感兴趣的内容。

再设计后的底部信息

通常能一直浏览到网页底部的都是忠实度较高的用户，在底部栏增加了『下载客户端』和『推广产品』的模块同城能回报以较高的转化率。

结语

整体效果：

写在最后，第一次写这种大篇幅地再设计文章，，边思考边修改，同时对比了很多同类网站感觉收获很多。

酷我音乐是我比较早接触的音乐网站，陪伴我度过了很多时间。但是由于后期不停地闪退无奈卸载了，现在把自己做的再设计放在这里，也算是我的初心吧~

此次再设计的设计原则是：不做纯艺术，尽量在盈利项目与纯粹的音乐欣赏中找到一个平衡点。突出层级关系，抓住用户的视觉焦点。

在简书的处女文，欢迎大家吐槽拍砖~

PS:最近在找杭州的UI/UX工作，欢迎大家把工作机会拍向我~ 

邮箱：xiaodeyoubox@163.com