一个月前（2017.03.08）收到网易云音乐 4.0.0 的更新推送，新版本更新了首页的设计，可以看到设计风格上有一些转变，功能上增加了短视频和精选文章（去年开始内容创业和短视频这两个关键词很热）。接下来我们按照界面从上到下浏览的顺序一一分析，有分析的不对的地方请指出，一起讨论。

搜索栏形状修改

1. 控件形状

—

搜索栏形状由圆角矩形改成了两边圆的“胶囊”形状。圆角矩形的形状稍显呆板，胶囊形状看起来更显年轻灵动。看到越来越多的产品把按钮设计成胶囊形状，这更符合用户年轻化的趋势。APP 内其他页面如 Tabbar 上“朋友”顶部的“附近”、“动态”切换、“本地音乐”的搜索栏等其他控件和一些按钮也做了统一的修改。

Banner 尺寸增大

2. Banner尺寸

—

Banner的尺寸由750*276px改成了750*292px，加高了16px。在不影响首屏内容展示的情况下，加大运营Banner的展示比重，也给Banner设计更大的空间。

炎彬很喜欢云音乐的Banner设计风格，构图、排版、配色、字体处理都很恰当，情绪表达到位，视觉层次丰富。每次看到好看的Banner都想多看一会儿。

三个功能图标优化

3. 功能图标视觉优化

—

图标的风格由单纯的线形改成了线形与色块结合的形式。过去单纯的剪影图标逐渐开始审美疲劳，审美的进化带来设计风格上的进化，图标设计逐渐开始加入插画、色块、渐变颜色的使用，有更多的设计的细节。

“每日歌曲推荐”的图标由抽象的单一数字改成了日历结合数字的图形，每日推荐功能的含义表达更明确了，很棒的优化。

内容栏目布局调整

4. 内容栏目布局

—

内容栏目是首页主要展示的内容，布局上的变化反映了网易云音乐设计思路的转变。

栏目标题右侧去掉了“更多”按钮，在标题后加箭头作为栏目入口的按钮，版式上更加简洁。去除了标题前的图标，重新用回以前的矩形色块，色块与下方的歌单封面图左对齐。

标题与封面图的间距由20px改成了30px，将内容与栏目标题的层次区分开，也作为封面图之间间距减小后补充的留白。

歌单的样式上增大了封面图的尺寸，封面图紧贴屏幕边缘，减小封面图间距，更符合以突出内容为原则的设计趋势。

上下两行内容之间的分割线消失了

5. 去除内容分割线

—

新版本去除了独家放送栏目上下两行内容的分割线，用图片留白区分了两块内容。过去有一些页面太多的分割线让人抓狂，这个细节是很 Cool 的改动，但是炎彬建议只在这些内容本身就有明显区块区分的地方用留白分割，不用分割线，其他如单纯文本的表单页面还是老老实实用分割线。

新增精选栏目

6. 新增精选专栏栏目

—

内容创业这个词去年开始一直很热，云音乐也开始了整合音乐周边资讯内容。炎彬在用云音乐听歌的时候，听到喜欢的歌会去搜索歌曲或歌手相关的资讯，这个需求看来可以在产品里面解决了。另外在“朋友” Tab 页，也加入了短视频功能。祝云音乐能利用已有的品牌和内容优势，在音乐资讯领域有所建树。

底部按钮样式统一

7. 底部按钮

—

页面底部调整栏目顺序的按钮样式也做对应调整，由圆角矩形改为胶囊形状，APP整体统一。

总结

—

新版的 UI 在内容上没有大的改变，仅增加了精选专栏功能。页面布局有调整，图片贴屏幕边缘充分利用屏幕增大了图片展示面积使得内容更加突出。减少了 UI 的装饰，优化了过去体验不完善的地方，符合更新的设计方向。产品的设计一致性依旧保持得很棒。

炎彬很爱网易云音乐，也祝愿网易云音乐产品做得越来越好，业务也越来越好！