最近发现很多产品都在做设计改版。比如 有赞、ONES、神策、阿里云，他们都在调整自己的产品架构，改版之前的内容。在去分析的时候，发现他们的改版会存在一些共性，同时也会有不同的差异。为了让同学们能够理解它的改版目的、背景，我们尝试站在上帝视角，来分析他们的改版迭代思路，今天先来说说 ONES，聊聊它改版前后的差异，分析其设计的原因，以及对应的优劣。
也希望大家在阅读后，同学们尝试用到自己的产品当中，看看能否有借鉴的思路。
先说说为什么原则 ONES，因为其实在聊迭代思路的时候，我们很难说完全理解 他们团队 设计的原因，所以尽可能会选择自己的熟悉的产品进行分析。而我们在课程上会经常提起 ONES 自己认为还是对 ONES 比较了解，所以先拿它进行举例。
首先我们看下改版前后的对比
它一共会包含视觉的改版和交互的改版，我们就一点一点来分析。
视觉样式的改变
在 B 端产品当中，最为直观的改动就是视觉风格的变化。但是很多设计师做不好视觉设计，同时B 端产品的视觉探索也会非常局限。这也就导致很多设计师在改版时束手束脚，惧怕视觉上的调整。
而这一次 ONES 的改动就是将页面的视觉部分进行高度的整合，就降低页面的信息层级，并且也更符合目前的整体设计趋势（这不是我说的，是 Ant Design 的设计师说的）
从整体来看，其实就是将左侧的导航菜单由黑色变为白色，这样能够降低信息的阅读层级，使我们的注意力能够更聚集到右侧的内容区域，而不是左侧的导航部分。
并且在视觉层级上，用户的注意力能够更为清晰的停留在 层级 与 容器 当中使用，能够使行为触发的内容与自然阅读的内容更为合理的进行呈现。
关于页面层级的设计优化，这部分也是 Ant Design 5.0 优化的核心，你会发现这就是 B 端产品的整体大趋势，同时现在也会有越来越多的纯白风格的页面出现。
大家可以阅读我们之前的文章，里面其实讲到了对应的思路。
交互布局的改变
导航架构的改变
刚才提到的视觉风格的改版，其实到最后都会发现，视觉风格在为我们导航架构进行服务。在对导航架构的改版往往都是异常困难。因为它太过于重要，所以在导航的改版当中我们一定要考虑清楚目前的设计原则究竟是什么？
在对这一次的改版设计时，是想让导航 统一？拓展？效率？清晰？不同的设计原则，它所给出的解决方案都不太一样。并且只有确定好了目标，才能够保证后续的改版方向不会产生偏移。
比如 拓展 ，就能够保证我们在设计导航时，有更强的拓展性。在设计方案时就要尽可能的设计更具有拓展性的导航架构。
关于设计原则部分，建议大家可以查看 B 站视频，有我们详细的设计分享，这里就没办法做太多追述。不然又是一篇文章的量，不过如果你们特别想看，点赞、评论，也可以加更一期文章。
我目前分析 ONES 的整体改动思路，主要是围绕 清晰、效率 来展开的。
清晰
清晰是之前的 ONES 产品的整体结构信息量很大，在使用时会异常迷茫。
因为这个问题在之前 ONES 导航菜单上非常明显，我在写导航菜单的文章上也有提到。
在导航菜单上，首先整体的结构会分为 五个层级，也就把整体的导航菜单进行细碎的分割，显得整体的页面非常的散乱。
同时在导航描述上，存在大量冗余重复的描述，比如产品功能里面，统一使用 ONES 作为前缀；在配置处，统一使用 配置中心作为后缀。这些内容的存在，导致原本内容很多的导航菜单显得更加复杂。
并且大量英文的出现，收折过后的视觉呈现也不够友好，就注定在这个页面上我们会更加的迷茫。
然后在导航架构上，右侧的 搜索、新建 在功能层面其实是属于全局的功能，但是目前的左侧导航，则是呈现二级导航，本身是较为矛盾的。因此在设计上会有架构层面的问题。
有了这些问题，导航迭代过后使用起来会更为简单。因为清晰的设计方法，其实就是减少信息，做好分类。那究竟减少什么信息，如何进行对应数据的分类就会显得尤为重要。
在目前的整体方案当中，其实就是将整体的信息拆分为三部分，分别是：工具栏、导航菜单、辅助功能。
首先优化掉了对应部门信息，因为部门在这部分内容里面呈现的意义其实并不大，因此减少信息，不必展示。
其次改版之前的页面，顶部导航整体是用于呈现 二级导航的内容，但是这里却展示了 “搜索、通知” 等一些全局的功能，因此布局不合理。
优化后，首先将通知、搜索置顶，位于导航的顶部。同时将邀请成员，个人头像放置在左下方，这部分都是辅助的信息，因此弱化处理。
在功能模块部分，将之前英文导航优化，通过中文的方式呈现，很明显会更加的清晰。并且将之前两部分的功能模块进行合并，也能进行快速阅读。
合并的原因主要有两个方面：
1.导航菜单增多，呈现起来更为困难
2.自定义导航功能的加入，合并才是最优解，否则自定义的部分变化就会非常的大。
这两方面的内容，我们在下一章节 “效率” 时在着重讲解。
最后就是对应的辅助功能区域，也就是将之前使用频率较低的功能在这一部分呈现。这里着重说一下配置中心，设计师将之前不同功能模块的配置入口进行了整合，统一放在了一个入口。这样就减少了信息，同时 ONES 用户量本身也较为稳定，是一个较为成熟的 SaaS 产品了，因此很多时候用户不会高频使用配置，弱化也能理解。
毕竟需要减少信息，那减少那一部分其实就非常有学问。简单来讲就是 用户不关心的，用户使用率低的，来进行优化即可。
当然在这个改版的时候，我认为视觉的处理还是会存在一点点瑕疵。
就是在使用全白风格的时候，我们一定要注意投影的使用，表达清楚产品的一二级导航的层级关系，目前只是通过分割线来呈现感觉稍有不妥。并且这样的投影设计，很多时候会给我一个错觉：“顶部是一级导航，侧边是二级导航”。
如果我来设计，我会将其这样来进行调整。
当然调整后，会发现比较鸡肋，那我们也可以考虑去除二级导航的投影，增加纵向浅色分割线。
效率
效率，也就是用户的使用体验会更会更快、更迅速。
首先，效率大概率也意味着复杂。因为效率本身就是由各种快捷的方式来实现的，所以在去考虑效率时，首先要优先思考产品的用户群。
我们会将 B 端的用户群分为三类：新手用户、中级用户、专家用户。
而更多效率的工作其实是为了满足中级用户和专家用户的需求，并且在业务上也会有相同的思考。关于这部分我们会在 训练营课程里面详细讲到，这里就不再过多讨论。
ONES 产品的效率，主要体现在以下几个方面：
快捷键
ONES 首先这次改版，将搜索功能的优先级提的非常的高，甚至在工作台的顶部。其原因我猜测是新功能上线，并且优先级会很高。
因为在这次迭代的时候，发现搜索进行了全面的优化。其中会包含有普通的搜索功能，以及对应的高级搜索功能，它所对应的场景会有所不同。
普通搜索：基于常见的数据进行搜索，比如 工作项、页面、项目、页面组
高级搜索：还会包含其他的功能搜索，比如 知识库、文件、附件 等…
因此在这种项新功能的上限，并且也是用户最常使用的功能，可以考虑将搜索功能的优先级提高。同时优先级增高过后，对应就要思考怎样进行提效。
同时用户搜索一定是一个非常高频的操作，因此设计快捷键则会更为合理。关于快捷键，我之前写过一篇文章，感兴趣的小伙伴可以跳转查看。
不过对于快捷键，还是会存在一点问题，其实在快捷键的设计上，目前 ONES 选择的是 command + J，其实常见的搜索快捷键都未 command + K（这和程序员的搜索快捷键相同），我猜测和 BS 架构、CS 架构相关，在浏览器上设定会存在冲突的情况，在设定上会有些许不同。
快速访问项目
之前在使用 ONES 最头疼的便是项目的访问，之前的项目访问，我们需要点击 项目管理 – 选择对应项目 – 才能进入一个项目当中。
这个路径对于一个 项目管理型 软件很明显是不能接受的，因为进入项目一定是项目管理系统较为核心的操作。但这样三级路径，很明显不利于用户的访问。
当针对这样的问题时，ONES 给出了自己的解法，通过 hover 跳转到部分二级导航，这样能够快速选择。
但这个解决方案并不会展示全部项目，只会露出你已经置顶的项目，并且在置顶配置的功能上，能够在两个重要的入口进行呈现，来教育用户，尝试使用这个功能。
这个思路就是在提升产品的上限，也就是满足的更多是高频使用的 中级用户、专家用户的需求。
而且为什么这个思路我很认同，是因为在我们正常流程操作时，就能够对项目进行编辑，因为访问列表页，就必须要点击项目。在点击项目时会发现有一个新的五角星图标，好奇的用户一定会尝试点击。
同时当用户没有收藏时，也能通过改版前的流程进行使用。
其实这样的改版做法我曾经也在语雀当中见到过，同样都是通过收藏来减少层级，优化导航。只不过最终语雀是选择呈现在一级页面，而 ONES 则是二级页面。关于语雀的改版思路，大家可以在我的 B 站上查看详细的解释。
自定义导航
当有自定义导航的需求时，其实就是产品的架构实在太多，比如腾讯云、阿里云。
在 ONES 当中，它增加了应用中心，代表未来可能很多内容会出现在导航中，同时本身默认导航就会有 10 个，整体的数量是偏多的。
同时我们再分析 项目管理型 产品的特点，大多数的角色都是固定的，比如 测试人员，开发人员，设计人员，产品经理，每一个人都会有它关注的一部分功能。比如 设计人员就只会关心 项目管理、知识库，所以这种角色差异非常明显的情况，最简单的方式就是通过 自定义，将内容提供给用户，让其自行选择。
当然在使用下来，还是会对一个功能抱有一些疑惑，便是 功能新建（它不是全局新建，只能新建二级导航下的内容）
在使用时，对于新建按钮究竟能够新建什么，其实我是没有理解它的创建逻辑，要去理解的难度会有一些高。因此我在点击的时候都会小心翼翼，并且和左侧页面的新建功能的关系又是如何？使用下来整体就会比较困惑。
我们回过头来看，关于整个 B 端产品的导航趋势，其实和 ONES 的解决方式基本相同。视觉调整、交互调整，一个又一个小的迭代组成的。
很多时候 B 端产品的迭代就是这样一点一点推导出来，这次导航设计的迭代整体思路非常的棒，也建议同学们可以结合我花瓣当中旧版本的页面，结合起来看看他们的不同。（花瓣的截图是更老的版本），这样就能回顾一个产品更完整的生命周期。
ONES 的旧版本花瓣：https://huaban.com/boards/62313666
写这样的迭代分析，其实是真的像教会你们设计 B 端，也希望你有所收获~
我是 CE 青年，我们下篇文章再见~
本篇文章来源于微信公众号: CE青年Youthce
