主要观点总结
本文主要介绍了网易云音乐Mac客户端的更新内容，包括全局框架的拆解、响应式的应用以及框架规划的简单性对后续交互、响应、设计实现的影响。文章还提到了B端产品设计的启示和对比分析方法。
关键观点总结
关键观点1: 网易云音乐Mac客户端的更新
文章介绍了网易云音乐在今年的重大改动，包括桌面端和移动端的精简，回归歌曲推荐的基本盘。对全局框架进行了拆解，包括侧边栏、顶栏、内容区域、底部播放器等模块。
关键观点2: 响应式的应用分析
文章分析了新版网易云音乐的响应式应用，包括窗口尺寸规则、全局组件的规则，以及适配断点的逻辑等。
关键观点3: B端产品设计的启示
文章通过网易云音乐的更新，给出了B端产品设计的启示，包括框架规划的重要性，简单框架对后续交互、响应、设计的实现的优势，以及追求复杂视觉效果的弊端。
关键观点4: 对比分析
文章提到可能以网易云音乐与其他播放器如QQ音乐、酷狗、Apple Music、Spotify等进行对比分析，以更深刻地理解框架对交互、设计的影响。
关键观点5: 课程介绍
文章最后介绍了B端产品设计全能班的新一期招生信息，课程旨在帮助解决工作项目真实问题，或者帮助拥有独立优秀的B端作品集入行或跳槽。
正文
最近网易团队终于在百忙之中抽出时间，更新了 Mac 客户端，让 Mac 用户可以拥有这款“口碑爆棚”的 APP 了，真的感觉好尊贵啊……
网易云音乐在今年的改动比较大，不管是移动端还是桌面端，都做了大量的精简，把一些花哨的功能弱化，回归歌曲推荐的基本盘。
在桌面端，新版本的设计对比之前还是提升了不少，所以可以借这个机会对它的界面框架结构做个简单的梳理，对 B 端的设计也会有很好的启发。
全局框架拆解
我们先从全局框架入手，主要页面包含侧边栏、顶栏、内容区域、底部播放器四个模块。
左侧的导航首先做了优化，增加了 LOGO，移除头像。下方的选项也做了调整，因为我的内容数不少，所以折叠，下方创建、收藏的歌单默认也折叠。折叠后的高度小于整个窗口的最小高度（没法再拖小），目的是为了在默认环境下不出现滚动条，让视觉更干净。
而顶部栏上，移除二级页面选项，替换成搜索，选项也做过精简，主页不放，其它页面则放到内容区域中。
在页面结构上，返回的逻辑也比以前更简单，只有一个返回按钮，只要你进行跳转，就可以用返回按钮回到上一页。如果跳转的次数过多，则可以直接点击左侧导航回到基础的页面，约等于新版模糊了页面的层级关系，只是跳转到不同页面而已。
而老版本则对页面的层级做了比较多余的处理，所以会出现两级返回，下方的返回用于返回上一级页面。
接着分析框架中的浮层元素，播放面板（覆盖页面）、下拉菜单、
抽屉、
独立浮层。
播放面板
抽屉
虽然这套框架看起来简单，但不代表拿到需求时看到那么多模块和页面类型会这么构思。这次的改版显然是狠下心做出简化，让业务为交互的流畅度让步。
响应式的应用
新版也增加了比较细致的响应式（感觉还是半成品），作为交互框架的一部分，我们也对它做个简单的分析。
首先确认窗口的尺寸规则，最小的宽、高尺寸为 1056px*752px。原则上没有最大尺寸，但是内容区域的版心宽度有限制，最大约为 1490px，居中显示。
最小窗口：
最大版心：
虽然没有很精细的去测算，但是内容区域内的响应式应该没有很严谨的使用栅格系统，只使用了间距+断点的基础规则，左右页边距40，模块间距20。
模块的宽度 = （内容区域宽 - 页边距80 - 20*间距数）/ 内容数。
在两个断点之间放大宽度，则内容会等比进行放大，如下图所示。
以推荐页为例，断点应该包含了4级，应用了四种布局的变化。
而在精选页，断点则只有3个规格（下方最新音乐就两种模式）。
所以断点的规则并没有在所有页面中统一，所以不会在页面层应用断点规则，比如我们平时看的 AntD 的定义方式。
