前言

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

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

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

并且我也是深度使用用户，也尝试揣测每一个改版背后设计师有哪些思考~ 「文末给大家准备了一点小福利，所以一定要看到最后」

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

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

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

设计特点

在初代版本当中，飞书的设计其实十分有个性，因为当时很少看到如此设计的管理后台。

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

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

- 全局导航：这是一个非常新颖的交互，当我们点击右上角的全局导航过后，会展开对应所有的导航信息，按照设计师的结构进行安排，这样我们就能预览所有的导航内容。这种做法当时觉得十分奇特，我也反复使用，但整体的使用感受不佳，因为我的导航信息所有都在左侧，而我要使用全局导航反而在右侧，不太符合使用习惯，后面你会发现这个功能也被砍掉了。

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

整体感受

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

过渡丨业务发展是如何设计的

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

设计特点

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

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

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

整体感受

这一时期很明显的能够感受到飞书就是在调整过渡，一方面业务发展十分迅速，需要响应；另一方面知道设计存在问题，但是没有太多精力，无法进行大改。这时候就会将用户反馈的所有问题记录下来，站在设计的角度思考方案可能就是我们应该做的。所以有的时候我们目前的方案哪怕有些瑕疵并不要紧，更重要的是如何解决这些瑕疵，汇总记录，等待时机。（毕竟研发资源很难争取...）

确定丨明确的设计思路

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

设计特点

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

- 降低饱和度：对比之前的设计方案，你会发现目前的设计整体降低了页面的饱和度，同时也明确的品牌的主题色 蓝色，其他颜色进行辅助，这样设计上更为明确，哪些内容为重点一目了然。其实这种风格是值得很多设计师借鉴的，因为现在有太多设计师产出的内容过于视觉，导致和整个品牌调性不相符，就会发现你的设计稿其实挺好，但就是不适合我们产品。

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

整体感受

这一阶段其实已经非常完整，设计风格上没什么可挑剔的，同时交互结构上没有进行大的调整，更多是将 常用/新加 的功能进行呈现，比如 帮助中心、配置任务 等，都是为了满足特定的业务场景设计的。同时由于产品业务功能较多，你会发现他们提供了一个查看全部的按钮，用于一些 低频 隐藏功能的展示，在导航上尽可能的优化用户的使用体验。

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

优化丨基于业务再优化

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

设计特点

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

面对这种情况，之前是采取隐藏+全部导航的思路，但是现如今已经不太能够解决这样的问题，同时飞书的很多产品都需要单独独立的配置项，因此采取页面的拆分，将导航分为 企业管理 与 产品设置。企业管理为产品的基础配置；产品设置则为对于附属产品的设置配置，这样就能让用户更为清晰的理解导航。

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

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

整体感受

这次飞书将多条产品线打通，满足我能够在一个管理后台里，去配置多个产品的业务。其实这个问题我在之前体验飞书招聘时就发现，这样就能避免产品之前的割裂感，同时统一的交互在后续的 功能业务面市时，也能够快速的产出和响应。

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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计

软件qt开发、软件wpf开发、软件vue开发

先聊一个我发现的当下普遍存在的问题，众所周知道，现在“大环境”不好，很多设计师在求职中会遇到两个比较尴尬的事儿，第一个就是在中小型公司工作几年，由于公司在发展阶段，所以更多的是在高强度的上需求加功能，所以做的需求更多是“实现产品功能”而没有机会像头部厂商一样去做大的改版升级，去突出“设计呈现”，最后就只能从中规中矩的页面中寻求数据上的设计价值；第二个就是人手不足，每个项目的项目周期自然比较紧张，到最后的结果就是 —— 留给设计研发的时间有限，在设计阶段的不得不将设计精度大打折扣，即使是这样在进入研发后，由于研发周期的原因，在研发还原度上还要再砍一刀，导致最后的呈现往往和自己的预期差距较大，结论：如此往复设计呈现拿不出什么，思维也会慢慢固化，最后成为无情的“图狗”甚至不知道什么该做什么不该做，最后换工作的时候一脸懵逼。那怎么办？

先说结论，我认得这种情况下个人有两个直接的办法给到大家参考：第一个，寻找新的机会，作为设计者项目周期是改变不了，而且我也认为常规设计者在产品孵化的流程中应该是一个在已经决定好的事上“推一把”的角色，所以很多时候我们无法产能不足带来的影响，那最好的办法就是再找一个你中意的公司。如果你因为种种原因，个人能力不足也好，房贷压力也好，无法跑路，那这时候我们就会面临一个问题，也是我认为的第二种方法：如何在中规中矩的常规项目中锻炼设计思维提高自身价值

我们平常在接到一个体验升级任务或者日常自发审视产品问题时，如果比较完善页面去寻找问题时常常会发现，找一圈回来发现页面哪哪好像都合理，感觉分析一波下来他好像就应该长这个样子。不排除他确实暂时没有改动空间的可能性，但是更多时候产品自身还是不可避免的有一些缺陷的，那应该如何发现这些潜在问题呢？这里随便找一个我在行业大厂的页面，来看看即使是我没做过的一个陌生产品和页面，在有部分行业经验的前提下，我都会做些什么来合理的发现问题解决问题的。

这里找一个我做的出行行业的头部厂商“百度地图”中的“打车业务”位例。

一个没做过的页面，有些同学会习惯先把页面拉到画板上，然后一顿分析，最后还是变成了前面说的“页面好像和我想的一样”，然后无从下手，暗自emo，这里和大家分享下我个人的小方法，自认为解决这个问题还是蛮有效果的。

首先，我不会先把页面放上来，我第一步往往是先确定思路，不管是有项目背景改版，还是自发审视产品问题的阶段，我会先确定目标，根据目标确定整个事情的大方向，这一步是为了保证你整体做的事儿不会偏离最基本的轨道。

在确定好了我这次要干一个什么事儿之后，，我第二步往往做的是思考 — 产品形态应该是什么样子的？先弄清楚了他应该是什么样子的，你才能发现和你预期中差异的点，然后去探究问题产生的原因或做相关调整。这里来说为什么我不提倡先把页面放过来直接找问题，因为如果那么干的话很容易就会变成“你来给页面设计者为什么这么做找理由”然后就会发现看着看着自己就被洗脑了。

但是在这一步的时候有一个需要注意的问题，用户要的是更好的产品，不管这个“更好”是指的什么，但是公司做产品最根本的是想赚钱，这按理说是一个完全冲突的事情。不过在产品的不同阶段，侧重是不一样的，我们首先要做的就是结合产品阶段与具体页面所在的节点，权衡产品侧重，就能在你心里建立起一个最基本的产品形态预期，这样在你下一步真正开始分析页面现状的时候就能帮助你一些发现功能的可优化点。

通过上面的推导可知，至少在当前产品的当前业务线来说，工具类产品公司关心的节点转化，还是要依赖于用户使用的满意程度，也就是说，两者冲突时，优先服务于用户体验。这里要注意下在真正的工作过程中，有些产品的阶段导致产品要优先服务于转化，也就是营收，这是很正常的事儿，要根据不同阶段来权衡设计中心，不要被“设计师就是站在用户这边的”这种话误导，具体场景具体分析。

接下来第三步就可以正式的进入到页面现状分析了。

主要分为三大点，第一个框架现状，首先得知道现在的框架是怎样的，这一步主要是看页面的功能区，找出他们并讲他们的层级用一维分析法列出，方便之后的对比。第二是合理性验证，将找出的模块用“十字交叉分析”画出坐标轴，这里我是根据“对用户的重要程度”和“盈利能力”来代表X轴与Y轴（XY轴并不是一直固定代表什么，可根据第二步你的产品重心来决定XY轴），决定好XY轴之后，结合产品侧重把刚才找出的大模块定位在坐标轴相关的位置上，这么做的目的是，你可以根据坐标轴的定位，来对比刚才一维分析法列出的模块层级是否合理；最后第三步根据分析结果，得出相关结论，用来指导你之后具体设计，将影响用户行为与体验的点进行改进，暂无问题的点根据时间成本选择暂时不动或在不影响产品功能和研发成本的基础上进行视觉升级。这一步往往能够解决设计者工作中遇到的一个最基本的问题： 项目周期不够，什么做什么可以放弃。

功能区的问题解决之后，就可以进行第四步，也就是我们最熟悉的工作了，小模块的优化，也是最考验设计师细节打磨能力的地方，这一步要做的就是根据你自己的经验与方法论，找出模块的设计目标，并且根据自己的方法论与经验积累，用你觉得达成这个设计目标最合适的设计方法。方法论这东西就很宏大了，主要是知识积累，然后自己拆分与结合，其实多定理之类的说的都是一个事儿，网上文章一大堆，所以就不过多描述了。

在做完这一步后，通常你就可以根据时间成本选择交付研发了，然后等待上线后一个周期后进行数据验证来验证设计的正确性。

但是如果你还有时间，你可以选择在不影响产品功能和研发成本的基础上进行视觉升级。这来引入一个新的技术来帮助高效进行设计产出，也就是当下大热的AIGC技术。这时候就有些人可能会说AIGC的产出不可控等问题，现在通常的解决方法是通过mj或手绘或拼接出你心中的画面，然后放进SD里进行边缘描摹，并通过openpose等插件产出你心仪的视觉效果，如果你没有训练有素的模型也可以之后再扔进MJ里进行画面细化。

什么？SD配置太麻烦？是不是就搞不了了？其实不是的，AIGC的发展如此迅猛，每天都在以我们想象不到的速度进化这，其实面对我们工作中一些不复用的视觉素材，MJ已经能够快速的产出构图相差无几的画面了，要求不高的话能够大大的减小设计者的成本。下面我们就以现在页面的一些视觉为例，让我们看看AIGC能够帮助我们做到什么程度。

相信大家不难看出，在我们心中已经有了一个合适的样子或者有了一个合适的参考之后，再通过合理的prompt描述方式，AIGC能够通过较小的时间成本帮助我们产出较高质量的图片，这样我们就能够选择性的把时间分配到更多的地方产出更为精致的设计呈现。

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计

软件qt开发、软件wpf开发、软件vue开发