在今天的 UI 设计领域，由扁平化设计风格占据主导地位，已经是无可辩驳的事实了。扁平化应用除了提升用户获取信息的效率外，对设计师而言就是设计的难度大大降低了。

一个界面的 UI 视觉元素，仅仅只需要图片素材、矢量图标、几何、文字，UI 设计师的工作仅仅是对内容进行组织和排版，涉及到原创的也仅仅只有少量的图标（大多数人还画不好）。

这种状态持续了很多年，看起来岁月一片静好。

但是，这两年市场发出了一些不同的声音，那就是打破纯扁平风格的 UI 风格、元素开始越来越盛行了。

比如新拟态风格在年初炒了一波热度，各大平台和公众号都铺天盖地的发文和介绍，介绍它的设计理念和设计方法。

还有就是以饿了么、美团为首的国民级应用在主页显眼的位置里使用极具识别性的拟物图标，引起设计圈的热议。

首先讲讲新拟态设计，之所以之前只字不提，是因为我对这个风格实在没什么好感，有种对纯拟物借尸还魂的味道，且它的样式对于信息密度高的应用是完全不适用的，只能活在飞机稿里。

而国内大型应用开始在实际项目中上线拟物图标，意义就不一样了，证明这样的设计是经过几个大厂团队认可，且有共识的。

当然，这并不因为大厂用了就无脑推崇。而是纯扁平的设计已经越来越难满足部分需要强视觉效果的页面设计了。

今天的互联网和过去不一样，用户的增长留存不再是过去一样通过裂变和口碑完成，一个产品只要认真打磨体验、功能就能获得用户的青睐和驻留。用户的精力时间是固定的，而互联网产品又层出不穷，佛系的等待用户临幸是没有出路，这种现状也被称为互联网的下半场。

佛系不行，当舔狗更不行（成本太高），所以今天大型产品都在对待用户的态度都选择更具更具侵略性的霸道总裁人设。不仅是用色饱和度越来越高，运营活动越来越密集，广告和强提示也越来越多。比如刚打开了三个应用，进入的首页大家自己意会……

有点扯远了，回到话题上。在这种掠夺用户注意力的思路指引下，再做所谓的性冷淡、大留白、极简风就不会合适。当对扁平的视觉效果已经开发到极限以后，那么进一步在一些细节处应用拟物就成为必然的选择。

而拟物的应用并不可能铺设到整个应用中去，因为完全拟物化的设计降低信息浏览效率是必然的，所以它只适合做局部的视觉强化，来加强用户对特定区域的感知。

最常见的需要被凸出的要素，就是首页中应用的快速入口图标、分类图标和底部导航栏图标了。这些区域长期受运营活动支配，相信大家已经很习惯了。

只是，这些图标开始在脱离运营活动的状态下，也开始使用非扁平模式，那就不再是运营设计师的工作职责，而是 UI 设计师们绕不过去的槛了（知识盲区）！

且除了 APP 外，其它领域对于拟物设计的需求也会开始逐渐提升，尤其是目前越来越复（fu）杂（kua）的大屏数据展示、车载界面、定制系统等等。

作为新世代的 UI 设计师，多数人对拟物的设计可以说是完全空白的状态，所以是时候要重拾拟物设计这个传统艺能了。

前面我有提到，拟物主要应用在关键的图标上，但应用的拟物风格并不是过去我们追求的那种极其真实、复杂的拟物，而是经过一定简化、抽象后的拟物 —— 轻拟物。我们要先来明确一下轻拟物到底是什么。

首先我们看看，过去优秀的拟物图标和设计案例，它不仅表现元素本身的光影、透视、构造，甚至会非常完整的表现物体表面的材质和肌理。

这种图标单看起来确实很好看、细致。但是，把它丢进我们当前的页面中是非常违和的，因为它们细节实在太多了，而且画起来非常耗时间，不利于项目整体的推进。

所以为了符合画面的质感，又要考虑项目效率，轻拟物这个概念开始被提出和应用，作为一个折中的解决方案。

它和纯拟物设计的共同点在于，也表现光影、结构、透视，但它尽可能精简了轮廓的复杂度、肌理和层级，呈现出更概念化、理想化、易于辨识的拟物图形。

所以，我们主要去学习的内容是轻拟物的设计方法，而不是徒手画照片（这个可以缓缓）！

而轻拟物虽然 “轻”，但它依旧也还具备拟物的基本特征，是有实体质感的。但是扁平从插画到图标设计经过多年的改版，有各种叹（hua）为（li）观（hu）止（shao）的设计，应用大量的渐变、投影、模糊的效果，比如下图案例。

这在我们之前图标的系列干货中有提过，这类设计是面性图标的进阶版，它们依旧属于扁平风格的范畴之内，不能和轻拟物划上等号。

对于这几年才开始学习 UI 设计的新手来讲，拟物已经变成一个很陌生的事物，这对行业来说是比较悲哀的一件事。

因为拟物的设计不仅仅是画图标而已，对它的学习可以全方位的提升设计师的基础素养，不仅包括对传统美术（结构、光影、色彩、透视）知识点的剖析，还包含对 PS 使用的深入探索。

可以说，自从拟物不成为必修题材以后，九成以上的UI设计师是不会用 PS 的，这极大的限制了他们自身的可能性和作品的多样性。

轻拟物本身也是拟物，所以它的核心基础和拟物设计师一致的，只是省略了更多复杂的细节。而对于整个拟物的体系来讲，最重要的东西实际上只有2个，形体、光影。

形体表现

形体的表现，就是对图形外轮廓的样式的呈现。在过去我们写的图标分享中，有写过面性图标进阶的设计中，可以包含更多的细节、内部元素，而不是仅仅只有外轮廓。

轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上，即你要把这个图形的内容有明确的示意并画出来，而不是用抽象的图形做填充而已。

比如大众点评的快速入口图标，虽然看起来很复杂，但是那是配色上的复杂，而不是形体轮廓上的具象化。

换句话说，拟物插画的图形基底，类似扁平插画风格图标，不能表现得太抽象，也不能增加过多的细节，需要一种恰到好处的平衡（玄学），这就非常考验设计师的判断和经验了。

并且，在描绘轮廓的时候，新手尽可能的采取正视图来进行绘制，而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面，这样难度会大幅度上升，比如下面这种情况。

光影表现

除了形体外，光影就是整个拟物的灵魂了。

当一个完整的图形完成填充色时，它是扁平图案，如果完成光影呈现的时候，它就是三维空间的立体图形，比如下面这个圆的案例：

在拟物的设计中，我们对光影的定义是至关重要的，所以首先就是针对该图形确定光源的方向，是上方、前方、左上还右上，这对后续的设计有一连串的影响。

如果对光影没有正确的解释，那么在制作细节的渐变角度、投影的使用上，就会产生错误的设计，造成光影视觉冲突和矛盾。

在创建了光源以后，物体受到光线的影响就会产生明暗面和投影，可以简单划分成4个部分，高光、亮部、暗部、投影。

这和我们学习的素描有一定的差异，美术中对光影的表现害会包含明暗交界、反光面，这对于轻拟物的来说负担太重，所以我们要去掉它们，接下来重点讲讲高光和暗部。

高光是物体作为受光物对光源的直接反映，比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现，再或者一拳超人中男主光头上长期存在的高光配饰（多数动画的光头角色都有）……

高光可以非常有效的增加画面的层次和对比性，让物体看上去更有冲击力和观赏性。

而暗部，则完全是为了正常表现物体结构和弧度增加的示意，因为不在受光面，所以颜色会变暗。在实际操作过程中，我们可以通过渐变的方式开控制明暗的表达，但尽量不要直接手动设置一个渐变色出来，而是为它叠加暗部或亮部的黑白透明度渐变。

了解这几个特性以后，下面，我们就通过一个实例来讲解一下轻拟物设计的过程吧。

作为轻拟物的演示，直接画个图标讲一遍怎么操作是没什么用的，我们要从实际场景出发，用它来解决一些真实的问题。比如看看下面的 KFC 官方 APP 首页：

总结它的问题，不难发现首页顶部业务功能太多了，顶部图标就包含30个（加滑动的），虽然每个模块图标单看都没有硬伤，但堆积到一起，就使得顶部缺乏足够的信息层级和对比性。

我们要做的，就是通过轻拟物的方式，调整快速入口最大的三个图标，凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始，讲解一下如何完成轻拟物化设计的升级。

第一步：确认轮廓造型

第一个操作，即确定图标本身的轮廓。根据原有图标的样式我做了一些改动，包括加粗车头，减少高度，增加车灯等。并对每一个模块进行纯色的填充，定义它们的色彩和做出区分。

形体的重要性在于要对图形本身有比较合理的呈现，不要让比例失调和图不达意。

第二步：完善图形细节

这一步，就要在原有基础上，进行下一步的深入。包括对一些细节交代得更清楚一点，增加一些有趣的小元素等等，完善它的具体样式。

第三步：增加基础的暗部表现

在这里，我们就要开始为图标增加高光了，高光从右上角打下来，那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现，让整体的立体感稍强。

这一步在软件中主要使用蒙版功能，通过蒙版在背景上方创建一个图层，然后添加深色的透明度渐变，就可以表现出对暗部和投影的效果。

第四步：增加高光效果

接着，就是最后一步，将高光添加到画面中来，讲整个图标的质感进行拉升，

通过上面的演示，我们可以将整个拟物设计流程精简成：

1.确定图形基本轮廓、外形比例、模块色彩

2.丰富细节样式增加趣味性和适当的拟真感

3.通过蒙版添加暗部来完善表现的明暗和层级关系

4.添加高光元素作为图形的亮点，拉升层次感

然后，通过这样的步骤，再来完成后续的两个图形，拆解完的效果如下。

然后，再用这三个修改后图标套用进原来的页面，并做出对应的修改，再来看看前后对比：

通过这个对比，我们就可以看出在这个复杂的首页头部中，轻拟物风格可以从一众平面中被凸显出来，且不会显得太突兀和复杂。

而这就是轻拟物在项目设计中的实际作用，当画面元素已经开始超负荷，且容易导致同质化的审美疲劳和主次不清时，就是轻拟物登场的时候了。

作者：酸梅干超人      来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。 

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

在如今的界面设计中，投影使用的范围和频次越来越高。无论线上项目或是追波上飞机稿，都可以看见各种各样的投影样式。

投影的使用，是 UI 设计师必须掌握好的视觉设计基础。投影远没有大家想象的那么简单，即使软件中可以设置的参数并不多，很多设计师始终没办法很好的应用投影来提升自己的设计质感。

所以，这篇文章就会详细讲解设计投影的正确姿势。

有了光，才有影。光影是美术和摄影最核心的基础。

如果没有系统学习过相关理论，对投影的认识会有失偏颇，会认为投影只是将一个物体的轮廓（遮挡光源的部分）完整映射在其它平面上而已，一个光源下只有一个影子，比如下图设计出来的情况。

但是，真实世界中的投影，却并没有这么简单，往往虚实即不统一，明暗也不一致。就像下面这个物体的阴影。

在光学原理中，不透明物体遮挡光源，所产生的影子有两个部分，本影和半影。本影是影子中间最暗的部分（还有伪本影的概念，我们暂时将它合并起来理解），而四周开始变浅变淡，有弥散质感的影子称为半影，就像下图所示。

现实世界中可见的投影都会形成这两种影子，因为光源有散射的特征，当光线照射在物体上时势必会产生非垂直角度的光线，于是其中作用最大，重叠最多的一部分形成本影，而其余比较极限的切线部分形成半影，如下图的案例。

通过案例我们也可以发现，当光源、物体、阴影面的距离不同时，产生的本影和半影面积也就不同。反过来讲，我们还可以通过物体本影和半影的面积，来判断它的空间关系，比如下方的两个物体，明显能感受到下侧悬浮的高度大于上侧。

或者，通过阴影来判断光源对于物体的方向和强弱。比如下图案例，就可以明显判断光源位于画面的左侧，所以即使摆入其它物体，阴影也会朝反方向延伸。

除此之外，投影还可以反应很多其它隐藏的三维信息，只要使用得当，它就可以帮助设计师表达呈现各种不同的空间位置。比如可以通过投影判断物体是处于悬空或者是平躺，以及物体的厚度如何。

根据生活的经验，我们已经对投影所产生的暗示习以为常，能根据投影的结果下意识的对界面内容做出判断。所以，设计师在设计过程中如果对投影没有进行很好的思考，就无法设计出符合规律和逻辑的投影，界面就会产生违和感，而作品也因此大幅降低了质感。

在进入了扁平化的设计环境后，投影有很长一段时间被抹除，因为大家认为那是拟物的遗毒，就怕设计里用到拟物元素显得不够时髦。

到了 Material Design 发布以后，谷歌在规范中增加了 Z 轴的概念，也就是为平面预设了立体的空间，设计元素可以定义与空间中水平面的距离，并通过投影来表现。

下图中，Z 轴数字越大，代表和水平面的距离越远，上升得越多。而带给我们这种感受的原因，就是投影的暗示，元素本身的 XY 坐标并没有任何改变。

即然增加了投影，那么谷歌的专业设计团队，肯定不会很随意的制定其参数。当我们打开谷歌的官方 UI kits 源文件进行查看时，就能发现其中的奥妙。它们为元素创建了两层投影，即本影和半影，有时也称为 top shadow 和 bottom shadow。 

并且，还有一个在第一部分没有提及的要点，投影的深浅与元素的距离是非线性的，即中心到边缘衰减的速度是越来越大的，用坐标轴标示就是非线性的函数关系，而大多数软件中的投影只能以线性的模式呈现。

在 UI 设计师接触的平面类软件中，只有 PS 具备完美复现这种投影的能力，即控制投影的等高线。

上面出现的投影都是黑白灰，但在现在流行的设计作品中，最常见的是应用了彩色的投影，摄影中也经常会应用彩色的投影渲染氛围。

但是，投影中的这些彩色区域，并不完全都是投影，还包含了折射和漫反射等混杂的色光。为了简化（完整的阐述可以写一本书了），我们可以认为是光线穿透物体从而投射出带有物体本身颜色的投影。就像撑起一把绿色的阳伞，伞下的人头顶也会弥漫着草原的芬芳……

在开始展示具体的设计案例前，我们要先明确一个原则，即：优雅的投影是让你感受到它的存在，但不会吸引你去关注它！

一般的设计软件中，元素的阴影即是在元素的背后添加了一个相同轮廓的纯色矢量图形，我们可以通过 XY 轴移动它的位置，并使用模糊的参数来设置它的弥散度。

当元素距离水平面越近，阴影距离元素也就越近，即投影的 XY 值越小，模糊也越小，如果离得远则相反。

3.1 常规投影类型

第一种投影的类型，即假定元素平躺，光源正对着元素的平面，可以参考谷歌提供的投影方案叠加两层投影。第一层是 XY 轴坐标为0，只添加模糊的参数，透明度较低。第二层阴影使用相同的模糊参数，增加 Y 轴坐标，透明度较高。

在非 MD 设计中，它浓郁的投影参数会让整个界面变“脏”，变拥挤。我们要做的是要降低投影的透明度，这样才能让投影的表现更自然舒适。要牢记的是，当使用纯黑色做阴影时，透明度无论如何都不应该高于 20%，正常区间在 5%-15%。

既然知道阴影属性的规律，我们还可以复制这个矢量图层做高斯模糊也可以得到一样的效果，这种方法可以支持我们设计出更真实的投影。即将 Bottom Shadow 独立出来，缩小并向下移动。

如果想要得到彩色的投影，那么只要切换投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我们要凭感觉去调整它们的透明度。

如果感觉不得劲，阴影太少了，那么我们就让元素的 Z 轴上升。

既然前面提到彩色投影是由于光线穿透了元素，那么当使用了渐变色或者是图片的投影，我们在之前提到的复制出的那层充当 Bottom shadow 的矢量图形，就可以不使用填充色，而是直接用渐变或者是原图进行模糊和透明度调整。

3.2 非常规投影类型

光既然可以垂直于被照射平面，那么发挥想象力，我们还可以更改光与面的位置，让光线与平面之间的夹角变小，如下图所示。

在这个场景中，投影就作用在图片下方的地面，只有地面处于透视状态时，才能可以看见它的投影，所以，我们就可以得到下方的效果。

当然，我们还可以结合光源的类型，比如使用聚光灯等，那么阴影的轮廓就会发生变化。

我们甚至可以假设元素本身产生了一定的变形，如边缘翘起，那么就会出现独特的阴影形状。

我们可以从日常生活中的观察将各种不同的投影形式引用进我们的设计中，让我们设计中的视觉形式更丰富有趣。

学会正确的投影设计方式，并不是仅仅让我们局限在 UI 元素的设计上。它还能给我们带来很多意想不到的帮助，比如做设计作品的包装。

通过前面讲解的知识点，上方展示案例中应用的阴影方式相信你们已经可以看出端倪了，如果使用基础的阴影设置去创建展示的阴影，就会发现效果远远不如案例的高级，自然也难以带给别人良好的视觉体验。

最后，在项目中，想要将设计出来的阴影交付给开发，真正落地实现出来，无论安卓或是 iOS ，阴影的渲染和设计软件的参数是不一致的，这就需要大家自己钻研究了。

作者：酸梅干超人      来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。 

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。而 UI 的发展从拟物的繁琐细节中挣脱出来，却在色彩的展现中放飞了自我。

零售业有个有趣的研究成果 —— “七秒钟定律”：人们在挑选商品和服务时 ，只需要 7 秒钟就可以确定是否感兴趣，而在这短暂的 7 秒钟内，色彩的作用占到了 67%。

要在小小的手机屏幕中加入这么多颜色，并保持其中的联系和逻辑，着实不易。如果你还对配色一无所知，完全不知道配色应该怎么入手，那么你需要了解一下，我几年经验总结的配色思路。

无论我们用 PS、AI，还是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我们来看看这些案例：

虽然是不同的应用，但是这个拾色器的用法大同小异，但是，很多新人并没有搞懂拾色器的正确应用逻辑。

很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑，也就是色相（H）、饱和度（S）、明度（B）。

HSB 是色彩科学中对所有颜色属性的理论划分，是种概念上的定义，可以用来解释任何色彩，也就是说可以和 RGB 和 CMYK 相互转化，且 HSB 的选色逻辑更清晰、简洁、干练。

因为一个正确的选色过程，是先确定出色相，然后再在这个色相维度下选出明度和饱和度，所以我们首先要关注色相选择条。

细心的同学应该已经发现了，它们的首尾都是红色，那是因为色相的序列是一个首尾相接的环形模式，所以它实际上就是色环的柱状展示图，应用起来和色环没有实际区别。

接下来就要说到重点，饱和度和明度选择区，我自己使用的习惯，是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域，然后明确它们在 UI 中的对应情绪和应用场景。

在过去的大量分析中，互联网产品的主色和重要辅助色都会往右上角聚集，一些次要、不可点的色彩聚集在中上方，而文字背景色则聚集在左侧，无人区则是我们重点避开的对象。

下面我们分析几个案例，看看它们在这个选择区中的色彩分布情况：

大家也可以自己拿一些主流的应用做截图，然后把它们的 UI 元素色彩排列到拾色面板中，就会得到基本一致的结果。牢记这 9 个区域的场景划分，可以帮助我们非常高效、安全地完成 UI 配色。

在众多的 UI 设计规范中，色彩部分的介绍，都必然包含三种类型，分别是：

• 主色：应用的核心色彩，品牌色

• 辅色：丰富页面视觉和传达效果的次要颜色

• 中性：没有色相的文字、背景用色

2.1 主色的选择

主色是一个应用的最核心的色彩，品牌的象征色，比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。

确定主色，并没有大家想象的那么复杂，它的要点在于 —— 你想让用户感受到哪种情绪，然后通过情绪关联一个大致的色彩范围，再进行微调。

在今天的互联网产品中，主色的应用选择范围在拾色器区域的右上角，前面已经有解释了。这和平面设计中的用色有非常大的不同。

移动端产品要在一个方寸大的空间中争夺用户的注意力，引起用户的兴趣，那么低饱和清淡的色调是无法实现这个目标的，所以今天主色饱和度越来越极致，比如我们之前整理的，发在站酷的一篇总结：

支付宝主色变更分析

再加上屏幕的 RGB 显示特性，高对比度，高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法，就是在确定色相类型后，在右上方区域选出合适的色值。

2.2 辅助色的选择

辅助色是丰富应用中的次要色彩，它会包含一到若干个和主色不同的色彩，除了品牌传达外，具有更强的实用性。

前面我们提到过色环，这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型，它蕴含一个最朴素的原则，即两个颜色在这个环形中角度越大，那么视觉差异性越大，对比越强，比如下图的展示：

这些配色的模式是不能闭着眼随便挑的，它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择，是根据实际场景的功能决定的。

比如通知、提醒、取消用大红色，确认、同意用绿色或者蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下最简单、最安全的辅助色选择方式。

没有标准元素用色的情况下，再考虑应用色环的 “角度原则”，越需要被突出的颜色，可以在色环中离主色越远，越不需要被突出的则越近。

比如下方携程的案例，主色在蓝色的情况下，支付、保险金标签这些需要被重点突出的色彩，使用了主色的互补色， 让我们一眼就能看见并产生强烈的操作欲望。

2.3 中性色的选择

中性色，是页面中文字、背景用到的颜色，它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要，实际情况恰恰相反。

主色辅助色决定了界面视觉是否出彩，而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例，就应该明白，即使只有黑白灰的状态下，我们理解这些页面和进行使用也不会有丝毫的障碍。

中性色的配置，就是制定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的主要判断依据是 HSB 中的 B（明度） 值。

中性色虽然指的是无个性，但并不是只能用纯灰色，常见的一种做法，就是为中性色添加适量的蓝色饱和度，提升观看体验（满足 RGB 的某种特性）。

这种做法，颜色越浅的时候饱和度应用色值就越低，将这个规律在拾色器中进行表现，那么我们就可以得到一个 L 型曲线，我称它为 “中性曲线”。

掌握对于主色、辅助色、中性色的选择方法，那么对于 UI 配色的奥义来说，你已经掌握了一半，接下来就要了解更具体的实践思路了。

配色并不是只有色彩的色值本身，大家一直在研究各种色彩心理学和理论，却很少关心它们应用如何应用，如何配置。

所以，我根据主色和辅助色应用总结了一个配色的四象限表格，在分别看看它们对应的案例：

3.1 主色占比大，色彩丰富度高

主色会作为顶部标题栏或其它重要模块中的背景色，进行大面积应用，加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务，需要用丰富的色彩来进行暗示，吸引用户关注。

3.2 主色占比大，色彩丰富度低 

这类配色中，主色的应用占比也大，出现频率高，鲜有其它颜色出现。比较适用于图片内容丰富的题材中，或者是相对正式、品牌感强的应用。

3.3 主色占比小，色彩丰富度高

这是多数主流应用的趋势，降低主色占比，留出更多的空间给内容模块的展示上，突出自身带有的服务和功能。

3.4 主色占比小，色彩丰富度低

通常，会应用这种方式是因为产品的服务是相对单一，但也需要用户投入注意力的应用，设计师就会尽力避免给予用户过多的干扰。

每次在进行配色的时候，我们都需要对自己要应用哪种配色应用方式做出规划，然后再动手执行。有了这个目标，后面在整个项目的设计中的配色步骤就是水到渠成的事情了。

在实践前，我们要简单讲讲一个应用或者界面的标准配色的流程了，流程顺序如下：

具体应该怎么使用这套流程，我们用一个图虫 APP 改版的案例来做演示，首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。

4.1 配色流程演示

原型是 UI 设计的基本艺能了，在开始具体设计、配色前，搭建页面的框架原型是一个必备的条件，下面，是我们已经准备好的原型案例。

然后，我们确定以橙色作为应用主色，并在拾色器中进行确认。

有了主色，就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的，那么首先可以用到的就是顶部标题栏的背景色了，以及底部 Tabbar 中的选中色，大按钮色等。

接着，我们开始整理中性色的使用，选择新的颜色来填充文字和背景，清晰的表现模块层级，文字信息的权重。

最后，就是添加辅助色和其它色彩的元素了，这个步骤建议都是放在最后一步操作。因为色彩越丰富，越难控制，容易让整个画面显得杂乱无序，所以先完成基础搭建，可以更好的帮助我们判断彩色的使用是否合理。

下面，我们使用彩色的金刚区图标，然后将用户关注、认证用户、标签等元素使用其它色彩，来丰富页面的色彩内容。

4.2 其他配色类型应用

根据第一个方案，我们可以再用这个原型来实现其余的三个方案的配色。

比如下面的主色占比大，但是色彩丰富度低的。因为已经不太应用其它辅助色，所以主色填充上我们不再填充顶部导航栏的背景，而是将更多元素应用主色，减少辅助色数量。

然后是主色占比小，色彩丰富度高的方案，进一步降低主色应用的比例，然后在金刚区、标签等处使用较为丰富的配色。

最后，就是主色占比小，色彩丰富性也低的方案，那么使用中性色的元素就开始增多，只保留最核心的一些元素使用主色，和极少的辅助色。

根据四种不同的配色方案，我们就可以得到四种不同的配色结果和风格，在每次设计开始实施前，我们都可以根据这种做法来做尝试，并选出自己满意的方案。

要再次强调，UI 配色是极其强调形式的应用科学，最后做的往往会和一开始想的效果有极大出入，所以需要我们有几个备选方案，可以随时进行调整，并选出合理的那个。

作者：酸梅干超人      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

导读

为什么B端产品总是容易“失控”？B端产品设计与C端有何差异？如何在不断复杂的系统中，权衡效率、成本、体验之间的关系？ 

本文将带你从B端产品的本质出发，了解产品发展过程中容易出现的问题，并从复杂系统的角度去探讨设计体系的构建方式。

目录

一、「 困局 」容易“失控”的B端产品

A .「 关注重点的差异性 」

B .「 微小差异的不断叠加 」

C .「 产品发展进入恶性循环 」

D .「 进入效率拐点，产品失控 」

二、「 启发 」从复杂科学的角度思考设计

A.「 自然算法 」

B.「 物质的构成原理 」

三、「 探究 」什么是产品设计体系？

A.「 定义 」

B .「 组成部分 」

C .「团队能力要求 」

D .「 构建方向 」

四、「 剖析 」B端产品的生命周期

「 产品生命周期概述 」

A .「 初创期 」解决核心问题，产生价值

B .「 成长期 」能力完善，产品扩张

C .「 成熟期 」效率提升，快速增长

D .「 暮年期 」商业价值降低，发展逐渐停滞

NEXT、「 下期预告 」设计体系的构建法则

前言

随着产业互联网时代的到来，市场对B端产品的重视程度逐渐提升。然而，谈及B端产品，特别是SaaS产品，大多数设计师对此并不是特别感兴趣。一来，SaaS更注重功能层面，似乎本身对设计的要求并不高；二来，SaaS产品的最终实现效果总是不尽人意，就算设计得再好看，实现出来也难以出彩。

确实，若设计师仅仅只是关注视觉层面本身，那么B端产品确实不像C端那么吸引人。但是，若你能以整个产品构建的角度去思考B端产品设计，那么设计师能够在其中发挥的空间是巨大的。

假如把C端产品比作精致的小房子，那B端产品就是一幢巨大的高层建筑。建造小房子，你可以尽情地发挥创意，追逐潮流，大不了推倒重来。而建造大房子，则需要设计师考虑更多的维度，因为这是一个长期而复杂的工程。

建筑的外观不仅需要好看，更需要足够耐看、稳定；为了适应更多人的需求，你不仅要考虑房子的软装，还要考虑户型的合理性、通用性；而为了降低成本，你还需要考虑家具、硬装的标准化、房间的兼容性等等…

“你是否有信心建造一个宏伟的高楼大厦？” 

这是我在B端设计中，反复强调体系化思维的原因之一。想要建造一个大型建筑，没有体系化思维、没有更完善的多职能协作流程，那么这座高楼一定会在建设过程中埋下隐患。而当问题一旦出现，涉及到的沉没成本也将会非常巨大。

当然，对于C端产品来说，体系化也愈发重要了。随着互联网时代的持续发展，一些C端产品的复杂性也堪比B端。我在之前的文章中提到过一个观点：“C端B化，B端C化”。在未来的数字产品设计中，B端产品将会逐渐开始重视产品的外观与体验，因为触达的人群更年轻化、对体验要求更高了。而C端产品也会更注重体系化建设，因为产品体量越来越大，需要寻求效率与成本之间的平衡点。

产品设计体系，本质上是一套更科学的复杂性数字产品的设计方法与工作流程。因此，不管是B端产品还是C端产品，设计体系能够在提升设计品质的同时，让产品更“可控”，提升效能，降低成本。

这套设计方法论，是我在工作中不断实践与完善的一些经验与方法。希望能借此分享一些自己浅薄的经验，也探讨一下数字产品设计未来的形态。

✨

一、「 困局 」容易“失控”的B端产品

-

作为较为复杂的数字产品，B端产品在快速发展的过程中，总是容易出现一些问题。特别是当产品体量到达一定阶段后，问题就会逐渐暴露出来，比如：

1. 产品丑、设计质量低；

2. 组件样式繁多，操作习惯不一致；

3. 新老系统差异大，不同模块体验差异大；

4. 页面结构混乱。

等等…

很多问题大家都能明显地意识到，但往往因为“不影响售卖”、“价值不高”、“新功能优先”等理由被搁置。

随着问题逐渐积累，产品的优化成本也变得越来越高，最终使整个产品已经积重难返。若只是多部分页面/组件进行优化，小修小补，虽然成本低，但成效甚微；若是进行大修大补，那么优化成本将远大于研发新功能的成本。

这种普遍的B端产品现象，被称为“产品失控”，即——团队已经对整个产品的形态失去控制力。

那么，为什么B端产品特别容易出现这种问题呢？

A .「 关注重点的差异性 」

首先，产品的本质决定了其关注重点的差异性。

与C端产品不同的是，B端产品往往更看重“能力”（为企业用户解决问题），而产品的销售方式与付费模式，也决定了产品体验并非首要关注的对象。由于B端产品通常针对企业用户，需要更长的研发过程，产品的体量和复杂性也相对较高。因此，除了产品解决问题的“能力”之外，产品还需要关注研发的效率及成本。

因此，在产品的发展初期，企业通常对效率最为关注，其次是成本，最后才是体验（能用就行）。绝大多数B端企业，只有在产品跑通商业逻辑，并具备一定用户与盈利预期之后，才会对产品的体验逐渐重视起来。

B .「 微小差异的不断叠加 」

任何微小的差异，在无数次的叠加之后，都会被快速放大。特别是当团队的人员逐渐增多后，放大速度将会呈指数级上升。

为了配合产品的快速发展，产品往往会采用“堆量”的研发模式。增加研发效率，最简单直接的方法便是投入更多的资源。随着产品不断增加模块、功能、页面，团队人员也在不断地扩充。

但是，人类不是机器，并非简单的1+1=2。团队数量的上升虽然会带来效率的短期提升，但同样也会增加团队的管理成本。不同的产品经理、设计师、研发人员，对于产品的认知是不同的。随着团队人员的不断增加，“个体差异性”将会被不断地叠加与放大。

就像“传话筒”的游戏一样，同一个事物，不同的人理解总是不同的，经过多次的“传话”以后，往往与原本的意思已经大相径庭了。

这种情况表现在产品设计中，则会出现：当相同的组件由不同的人做时，总是会在基本样式、实现原理、交互细节等不同的维度出现差异。比如上图中的导航菜单组件，不同的模块在开发时总是会存在差异，最后差异越来越大，形成了五花八门的导航菜单形式。

C .「 产品发展进入恶性循环 」

令人遗憾的是，虽然问题很明显。但是在不断的“成本考量”中，产品团队往往优先关注新功能的开发，而忽略底层问题的优化。

随着产品的快速发展，产品的优化/迭代成本将会逐渐大于研发新功能的成本。要么背负巨大的成本进行整体重构；要么降低标准，继续以这种模式不断叠加新功能。

在这种情况下，大部分B端产品往往会选择后者。于是，产品的发展将会进入一个“恶性循环”：

• 产品快速发展，功能不断叠加；

• 各模块由不同的产品、不同的开发研发，导致各模块之间差异增加；

• 产品丑、体验不统一，但老系统优化成本过高。综合衡量，优先进行新功能研发；

• 所有模块标准不统一，产品迭代效率持续降低，维护成本持续增加。

…

D .「 进入效率拐点，产品失控 」

产品的发展犹如一辆快速奔驰的巨型列车，一旦加速便难以停止。

随着问题的反复出现，以及在一次次的“利益权衡”中选择性的忽略，产品的恶性循环不断重复，而问题也逐渐叠加、沉积下来。

当这个问题已经大到我们无法回避时，我们才发现：产品的单位迭代/优化成本，已经远远大于新功能的研发成本。而新功能带来的增量，已经无法抵消现有模块的迭代成本——产品迎来了效率拐点。

就像一个庞大而复杂的机器，虽然依旧可以运行，但整体效率已经很低了，而与之对应的维修成本则非常巨大。小修小补根本无法解决问题，而大修大补则很有可能会带来更大的亏损。

最终，产品逐渐在“失控”中难以自拔，竞争力逐渐降低，但整个团队对此却无能为力，严重影响了企业的发展。

那么，在产品发展中，我们应该如何避免这种情况呢？换而言之，一个高度复杂的数字产品，我们应该如何设计，才能避免其逐步走向混乱？ 

✨

二、「 启发 」从复杂科学的角度思考设计

-

如果我们将B端产品看作是一个复杂系统，那么产品“失控”的本质即——在不断复杂化的形态中，缺乏有效的控制机制，最终导致整个系统失去控制。 

但是，在大自然面前，B端产品这种复杂程度显然不值得一提。

像大自然这样的复杂系统，是如何构成的？所有的物体都由原子所构成，为什么简单的一百多种原子，能够构成如此复杂的世界？生命又是如何在无机物的世界中诞生，并逐步进化成如此复杂的个体的？

A.「 自然算法 」

道生一、一生二、二生三、三生万物...无论是老子的《道德经》，还是《深奥的简洁》、《万物皆数》、《复杂》这些现代的书籍中都阐述了这样一个观点：

任何看似复杂而又可控的系统，一定存在着精简的“算法”，通过不断的叠加从而形成复杂系统。

就像爱因斯坦说的：“宇宙最不可理解之处，就是它居然是可以被理解。”

在大自然中，有很多的花纹与图案的形状都存在相同的规律。比如上图中的羊齿草分形图案，这种图案在森林当中到处可见，我们看到很多树的形状跟叶子的形状是一致的，这就是一种分形图案。而这种分形的图案本质上是一个公式，通过不断地自我引用进行迭代，这便是分形。

科赫曲线（Koch curve）就是一种分形。其形态似雪花，又称科赫雪花（Koch snowflake）、科赫星（Koch star）、科赫岛（Koch island）或雪花曲线（Snowflake curve）。

它最早出现在瑞典数学家海里格·冯·科赫的论文中。我们将一根直线分成四段，然后向中间挤压形成等边的倒V形状；接着再将每个倒V的边进行相同的操作，不断地重复之后，我们发现：第一步是倒V型、第二步变成了大卫星，第三部变成了枫叶，第四步… 经过无数步以后，最终成了越来越复杂的“雪花”形态。

科赫曲线便是“自然算法”的一种。海岸线虽然很复杂，但是却有一个重要的特性——自相似性。从不同比例尺的地形图上，我们可以看出海岸线的形状大体相同，其曲折、复杂程度也很相似，换句话说，任意一段海岸线就像是整个海岸线按比例缩小的结果。而海岸线的构成原理就是这种科赫曲线，它是通过天然的演化，不断折叠最终形成了这种形状。

可以发现，他们都是由 基础物质 x 简单算法 x 随机变量，经过无数次叠加后，最终形成了一个复杂而多变的整体。

B.「 物质的构成原理 」

宇宙中还有其他各种惊人的“巧合”。爱因斯坦的相对论揭示了宏观世界的规律性，普朗克和海森堡的量子力学揭示了微观物质世界的规律。当我们从微观世界到天文学会发现——原子核的构成方式居然与天体的构成非常相似。粒子围绕原子核的运动方式，就好像行星围绕太阳运动一样。

不管是整个宇宙，还是生命体，将其置于复杂科学的研究框架中，那些基本定律最终也会变得极其简单。

在宇宙中所知最为复杂的形态，便是如同我们自身的生物。这些复杂体由已知存在于银河系中最普通的物质所构成。但是，通过氨基酸的形态，这些基本原料竟能自然地将自己组合成一个自组织系统。

混沌中隐藏的算法，使宇宙成为极有秩序的地方。而在秩序中隐藏的随机数，又使得宇宙成为极为丰富的世界。

也正是因为算法的精简，一切物质的创造才能具备复制性、延续性、进化性。

那么，我们反过来思考——想要使复杂的系统简单可控，是否就需要一套简洁、有效的“算法”？通过“算法”，将基础的“物质”不断地“有序叠加”，形成一个可控的复杂体系。

因此，对于复杂的SaaS系统设计，我开始引入“设计体系”这一概念，希望能够找到未来SaaS产品设计的发展方向。只有设计体系的建立，才能保证产品可控性，才能在不断复杂系统中，保证效率、成本、体验之间的平衡。

✨

三、「 探究 」什么是产品设计体系？

-

产品设计体系，在国内仍旧是较为陌生的词汇。什么是设计体系？

A.「 定义 」

一个成熟的数字产品，需要有一个稳定、且持续迭代的形态。创造这个形态的过程，我们称之为广义上的产品设计（这里指产品的整个策划和设计过程，包含策划、交互、视觉及部分前端开发）。而负责控制和维护这个形态的这套系统，便是产品设计体系。

我们接触到的更多是设计系统（Design System），比如平台级的设计体系，Apple、Google、Microsoft等系统级的设计系统，及其设计开发套件、应用生态。公司级的设计系统，如Airbnb设计系统、IBM的Carbon设计系统、蚂蚁金服的Alipay Design等。

但是，在一个企业内部，想要Design System能够系统性地运转，还需要基于这套标准建立的团队协作机制。只有设计标准与团队协作标准完美融合，才能建立真正的设计体系。

B .「 组成部分 」

如果将数字产品比作复杂的“生命体”，产品的发展比作竞争中“自我进化”，那么设计体系便是产品的DNA。它既是产品形态的控制源，又是不断自我迭代的进化源，它的作用是：

• 控制产品外观——感知性模型（视觉风格/规范）

• 制造基础构件——功能性模型（基础/复合组件）

• 模块的构建规则——模式语言（产品框架规范）

• 产品标准定义、生产方式制定——协作模型（高度协同的工作流程）

它不仅能控制产品的“生产结果”，提升产品质量；还能规范产品的“生产过程”，形成一套完整的多职能协作流程，提升产品的生产、迭代和维护效率。 

从宏观来看，设计体系像是一个“规范的复合体”，它是各职能之间规范的有效整合，产品框架、交互规范、视觉规范、前端规则，同时也是基于整合规范所创造的一套创新的工作模式。

C .「团队能力要求 」

设计体系的建立，需要整个产品团队拥有一致的目标，并为之通力协作才能完成。这就需要整个团队拥有较高的平均素质与契合度。

同时，体系化的建立和推动，也需要团队中有人牵头去推动。设计师作为“产品-开发”的中间环节，是非常有条件成为推动者的角色的。

当然，这就要求设计师拥有更丰富的横向能力。

一方面，设计师需要将自身的能力边界进行拓展，与上下游的职能保持密切的沟通，并解他们的诉求。只有当设计体系满足各方利益时，体系化才有推动的空间。

另一方面，对于产品侧与开发侧人员，设计团队也可以通过培训来提升他们的能力边界。比如针对产品的交互培训、针对开发人员的基础审美培训等。这样才能提升产品的下限与上限，增强产品的综合竞争力。

D .「 构建方向 」

设计体系并非超脱于产品之上，而是根植于产品的成长过程中。

想要推动体系化的建立，必须充分了解产品发展的基本规律。产品处于不同的生命周期，所要解决的问题是不同的。在正确的时间做正确的事情，并对未来的形态进行规划，才能逐步让设计体系根植于产品、融合于产品。

因此，在下一章，我们首先来了解一下B端产品的生命周期。

✨

四、「 剖析 」B端产品的生命周期

-

对于设计师来说，首先要更宏观地了解产品所处的生命阶段，才能知道设计需要解决的问题是什么，并以此有针对性制定不同的设计策略，最终帮助产品构建完善设计体系。

本章更多的是对B端产品的发展阶段做一个剖析，而不同阶段具体的实施策略，会在后面讲解。

「 产品生命周期概述 」 

类似于人的成长历程，一个新的B端产品从诞生到逐步扩大，通常都会经历几个不同的生命阶段。

B端产品研发是一个漫长而系统化的过程。这个过程通常伴随着商业业务发展与商业战略模式的不断调整。

B端产品从立项到下线，产品会处于几个典型的不同状态中，这就是产品的生命周期。通常来看，大多数产品都会经历以下几个生命周期。初创期-成长期-成熟期，直至最终进入暮年期。

而产品的商业价值，也会伴随着产品的发展而变化。在通常情况下，伴随着产品的逐渐成长，其商业价值也会随之增长，并在成熟期进入黄金的商业价值期。而当商业价值出现大幅、持续性的降低时，则基本算是进入了暮年期。

那么，不同的生命周期中，产品将会遇到哪些问题？而为了保证产品的持续发展，产品团队又需要做哪些事情呢？

A .「 初创期 」解决核心问题，产生价值

初创期，即产品已经从构思到研发，并成为了初步的产品。这个时期，产品虽然还不能覆盖完整业务，但已经能够顺利运行。

从构思到创意，再到实践落地。B端产品的诞生，通常源于在行业内深耕多年的资深玩家。在不断地实践中，通过创意与实践，找到了一条能够帮助行业解决问题、提升效率的路径。

在这个时期，产品需要解决以下几个问题： 

1）用户是谁？

B端业务的本质，就是“向组织销售服务来获得盈利”。哪些企业最需要你的产品？哪一类用户的问题最需要通过这种方式得到解决的？这些都是需要在早期非常明确的。

站在普罗大众的角度去规划产品固然是好的，但成功的产品都始于一小部分早期用户；B端产品的用户通常来自某一垂直领域，首先让他们喜欢上你的产品，然后慢慢向外拓展至更大的人群当中。

想想看，最初一千名喜欢你产品的种子用户可能是哪些人？

2）产品能够解决什么问题？

我们要为用户解决什么问题？“用户的问题”可能是一个需求、一个困扰或是一个机遇。他们的需求是否真的是痛点？

这个时期，团队需要拜访大量的目标用户，通过交流获取痛点。我们必须验证这个需求的真实性，以及我们的解决方案是否具备一定的可实施性。

我们可以通过更具象的UI或流程，初步展示想法，不断优化。最终形成一个可验证的初步产品Demo，并通过Demo进一步与潜在用户进行沟通。

3）这个问题是否普遍？是否具备标准化的可能？

不同企业的需求是有差异的，如何将个性化的需求抽象成共性的解决方案？如何权衡范围与成本之间的关系？我们要将不同企业的需求进行抽象，形成标准化的解决路径。

这个阶段，我们需要为种子用户创建方向聚焦的MVP。MVP必须是名副其实的最小化可行产品，要为种子用户带来端到端的精准体验。如果他们不理解产品功能，不知道如何或为什么使用，或是发现其性能低劣、bug 太多，无法达到“可行”的程度，那么你的假设就难以得到有效验证。

4）是否能够形成完整的商业闭环？

用户是否真的会为这个产品买单？换句话说，产品是否能赚钱并且养活整个团队？

B端产品在初创期，最重要的是快速验证产品与业务的亲密性，能否完成既定的商业战略。产品团队需要通过磨合业务，快速调整业务解决方案和产品架构。

不仅是产品的打磨，整个团队也要形成完整的闭环。工作流程、产品的商业运转机制也要初步跑起来。产品的售前、解决方案、产品研发、实施、客户成功，我们需要真实地完成这一套闭环的操作，并基于此做团队毛利模型的测算。 

解决问题，带来价值，并且能够将价值转化为收益，这才是产品可持续发展的关键。只有跑通完整的商业模式，拥有长期的盈利预期，产品才能顺利进入下一个阶段。

B .「 成长期 」能力完善，产品扩张

成长期，即产品形态初具完善，并具备完整商业闭环之后，处于快速成长的时期。这个时期，产品将进行快速的迭代，覆盖的业务一天比一天完整，能满足的业务需求越来越多，而产品为业务带来的价值越来越大。

与新生期的区别在于，新生期时的迭代方向还未完全明确，迭代更多的是尝试，磨合业务与产品。而在成长期时，产品的迭代方向已经是非常清晰了的。

1）更多用户，更多真实需求

产品在真正投入运营之后，所遇到的情况一定与MVP时期有所区别。随着产品的不断售卖，我们将会接触到越来越多的真实用户，以及更多的真实需求。而这些用户与他们的诉求，将会成为产品发展的指引。

2）解决更多问题，业务范围扩张

经过长期的打磨，产品的形态和可用性已经初步成熟了，商业模式也已经初步跑通。随着更多的真实需求，产品将会选择有价值的方向扩张业务范围，从“解决一个问题”逐渐走向“解决一系列问题”。

3）功能完善，产品体量快速增加

伴随产品的快速迭代，产品的基础功能会逐渐完善，同时也会基于核心功能去搭建更为丰富的功能矩阵。更多的能力、产品模块、页面，最终逐渐叠加为一个完整的大型产品。

4）组织逐渐完善，人员专业化

随着业务扩张，组织架构逐渐完善。为了提高专业性与效率，团队人员从“多面手”逐渐转化为专业化方向。与之对应的是，团队成员的数量也会在这个时期快速增加。售前、解决方案、产品研发、实施、客户成功，这一套完整的团队模型在各模块中不断地复制。

C .「 成熟期 」效率提升，快速增长

成熟期，即产品的形态已经稳定，并能够创造持续的商业价值。处于成熟期的产品，肯定是已经进行商业化运行的。反之，没有达到预期的商业价值的产品，不能算成熟期。

进入这个阶段时，产品已经实现了产品-市场匹配。但是，我们需要对整个产品、以及团队进行一系列的调和与优化，才能让整个产品的形态与运作方式更加合理，以便将产品推向更广阔的市场。

1）产品效率、组织效能提升

经过一系列的快速发展，产品体量通常都会比较大，而团队成员也快速扩张。随着一致性成本、沟通成本增加，势必会造成研发效率、组织效能会下降。因此，如何降低产品的单位研发成本？如何让整个团队的组织效能达到最佳状态？是需要解决的问题。特别是当产品具备一定的客户数量以后，单位研发成本的降低将会极大提升产品整体的利润率。

2）产品设计-研发标准化，构建完整链路

通过产品设计-研发标准化、数据架构标准化，打通不同模块的壁垒，提升模块化与灵活性。将单点之间的竞争力相互配合，形成“场域”竞争力。

产品的单点也许不能保证都有最佳的竞争力，但如果我们能够提供一系列的、高质量、无缝衔接的配套服务形成闭环，将会形成强大的整体竞争优势。同时，产品设计-研发标准化，能够增加产品售卖的灵活性，通过灵活的组合方式吸引不同的用户，提升销售灵活性与成单率。

3）提供高质量的用户体验

产品最终是给人用的，用户体验也会在将来逐渐成为B端产品的核心竞争力。随着竞争的加剧，以及用户群体的逐渐年轻化，用户体验将成为企业在选择产品时的重要考量因素，也是口碑传播的重要途径。

由于在“产品-市场匹配”阶段需要尽快地推出产品，所以在设计开发过程中可能遗留诸多问题，需要进一步打磨优化。产品设计需要与开发具备高度的一致性，视觉交互是否合理，前端代码是否准确合理，操作反馈是否高效等问题，都需要这个阶段来进行调和。

4）教育市场，卖给更多的人

当产品逐渐成熟并具备一定体量之后，单靠销售跑单是远远达不到发展要求。这个阶段，需要市场部人员对市场进行教育，聚焦不同的行业领域，从“点式营销”转变为“面式营销”，并配合销售人员进行产品的售卖。因此，在这个阶段，产品的品牌力、核心能力的传播将至关重要。

D .「 暮年期 」商业价值降低，发展逐渐停滞

暮年期，即产品发展停滞甚至倒退，逐渐失去商业价值的产品。

B端产品进入暮年期的原因，主要有两个。一是，伴随着业务的发展，产品已经很难满足业务需求。且翻新产品的投入产出比较低。二是，伴随产品的使用时长，产品将变得臃肿和迟钝，逐渐难以敏捷地满足业务需求。

很多时候，商业环境的快速发展、技术的更新迭代都有可能成为产品进入暮年期的原因。对于暮年期的产品，根据商业战略，产品经理既有可能要延长产品的寿命，也有可能持续保障产品完成顺利换代。当然，更多暮年期的B端产品，由于业务的调整，最终迎来生命的终结。

需要注意的是，很多产品因为在成长期、发展期无法建立有效的产品控制机制，导致产品过早的进入臃肿阶段。也就是前文中所讲的“产品失控”，非常有可能加速产品暮年期的到来。

因此，是否能在前三个阶段建立健康、完善的设计体系，是产品能够获得更长生命力、更多价值的关键。

✨

NEXT

「 下期预告 」设计体系的构建法则  

-

你的B端产品处于什么生命周期？在这个阶段产品要解决的问题是什么？而在这些过程中设计体系又应该如何构建？

设计体系的建设并非一蹴而就，通常是伴随着产品的而发展逐步建立的。在下一篇文章中，我们将基于B端产品的发展阶段，带你详细了解设计体系的正确构建方式。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：Jady13_剑杰

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

服务设计大家也不陌生了吧，关注我们的同学也看过我们写过很多关于服务设计的文章这其中也有一些枯燥的科普文还有理性讨论的文章，当然也有很多不了解服务设计的小伙伴，所以这篇文章就来帮大家介绍一下：服务设计。

《从用户体验到服务设计：没有人会告诉你这赤裸裸的真相》
《如果你想学服务设计，有哪些可选专业？[备查]》
《为什么要应用服务设计？》
《服务设计和用户体验设计:有什么区别?》

吸引客户并与公司建立联系

服务设计方法帮助公司更有效地执行新思想、满足客户期望、打破藩篱并创造商业价值。通过可视化新的想法和客户旅程，并从第一天就与客户和员工进行测试，这种方法突出了潜在的挑战，并产生想法来缓解它们，从而增强了对想法的信心和对行动的更高承诺。

结论

• 服务设计关注客户需求，执行想法并创造商业价值。

• 从最开始，服务设计就通过与客户和员工进行测试来降低商业风险。

• 在整个公司中共享客户洞见，可以打破藩篱，并使工作一致。

没有良好执行的聪明策略很少能实现卓越的服务。需要工艺、正确的方法和技能，才能以具体的方式将客户与企业联系起来。服务设计是帮助公司实现新的客户体验、满足客户期望、处理内部挑战和创造商业价值的强大工具。

顾客的视角

服务设计方法将人的关注点引入到服务的开发中。它帮助公司以客户的眼光来看待全局，并提供工具来设计客户与整个公司之间的每一个小小的互动。

客户洞见是有价值的

市场调查告诉你客户喜欢什么，但可能无法告诉你为什么。

服务设计者使企业能够更深层次地了解客户。从深度访谈和观察到创意客户研讨会，这些方法帮助公司理解为什么人们经常言行不一，以及寻找下一个大创意。

在整个公司中分享客户洞见也可以有效地打破藩篱并协调工作，这样公司就能够交付通过多种渠道与客户互动的体验。

观察顾客去了哪里，他们看到了什么，听他们说了什么。获得深刻的客户洞见，推动新想法。

眼见为实

让想法看得见摸得着是在组织内部澄清和获得新概念认同的有力方式。这种方法也突出了可能出现的潜在挑战，并有助于产生缓解这些挑战的想法，从而增强对这些想法的信心，提高对行动的承诺。

这就是为什么服务设计者总是在想法和解决方案出现时就将其可视化的原因。一种策略可以以可视的格式更有效地进行沟通，客户和员工之间的交流配上一段动画就会更容易理解，一个提议可以通过web界面的设计细节得到强化。

服务场景可以让企业立即了解新服务对客户和员工意味着什么。

服务蓝图

客户互动或接触点的关键时刻，越来越多地蔓延到公司的不同部分。

服务蓝图是一个可视化的工具，帮助公司协调不同的部门作为一个整体一起工作，以创建一个好的、一致的客户体验。蓝图是一幅地图，描述了客户通过新服务的旅程，以及公司如何通过各种渠道与他们接触。新客户体验的愿景共享有助于部门之间的协调，并使他们更致力于项目。

服务蓝图使公司能够看到各个渠道必须如何协同工作才能提供良好的服务体验。

测试体验

尽管在研发方面投入了大量资金，但仍有很多产品和服务在客户或交付成本方面失败的例子。

服务设计者通过让客户和员工从第一天就参与到测试中来降低这些风险。因此，在大量资金投入技术或公司变革之前，公司就可以学习、改变和完善理念。

可以快速而廉价地构建服务原型。设计师使用简单的模型和场景对少量客户和员工进行测试。在后期阶段，客户和部门数量有限的试点也可以产生更多的证据，证明服务可以在更大的范围内发挥作用。

一项针对英国无工作人群的为期9个月的试验证明了不同的人群是如何成功进入职场的。

它很有趣！

服务设计师被训练成以高度协作的方式工作，并拥有广泛的创造性方法来将这种思维模式带到公司中。

系统的、创造性的解决问题的方法的结合产生了大量的解决方案，并激励着团队不断创新。让我们玩得开心!服务设计方法放大了你克服障碍的潜力，使雄心勃勃的想法成为成功的现实。

我认为服务设计是当今商业世界中最重要的设计分支。-Kerry Bodine, Forrester Research副总裁兼客户体验部首席分析师

持久的客户关系

服务设计提供了创造性的、以人为中心的方法、工具和技能来执行策略。用这种方法来弥补公司所能做的和人们需要和想要的之间的差距。其结果将是创造更好的体验，建立持久的客户关系。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：马克笔设计留学

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

在工作中，由于每个人对用户目标、用户需求的理解点不同，而且每个人多多少少从自身体验出发，设计师、产品、技术人员很难对产品达成一致，导致产品需求评审、设计评审过程中发生很多争论、分歧，而且很难说服彼此。大家可以回想一下，是不是也经历过这些？

设计师和开发、产品经历，通常来自不同背景和经验的团队，他们必须就项目目标、用户需求和行为，甚至所涉及的组件流程达成共识。这种共同理解通常是通过可视化（通常称为映射）构建的。映射理解并描述了与产品相关的各个方面和过程。

四种类型的映射

本文概述了四种常用映射、它们的定义特征以及何时使用：

• 同理心地图

• 客户旅程地图

• 体验地图

• 服务蓝图

外，本文将概述在创建这些映射之前必须做出的准备。

同理心地图

同理心地图帮助团队成员了解用户的心态。

定义： 同理心地图是用来表述我们所知道的一个特定类型的用户的工具。它将用户知识外化，以便 1) 建立共同的理解，以及 2) 辅助决策。

特征：

• 地图分为 4 个象限：所说、所想、所做、感觉。

• 它显示了用户对与产品相关任务的看法。

• 它不是按时间顺序或任务顺序排列的。

• 每个角色或用户类型都有一个移情图（1:1 映射）。

为什么使用它：

• 与用户建立同理心

• 强制团队内部人员对齐和理解用户类型

何时使用：

• 任何设计过程的开始

• 在对用户访谈中的研究笔记进行分类时

客户旅程图

客户旅程地图侧重于特定客户与产品或服务的互动。

定义： 客户的旅程地图是过程的可视化：一个人为了实现特定的业务或产品目标的过程。它用于理解和解决客户的需求和痛点。

在最基本的形式中，旅程地图首先将一系列用户目标和操作编译到时间线框架中。接下来，用用户的想法和情感充实骨架以创建叙事。最后，该叙述被浓缩为一个可视化、用于传达将为设计过程提供信息的工具。

特征：

• 该地图与特定产品或服务相关联。

• 它分为 4 个泳道：阶段、行动、思想、心态/情绪。

• 它反映了用户的观点：

• 包括她的心态、想法和情感

• 省略大部分流程细节

• 它是按时间顺序的。

• 每个角色/用户类型有一张地图（1:1 映射）。

为什么使用它：

• 确定导致痛苦或愉悦的特定客户旅程接触点

• 打破孤岛，对客户旅程建立一种共享的、组织范围内的理解

• 将旅程中关键接触点的所有权分配给内部部门

何时使用：

• 在设计过程的任何时候，作为整个产品设计周期中团队之间的参考点

体验地图

体验地图概括了跨用户类型和产品的客户旅程地图的概念。

定义： 体验地图是“一般”人为实现目标而经历的整个端到端体验的可视化。这种体验与特定业务或产品无关。它用于理解一般的人类行为（与客户旅程地图相反，后者更具体并专注于与特定业务相关）。

特征：

• 它与特定的产品或服务无关。

• 它分为 4 个泳道：阶段、行动、思想、心态/情绪。

• 它提供了一个普遍的人类视角；它不是特定于特定用户类型或产品/服务的。

• 它按时间顺序描述事件。

为什么使用它：

• 了解一般人类行为

• 创建对产品/服务不可知的体验的基线理解

何时使用：

• 在客户旅程地图之前，以获得对一般人类行为的理解

• 将多种体验（工具和特定用户不可知）融合到一个可视化中时

服务蓝图

服务蓝图是客户旅程地图的对应物，专注于员工。

 

定义： 服务蓝图可视化不同的业务组件之间的关系-人、道具（物理或数字证据）和流程-这是直接与接触点在特定客户的旅程。

将服务蓝图视为客户旅程地图的第二部分。与客户旅程地图类似，蓝图在涉及许多服务相关产品的复杂场景中发挥着重要作用。蓝图是实现全渠道、涉及多个接触点或需要跨职能工作（即多个部门的协调）的体验的理想方法。

特征：

• 它与特定服务相关联。

• 它分为 4 个泳道：客户行动、前台行动、后台行动和支持流程。

• 它反映了组织的观点：

• 专注于服务提供商和员工

• 遗漏了大多数客户详细信息

• 它是按时间顺序和等级划分的。

为什么使用它：

• 发现组织中的弱点

• 确定优化机会

• 弥合跨部门的努力

• 打破孤岛并创建一种对如何提供服务的组织范围内的共享理解

何时使用：

• 客户旅程映射之后

• 在进行组织或流程变更之前

• 在内部查明漏斗或断点时

三步决策框架 

在开始任何映射工作（无论类型如何）之前，必须做出 3 个决定：

1. 当前与未来

这个决定涉及可视化中描述的动作和状态：它们反映了当前状态还是理想状态？

• 当前映射基于您正在映射的实际“今天”状态。当映射目标是识别和记录现有问题和痛点时，这种方法是理想的。使用当前状态图帮助分析研究或围绕数据验证问题调整团队。

•  未来的映射基于用户类型、体验或未来服务结构的“理想”状态。未来状态图有助于重塑和构思用户或体验在未来的感受。使用未来状态图为您的产品或服务的理想形式设置基准或目标。

2. 假设与研究

此决定取决于您将用于构建映射的输入类型。 

• 假设映射基于团队或组织内现有理解的积累。这种方法是合并多个现有团队视图、创建研究计划（基于假设图中出现的差距）以及迈向更高保真度、基于研究的地图的第一步的好方法。 

• 研究制图基于专门为构建地图而收集的数据。当有时间和资源专门用于制定研究计划时，这种方法是最好的。虽然这种方法可以创建最好的地图，但它需要时间和大量的支持。无论您从哪里开始，您的地图都应该是迭代的，并随着新发现不断更新。 

3. 低保真与高保真

该决定与最终地图可视化的质量有关。

• 低保真地图未经打磨，通常以灵活、未经修饰的方式使用便签创建。这些地图在过程的早期阶段是最好的。低保真度意味着人们能够根据需要进行协作、修改和更新。使用便利贴（物理贴在墙上或使用 Mural.co 等工具以数字方式进行）或协作 Excel 表格。

• 高保真地图经过打磨、数字化创建，看起来很完美。高保真地图最适合创建将在许多人之间共享的工件。高保真可以更容易阅读，但由于产品的“完成”性质，灵活性较差。这些地图通常以数字方式创建，然后分散。

结论

所有 UX 映射都有两个好处。首先，创建地图的过程会迫使对话和一致的心理模型。其次，映射产生的共享工件可在团队、组织或合作伙伴之间使用，以传达对用户或服务的理解。随着团队的前进，这个工件也可以成为决策的基础。

在一种映射方法上使用另一种映射方法不会对项目造成破坏，理想情况下，可以根据需要在产品设计流程的不同节点使用所有四项的组合，以深入了解用户需求。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：ZZiUP

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一些典型问题也相应显现：上手就干、主观设计、缺少方法、忽视跟进等等。

所以我们撰写了「UI标准设计流程」，希望能为UI设计师提供对于设计支撑思路的共识，让设计更有价值：

从接到需求到上线后跟踪，我们把流程拆分为五个节点：需求分析-交互设计-视觉设计-视觉规范-方案验证。

当然，在设计流程中我们只表达不同流程中的行为目的及标准，相关方法论我们会配套一份「设计师成长指南」，不久之后再与大家分享。

1.需求分析

我们在接到一个设计需求后，要做的第一步是进行分析并确定设计目标。

我们需要：了解背景、用户和竞品，能准确理解产品定位和需求目标，评估需求的合理性和准确性，并提供相应策略；甚至洞见机会点，通过设计对业务产生正向价值。

背景分析

目的：背景分析是为了让我们在刚接触产品的时候，去洞察表面背后的东西。通过背景分析，能帮助我们快速切入产品，并根据已有信息去制定准确并具有说服力的设计策略。

行为：我们需要了解：产品的定位及价值是什么，它的现状如何，是否有既往的数据沉淀或经验总结。

用户分析

目的：对UI设计师而言，用户分析是为了让我们更好地了解产品，并拥有对整个产品的宏观思路。通过用户分析，能为我们的视觉设计提供方向，并为我们做出决策提供实际落点。

行为：我们通常需要了解：用户画像、用户需求、用户行为、用户路径等。

竞品分析

目的：竞品分析能够让我们获得行业内的优秀经验，减少我们的思维盲区，同时还为我们提供了一份可被量化的标准，使我们可以基于竞品去反推现有产品。

行为：UI设计师可以从竞品定位、主要功能、迭代动向、产品结构、页面布局、交互动效、视觉设计、优劣势对比这几个维度去进行竞品分析。

需求评估

目的：在了解以上的通用信息后，我们要对需求进行评估，去决定采用哪种方式、制定什么样的策略。

行为：我们接到的需求，通常可以分为三种：全新产品类、产品改版类、功能新增或优化类。

           对不同类型的需求，我们都可以用5个问题去评估：

           1.是否可被证伪？

           2.目标是否明确？

           3.投产比如何？

           4.是否有更优解法？

           5.是否有可预见风险？

           基于以上问题，我们可以去协同交互、产品做相应调整和策略制定，甚至发现新的机会点并进行推动。

目标对齐

目的：设计为目标服务，所以我们要在设计开始前与需求方对齐目标，这也能为设计价值的佐证提供标准。

行为：设计目标通常有3种，我们可以从中去对需求目标转译：提升数据型、解决问题型、创新项目型。

           针对不同目标我们可以去制定不同的设计策略，并对策略的落地进行数据监测与分析，进行方案校正。

2.交互设计

在产品流程中，交互设计的作用在于，通过信息架构的组织去产出体验流畅的界面原型。

我们需要：充分理解整体流程与交互原型，基于设计原则去发现可优化的部分；同时能平衡产品、设计与开发的效益最大化，并驱动产品的体验提升。

设计原则

目的：设计原则能为我们提供一个行之有效的设计向导或提示。熟知各类设计原则，能使我们在设计支撑时，拥有更丰厚的专业度和更敏锐的洞察力。

行为：我们需要去了解市面常见的Guildline如iOS、Material、UWP等，以及一些常用原则如菲兹定律、格式塔理论等等。

流程梳理

目的：流程的再梳理，可以帮助我们在视觉设计前，快速地理解和诊断流程逻辑。

行为：在流程再梳理的过程中，我们需要注意以下4个问题：

           1.功能是否完整？

           2.链路是否流畅？

           3.步骤是否冗余？

           4.是否易于理解？

           基于以上问题，我们可以用自身的专业储备去推动流程的优化。

原型优化

目的：交互原型是需求内容的外在表现，通过原型优化，可以最大程度地避免视觉评审后的设计返工。

行为：在对交互原型优化的过程中，我们要重点注意以下4个问题：

           1.架构是否符合目标

           2.层级是否足够精简

           3.信息是否传达准确

           4.状态是否有所缺失

       在视觉设计时，我们基于以上四点可以去同步优化原型，并根据经验去寻求体验和成本的最佳平衡。

3.视觉设计

视觉设计是产品与用户直接连接的媒介，优质而恰当的视觉设计，可以极大地提升产品吸引力。

我们需要：基于分析确定视觉方向、定义设计语言，输出准确且高质量的视觉页面。

设计情绪板

目的：设计情绪板可以为设计语言的构建提供可视化参考，也有助于我们前期快速与各方达成共识。

行为：我们通常基于分析，去确定设计关键词，并基于关键词去衍生映射物、建立图形情绪板，最终分析和确定设计方向。

设计语言

目的：设计语言是情绪板的具象表达，它将构建起用户对产品的视觉感知。

行为：在明确设计方向后，我们就要基于情绪版去定义设计语言，主要包括主视觉、色彩、字体、图标、图形、动效等。

典型页面

目的：典型页面是设计语言在场景中直观体现，这有助于我们制定设计规范，并为其他页面的设计提供参考。

行为：我们通常需要设计首页、频道页或其他具有示例作用的典型页面，在设计的过程中我们还需要同步去规范间距、卡片、视觉变量、图形应用等，以此为视觉规范夯实基础。

4.设计系统

在设计典型页面的同时，其背后其实已经对应了一套设计规范和组件，而我们基于此去整理并沉淀出设计系统，能极大地提升统一性和迭代效率。

我们需要：制定完整、清晰的基础规范，沉淀图标库、组件库等，并持续优化和更新，形成可持续沿用的产品设计系统。

基础规范

目的：基础规范是设计语言的沉淀，也是视觉变量的基本粒子。它可以保证页面的基本统一，同时我们可以基于不同业务快速地拓展其他主题。

行为：在我司，一份基础规范的构成包括：色彩、字体、间距、布局、断点、层级、圆角、透明度、阴影。

图标库

目的：图标规范可以帮助其他成员快速、准确地进行图标拓展，而沉淀的图标库也可以极大地提升产出效率。

行为：基于具体需要，我们可以设定多套图标风格，规范其栅格、笔画、圆角等，并将已有的图标资产进行沉淀。同时我们也会去规范一些常见图形并沉淀，如空态插画、悬浮入口、徽章、商品等。

组件库

目的：组件库是对常用控件进行设计规范、开发、封装的可被复用的集合，组件分而治之，可被自由组合，能保证设计品质、统一用户体验、提升产研效率。

行为：在我司，一套组件库通常包括：通用、布局、导航、数据录入、数据展示、反馈、其它。除通用原子组件外，我们也会对常用模块进行梳理，沉淀业务组件库。

5.落地跟踪

在设计完成之后，我们需要对设计方案进行评审、验收及数据跟踪，以保证设计方案的落地并跟进调整。

我们需要：运用合理策略以保证设计方案的高质量落地，对方案上线后的用户反馈进行有效跟进，运用多种方式验证目标，迭代产品。

设计评审

目的：设计评审通常包含了交互与视觉，其目的在于审查设计方案中的可用性问题。

行为：在我司，视觉评审即终评，我们需要在视觉稿中标注出所有交互逻辑，并对潜在问题有预判，能与各方确认目标、分桶与数据埋点；同时我们要对开发实现有预判，能与研发确认实现细节。

设计验收

目的：设计验收是为了确保需求满足、体验流畅，并且设计细节能高质量落地。

行为：视觉设计师主要验收视觉细节的还原度，并且要在一定程度上对开发的适配、样式解法有预知，减少二次验收。同时需要保证验收有沉淀，利于后续跟进。

数据验证

目的：数据验证除了分析分桶之外，也可以分析产品上线后的一些问题、并在迭代中修改。同时我们也可以总结设计经验、提升未来设计的准确率。

行为：我们通常基于设计策略，去对数据进行筛选与分析，以此衡量设计对于目标达成的增益度。对于有问题的，能反思并且修改；对于结果好的，能总结并且沉淀。

设计复盘

目的：设计复盘以结果为导向，我们可以通过复盘对设计策略的价值进行总结验证，并去发现、优化流程中的不足之处。

行为：我们需要陈述设计目标和策略，对设计价值进行验证，并能总结过程中的亮点与不足，制定后续计划、沉淀相关经验。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：酷家乐UED

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、尽量减少用户等待的情况，尽可能缩短等待的时间

如当用户浏览网页的时候，若在用户浏览到已加载内容的倒数第5条再预加载10条内容，可缩短用户浏览接下来内容时的加载等待时间。再如生活中医院的预约挂号系统，用户可以提前一两天挂号，当预约时间到了直接到指定科室看病，避免了长时间的排队挂号。

二、如果是不可避免的等待，该用什么办法去优化等待体验呢？

总的原则是：在用户等待时给予用户反馈，告知状态，且尽量让用户在感知上缩短等待的时间。反馈可根据等待的预估时间不同、场景不同，选取不同形式。

• 一般情况下理想的响应时间应该控制在 100 毫秒内，一些响应的时长可允许达到1秒，绝不可超过2秒无反馈。

• 若是等待响应时长为2-9秒时，可设计循环的加载动效（loading），告知用户正在加载中。

• 若是等待响应时长超过10秒时，可设计带有进度指示的加载动效。此时除了告知用户正在加载中（即告知等待原因和当前状态），还要告知用户预期响应的时间。

可采取分步响应用户的方式，多次反馈，可让用户在感知上缩短等待的时间。

如一些页面内容较多，加载时能分步显示，可按照框架、文本、占位图、图片的顺序加载显示，会在感知上缩短加载时间。又如加载一个新视频，视频前几帧优先显示最小体积的视频资源，等较高清视频内容加载出来时再切换为高清视频资源，可缩短用户等待视频开始播放的时间。

唐纳德诺曼提出过排队等待的6个设计原则，可以很好地帮助我们设计等待体验，6个原则分别是：

（1）提供一个概念模型。

（2）使等待看起来合理。

（3）满足或超越期待。

（4）使人们保持忙碌。

（5）公平。

（6）积极的开始，积极的结尾。

下面我们就说说这6个原则在优化等待体验上的运用：

1. 提供一个概念模型

概念模型是帮助人们把复杂自然现象转变成可用的，可理解的心理模型。概念模型可以帮助用户理解事物，了解事物如何运作以及当前处在哪个阶段、理解当前为什么处在等待状态，以及产生对未来即将发生事情的预估和期待。

如用户通过饿了么下单后，app上会用插画显示商家备货、骑士送货的过程。让用户了解外卖送到手中的整个流程，以及当前处在流程的哪一阶段，距下一阶段预估还有多久。如果是雷雨天，订单页面的插画还会模拟实时天气情况，用户看到插画想到骑士正在雷雨环境下送货取货，也会理解骑士配送辛苦、理解当前配送缓慢，缓解等待时的负面情绪。

2. 使等待看起来合理

使等待看起来合理，即通过概念模型使用户理解为什么要等待，明白等待是有缘由的。

如用滴滴打车时，当我们按下呼叫快车按钮，页面会显示动效光波信号向外扩散，同时会显示当前排队人数。设计师通过设计建立一个简易的概念模型，让用户理解当前的等待的原因，并认为等待是合理的。实际上滴滴派单的算法流程可能与页面显示的流程不同。但用户等待时会理解此时手机正在发出信号请求驾车信息、或此时正有多人在排队、或此时正在等待司机接单。

3. 满足或超越期待

满足或超越期待指用户给等待时间估算时长时，如果用户实际的等待时间比心理预期的等待时间要短，用户会有相对比较好的心理体验。

心理学专家曾做过一个实验，同等时间下，同样长度的进度加载条有三种进度显示方式：进度条速度匀速、速度先快后慢、速度先慢后快。三种相比较发现，当进度条增加速度先慢后快，用户的体验最好。而用户体验最差的是加载速度先快后慢，因为如果开始的时候加载速度比较快，用户一开始就有了较高的心理预期，当速度变慢时便低于用户的心理预期，感知体验就会变差。

4. 使人们保持忙碌

使人们保持忙碌即让用户在等待的时候有事可做。因为当人们非空闲时，对时间的心理感知会比空闲时对时间的心理感知要短。

利用这个原则的设计如：CorelDRAW软件下载安装时，软件安装等待页面除了显示进度条还放映国际优秀设计图片，CorelDRAW用户一般都是设计爱好者或设计从业者，通过让他们浏览优秀设计图片来度过软件安装时间，避免用户纯空闲等待。

5. 公平

当用户正在等待时，如果等待看起来是合理且公平时，不易引起用户的负面情绪。如果等待看起来是不公平的时候，更容易引起用户的负面情绪。如：当你正在排队买票时，同等条件下，你看到后来半小时的人比自己先买到了票。你可能会抱怨，“为什么比我晚来半小时的人都排到了我却还在等”。

针对公平方面的设计如银行的叫号办理业务系统。用户统一到取号机前取号，每当一个窗口的空出来，叫号系统便叫一个最早的号去该窗口办理业务。这比人们直接分散在多个窗口排队会更公平，不会出现早来却因为这个窗口排队慢而导致等待时长比晚来的用户更长的情况。同时把多个小队伍变成一个大队伍，用户感知上也会觉得队伍移动的更快，也有助于降低等待的负面情绪。

6. 积极的开始，积极的结尾

德国心理学家艾宾浩斯曾提出系列位置效应，指记忆材料在系列位置中所处的位置对记忆效果发生的影响，包括首因效应和近因效应。（来源：百度百科）即人们回忆体验时，在最开始和最后的体验比中间的体验更能让人印象深刻。所以当我们在设计等待流程时，要保证等待开始和等待结束时有较好的体验。

如当我们在餐馆排队结账时，一些餐馆结账台旁边会放着一盘薄荷糖，收银员帮用户办理结账时会对用户说可以拿几颗薄荷糖。这个小奖励会让用户走出餐馆后对刚刚结账时排队等待的不好体验的记忆变弱，而对最后的薄荷糖有更深的印象，从而对餐馆也留一个相对好的印象。

关于等待体验的优化设计案例还有好多，但基本的设计原则是相通的。

我们在实际设计时可先整理用户整个体验流程中可能等待的点，看看哪些是可以通过设计或技术缩短实际等待时间的。针对不能缩短实际等待时间的点，我们先预估每个等待的时长，并设计概念模型让用户理解等待的缘由且能预估等待的时间，且采取合适的方式让用户在感知上尽量缩短等待时间。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：酱紫Y

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

导读

你的设计是否能被理解？为什么设计的价值总是不被人认可？

设计不仅仅只是带来美感，好的设计能够为产品、公司甚至整个社会创造巨大的价值。而在创造好的设计这个过程中，最重要、也是最容易被人忽视的，便是设计思维。

何为全局性设计思维？它能够为设计师带来哪些价值？本文将从设计的本质出发，结合设计的发展趋势，带你了解全局性设计思维的真正力量。

目录

写在前面

一个习惯性的序

一、我们为什么需要设计思维？

二、下一个时代在哪里？

三、互联网“下半场”，从大势中看变化

四、设计思维的转变，差异与融合

五、探寻全新的思维方式

六、全局性设计思维概述

七、如何运用全局性设计思维？

八、以全局性设计思维，构建设计体系

九、文章预告

末

-

写在前面

这篇文章的主要内容，来自我在19年底的一个沙龙分享。整个分享以设计思维的角度入手，讲述了全局性设计思维的来源和重要性，以及我是如何在不同产品线上去运用这种设计思维的。

何为全局性设计思维？为什么要讲这种思维方式？

这是我一直在探索并实践的一种设计思维。从最开始的理论雏形，到各种项目的实践，不断进行修正和完善，最终形成了一套卓有成效的思维方式。通过这种思维方式，我逐步帮助产品解决了许多长期性的问题，并最终构建了各种不同类型的设计体系。最终，随着品牌矩阵与产品体系的落地，形成了一个完整的网易智慧企业设计体系。

网易智慧企业设计体系

因为篇幅原因，本篇文章将重点从理论层面阐释全局性设计思维的导论、价值及使用方式。而具体的实战案例，我之后将会以另外几篇单独文章的形式进行展现，并详细讲解在设计过程中的一些细节与过程。希望能够帮助大家更深入地去理解如何根据不同的场景正确地去使用这种思维方式。

未来可能会包含以下几篇文章：

全局性设计思维 | 如何打造强大的品牌体系

FishDesign组件库 | 从零到一构建企业级UI组件库

全局性设计思维 | 如何构建事业部级大型设计体系

当然，目前的设计体系仅仅只是一个开始，未来还有很长的路要走。

希望本文能够给为你带来小小的启发，让设计思维帮助你更好地发挥设计的价值。如果你对某一方面特别感兴趣，可以直接跳到这一章进行阅读，无需浪费过多时间。如果你有任何疑问，也欢迎随时与我交流。

✨

一个习惯性的序

-

“喵呜～”   我又出现了，那个爱写序的装逼作者。

这次把序放在了第二段，这样子看上去就不那么不务正业了哈哈。当然，写序更多的是为了记录生活，希望每一篇文章不仅仅只是传递知识，更是一篇有温度的文章。

经历了风风雨雨的2019，又度过了魔幻版的春节，我终于又开始正式地写文章了。但这次不同，我拥有了两只可爱的小伙伴——汽水和芬达。汽水8月18出生，芬达8月20出生，现在都已经是肥肥壮壮的两大只了。。

汽水总是在我码字的时候，睡在我的键盘上，或者以各种姿势吸引我的注意力。。  为啥拖了这么久才写写完文章，除了懒以外，汽水大概也要背点锅，哈哈。

整个2019年中，经历了很多事情，人生观也随之发生了些许变化。

从并肩作战的同事的不断离去，到逐渐需要考虑团队的发展。从单打独斗闯天下，到思考如何让整个团队更加优秀、如何建立完善的设计体系等等。

角色、心态、责任，以及如何坦然地面对自己。

活在当下，用心生活。这是我一直当作座右铭的语录，也是我希望给自己的承诺。总是试图去尝试这种状态，但却异常艰难。像我这样的人，看上去总是“积极向上”，总是“规划未来”，总是希望事事完美，强迫着每个细节的完善。但不知不觉中，人生好像开始进入了“自动驾驶”的模式，活在了过去的思索中，活在了未来的规划中，唯独对于当下异常麻木。

这并不是我想要的生活，我开始尝试做出改变。

偶然间，通过一些书籍，我开始尝试正念禅修。感受每个呼吸中空气的流动、感受身体的每个部分、感受当下空间发生的每一件事情。虽然只是很浅显的境界，但正念依然对我产生了巨大的影响。我开始重新地审视自己的人生，审视自己的生活状态。

网易蜗牛图书馆：与快乐的小伙伴们

这种感觉，就像再次地呼吸了新鲜空气一样。

我们其实只存在于当下的时空中，过去和未来，并非真实存在的事物。回想一下，我们有多久没有像小时候一样，完完全全、毫无杂念地享受在当下的时光中了？

用心活在当下，平静地接纳一切发生的事物，这种感觉真是太美好了～

✨

一、我们为什么需要设计思维？

-

对于设计师来说，什么能力更为重要？是设计这门“技术”本身，还是思考如何去设计的“思维”能力？

对于不同的设计师来说，一定会有不同的答案。

这两种能力本身并不矛盾，他们相互影响，互相促进——就像“术”与“道”之间的关系。设计能力决定了设计作品的输出质量，而设计思维则决定了你思考问题、解决问题的能力。

然而，在现实的大环境下，“术”的重视程度远高于“道”，造成了很多设计师与日常业务的“分离感”。以至于，多数的设计师，无法将自己的设计能力有效地用于日常业务中；抱怨他人不理解设计，也因此错失了许多机会。

重视设计美感，其实并没有问题。视觉是最直接的表现方式，我们从最初开始喜欢这个行业，并最终成为设计师，大概都是因为如此。包括我个人，也是美感的极致追求者，常常为了几像素的细节，调整无数稿。也常常沉浸于自己的作品无法自拔emmm…

但是，美感之后，设计还需要什么？

路易斯·沙利文曾讲过：“形式追随功能”。而功能存在的意义，则在于解决问题。视觉的形式、美感，很多时候只是包裹在外侧的表层，而解决问题才是设计真正的核心。视觉的表现，一定要遵循解决问题的方式，向用户传递恰当的信息，最终引导用户以此来解决问题。

因此，我更希望更多的设计师，在追求美感的同时，能够重拾设计思维本身，寻找设计最根本的价值。

我们其实可以站得更远一些。学会去理解事物，学会用设计去解决问题。再以此为基础，通过你的设计能力去塑造它、点亮它，让它成为一个真正美好而又有价值的设计。

而设计的价值，将会成为你的价值。

✨

二、下一个时代在哪里？

-

互联网时代中的数字产品设计，需要什么样的设计思维？或者说，当下我们需要什么样的设计思维？

这个问题的答案，好像一直在变。

互联网本身便是一个新的形态，1989年“万维网”发明，1996年中国引入互联网，到今年已经有大约24个年头。我们经历了不同的互联网时期，而“设计”的概念也一直在变化中。

Internet 1.0 PC互联网时代。在这个时代，我们将大量的信息虚拟化，并通过网络进行信息传递。而我们的“设计师”们大多被称为“美工”，我们的“设计思维”，便是将信息变得更好看。

Internet 2.0 移动互联网时代，或者称为消费互联网时代。自从2007年乔布斯发布第一代iPhone之后，叠加4G、wifi等技术，手机成为日益重要的终端，世界逐渐进入了移动互联网时代。伴随着iPhone与其应用的出现，乔布斯让所有人理解了“用户体验”的重要性。我们不再是“美工”，我们变成了“UI设计师”、“交互设计师”。而这个时代，我们的设计思维变成了“用户体验思维”。

那么，下一个时代在哪里？我们的设计思维又将如何转变，才能适应下一个时代？

✨

三、互联网下半场，从大势中看变化

-

1.红利消失、增长触顶，互联网下半场到来

最近几年，我们已经能够明显地感知到——互联网的“寒冬”真的来了。随之而来的，便是互联网的发展方向似乎也正在发生变化。于是大约从2017年开始，互联网圈内逐渐出现一个新的名词——互联网“下半场”。人们普遍认为，中国的互联网将会由消费互联网时代进入下一个时代，即互联网下半场。

我并不完全认同互联网”下半场“的称呼。互联网本身是一个年轻的行业，中国互联网“下半场”，其实更像是互联网发展方向转变的标志。

因此，我们认为的下一个时代的方向，也许将会是Internet 3.0——即产业互联网时代。

互联网会什么必须要进入下一个时代？

对于互联网企业来说，一方面在成本端，随着人口红利消褪，劳动力价格上升，企业的成本将逐渐升高，倒逼管理者使用系统和工具来提高效率；另一方面，在收入端，野蛮增长的时代结束，增量经济转向存量经济，红利经济转向效率经济。

在“成本”与“效率”的双重压力下，再加上整个市场经济的下行周期，整体经济出现下滑，而一些依靠融资的互联网公司将难以为继。因此企业不得不寻找方式来提升效率，降低成本——而这正是企业级软件（ToB产品）最擅长的地方。

因此，在互联网寒冬之下，ToB市场便理所应当地开始被重视。

让我们纵观整个中国市场的发展，互联网的兴趣虽然促进了消费领域的蓬勃发展，但产业领域的发展则因此受到了巨大制约。中国率先从消费端、从第三产业开始数字化，然而在第一、二产业的数字化进程似乎并不是很快。一个重要的原因是，人口红利促使了消费互联网的快速发展，而这种红利让人们忽视了产业互联网的重要性。

在寒冬之下，我们终于发现，消费互联网蓬勃的基石，正是底层坚实的产业互联网。产业互联网如果不能得到有效的发展，则整个市场经济将无法更进一步的发展。

因此，产业互联网时代的到来，是中国互联网发展的需要，也将是大势所趋。

2.ToB市场将迎来机遇

产业互联网的发展，需要依托B端领域的发展，并逐步融入并带动整个产业进入互联网时代。那么，B端产品在中国目前处于一个什么阶段呢？

对于整个中国的ToB行业发展现状，大多数的人并没有一个清晰的概念。盘点中美上市的科技公司会发现，美国toC领域与toB领域市值之比是6:4，但在中国这个数字是20:1。

虽然互联网的整体环境不同，但中国ToB行业的发展，显然是落后太多了。于是乎，2018年开始，BAT大举布局，PE、VC加速进场——中国B端产品已经逐渐进入必须发展的时候了。

中国市场已经坐拥全球最发达的发达的消费互联网体系，而产业互联网的发展则却严重滞后。

同时，对比B端中云计算领域的IaaS、PaaS、SaaS三层架构，全球市场中SaaS占据了52.5%的份额，在中国却是IaaS分走了最大的蛋糕，占比达61.2%。中国市场VC的投资总额已经与美国相当，在SaaS领域美国企业获得了全球70.1%的融资，而中国只有11.7%。

因此，在互联网下半场，相对于ToC行业的触顶，ToB行业将会迎来历史级的发展机遇，随之而来的将会是产业互联网时代的逐渐到来。而在整个B端产品的类目中，SaaS产品作为企业级软件中最集成的产品，也将随着这股浪潮迎来爆发式的增长。

什么是SaaS产品？很多同学并没有接触过B端行业，平时用到的也都是C端产品，所以对B端产品的了解比较少。在B端行业最热门的云计算领域中，目前普遍会分为三层架构。SaaS（Software as a Service–软件即服务）；PaaS（Platform as a Service–平台即服务） ；IaaS（Infrastructure as a Service–基础架构即服务）。

附：云计算领域，三种不同的架构与对应的服务。

PaaS基于IaaS实现，SaaS的服务层次又在PaaS之上，三者分别面对不同的需求。越往上层，产品的集成度越高，提供的服务也就越丰富，而用户所需要的自行解决的东西就越少。而最顶层的SaaS产品，便是用户可以直接购买并使用的云端产品。

我们为什么要了解这些趋势？

因为一个新的时代，对应一场变革，也将成为一次新的机会。不管是SaaS产品还是其他B端产品，都将在新的时代中逐渐得到重视。而C端产品的发展策略，也将迎来新的变化。对于许多设计师来说，这将会是一个新的机遇。

顺势而为，方能乘势而上。

✨

四、设计思维的转变，差异与融合

-

那么，在逐渐到来的产业互联网时代，设计师需要注意哪些东西？设计思维又将进行如何转变？

产业互联网时代，意味着B端产品将得到重视，并与C端产品逐渐趋于平衡。因此，了解设计思维的变化，我们首先要从B端与C端产品之间，在产品设计与产品策略之间的差异性说起。

1.服务对象的差异性

从服务对象来看，C端产品的服务对象是人，产品的目标是针对人们生活方式进行的变革、升级。而B端产品的服务对象则大多是企业，目标是帮助企业进行商业效率的提升，从而产生价值。

服务对象的差异性，决定了产品在发展策略也将存在着较大的差异性。

2.产品“打法”上的差异性

从宏观的打法上看，消费互联网时代会更求“快”，而产品互联网时代则会更偏“稳”。

C端产品的服务对象是人，而人的需求在个体差异性上相对变化较小，这就决定了C端产品通常都拥有广阔的用户市场。

因此，消费互联网时代就像是资本在辽阔平原的角逐，长驱直入。讲究快速占领市场，不断地试错、不断地调整。从团购到直播，从打车到短视频领域的兴起，再到最后的单车大战落幕。消费互联网时代的每一次风口，都伴随着各种“游击战”式的竞争。入场速度、快速调整能力、资本深度，都直接影响了最后的结果，而最终的结果也往往是胜者为王，败者将快速地被市场淘汰。

B端产品的服务对象是企业，而企业间的需求差异性则非常巨大，这就决定了B端产品通常需要较强的纵深能力。相对应的，其用户群里在总量上就比较小、但也相对稳固。

因此，产业互联网就像在崎岖丛林的蹒跚前行，渐次演进，如同一场旷日持久的拉锯战。一方面，产业互联网的链条非常长，需要长期的深耕、积累才能逐渐站稳脚跟。而这也导致了产品的壁垒足够深厚，同类产品在短期内无法快速跟进。另一方面，企业间的差距需求的差异性非常大，因此产业互联网存在非常多的细分市场，不同的产品各自在不同的赛道中深耕。而其最终的结果往往是百花齐放，各自盛开。

3.整体行业的协同发展

虽然整个市场都不断地强调——ToC增长触顶，ToB是一篇蓝海。但这并非是“取而代之”，而是逐渐走向整体的“协调发展”。中国ToB的发展的一个重要根基，其实是“中国拥有世界上最成熟的消费互联网体系”这一巨大的优势。

因此，ToC在很长的时间内，仍然会是互联网的主力，而ToC市场的转型，也将有赖于ToB产品所提供的服务。

而随着中国将“互联网+”政策上升为国家战略，更是明确了以互联网带动传统产业的发展方向。因此，互联网的下半场，即产业互联网时代的最终形态，将是互联网与传统行业的“融合式发展“。

ToB产品将会成为带动互联网下一轮发展的核心驱动力。一方面帮助ToC领域完成转型，进入更健康、更稳健的发展阶段；另一方向，ToB领域赋能传统产业与互联网相融合，并最终完成产业升级。

4.产品形态的融合与趋同

整体产业的融合趋同，意味产品的特性也将互相融合。一个很重要的现象是：C端产品逐渐变得不那么C端了，而B端产品也越来越变得得不像B端了。

比如C端产品的主流赛道中，随着头部产品的赛道日渐趋于稳定，其产品体量也因为业务扩展而不断增加。同时，因为产品体系的逐渐形成，为了服务更多的C端用户，会有越来越多的B类用户进入平台，而为了满足B类商家的需要，产品的B端属性变得越来越强了。

而随着B端产品的不断受到重视，原先不被重视的产品UI、用户体验也逐渐在B端产品中得到加强。B端用户虽然服务于B端，但使用者终究是人。而随着竞争的不断加剧，原来的“重功能、轻体验”思路逐渐式微。我们逐渐发现，许多B端产品长的越来越像C端产品了，甚至在UI和体验层面做的与C端产品不相上下。

因此，随着产品属性的融合趋同，意味设计思维势必会与消费者互联网时代存在差异。而我们的设计思维将不仅仅局限在诞生于消费互联网时代的“用户体验思维”。我们需要更新的、更广阔的设计思维，以满足下一个时代的产品发展需要。

那么，新的思维是什么？它将从何而来？

✨

五、探寻全新的思维方式

-

从整个市场的协同发展，到产品形态的融合趋同。那么，我们的设计思维需要如何进行相应的变化？是同样进行“融合趋同”，还是另辟蹊径，寻求新的视角？

1.关键词提取

首先，不管设计思维如何变化，它一定需要同时满足两种产品设计思维的特性。通过前文的分析，我们可以在产品设计特性的维度，提取各自的关键词进行分析：

产品体验：诞生于消费互联网时代的用户体验思维，在产业互联网时代依然是产品设计中最重要的部分。无论是C端还是B端产品，用户体验必然是产品的核心竞争力，只有足够好用、好看，产品才能获得更多用户，最终获得商业上的成功。

灵活性：在消费互联网时代，在激烈的竞争中，C端产品的灵活性的打法对于产品的突围至关重要。而未来的B端产品竞争将会加剧，这就需要B端产品也逐渐需要较强的灵活性。

成长性：产品的发展必将伴随着不断的变化，特别是具有一定体量之后，产品设计的成长性将至关重要。因此，产品的设计是否能够预见未来发展，满足不断变化的产品形态，伴随着产品不断地成长，也将成为产品是否能够持续获得成功的关键因素。

产品效率：因为产品服务对象的关系，B端产品一直是产品效率的代名词。而在人口红利消失与经济下行的压力下，产品效率将成为所有企业关注的重要因素之一。产品的效率不仅影响着企业的成本，也是产品竞争力的重要体现。

这四个关键词，将会是我们在未来所需要关注的四个重点关键词。越是往左，则“C”属性越强，因为它更多地从用户的角度出发，更关注用户体验。而越是往右，则“B”属性越强，因为它更多地从企业的角度出发，更关注企业的长期发展。

2.跳出单一层面，寻求新视角

在四个关键词中，我们会发现，特性越是靠右，其所需要的整体性就越强。要满足灵活性，就需要用户体验与产品策略相关联。要满足成长性，则要进一步结合底层的开发能力。而产品效率的提升，则需要产品的设计与不同层面都有着紧密的耦合。

在互联网设计发展的过程中，我们从单点只关注视觉表层的“美工时代”，逐渐发展为关注线性的“用户体验思维”。在对于产品用户体验层面，确实有着长足的发展。

但是，单一层面的用户体验思维，在逐渐成熟的互联网时代中，逐渐显示出了一定的局限性。我们的价值局限于单一的体验层面，我们似乎无法对产品形成更大的影响力，也难以为产品带来体验之外的更多价值。

因此，设计思维想要满足新时代的需求，就需要同时满足前文提到的四个关键词。这就要求我们需要跳出单一层面，以全局的维度去思考产品的设计。

因此，全局性将成为未来的关键，我暂且将这种思维方式称为——全局性设计思维。

✨

六、全局性设计思维概述

-

全局性设计思维，即在设计过程中，始终能以更高的维度去审视全局，思考当下的设计。

何以全局，如何跳出单一层面？这种思维方式的前提，是你要首先了解整个产品（亦或是物体、组织等）的运行方式，清楚的知道整个产品需要达到的目标，从而准确、合理地对针对目前的局部做出设计，并最终构成整个完整的形态。

而“全局”的前提，是你拥有更高的眼界。你的眼界越高，你对产品、市场、甚至整个社会的洞察就越全面，你就能够解决越大的问题，你能够实现的价值就越高。眼界是基础，解决更大的问题是目标，而全局性设计思维则是实现这个目标的方式与过程。

全局性设计思维，可以帮助我们跳出产品的单一层面，去思考从产品层、到体验层、再到开发层这一完成的整体。让设计满足体验层的同时，满足产品层面的目标，同时让产品的设计与开发高度耦合，将整个产品串联成一个完成的整体。

好了，讲了这么多，我们具体应该如何去运用全局性设计思维呢？

✨

七、全局性设计思维的运用方式

-

全局性设计思维，的应用方式非常广泛。它并不是一个固定的方程式，而是一个更高层面的指导性设计思维，能够通过不同的形式，来帮助你解决问题。

1.全局观——在生活思考更多可能

在尝试这种思维之初，我们可以通过一些小的实践，去锻炼这种思维能力。

在日常的生活、工作中，其实我们有大量的事物可以练习和运用这种思维方式。比如你在装修一个大房子，需要去选择房子里的家具。当你在购买家具时，常规的思维方式是：这个家具在某个房间时应该是怎样搭配的，所以我要购买什么样形状、颜色的家具，来满足这个房间的需要。

但是，用这么思维方式来购买家具，将为对家具的灵活性与长期价值造成一定影响。从居住环境的长远来看，也许这个家具有可能会因为某些原因，需要放到另一个房间，而它的形状、尺寸、配色却无法满足其他房间的需要。最终，我们只能重新购买，或者接受一个风格、尺寸上并不搭调的房间出现。

因此，当我们在购买家具时，我们是否可以利用全局性设计思维，从整体空间的角度出发（而非单个房间），去思考如何让家具满足更多空间需求。长此以往，我们不仅可以打造一个风格统一的大空间，同时也能增加每个家具的利用率，在无形中也增加了这个家具本身的价值。

之所以举家具这个例子，是因为这个原理与产品设计的原理非常类似。你可以将这个房子看成是整个产品，而家具则是不同的组件。通过不同的家具（组件），构成了我们的不同功能模块（房间/功能区），而所有的功能模块则构成了整个产品（房子）。

房子（产品体量）越大，房间/功能区（功能模块）就越多，家具（组件）的多样性、复杂性就越高，我们就越是需要从全局的角度去思考装修的统一性（风格体系化）和家具的通用性（样式组件化）。只有这样，我们才能更好地去打造一个风格统一、体验一致，同时又具备足够自由调整空间的“大房子”。

2.全链路——从全流程中重新思考设计

当你仔细地去理解许多非常著名的设计作品时。你会发现，几乎所有优秀的、巧妙的设计，往往在设计中都体现了全局性的设计思维。它不仅仅解决着当前的问题，同时也能够解决更大的问题，发挥巨大的价值。

比如著名的坂茂卫生纸的设计，看似普通，只是将卫生纸的轴心从圆形改成了方形，但它却成为了举世闻名的、公认的好的设计。为什么呢？

我们先了解一下这个设计为什么好。

首先，传统的圆形纸卷拉出来的纸会比你实际需要的更多。而方形纸卷则由于阻力的作用，让你用得更少，从而起到了解决资源的作用。其次，在运输过程中，圆形的纸卷之间会产生很大的空隙，而方形纸卷则能够紧紧靠在一起，提升空间利用率，从而起到降低运输成本的作用。

这简单的设计，居然发挥了如此大的作用。

那么，为什么我们在设计时就没有考虑到这些问题呢？因为我们从最开始，就没有从“纸”的整个全流程来去思考问题。

让我们“站的更远一些”，纸这个商品，并非只是我们见到的在商店售卖的那一刻。它从工厂中制造完成，通过运输送到每个超市中，当我们购买以后，它又会在很长一段时间内，出现在卫生间，陪伴你使用的每一刻。我们可以将整个流程分为3个场景，而每个不同的场景，又将会对纸本身有着不同的影响。

• 运输场景——卫生纸的运输成本——卫生纸的价格

• 售卖场景——卫生纸的造型、包装——影响用户购买

• 使用场景——卫生纸的使用过程——影响用户的使用体验

当我们能够考虑到卫生纸的运输过程时，我们就可以通过设计去降低运输成本；而当我们可以考虑到用户的使用场景时，我们就可以通过设计，去提升阻力，降低使用量，间接地去提升用户的使用体验。而当我们通过全局性设计思维，可以同时解决这三个问题时，我们的设计就是好的设计，就拥有了更高的价值。

发现了吗，为什么你没有想到相同的设计方案？设计能力并不是关键，设计思维才是指引你做出好的设计的前提。当你能按上述的方式，去思考整个流程、不同的场景，我相信大多数的人都能够设计出坂茂的设计方案，甚至比这个方案更好的解决方式。

✨

八、以全局性设计思维，构建设计体系

-

通过前面的两个案例，相信大家已经了解了全局观、全链路两种应用方式。

那么，我们最最最关心的问题——如何在业务中去使用这种思维呢？

在产品设计中，全局性设计思维也有着非常多样化的使用方式和场景，在之后的文章中我也会讲到很多应用方式。但是，在所有的方式中，我认为最为有效的，便是以全局性设计思维，帮助产品去构建一个完整的设计体系。

1.设计体系概述

什么是设计体系？谈及设计体系，大多数设计师会认为，设计体系就是设计规范。“不就是找个名次包装一下规范嘛？”

我们为什么需要设计体系？它与设计规范有何不同呢？

设计规范是设计师最为熟悉的一种规范文档。在产品设计时，优秀的设计师通常都会建立设计规范。然而在实际的项目中，设计规范往往无法难以有效实施。比如在开发眼中，规范并不符合开发规则，过于碎片化。而产品经理通常又不会去了解设计规范，因此在构建产品框架时也常常随意发挥。

很多项目做到最后，设计规范仅存在于纸面的意义，并随着项目的发展逐渐混乱。为什么会这样？ 

因为不同职能间的思考方式存在差别，设计规范对于其他职能来说经常难以理解与运用，无法与其他职能形成有效联动。

设计规范仅仅是基于视觉层面的规范，它是一个“平面”。而设计体系则是贯穿于产品的每个层面的、与产品深度结合的完整体系，它是“立体”的“有机生命体”。

设计体系的核心在于“体”，它是贯穿于整个产品的完整体系。设计体系由设计师创造，并深度融合于产品每个部分。它能够让产品更紧密、更统一、更有序，伴随着产品的生长，与产品共同进化，并最终推动产品的发展。

创造并推动这一体系，则要求设计师需要更全面的能力。只有充分地去理解并参与产品的每个部分的设计，才能让设计真正延伸至产品的每个部分。

而创造这一切的前提，便是全局性设计思维。

2.设计体系的构建法则

罗马不是一天建成的，设计体系也是如此。设计体系的建立是一个漫长的过程（与产品体量相关），需要在前期投入更多的精力。但若是你的方法得当，就会在项目中越来越轻松，并以此形成良性循环，而你也会越来越有成就感。

如何正确地去构建设计体系呢？我在这里总结了几个要点：

1）树立观念

首先，树立长期的体系化意识是必要前提。在任何项目中都要时刻保持体系化思维，着眼于整个项目，去寻找体系化的推动时机。当你在潜意识中拥有这种思维之后，你会自然而然的将其植入到设计中。

2）以解决问题为导向

体系化并非凭空建立，而是建立在解决问题的基础之上。设计体系的本质，就是由无数个标准化的解决方案，最终构成的一个完整的体系。因此，我们要以解决问题为导向，以全局性思维去思考问题的本质，最终建立适用于全局设计体系。

3）以小为始，重视质量

脚踏实地，从小处入手，去发现产品中最基础的一些问题。表面上看这些问题，对项目影响不大，但他们数量庞大，加在一起便会严重影响整个产品的效率。因此，我们要首先建立高品质的基础体系，再以此为基础构建更大的体系。

不要一开始就设法建立一个巨大的体系，那样只会是一盘散沙，因为它的结构是无序、混乱、不健康的。而这也是大多设计规范缺乏有效性和可实施性的根源。

梅拉妮·米歇尔的《复杂》一书中讲到，任何复杂系统，都是由无数个体通过简单的算法所构成的。在算法领域也是同样的原理，一个优秀而强大的代码，必然是由无数个小型模块，通过简单的算法耦合形成巨大的代码矩阵。基础算法越强大、代码结构越“健康”，可扩展性和灵活性就越强，其能力就越强大。

4）从规范入手，由面到体

从本质上来说，设计体系是由“多个个层面的规范”组合而成的。因此，由设计师推动的体系化建设，往往最初都是从设计规范这一“单层规范”开始。但是，设计体系的建设需要将单层的规范，通过不同的方式，转化为不同层面的规范，最终由面到体，形成体系化。

5）换位思考，寻求跨职能合作

设计体系的建立与维护，通常需要多职能的通力协作。因此，我们需要经常换位思考，在完成设计的工作，帮助其他职能完成目标。只有这样，才能得到更多的信任，并以此为基础推动更多体系化的建设。

比如我在设计一个功能模块的页面时，首先会与不同模块产品经理进行交流，了解不同的业务需求，并从产品层面就开始寻求统一性与通用性。这样的话，当其他模块需要同一个功能时，前端便可以直接复用，同时后端的数据也可以进行互通。而在开发端，我也会详细了解不同端的开发实现原理，务求设计规范与开发规则在理解上的一致性。这一既方便了开发理解规范，同时也从根本上提升了开还原的准确性。

长此以往，整个团队就能够建立良好的沟通和互信关系。有了这种默契，设计体系的推动就容易多了。

6）保持优化，不断成长

设计体系的另一个重要价值在于，它是可以伴随产品不断成长的。所有产品都是在发展中不断变化的，过分僵硬的规则，将会对产品发展起到反作用。

在业务发展中，产品一定会不断地加入新的功能模块，并对原有页面作出相应的调整。因此，设计体系需要时刻与产品策略保持一致，及时与上下游职能沟通，不断地针对产品发展进行优化，以保证设计体系能够符合产品的发展需要。

7）使用正确的推动方式

体系化最终能否成功实施，推动的方式至关重要。

在日常的项目中，大多数的业务方对设计体系了解甚少，也难以体会其中的价值。因此，他们通常会认为这些东西毫无必要，多数情况也不太愿意配合体系的推进。如果强行推进，反而会引起不必要的阻力，招致反感。那么，我们应该如何正确的去推进设计体系建设呢？

1.为他人带来价值：首先，寻找双方共同的利益点是首要任务。也许是可以让其他职能的工作更高效，也许能够促使其达成KPI，再不直接，那也一定能够为整个产品带来价值（不然你也没必要推了。。）。总之，设计体系一定要能够为他人带来价值，这样才能顺利推进。否则人家凭什么要协助你推进，因为你美丽可爱吗？你也可能比较可爱，但总归是不能一直这么来吧。。。

2.在解决问题后提出方案：不要一开始就啪一下抛出一个“宏大的理想”，大部分人会觉得你不切实际。你只需要通过这个体系，帮助业务方先解决一个问题，然后再提出你解决方式的来源——一个严谨的、可验证的、长远价值的体系化解决方案。

3.寻找合适的推动时间：最后，对于设计体系来说，寻找到正确、恰当的推进时机至关重要。比如当你在平时突然想要提出，对现有品牌进行升级时，大多数业务方都会认为你是没事找事。而如果情况是在新的一年中，产品进行了概念的升级，这时候你将概念以及未来的品牌规划融入在你的方案中，再去推进品牌升级，就会容易很多了。

✨

九、文章预告

-

本文旨在引导大家更好地理解和学习这种思维方式，想要用好全局性设计思维，光靠讲是远远不够的。最重要的是能将这种思维带入到产品中，为业务带来更大的价值。

因此，在后续的几篇文章中，我将通过不同类型案例，为大家深入讲解全局性的具体实践案例。

全局性设计思维 | 如何打造强大的品牌体系

为什么要建立品牌体系？品牌体系有哪些价值？设计师应该如何推动品牌体系的建立？

本文将带你了解网易智慧企业品牌体系的建设与推动全过程，聊一聊品牌体系建设的那些事儿～

FishDesign组件库 | 从零到一构建企业级UI组件库

我们为什么要建立组件库？在产品的什么阶段需要组件库？如何抽象业务组件？组件库设计过程中有哪些重要的细节需要注意？

本文带你深入了解，网易Web端组件库——FishDesign组件库从零到一的完整全过程。

全局性设计思维 | 如何构建事业部级大型设计体系

设计体系有什么价值？如何基于不同的业务建立设计体系？设计师如何推动体系化建设？在体系化过程中有哪些需要注意的地方？

我将会在这篇文章中，为大家介绍网易智慧企业设计体系构建全过程

1. 样式组件化+规范体系化，形成产品设计体系，整体重构产品线。

2. 结合品牌体系，推动事业部更多产品加入体系，形成智慧企业Web端产品设计体系

3. 推动更多产品/业务融入体系中，让智慧企业设计体系不断成长，赋能业务发展

✨

写在最后

-

好吧，似乎文章又写得偏长了一些。只能说，想要认真地讲清楚一个道理，确实不是一件容易的事情。

设计思维本身并不复杂，但想要讲清楚它的背景、原理及价值，就需要把它整个掰开来讲。而为了确保设计思维的可实施性，又需要经过大量的实践研究，自己能够走通以后，才能与大家分享。

坦白讲，似乎整个社会都在追求快节奏、碎片化阅读。但若是因此而丧失了自己学习的节奏，那么等于是没有节奏的，你的知识体系也将是东拼西凑，无法形成一套完整的体系。这也是我更新比较慢的原因之一，希望大家读完文章，能够切实地得到一些东西，这就很有意义。

不过更新这么慢，汽水和芬达都有责任。天天在面前卖萌啊吸引你注意力，那你就得陪他们玩吧？玩完以后鸡胸肉你要煮一个吧？吃饭打架了你得调解吧。。你们真的不能怪我。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷   作者：Jady_剑杰

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务