背景

虾米音乐移动端今年3月改版后，整体采用大网格，使呼吸感更强，采用大标题突出核心功能，相比前版本，整体来说更轻量简洁，极大提高了用户易用性，但是仍存在：网格之间的间距过大或不统一，使视觉上各板块排版混乱粗糙、交互上不符合用户认知和功能重复等问题。

重设计原则

以自己作为用户的使用体验为基础，从用户角度出发，以以下几点为设计原则，优化APP以达到更简洁易用的目的。

简单高效

清晰一致

专注沉浸

响应

重设计页面

用思维导图整理了一下虾米的主要功能，橙色字为本次重设计页面~

虾米功能概览

搜索中重设计的页面太多，故单独作为一个设计版块，同时基于 查看他人主页 和 编辑个人信息 均为个人主页相关，将其合并为一个版块，即所有重设计版块如下图：

重设计板块概览

一、发现页

发现页详细的功能划分如下

发现页

1.乐库

乐库原界面如下：

乐库原界面

问题分析

正如开头提到的，官方改版后的虾米采用了大网格设计，使APP整体变得轻量，但网格过大（如风格流派、场景心情、艺人三个板块都有的大”banner“）、间距过宽、字号过大、图片上文字的显示样式等也使整个界面显得粗糙混乱，容易给人一种设计师没有走心的感觉。

解决方案

根据清晰一致的设计原则：

重新调整乐库界面下网格间距、字体间距，

缩小各板块的“banner”高度，

采用透明和渐变的底板，使图片上的文字更清晰美观，

将版块 风格大赏 移至最下方，使风格流派、场景心情、艺人的排序，与乐库开头风格流派、场景心情、艺人的数量描述排序一致。

优化后的效果图如下

乐库优化后

2.推荐

发现页-推荐原界面如下：（超长图预警~~）

推荐原界面

问题分析

界面中内容多，且网格样式不一，每个版块中的banner时大时小；看点头条、趴间一起听两个版块，跟发现页的另两个界面看点、趴间重复；有的歌单封面为圆角矩形，有的又是轻拟物；整个界面繁杂混乱，即使用户刚开始尝试屡清思绪往下滑动，也会很快感到迷惑烦躁，失去耐心。

解决方案

为了使用和在滑动此类长界面时，必须保证信息清晰简洁，和谐统一，以确保用户不会轻易迷失，沉浸其中。因此我做了一下调整：

去除看点头条、趴间一起听两个版块，减少用户认知负担；

必听歌单、新歌新碟、原创寻光三个版块统一采取圆角正方形的封面样式，热门MV采用圆角长方形样式；

采用透明的底板，使图片上的文字更清晰美观；

调整界面下网格间距、字体间距、字号。

优化后的效果图如下

推荐优化后

二、搜索页

搜索页的功能详细划分如下：

1.听歌识曲

搜索栏和听歌识曲原来样式：

听歌识曲原界面

问题分析

听歌识曲作为搜索的一种，放在搜索栏右端符合定位，但图标过小识别性不强，且位于搜索栏内易感扰用户认知。

解决方案

可将听歌识曲按钮移到搜索栏外置于其右方并调整大小加强其可见性。

优化后的效果图如下

听歌识曲优化后

2.热门和历史

热门搜索和搜索历史的原界面如下：

热门和搜索原界面

问题分析

垃圾箱图标为删除全部搜索历史，长按词条可删除每条搜索历史，但没有明确的操作指引。

解决方案

搜索历史改为列表式排版，为每条历史提供明确的删除按钮；

将更为内容排版更为简短的热门搜索置于上方，提高界面易用性

取消热门搜索线框内的填充色，和不必要的更多按钮使界面更干脆利落；

调整字体样式和间距使APP风格统一化；

优化后的效果图如下

热门和搜索优化后

3.键入不完整词条时（如“陈奕”）

当搜索栏内键入不完整词条时，APP将自动加载用户可能需要的词条：

键入不完整词条时原界面

自动加载用户可能需要的词条，此时较大的行距和字号能使信息清晰易见，但也会让页面显得粗糙。因此对界面进行了适当字号和行距缩小，用分隔线将每条信息隔开，使加载信息美观有条理。

优化后的效果图如下

键入不完整词条时优化后

4.键入完整词条时（如”陈奕迅“）

与键入不完整词条时一样，虾米将会自动加载用户可能需要的词条，如果没有用户需要的内容，用户需手动点击搜索，才能进入全部搜索结果，再根据分类找到目标词条。

键入完整词条时原界面

一般来说，更多的用户需要从全部搜索结果中才能找到目标词条，因此在用户输入完整词条时，自动跳转至全部搜索结果，此时用户可以直接根据分类选到目标词条，同时每个类别中将用户最可能需要的条目置于最上方，如此减少了操作步骤和过滤了不必要信息，更符合用户期待。

同时在视觉上对全部搜索结果界面做了适当调整：

缩小搜素栏下方banner的大小，适当留白，使界面更轻量；

取消不必要的专辑封面在搜索结果中的显示，使信息更清晰；

歌曲类目每个词条的信息排布次序：歌名+音质，歌手名-专辑名，电影/电视等剧名；

用分隔线将词条隔开，调整字体样式等使加载信息更美观有条理。

优化后的效果图如下

搜索完整词条时优化后

三、个人主页

重设计的功能详细划分如下：

个人主页

1.查看他人主页-音乐

原界面如下：

他人的主页-音乐原界面

问题分析

图标意义不明：关注按钮易被误以为是添加好友请求，降低了用户的点击欲望和操作时的安全感；

操作繁琐：右上方更多按钮只有举办功能；共同喜好用户需要点击两次才可真正查看，不符合用户期待，且增加了操作成本；

风格不统一：共同爱好、最近常听、最近收藏的封面图为高纯度高明度的渐变，与APP的简洁轻量风有所违背；

界面混乱：与其它界面一样，此界面也存在不同版块的间距、版块与子类别的间距不一致等使整体略显混乱的问题。

解决方案

将关注图标中原来的+号改成了星号，更符合用户理解；

举报按钮替代更多按钮；共同爱好的类别在主页即可查看，点击类别查看详细内容，减少用户操作；

采用半透明的橙色系封面图，使APP风格更统一

对页面的布局排版、字体大小和间距、个人资料封面高度和透明度等做了调整，使画面更和谐统一、具有层次感。

优化后的效果图如下

他人主页-音乐优化后

2.查看他人主页-动态

原界面如下

他人主页-动态原界面

问题分析

除了网格间距过宽、图标大小不一致等使界面略粗糙等，还存在功能重复的问题：关注图标3次重复（界面右上方、每条动态右上方和更多按钮内）、分享图标重复（每条动态更多按钮内和右下方）。

解决方案

去掉更多按钮和更多按钮内的关注分享功能，仅保留举报；

每条动态右下角的点赞头像取消，以昵称的形式列举点赞的关注者和关注者中点赞的人数；

将点赞和评论、分享数移至各自按钮下方显示，使信息显示更简洁高效；

对布局、字体排版作调整，使界面统一明了。

优化后的效果图如下

他人主页-动态优化后

3.编辑个人信息

原界面如下

编辑个人信息原界面

问题分析

在交互上，界面中的返回即保存，用户修改个人资料后，想要保存，却找不到明确的保存按钮，并且信息一经修改则不能撤销，容易感到迷惑烦躁，不符合用户逻辑。

解决方案

根据响应和专注沉浸的设计原则，需要添加保存按钮；若用户未保存就点击返回，弹出对话框询问“保存还是取消修改”；

另在视觉上，使昵称与其它项的字体大小颜色等保持一致，并重新调整各项填写内容的位置/对齐方式/字号/颜色等，使信息更简单明了，用户看起来更舒适。

优化后的效果图如下

编辑个人信息优化后

总结与反思

也许说得不够专业，但作为一个音乐APP重度使用者，我觉得曲库的多少和用户体验的好坏缺一不可。用户体验好但歌单里的歌灰了一半，总让人想咆哮“Are you kidding me?”~~如果曲库足够的情况下，APP的沉浸式体验是留住用户，并宣传自己品牌的最好时机和方法，而界面的风格统一、及时的操作响应、信息的清晰有条理都是为了使用户可以更专注地沉浸在APP和音乐的世界里，忘记功能辨别和操作等诸如此类的事。希望这次自己有做到，也衷心期待虾米能越做越好~

本来还有一个”我的音乐“的再设计的，但意外地已经花了不少时间，还要赶着做自己的作品集，只能留到下次了~（本人对创建的歌单中最新添加的歌曲排在最下方这个默认设置感到非常酸爽T~T）

本次重设计均为个人观点，若有觉得违和的地方，欢迎留意~~