回顾飞书管理后台的更新，了解一个B端产品的发展历程
前言
如何了解一款产品是如何发展的？
我从 19 年到 23 年一直在关注飞书，4 年的变化，看到了我们作为设计师，在一款业务不断发展的产品、日益庞大的产品线中，它是如何进行设计的优化。
今天我们会结合 4 年产品的竞品截图，通过图片的方式来讲解飞书的交互更新。
并且我也是深度使用用户，也尝试揣测每一个改版背后设计师有哪些思考~
小 Tips：今天我们主要说的是飞书管理后台，和飞书的客户端无关，这里为了方便描述，就以飞书代替。
一、初代：第一版是如何设计的？
我记得第一次使用飞书是我司的产品想要寻找新的平台上架，那时候正是飞书刚刚面市商业化，我们老板去参加了飞书内部的无限大会，会议回来后就准备将我们产品上线到飞书，从那时开始我就对它有了个基础的了解。所以我是被迫的~
1、设计特点
在初代版本当中，飞书的设计其实十分有个性，因为当时很少看到如此设计的管理后台。
卡片内容区域：将飞书的内容区域变为一个圆角的卡片，这种做法即觉得很时髦（当时确实没见过），同时又感觉很不妥，看上去品牌调性不够严谨，果然后面这个方案就被优化了。证明刚开始一个产品问世，也不是做得非常的完美~
高饱和度的配色：整体颜色还是以高饱和度为主，无论是 图标 或者是 整体设计，颜色都用的十分靓丽，充斥着大量的 红、橙、黄、绿、紫，这也给人一种不够严谨的视觉形象。
全局导航：这是一个非常新颖的交互，当我们点击右上角的全局导航过后，会展开对应所有的导航信息，按照设计师的结构进行安排，这样我们就能预览所有的导航内容。
这种做法当时觉得十分奇特，我也反复使用，但整体的使用感受不佳，因为我的导航信息所有都在左侧，而我要使用全局导航反而在右侧，不太符合使用习惯，后面你会发现这个功能也被砍掉了。
页面区分：页面的区分是整体设计非常重要的一环， 第一版本的飞书主要是通过分割线+投影来解决，你就会发现整体的页面分割不够明确，感觉像分了又没有完全分，也就导致页面当中很难聚焦，用户总是在漫无目的地不停寻找。
2、整体感受
通过初代的设计你会发现，即使是飞书在第一个版本的时候做得也不算特别好，并且还会有很多优化的空间，因此我们自己在实际的项目当中，刚开始主要还是以快速产出为主，不要有太多顾虑，完美主义也会有很多不完美的情况，就留在后续进行调整。
二、过渡：业务发展是如何设计的
这次管理后台的迭代我记得是在2020年前后，那时候正是疫情的高峰期，也就导致了协同办公类的软件迎来了发展的黄金时期。而之前设计当中的很多问题，都在这一个时候勉强解决。
1、设计特点
前后台风格统一：在之前的飞书当中，你会发现 管理后台与桌面端 非常割裂，感觉像是两个产品。而现在通过统一的品牌色，尽可能将它们俩拉到同一起，看上去才像是一个统一的管理后台。
布局调整：在整体的交互结构上，做了相应的优化。比如之前的 tabs 与 标题 在整体导航的顶部，感觉其与内容毫无关联，现在的设计将标题下放，更适合大多数产品的使用场景。
面包屑的出现：从截图上我们其实能看到，这个时期的导航菜单已经非常多了，同时层级也会特别的深，因此在设计上通过面包屑来进行优化，先解决目前的燃眉之急，等后续产品业务发展成熟后再统一进行优化。
2、整体感受
这一时期很明显的能够感受到飞书就是在调整过渡，一方面业务发展十分迅速，需要响应；另一方面知道设计存在问题，但是没有太多精力，无法进行大改。这时候就会将用户反馈的所有问题记录下来，站在设计的角度思考方案可能就是我们应该做的。
所以有的时候我们目前的方案哪怕有些瑕疵并不要紧，更重要的是如何解决这些瑕疵，汇总记录，等待时机。（毕竟研发资源很难争取……）
三、确定：明确的设计思路
这次改动应该是在 2021 年，明确了未来设计的方向，开始进行大刀阔斧的改动。首先这一时期的飞书产品线急剧增加，据我了解就会有 「考勤、OKR、招聘、绩效、打卡」等多个产品线需要独立的管理后台，因此需要提供一个统一的设计方案，来将这些产品线的风格统一。
1、设计特点
纯白风格：内容部分主要是以纯白风格为主，同时 导航、功能 等辅助信息使用灰色进行呈现，这样我们可以更为聚焦。对比前两个版本发现确实要清晰很多。
降低饱和度：对比之前的设计方案，你会发现目前的设计整体降低了页面的饱和度，同时也明确的品牌的主题色 蓝色，其他颜色进行辅助，这样设计上更为明确，哪些内容为重点一目了然。
其实这种风格是值得很多设计师借鉴的，因为现在有太多设计师产出的内容过于视觉，导致和整个品牌调性不相符，就会发现你的设计稿其实挺好，但就是不适合我们产品。
框架设计更清晰：这时候的内容与结构就会更为清晰，整体的白色突出的是内容部分，我们可以将内容完整的凸显出来。
2、整体感受
这一阶段其实已经非常完整，设计风格上没什么可挑剔的，同时交互结构上没有进行大的调整，更多是将 常用/新加 的功能进行呈现，比如 帮助中心、配置任务 等，都是为了满足特定的业务场景设计的。
同时由于产品业务功能较多，你会发现他们提供了一个查看全部的按钮，用于一些 低频 隐藏功能的展示，在导航上尽可能的优化用户的使用体验。
整体来说这次改版比较成功，后面也会有很多产品前仆后继的采取这种风格形式，流行了一段时间。
四、优化：基于业务再优化
就在前几天，飞书又进行了设计调整，从这一次改版发现 业务层面 还是有一些问题亟待解决，产品导航过多需要优化，看看飞书它的做法。
1、设计特点
导航优化：在之前的版本当中，一级导航菜单有 20+ 个，同时还有会很多其他产品线的管理后台，也就导致飞书管理后台非常的散乱，经常会出现来回不停的跳转。
面对这种情况，之前是采取隐藏+全部导航的思路，但是现如今已经不太能够解决这样的问题，同时飞书的很多产品都需要单独独立的配置项，因此采取页面的拆分，将导航分为 企业管理 与 产品设置。
企业管理为产品的基础配置；产品设置则为对于附属产品的设置配置，这样就能让用户更为清晰的理解导航。
最后说说，面对导航如此之多，即使再自身的设计师来了也只能增加层级进行优化。木有太多灵丹妙药~
视觉调整：因为导航层级的增加，也就导致现在需要凸显顶部导航部分，所以将之前的灰色调整为白色。但感觉目前这个方案理解的难度依然较大，在座的同学们也可以思考一下能否有其他的解决方案。
2、整体感受
这次飞书将多条产品线打通，满足我能够在一个管理后台里，去配置多个产品的业务。
其实这个问题我在之前体验飞书招聘时就发现，这样就能避免产品之前的割裂感，同时统一的交互在后续的 功能业务面市时，也能够快速的产出和响应。
这次的迭代由于有动画的效果，以及新颖的新手引导，整体还是感受还是十分不错。你会发现设计是没有一个终点，我们会根据业务的情况进行设计上的调整。而我们能做的，就是根据一次次的业务要求，去做出合适的设计。
五、总结：我的观察日记
这其实就是我对于一个产品四年的持续观察，虽然自己没有切身经历设计需求，但是一次次看到它的迭代，分析它这样设计的原因，仿佛自己也在项目当中。
从飞书的设计当中我们也可以了解到，关注一个产品就要不断的持续留意产品动向，了解它在此过程当中的每一次调整与改动，分析这个设计师的所思所想，这或许就是喜欢一个行业就会这样的持续去关注。
希望大家都有一个自己的日记，写写自己未来观察的内容。
作者
CE青年，微信公众号：CE青年。专注B端设计领域，一个2B行业的2B设计师。
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
