Xiami Redesign
注一：本文本着「写完一篇文章再砍掉一半」的原则，不必要的解释和说明都没有详细展开。
注二：本文所有图文（除了网页截图）皆为原创，版权完全归我本人所有。如有未经允许的「任何部分或全部」的转载、抄袭、盗用，全部默认为：您已同意并接受给我本人 3 万元。本文「发布」时间：2015 年 01 月 04 号 15:57。
注三：我做了一个小视频来演示这一次的重设计，请选择超清观看（视频存在一定色差）：http://v.youku.com/v_show/id_XOTE0MDA0NTQw.html
注四：这是概念稿，图片看不清请点击大图。
背景初衷
- 虾米音乐重度使用者
- 网页端体验糟糕
- 重新规划、设计达到简洁易用的目的
已知缺陷
首先来看一下虾米默认首页的整体布局：
默认首页全貌
我做了一个线框图标出各个功能区域以简要概述：
线框图及功能指示
可以看到：
- 排版密杂
- 逻辑不明
- 主次不明
1. 排版密杂
完整线框图
左侧区域中整三排专辑，光是看我画的线框图就可以看出缺陷，更何况实际中色块填满了各式各样的专辑封面。
右侧区域更是有七个部分混杂在一起。打开首页眼睛有三秒的时间不知道到底该往哪儿看。
2. 逻辑不明
左侧区域线框图
左侧区域最上面是占位面积最大的「Main Banner」，下方是「猜你喜欢」，紧接着是一个「Sub Banner」，而后又是「新碟首发」和「虾米精选集」两排专辑。
左侧区域实际面貌
注意观察不难发现，Main Banner 和 Sub Banner 之间关系并不明确，同样是为引人注目的活动，看不出明显的种类不同。让人难免质疑是否是因为连着三排专辑太过紧密，而不得已划分出一个附带「分割线」作用的区域来解决这个问题。
右侧区域「个人信息 + 他人动态」
右侧区域剩余部分
右侧区域中，七个部分实在太长，以至于我得分两次截图。
七个部分也没有明确顺承关系，「个人信息 + 关注者动态」接着的竟然是「举报」（难道是公安强制要求的么...），然后是「心情选歌」冒出来，接着才是跟「个人」有关系的「音乐成就」和「今日任务」。
采用「固定定位」的「XX 好友正在听歌」和「推荐直播间」
再下方的「推荐直播间」和使用「固定定位」的「XX 好友正在听歌」本应属于同一种类的直播互动，却被划分地好似不相干。
3. 主次不明
「猜你喜欢」、「新碟首发」和「虾米精选」
左侧部分「猜你喜欢」、「新碟首发」和「虾米精选」完全采用一样的大小和排版，整整 15 张参差不齐的专辑封面，再加上又长又多的细小文字，无从分清主次，让人不知所措。
「大虾推荐」
而下方整整一大块的「大虾推荐」的排版更是糟糕至极，整行整行的文字密集排列在一起，控件按钮狭小难点，行距让人透不过气。我很怀疑是否会有用户去集中注意力阅读使用此版块。
再来看看右侧：
「个人信息」中的「成就」
隔很远的下方「音乐成就」
个人信息中已有的「成就」在下方又以一个小 banner 单独显示出来，而两者之间隔了很远，显得十分随便且分散注意力。
下方是我画的线框图：
右侧线框图
顺势看下来，完全无法分辨主次关系，十分混乱。最下部的「小组更新」完全是滥竽充数，很不必要的存在。
这是底部的内容：
底部全貌
用户个人自定义的「我的订阅」在整个网页的最下方，仅高于网站信息说明和相关链接，让人无法理解。并且网站信息说明占的面积和「我的订阅」几乎一样大。
接着吐槽一下顶部。
这是首页的「菜单栏」，默认处于「发现音乐」：
首页菜单栏
点击「我的音乐」后
点击右侧「我的音乐」会进入到「我的音乐库」而不是「个人主页」，并不是很符合直觉和用户的期待。
再右侧的「精选集」、「电台」等四项放置的很欠虑和仓促，试图通过字体大小和浮雕的表现样式与前两者做出主次之分，但却造成了让「所有按钮」都不够突出，让用户容易忽视所有选项的尴尬局面。
紧接着是 345×30 px 的搜索栏，搜索栏的地位无需多言。
搜索结果全貌
输入「Test」很快会显示出各种结果，但显示结果的是一个狭长拥挤、主次模糊的矩形。
用户做出搜索动机时，第一需求是快速找到目标。但顶部最显眼的位置却是一个 290×90 px 的 App 推广位。接着才是传统的「艺人」、「歌曲」、「专辑」等需求内容。用户采用搜索，说明对目标有至少大概的了解，故「艺人」和「专辑」中的图片信息很多余，这么小的图片除了让人眼瞎之外就是挤占宝贵面积了。
紧接着下面还有「精选集」、「用户」、「标签」，甚至有「更多」，以至于想看到全部搜索结果需要向下滑动。并且这部分并没和上面三个最重要的标签做出主次区分。
菜单栏最右侧是「通知」和「个人选项」。
点击「通知」后
点开「通知」后，上方是一个分页栏，第一个还叫「通知」，实则是关注艺人的动态，但这种内容在下方的「他人动态」中也有，所以这是重复且不必要的。第二个「站内信」才是体现「通知」特点之一的标签，但当你点击它的时候，它竟然会跳转到一个叫做「我的收件箱」的新页面。该页面杂乱无比，标记已读也十分困难。但若不标记，角标便会永远显示在那里，令人沮丧。
点击「站内信」后
第三个是「关注」，当你点击它同样会跳转到一个叫「我的粉丝」的新页面。「关注」和「粉丝」这两者的关系完全被曲解，让人扶额。第四个「私信」同上，并不会停留在原页面显示信息。
「通知」是需要点击才会展开的，而「通知」旁边的「个人」却只需鼠标悬停即会自动展开，如若点击了，则会跳转到新界面。这是让人极其费解的逻辑。
Hover 后
点击「个人」和悬停后展开的「个人主页」都会跳转到同一个新页面。接着的「关注 + 粉丝」已经在下方「个人资料」的 Banner 中显示了，又是一个重复多余的信息。
着手开始
设计原则：
- 简洁直观
- 功能性佳
- 操作便利
下面是我的再设计：
菜单栏 - 再设计
最左侧虾米的 logo 带上 slogan 显得十分臃肿，将其精简。而整个菜单栏使用出挑的橘色很累人，故使用反色。去掉多余的阴影和高光，仅保留必需的元素，突出重点。
搜索结果去掉 App 推广位（移到左侧明显位置），仅保留满足「听歌需求」的大三项。搜索结果中使用三种近似色以暗示不同的种类，突出层次。
搜索结果 - 再设计
「通知」里面只显示「站内信」和「私信」，并不默认跳转到新页面。
通知全貌 - 再设计
之前的「个人选项」有太多的重复内容，再设计时将其全部去除，能小则小（很不常用），并且与「通知」的交互逻辑一致。
个人选项全貌 - 再设计
下面进行页面布局的再设计。
在这一块，我的设计原则就是两个字：
专注。
要达到专注，需要以下条件：
- 无干扰
- 简练明确
- 直接有力（与上一条有区别）
而专注可以带来：
- 沉浸式体验（无干扰）
- 信息有效接收（简练明确）
- 明确需求（直接有力）
按照这些思路，进行首页的重设计。虾米本身首页的逻辑并不明确，我按照它首页所呈现的功能重新划分安排：
信息划分
如图，所有信息重新被分为四个板块。明确引导用户，使其快速得到所需信息。将信息划分后，不但能让所有人一眼分辨主次，也能无干扰地呈现给用户，是较为高效的信息接收方式。
思考一下，用户打开网页听歌，想要的并不是爆炸般的信息。在奔着目标去的情况下，可能只需要「搜索」和「我的音乐」；而在无目的的情况下，则是希望快速进入「听歌」状态。
因此，我分级了两种情况下需要的信息：
目标分级
综上所述，我决定使用类似 Stream 的形式进行重设计，让用户最大限度的沉浸在当前信息中。首先是 banner：
Banner
将最大的 banner 提升至最高处，与屏幕等宽。下方放置 tab bar。再下方为虾米的算法推荐，同时可以查看个人收藏的曲库：
今日推荐
个人音乐库
猜你喜欢：
猜你喜欢
接着是「虾米精选」和「大虾直播」。由于空间所限且二者重要性并没有达到分开展示的程度，故将两者放置在同一区域，在标题处暗示切换：
大虾直播
最后是底部网站信息，做了部分精简和提亮：
底部信息
除了主页，在其他页面使用精简版的信息：
精简版 - 底部信息
整个网页的效果图：
主页效果图
这样，当用户打开网页，得到的是已经被安排好的信息。用户在足够专注的情况下高效的接收信息，而不是被乱糟糟的网页所干扰：在看似信息充分展示的网页上无法吸收且不赏心悦目。
按照同样的想法，重新设计了「好友动态」。最顶部放置个人信息，交代「今日任务」、「关注粉丝」、「播发次数」等互动信息。
个人信息
下方 timeline 同时包含了关注的「用户」和「艺人」，用一个小巧的 icon 来区分他们：
用户
艺人
整体效果：
Timeline
接下来是「艺人页面」和「个人主页」。依旧秉承之前的设计原则，「专注」。
虾米目前的艺人档案如图所示：
艺人档案
是一个混合布局，有纵两栏，还有底部横两栏，所有信息都挤成了一团，颇具上世纪的怀念风格。
将不必要的信息精简，只保留最容易让人进入「愉悦听歌」状态的信息：
艺人档案 - 再设计
延续之前的风格，超大图的无边框延伸能对用户进行较为有效的引导和教育。很多信息不是用户需要，只是你觉得用户需要。用户需要的只是「听歌」，并且是「愉悦的」。
依次还有「热门歌曲」、「用户评论」：
热门歌曲 - 原
热门歌曲 - 再设计
将歌曲缩至为 5 首，牺牲了信息但却增加了视觉享受和信息的有效接受度。
热门评论 - 原
热门评论 - 再设计
整体效果：
Artist
接着是「个人主页」，虾米目前的个人页面嘈杂凌乱，属于东拼西凑的类型，并没有进行合理准确的布局，这是目前的头部：
个人主页 - 头部
自定义背景只有官方提供的几个土掉渣的可供选择，全部可以起到良好的干扰信息的作用。
再设计：
个人主页（头部）- 再设计
目前的个人动态只是一个基础的表格：
个人动态
个人动态 - 再设计
纵列太过占空间，采用横向的方式展现，加了虚线以便视觉连贯。
同样，个人主页的最近收听、收藏歌曲、专辑、艺人等信息全部不知所云：
...
再设计
照旧精简为 5 首提高视觉性，将原本的两层结构缩减至一层结构，节省空间的同时便于信息的有效接受，更加专注，且愉悦。
整体效果：
Profile
结语
这次的再设计前后耗费的时间比预想的长很多，看似简单的布局着实经过了我自己长时间的取舍，现在再看，这一次的稿子顶多算是所谓的「概念稿」吧。
因为国内大环境的浮躁，短期内不会出现这样的页面。用户们也很难享受到安静专注的音乐服务，哪怕是收费的。
同时，这次很多之前的设想都没时间再去做，眼下有着更重要的东西去学习，所以就到这儿啦。
非常庆幸您能读到这儿 : )
我做了一个小视频来演示这一次的重设计，请选择超清观看（视频存在一定色差）：http://v.youku.com/v_show/id_XOTE0MDA0NTQw.html
