2023年回顾飞书管理后台的更新了解一个B端产品的发展历程

回顾飞书管理后台的更新，了解一个B端产品的发展历程class="size-fullwp-image-903815aligncenter"src="/wp/2023/03/NpyX7oYBVCHunOII90Po.jpg"alt=""/>

前言

如何了解一款产品是如何进展的？

我从19年到23年始终在关注飞书，4年的变化，看到了我们作为设计师，在一款业务不断进展的产品、日益浩大的产品线中，它是如何进行设计的优化。

今日我们会结合4年产品的竞品截图，通过图片的方式来讲解飞书的交互更新。

并且我也是深度使用用户，也尝试揣测每一个改版背后设计师有哪些思索~

小Tips：今日我们主要说的是飞书管理后台，和飞书的客户端无关，这里为了便利描述，就以飞书代替。

一、初代：第一版是如何设计的？

我记得第一次使用飞书是我司的产品想要查找新的平台上架，那时候正是飞书刚刚面市商业化，我们老板去参与了飞书内部的无限大会，会议回来后就预备将我们产品上线到飞书，从那时开头我就对它有了个基础的了解。所以我是被迫的~

1、设计特点

在初代版本当中，飞书的设计其实非常有共性，由于当时很少看到如此设计的管理后台。

卡片内容区域：将飞书的内容区域变为一个圆角的卡片，这种做法即觉得很时髦（当时的确没见过），同时又感觉很不妥，看上去品牌调性不够严谨，果真后面这个方案就被优化了。证明刚开头一个产品问世，也不是做得特别的完善~

高饱和度的配色：整体颜色还是以高饱和度为主，无论是图标或者是整体设计，颜色都用的非常靓丽，充斥着大量的红、橙、黄、绿、紫，这也给人一种不够严谨的视觉形象。

全局导航：这是一个特别新奇的交互，当我们点击右上角的全局导航过后，会绽开对应全部的导航信息，根据设计师的结构进行支配，这样我们就能预览全部的导航内容。

这种做法当时觉得非常奇怪，我也反复使用，但整体的使用感受不佳，由于我的导航信息全部都在左侧，而我要使用全局导航反而在右侧，不太符合使用习惯，后面你会发觉这个功能也被砍掉了。

页面区分：页面的区分是整体设计特别重要的一环，第一版本的飞书主要是通过分割线+投影来解决，你就会发觉整体的页面分割不够明确，感觉像分了又没有完全分，也就导致页面当中很难聚焦，用户总是在漫无目的地不停查找。

2、整体感受

通过初代的设计你会发觉，即使是飞书在第一个版本的时候做得也不算特殊好，并且还会有许多优化的空间，因此我们自己在实际的项目当中，刚开头主要还是以快速产出为主，不要有太多顾虑，完善主义也会有许多不完善的状况，就留在后续进行调整。

二、过渡：业务进展是如何设计的

这次管理后台的迭代我记得是在2022年前后，那时候正是疫情的高峰期，也就导致了协同办公类的软件迎来了进展的黄金时期。而之前设计当中的许多问题，都在这一个时候牵强解决。

1、设计特点

前后台风格统一：在之前的飞书当中，你会发觉管理后台与桌面端特别割裂，感觉像是两个产品。而现在通过统一的品牌色，尽可能将它们俩拉到同一起，看上去才像是一个统一的管理后台。

布局调整：在整体的交互结构上，做了相应的优化。比如之前的tabs与标题在整体导航的顶部，感觉其与内容毫无关联，现在的设计将标题下放，更适合大多数产品的使用场景。

面包屑的消失：从截图上我们其实能看到，这个时期的导航菜单已经特别多了，同时层级也会特殊的深，因此在设计上通过面包屑来进行优化，先解决目前的燃眉之急，等后续产品业务进展成熟后再统一进行优化。

2、整体感受

这一时期很明显的能够感受到飞书就是在调整过渡，一方面业务进展非常快速，需要响应；另一方面知道设计存在问题，但是没有太多精力，无法进行大改。这时候就会将用户反馈的全部问题记录下来，站在设计的角度思索方案可能就是我们应当做的。

所以有的时候我们目前的方案哪怕有些瑕疵并不要紧，更重要的是如何解决这些瑕疵，汇总记录，等待时机。（究竟研发资源很难争取）

三、确定：明确的设计思路

这次改动应当是在2022年，明确了将来设计的方向，开头进行大刀阔斧的改动。首先这一时期的飞书产品线急剧增加，据我了解就会有「考勤、OKR、聘请、绩效、打卡」等多个产品线需要独立的管理后台，因此需要供应一个统一的设计方案，来将这些产品线的风格统一。

1、设计特点

纯白风格：内容部分主要是以纯白风格为主，同时导航、功能等帮助信息使用灰色进行呈现，这样我们可以更为聚焦。对比前两个版本发觉的确要清楚许多。

降低饱和度：对比之前的设计方案，你会发觉目前的设计整体降低了页面的饱和度，同时也明确的品牌的主题色蓝色，其他颜色进行帮助，这样设计上更为明确，哪些内容为重点一目了然。

其实这种风格是值得许多设计师借鉴的，由于现在有太多设计师产出的内容过于视觉，导致和整个品牌调性不相符，就会发觉你的设计稿其实挺好，但就是不适合我们产品。

框架设计更清楚：这时候的内容与结构就会更为清楚，整体的白色突出的是内容部分，我们可以将内容完整的凸显出来。

2、整体感受

这一阶段其实已经特别完整，设计风格上没什么可挑剔的，同时交互结构上没有进行大的调整，更多是将常用/新加的功能进行呈现，比如关心中心、配置任务等，都是为了满意特定的业务场景设计的。

同时由于产品业务功能较多，你会发觉他们供应了一个查看全部的按钮，用于一些低频隐蔽功能的展现，在导航上尽可能的优化用户的使用体验。

整体来说这次改版比较胜利，后面也会有许多产品前仆后继的实行这种风格形式，流行了一段时间。

四、优化：基于业务再优化

就在前几天，飞书又进行了设计调整，从这一次改版发觉业务层面还是有一些问题亟待解决，产品导航过多需要优化，看看飞书它的做法。

1、设计特点

导航优化：在之前的版本当中，一级导航菜单有20+个，同时还有会许多其他产品线的管理后台，也就导致飞书管理后台特别的散乱，常常会消失来回不停的跳转。

面对这种状况，之前是实行隐蔽+全部导航的思路，但是现如今已经不太能够解决这样的问题，同时飞书的许多产品都需要单独独立的配置项，因此实行页面的拆分，将导航分为企业管理与产品设置。

企业管理为产品的基础配置；产品设置则为对于附属产品的设置配置，这样就能让用户更为清楚的理解导航。

最终说说，面对导航如此之多，即使再自身的设计师来了也只能增加层级进行优化。木有太多灵丹妙药~

视觉调整：由于导航层级的增加，也就导致现在需要凸显顶部导航部分，所以将之前的灰色调整为白色。但感觉目前这个方案理解的难度依旧较大，在座的同学们也可以思索一下能否有其他的解决方案。

2、整体感受

这次飞书将多条产品线打通，满意我能够在一个管理后台里，去配置多个产品的业务。

其实这个问题我在之前体验飞书聘请时就发觉，这样就能避开产品之前的割裂感，同时统一的交互在后续的功能业务面市时，也能够快速的产出和响应。

这次的迭代由于有动画的效果，以及新奇的新手引导，整体还是感受还是非常不错。你会发觉设计是没有一个终点，我们会依据业务的状况进行设计上的调整。而我们能做的，就是依据一次次的业务要求，去做出合适的设计。

五、总结：我的观看日记

这其实就是我对于一个产品四年的持续观看，虽然自己没有切身经受设计