从网易云音乐客户端更新，浅析交互设计思路

最近网易团队终于在百忙之中抽出时间，更新了 Mac 客户端，让 Mac 用户可以拥有这款“口碑爆棚”的 APP 了，真的感觉好尊贵啊……

网易云音乐在今年的改动比较大，不管是移动端还是桌面端，都做了大量的精简，把一些花哨的功能弱化，回归歌曲推荐的基本盘。

在桌面端，新版本的设计对比之前还是提升了不少，所以可以借这个机会对它的界面框架结构做个简单的梳理，对 B 端的设计也会有很好的启发。

一、全局框架拆解

我们先从全局框架入手，主要页面包含侧边栏、顶栏、内容区域、底部播放器四个模块。

左侧的导航首先做了优化，增加了 LOGO，移除头像。下方的选项也做了调整，因为我的内容数不少，所以折叠，下方创建、收藏的歌单默认也折叠。折叠后的高度小于整个窗口的最小高度（没法再拖小），目的是为了在默认环境下不出现滚动条，让视觉更干净。

而顶部栏上，移除二级页面选项，替换成搜索，选项也做过精简，主页不放，其它页面则放到内容区域中。

在页面结构上，返回的逻辑也比以前更简单，只有一个返回按钮，只要你进行跳转，就可以用返回按钮回到上一页。如果跳转的次数过多，则可以直接点击左侧导航回到基础的页面，约等于新版模糊了页面的层级关系，只是跳转到不同页面而已。

而老版本则对页面的层级做了比较多余的处理，所以会出现两级返回，下方的返回用于返回上一级页面。

接着分析框架中的浮层元素，播放面板（覆盖页面）、下拉菜单、抽屉、独立浮层。

播放面板

下拉菜单

抽屉

独立浮层

它们的层级可以总结为：

虽然这套框架看起来简单，但不代表拿到需求时看到那么多模块和页面类型会这么构思。这次的改版显然是狠下心做出简化，让业务为交互的流畅度让步。

二、响应式的应用

新版也增加了比较细致的响应式（感觉还是半成品），作为交互框架的一部分，我们也对它做个简单的分析。

首先确认窗口的尺寸规则，最小的宽、高尺寸为 1056px*752px。原则上没有最大尺寸，但是内容区域的版心宽度有限制，最大约为 1490px，居中显示。

最小窗口：

最大版心：

接着分析窗口内的全局组件，规则如下：

1. 侧边栏：左对齐，宽度固定，高度自适应
2. 顶部栏：上对齐，宽度自适应，高度固定
3. 内容区域：右对齐，宽度自适应，高度自适应
4. 播放栏：下对齐，宽度自适应，高度固定
5. 悬浮层：根据内容排版，尺寸固定

虽然没有很精细的去测算，但是内容区域内的响应式应该没有很严谨的使用栅格系统，只使用了间距+断点的基础规则，左右页边距 40，模块间距 20。

模块的宽度 = （内容区域宽 - 页边距 80 - 20*间距数）/ 内容数。

在两个断点之间放大宽度，则内容会等比进行放大，如下图所示。

以推荐页为例，断点应该包含了 4 级，应用了四种布局的变化。

而在精选页，断点则只有 3 个规格（下方最新音乐就两种模式）。

所以断点的规则并没有在所有页面中统一，所以不会在页面层应用断点规则，比如我们平时看的 AntD 的定义方式。

所以适配断点的逻辑，应该是每个组件根据自己的情况独立设置的。比如在播放面板里，就没有断点，拟物唱盘区域和歌词区域宽度自适应，但一个是按比例缩放，另一个宽度自适应。

因为新版本内容整体都做简化，所以每个组件做响应式的逻辑就变得更简单，整体的完成度也就更高，统一性更好。

越简单的框架规划，对后续的交互、响应、设计的实现就越有利，设计的专业性往往是来自“稳定”而不是复杂的样式，在 B 端中同理，追求复杂的视觉效果“熵增”也就越大，越难控制，小问题也就越多。

结尾

大家可以自己下网易云仔细体验，除此以外，还可以下载同类的 QQ 音乐、酷狗、Apple Music、Spotify 等播放器进行对比，可以对框架对交互、设计的影响有更深刻的认识。

下篇可能就以这个主题做个对比分析，看大家反馈如何了。

欢迎关注作者的微信公众号：「超人的电话亭」