在B端产品设计中，有效的设计规范有利于降低团队沟通成本，提高开发效率，并在一定程度上保证产品应用的一致性，最终推动产品设计的优化。本篇文章里，作者总结了从0开始搭建B端设计规范的注意事项与策略方法，一起来看一下。
前言
哈哈哈哈，最近事情太多了，已经快三个月没更新了，现在也忙的差不多了，咱们更新继续~~
今天给大家分享的是关于如何从零开始搭建 B 端设计规范。
时间转眼即逝，掐指一算，我接触 B 端已有 4 年之久了，当年刚接触的时候，B 端的从业人员比例还是很少的。近两年 B 端越来越火热，无论从设计风格还是产品数量上，都有了很大的提升。
随着 B 端的产品越来越完善，要求设计师的专业性也要越来越强。设计规范作为基础中的基础，是大家都要熟练掌握的技能，我们不仅要会运用各种规范，还要会撰写适合产品的规范。
分享开始，敲黑板~~
在搭建设计系统之前，我们要想清楚设计规范的目标是什么？使用者是谁？
设计规范要符合基本的设计原则，否则你的规范会杂乱无章。这里我总结了 6 条原则供大家参考。
这里一般采用栅格布局。说到栅格，有好多小伙伴又要再回顾一下知识点了。我今天再把栅格知识帮大家复习一遍，如果之前不是很了解栅格的，拿个小本本记下来，要考~~
栅格布局能够适应各种屏幕尺寸及分辨率，确保整体布局的一致性。
栅格建议使用 1、2、3、4、6 切分布局，可以进行多种布局组合，并在整个设计中保持布局的结构的一致性。
页面中一般采用 24 列自适应网格，你可以使用它为各种屏幕尺寸创建灵活的布局。
边距 Margins、列 Columns、间隔 Gutters 分别是什么？
边距 Margins：边距是内容与左右边缘之间的空间。
控制台内容区的边距选用 8 的倍数为设定值，一般采用 16/24px 的居多。
需要注意的是：
列 Columns：在电脑端列的数量是个常量（24列），每一列宽度的尺寸随屏幕大小进行自适应调整。
间隔 Gutters：间隔是列与列之间的空隙，控制台产品 gutter 使用固定值也要是 8 的倍数，一般采用 16/24px。
需要注意的是：
边距 Padding：padding 指一个元素的内容和其边界之间的空间，padding 最小值是 4px，然后其余均为 8px 的倍数，建议值为 8/16/24px。
内容区定宽：此场景常用于用户欢迎页、结果页等需要将内容区宽度设置为固定值的页面。此时 column 和 gutter 保持不变，根据页面宽度改变 margin 的值。
色彩内容主要包含基础色（如品牌色、黑色、白色）和功能色（如链接色、提醒色等）。图表配色为单独的配色体系。
在前期制定颜色规范的时候，精益求精的设定颜色，切忌颜色过多。
颜色的状态色尽量用原色进行转换，设置一个合理的变色公式，让所有颜色的状态色都根据这个公式进行转换。例：
在设计规范中，尽量把颜色的色值和 rgba 值都写出来（这里是强迫症患者要标的，因为有时候色值完全一样，但 rgba 数值略有不同，虽然效果一样，但是对于强迫症的你来说，舒服吗）。
状态色有 4 状态色：Normal、Hover、Click、Disable。
在设定图表颜色的时候，要考虑不同的使用样式（柱状图、环形图、饼图等……），同时也要考虑它的延展性，比如你设定 12 个 chart 色值，在使用的时候按着顺序来使用，当超过 12 个后可以为同一个颜色。
设定统一的字体规范，使用非衬线字体在各个操作系统下都有最佳展示效果。
首先，要设置一个字体家族，保证产品界面的最优展示。
例如（仅作为展示，不是建议）：font-family： “Chinese Quote”， -apple-system，BlinkMacSystemFont，“Segoe UI”，“PingFang SC”，“Hiragino Sans GB”，“Microsoft YaHei”，“Helvetica Neue”，Helvetica，Arial，sans-serif，“Apple Color Emoji”，“Segoe UI Emoji”，“Segoe UI Symbol”。
1）字号
现在主流的产品中，主体字为 12px / 14px 的居多，可根据自身的产品定位以及用户的习惯进行设定。字号不要出现奇数，否则在一些显示器上会有对不齐像素的状况发生。
2）行高
行高常规的有两种规范：
我喜欢用第一种，就是字号大小 + 8px 作为行高的规范。行高是不可被忽略的重要细节之一，因为在算间距的时候，行高是要被算进去的。
3）字重
字重有很多，但是在真正的产品使用中，字重尽量不要太多种，2~3 种即可。
4）字体颜色
字体颜色数量建议在 3~4 个，不宜过多，但是每个层级之间区分要大一些。
文本应该保持至少 4.5：1 （基于亮度值计算）的对比度以保持文本清晰；最佳对比度为 7：1。
测试对比度的网站：https://contrast-ratio.com
WCAG 2.0 中将颜色对比等级分为 3 种，A级、AA级、AAA级，等级越高意味着颜色的对比度越高，呈现出来的视觉压力越大。
设定统一的图标使用规范，让视觉效果更和谐。
1）icon 大小
icon 的常用尺寸有很多，需要注意的是 icon 的大小中，相邻的两个尺寸至少相差 4px，否则你会在后期用的时候会有选择困难症。
同时功能 icon 尽量贴边或尽量贴边绘制，保证展现的视觉统一性（操作 icon 除外）。
单独 icon 使用的时候，尽量不要太小，最小值建议为 12px。
2）icon 热区
icon 的热区经常被设计师和开发所忽略，本身 icon 的尺寸一般就很小，再加上如果没有设置热区的话，操作体验极差。
所以一定一定要设置 icon 的热区，设置的值我建议为 icon 大小的 2倍。例：icon 大小为 14 * 14px，则热区大小为 28 * 28px。
页面内布局间、模块间、模块内的各部件距离。
尺寸大部分规范中都用的是 8 的倍数，不用纠结，直接用就行。我这里有个公式：Sn = 8px * n，n为正整数。
特殊：最小支持4px。
交互我分为两个方面：交互方式和交互状态。
交互方式指的是对某一个操作所进行的具体行为，比如刷新方式有下拉、上滑、按压点击等方式，这就是所谓的交互方式。交互方式有很多种，没有最优，只有最适合。
交互方式要保持产品的统一性，同类别的交互不可有不同的操作感受。同时交互方式要符合大众的认知习惯，可创新但不可违背潜意识。
随着时代的发展，交互方式也在不断的更新。比如最开始的手机是按键式的，随着大众对屏幕大小的需求不断提升，到了现在的全面屏手机，如果这个时候你再去做当年火爆的按键手机，那你就只能跟市场说拜拜。
总结交互方式的几个关键点：创新、统一、紧跟趋势。
一个完整的产品生态是不会遗漏每一个交互状态的。
同样是做售票的软件，为什么高铁管家就比 12306 做的好呢？是因为高铁管家把很多交互状态友好地做了展现反馈，而不是冰冷的数据吞吐。
同类产品中，每个都有自己独特的交互状态，可能你一直用某个软件的原因只是有个功能的交互状态打动了你，从此你就深深爱上了它。
现在工作中，我们都在讲人效，拼命地去更新迭代，去研发新功能，开拓新产品，往往会忽略交互状态这个点，因为很多时候付出收获比是很低的，但是真正好的产品，这部分是不可或缺的。
交互真的太大了，单独写一篇文章都写不完，这篇我只能抛砖引玉，勾起你的思维，如果有任何要探讨的，欢迎来叨扰。
引导分为 5 种：Newbie guide（新手引导）、Steps guide（步骤引导）、Help / Operation guide（帮助/操作引导）、New function guide（新功能引导）、Blank guide（空白页引导）。
新手引导是针对新用户的，首次进入产品的时候，我们要着重地把自己产品的亮点以及操作快速的介绍给新用户，让他用最短的时候上手我们的产品。
新手引导要言简意赅，并且如果非必要的话，尽量给用户一个可以直接关闭的按钮，让用户有选择权。我就非常讨厌有一些产品的新手引导，必须走完全部流程后才能关闭，恶心得不行。
步骤引导一般用在有固定操作步骤的场景下，指引用户一步一步地完成想要的结果。常规的步骤引导建议在 3~5 步之间为合理。
帮助/操作引导的展现方式是比较丰富多彩的，可以是提示语、辅助性文本、tooltips 等等，它的作用就是辅助用户去了解并且知道如何操作这个功能。
这个也是在产品中使用频率最高的，运用好它，可以让你的产品事半功倍。
它就是常用在新功能上线后，用户第一次登陆相关页面后做的一些引导，目的是为了告诉用户我们做了新东西，你快来试试吧。
空白页引导一般用在在缺省页，对用户进行一些操作指引，让无信息的页面变得更有价值。
比如百度在一些缺省页上就放了一些关于失踪儿童的信息，就因为做了这个引导，帮助了千万个家庭找到了失散的孩子。
组件是设计系统里面最为庞大的东西。组件可以分为了 5 类：
基本上这几类已经覆盖了多数的组件，下面我把我自己整理的这几类分别都包含哪些组件、以及组件的简单介绍给列出来，快来保存吧。
以上组件可根据自己的产品进行增删，把组件规范设计完成后，整个设计规范就完成了 90% 以上，可以算一个比较完整的设计规范了。
每一个设计规范都是有灵魂的，规范是为了更好地做设计，而不是限制设计师双手的枷锁。
设计规范也不是一成不变的，它在落地使用的时候多少都会有问题，需要慢慢地去反复检验规范的合理性，发现不合理的及时更正。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
众所周知蚂蚁集团的B端产品是一个庞大的系统，数量多且功能复杂，而且变动频繁，常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件，根据原子设计理论可以得到一些稳定且高复用性的内容。
随着这两年B端产品的逐渐白热化，越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标，蚂蚁集团体经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。通过组件化设计规范，降低冗余的生产成本，让设计者专注于更好的用户体验。
针对B端产品反复出现的一些设计体验等问题， Ant Design 给出标准的设计原则，实现跨应用交互一致性的有效融合。依照这些原则使用 Ant Design 组件设计界面，既减少了不必要的认知成本，又能够提升设计的效率。考虑到需要适应各种定制化的业务场景，设计原则具有一定的灵活性，万变不离其宗，通过了解设计原则的构建逻辑，高效组织信息、帮助建立用户与界面的互动等原则性要求，可以衍生出更具场景特性的设计方案。
可以说 Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则，并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充，我在看书的过程结合『Ant Design 』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明，这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。
稍微了解 Ant Design 的小伙伴都知道，本系统是针对B端后台系统，承载媒介是PC端的浏览器。使用的人员主要包括：用户体验设计师、交互设计师、UI设计师、前端程序员等。
顾名思义『 设计原则 』主要是针对设计师在创作页面时依照的标准。虽然『 Ant Design的设计原则 』是 Ant Design 系统的一部分，但是前文已经提到，此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华，所以设计师可以把这些原则运用到任何的设计领域，并不要局限于企业后台系统的PC端产品。
为了方便大家理解，讲一个小故事。故事来自于《写给大家看的设计书》，作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后，发现其中有一颗叫约书亚树的树，造型奇特，自己从未见过。于是决定出门转转，然而发现外面到处都是这种树。故事到这里就完了。
可能大家会想，这个故事要讲一个什么道理呢？简单来说就是，当你手中有个锤子，满世界都是钉子。当你了解到下面要讲的十个设计原则后，你会发现它们处处都适用。
十大原则如下：
亲密原则（Proximity）
对齐原则 (Alignment)
对比原则 (Contrast)
重复原则 (Repetition)
直截了当 (Make it Direct)
简化交互 (Keep it Lightweight)
足不出户 (Stay on the Page)
提供邀请 (Provide Invitation)
即时反应 (React Immediately)
巧用过渡 (Use Transition)
对于一个初级设计师而言，想要了解UI用户体验等知识，学习 Ant Design 的设计原则算是比较快能上道的，因为 Ant Design 是吸取了很多前辈的精华，提炼而成的系统。打个简单的比喻，对于设计师而言 Ant Design 就是设计师学习『 视觉规范 』，掌握『 设计原则 』最好的字典。
接下来我就给大家说说我是如何快速理解 Ant Design 的这10条设计原则并运用到工作当中。
Ant Design 定义了10条设计原则，根据『 席克定律 』选项太多不易记忆，于是我找到了这些设计原则的共通性，将其归为4类，也就是大家只需记住四类设计原则，在工作中适当延展即可。
包含 Ant Design 的设计原则有：『 亲密原则 』『 对齐原则 』『 重复原则 』『 对比原则 』。
「视觉层级清晰」的重要性体现在 交互前 用户看到的内容结构是清晰明确的 。一个层级混乱的界面，任何信息的传达都是无效的。所以保证清晰的排版布局是人机交互前的基础。
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
纵向间距：在 Ant Design 中，通过「小号间距」「中号间距」「大号间距」这三种规格来划分信息层次结构。这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。
增加元素：通过增加「分割线」来拉开层次。在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次。注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是纵向间距，8 是「基础间距」。
组合排布：为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。（注：栅格是另外一个模块的内容，这里不赘述。）
复选框内：在一个组件内部，元素的横向间距也应该有所不同。
正如「格式塔学派」中的连续律（Law of Continuity）所描述的，人类的视觉系统往往倾向于将看到对象的直线继续成为直线，曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，「整体不同于其部件的总和」。——摘自「维基百科」
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
推荐使用：标题和正文左对齐，使用了一个视觉起点。
不推荐使用：标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。
冒号对齐：冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。
需要区分主次场景：
不需要区分主次的场景：「通过」和「驳回」都使用次按钮，系统保持中立。在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
总分关系：通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
常见类型有「静态对比」、「动态对比」。
静态对比示例：用不同颜色的点，来表明不同状态。
动态对比：鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
线框重复：
设计要素重复：
文案格式重复：
包含 Ant Design 的设计原则有：『 直截了当 』『 足不出户 』『 简化交互 』『 即时反应 』。
「交互操作高效」的重要性体现在 交互时 用户操作流畅、简单、用时短。如果仅仅只是解决高效的问题，却忽略用户能否理解流程如何操作，那这样的解决方案也是徒然。有的时候并不是解决实际时间的长短，而是用户的心理时间是否太长的问题，就像我们打游戏往往会觉得时间过的很快，但是在等待页面加载时却不耐烦。
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
变化盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》
心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
气泡提示：对于操作的反馈是必要的，下文会提到，但是为了减少打断用户，轻量级的反馈气泡提示即可。
输入覆盖层：鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。不用弹窗或跳转的形式编辑，只需要在触发图标附近弹出浮层即可，这样避免用户视动线的混乱，减少打断用户操作的心流。
正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
常规的编辑模式，界面都会跳出一个弹窗或者是一个页面跳转，无形之中用户走了更多的流程路径，如果能在当前页面就把编辑问题解决掉那就符合了 Ant Design 『 足不出户 』的设计原则。
文字链/图标编辑：
状态一：在可编辑行附近出现文字链/图标；
状态二：鼠标点击「编辑」后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。
多字段行内编辑：编辑模式在不破坏整体性的前提下，可扩大空间，以便放下「输入框」等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。
拖放图片/文件：在早前很多产品在上传功能上，都是跳出弹窗再选择文件上传，现在基本都可以实现拖拽上传了。这样的设计大大提高了用户使用上传功能的效率。
模糊搜索：系统根据用户所查询的关键词，智能匹配可能的结果。
定时自动更新：新增的列表项「高亮」，持续几秒后恢复正常。不需要用户手动刷新，减少不冗余的操作。
人们在思考的时候，是需要依靠大脑神经元之间相互传递信号，而回忆是需要调用更多的的神经元传递信号，简单地说就是非常费脑子。
搜索历史：搜索历史的功能，可以减少用户的回忆，使得整个体验更加轻松愉悦。
根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互，起到信息降噪的作用。
费茨法则 ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。
列表嵌入层：将列表为多层级时，隐藏弱层级列表内容，可以让用户更加直观地看到重要信息。当我在聚焦某一个列表模块的内容，鼠标悬浮即可展开。
标签页：标签也换可以将信息内容进行分类，让用户更易理解。
渐进式展现：用户在填写表单时，会根据当前录入的数据，展现下一项需要填写的内容，这样的展现方式可以屏蔽掉无关紧要的内容。
悬停即现工具：鼠标悬停时，出现操作项。这样将不重要信息或者操作隐藏起来，不会干扰到用户浏览其他重要内容。
包含 Ant Design 的设计原则有：『 简化交互 』『 巧用过渡 』『 即时反应 』。
「系统反馈及时」的重要性体现在 交互之后 立即给出反馈。就像「牛顿第三定律」所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
牛顿第三定律 ：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》
实时预览：根据用户的输入，提供关于密码强度和有效性的实时反馈提示。
文字链热区：当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
Receding: 与当前页无关的信息元素应采用适当方式移除。
Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
表格加载：网络不好或者表格数据过多，都有可能导致加载缓慢，这时有一个小动画可以缓解用户的焦虑感。
富列表加载：用户在打开列表时，页面无法做到一次性加载所有的数据，同时有为了减少翻页的繁琐操作，就有了下拉自动加载的。
页面加载：当用户访问的页面体量过大时，系统会通过给出倒计时或完成百分比，来缓解用户焦虑，并且给用户友好可控的感觉。
滑入与滑出：可以有效构建虚拟空间。
折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
对象增加：在列表/表格中，新增了一个对象。
对象删除：在列表/表格中，删除了一个对象。
对象更改：在列表/表格中，更改了一个对象。
状态一：用户更改了「详情」中的值；
状态二：用户点击「保存」后，详情所在的网格出现「黄底」，表明该对象发生了更改；
状态三：底色持续几秒后，恢复正常。
对象呼出：点击页面中元素，呼出一个新对象。
用户常常会疑惑自己的操作是否成功了，哪怕是失败了也是需要系统反馈，这样才能安心进行下一步的操作。
页面反馈结果：
气泡反馈结果：
包含 Ant Design 的设计原则有：『 提供邀请 』『 足不出户 』『 即时反应 』。
「用户自由可控」的重要性体现在 交互前对下一步操作的预判；交互时 不论操作后的结果多严重都要允许用户自主决策；以及交互后 能否对自己的操作结果反悔。
很多富交互模式（eg：「拖放」、「行内编辑」、「上下文工具」）都有一个共同问题，就是缺少易发现性。如果用户在操作前就能得到下一个交互层次的提醒和暗示，以表明在下一个界面可以做什么。 这样人机交互的过程往往更加自然、顺畅。
点击刷新：对于设计师而言，最常见的例子要属花瓣了，我们时长会沉浸在我们浏览的瀑布流卡片中，如果系统强行刷新当前页面，用户很有可能迷失。邀请用户主动更新，既不会错过新的消息，又不会导致我们的心流被打断。
未完成邀请：用户在当前页面无法完成登录操作，为了减少用户迷茫的焦虑感，系统告知用户点击“更改”链接，可以去向何处。
悬停邀请：鼠标「悬停」时，出现「选择此模板」的按钮。
虽然系统中缺少不了一些危险操作或者不可逆操作(eg：删除、重置、重装系统等)，但是仍然要用户自主决定是否继续，我们能做的就是让用户再三确认。
弹窗提示：虽然弹窗打断用户心流，但是对于重要的操作，这样是最保险的方式。
删除知识库提示：是钉钉中，删除「知识库」这一重要内容，是不可逆的，系统需要用户谨慎操作。
如果说「自主决策」中提到的案例都是不可逆的，那「准许反悔」的后果严重性会弱一些，系统对用户的操作没有那么强的阻断性，所以要准许用户反悔的，
删除撤销：用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。
Ant Design在"幸福者示例中"写到“Ant Design 无法保证业务产品能否成功，但是能帮助业务产品『正确的成功』或者『正确的失败』。”
如果团队有一个产品idea，我们需要通过最少的资源开发此产品并投入到市场中，通过听取用户反馈，验证idea是否可行，快速迭代最终做出更完善的产品。但理想是美好的，但现实是骨感的，在前期研发的过程中通常会出现两个情况。创业团队没有足够的设计资源和时间，前几个版本的产品通常用户体验非常差，这种情况体验差有可能让用户放弃这款产品。创业团队没有好的方法论和协作模式，需要磨合，设计和开发进度一延再延，结果错过了风口，市场被竞品抢占，还没上线就倒闭了。
Ant Design提供了一套完整的界面实现方案，即有代码框架能直接拿来提高开发效率，每个界面组件都经过蚂蚁金服多个项目的考验，具备优秀的用户体验。用Ant Design来做0-1，能快速发布用户体验优秀的产品，听取用户反馈，快速迭代。
当然，创业是九死一生，市场和用户口味都充满了不确定性，谁也没有能力保证产品是否成功，但是只要你能高效的产出质量优秀的产品，不断试错，说不定以后就能成功。
用 Ant Design 就能高效的产出高质量的产品，减少设计和开发的不确定性。
因为我们公司就使用了 Ant Design 的系统，所以时常会与前端小伙伴沟通，以下都是他们在使用过程的感想。
Ant Design 提供的大量功能比较全面且UI风格统一的组件，能帮助开发者快速搭建通用场景下的应用界面。这大概是得益于蚂蚁金服业务线上极为广泛的应用场景，驱动了 Ant Design 团队通过对使用情况的观察汇总，整理出来了这么一个组件库。他们的经验积累如此之丰富，足以让这个库支持大部分其他前端开发者的需要。
其设计团队给出的设计规范相当详细且经得起推敲，令许多其他团队获益匪浅。
我见过太多宣称自己在乎用户体验的公司，给用户的产品质量确实比较高，但是自己员工内部使用的系统和管理一团糟。种种不便让员工经常加班，情绪消极，这样的团队抄抄竞品达到行业标准体验还行。要想突破是不可能了，因为创新需要员工有充沛的精力和主动性，天天加班谁还有这精神。
用 Ant Design 系统提供的设计工具和组件框架能给设计师和开发者减少负担，能用更少的时间呈现给用户体验好的产品。这样带来的好处不仅仅是设计师和开发者觉得少加班成就感高而幸福，他们重新恢复活力和激情能做出更有创意和竞争力的产品，给公司带来更大的收益，这是一个三赢的结局。
一定有小伙伴会有这样的疑问，目前市面上有这么多的第三方设计规范，例如 Ant Design ，Element UI，有必要自己造轮子做一遍吗？
这里要视情况而定，如果公司产品是初创期，而且研发人手不足，那确实没有必要自己造轮子。反之在资源足够的情况下，是有必要设计团队重新做一套属于自己产品的规范组件库的，因为B端自身的业务性决定了市场上没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。
对于比较普通的设计解决方案是可以的，但是 Ant Design 包含的组件细节仍有不足，毕竟 Ant Design 没必要投入过多的精力在组件细节深入度上，规范定义的越是精细，对于产品组件而言可延展性就越差，限制也会越多。而 Ant Design 只需要解决80%企业，80%的通用问题即可。
当市场大部分产品都在使用 Ant Design 设计系统时，产品的同质化就会很严重。为了避免这种情况发生，我们就有必要从设计语言、设计原则、设计组件三个部分开始，设计自己的规范。那些大厂的成熟的组件库该如何用呢？我认为应该把它当成一个字典，有不会的地方，可以去参考人家的成熟的解决方案。
这篇文章简单的介绍了一下 Ant Design 是什么、 Ant Design 的设计原则是什么以及 Ant Design 的优缺点。当然也重点总结了一下，设计师如何运用 Ant Design 的设计原则，可以将这些原则分为四类：视觉层级清晰、交互操作高效、系统反馈及时、用户自由可控。希望大家通过这篇文章能够更深一步了解 Ant Design 的设计原则，并将其灵活运用到设计工作中。
参考文献：
《Ant Design 官网》
《设计心理学 1 》 [美] 唐纳德·A·诺曼
《写给大家看的设计书》 美国罗宾·威廉姆斯(RobinWilliams)
《web界面设计》 Bill Scott Theresa Neil
《维基百科》
《如何评价 Ant Design 这个项目（一个设计语言）？》 龙爪槐守望者
文章来源：站酷 作者：菜菜不甜
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
面对企业级产品，由于系统复杂度和业务领域的专业壁垒，用户、产品、业务、技术的理解和分析难度都远远高于C 端。特别是进入业务深水区，技术术语层出不穷，角色链路错综交织，场景越来越复杂，在理解和分析业务上设计师需要耗费的精力越来越多，设计师如何高效且深入的分析业务，直接影响到设计解决问题的深入度。基于蚂蚁金服CTO 线的业务土壤，我们不断尝试打磨，探索出以JCD 为核心的企业级产品设计思维，助力设计师在深耕业务上有章可循，有方法可用。
做企业级产品 3 年多，刚从 C 端业务转过来时，最大感受是对业务理解起来很艰难。随着经验的增加，对 0 到 1 产品驾驭起来轻车熟路，可到业务深水区，还是感觉痛苦。技术术语层出不穷，用户角色多，一个用户身兼数个角色，系统之间的关联关系也很复杂，随着业务的深入设计师会感觉对产品逐渐失去掌控力。一个简单的芝麻信用分，需要 20-30 个中后台产品和各种角色一起协同支撑。然而复杂是守恒的，系统复杂性的总量是一个衡量，当前台的呈现更简单时，隐藏在幕后的复杂性就增加了。
我们面临系统的复杂性表现在三个方面：
多角色，重协同。
链路长、错综交杂。
技术术语多，业务难理解。
但企业级产品会有一个主线，是从「事情」的角度出发，关注一件又一件事情被完成。企业场景下我们再把事情描述的具体一些，就是一个又一个的 Job 。设计师要做的就是通过设计，包括参与的角色、使用的工具以及协作方式等，让 Job 被高效完成。
我们先对比一下，从「用户」视角和从「Job」视角出发，关注的维度有哪些差异呢？从用户视角出发我们需要关注用户的个人痛点、情绪、兴趣、人种志（年龄、性别、收入）等信息，会更关注人，核心是为了满足用户的需求。在Job 视角下，需要关注 Job 的目的、参与角色、协作方式、工具等信息，而且 Job 对角色是有要求的，比如航空公司飞行员，按岗位要求，他需要不断提升自己业务能力，每年要去复训两次，学习新的技能和知识来满足岗位对飞行员这个角色的要求。
基于我们的业务土壤，以及出发视角，我们探索出一套适合企业级产品的设计思维，JCD（Job - Centered Design ）以 Job 为中心，设计完成 Job 所需要的一切，包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它是一套适用于企业级产品设计的发现问题、解决问题的方法论。
在 JCD 设计思维下，将设计流程分为四个阶段，发现、构思、呈现、度量。每个阶段下有不同的方法、产出、资产。Ant Design 在「呈现」阶段帮设计师大大提升了效能，设计师才有更多的精力投入到「发现」阶段去更深入去理解业务和角色。接下来重点分享一下在发现阶段的两个方法，角色分析和业务分析。
常用的 C 端的用户画像，如下图，会关注用户人口统计学的信息，如名字、性别、年龄、所在地、家庭情况、用户的习惯、爱好等信息，这些信息在复杂的企业级产品中是不需要去关注的。
在JCD 的视角下，我们企业级产品的角色画像应该关注的三个维度：角色概览、工作能力、工作内容。而工作内容是最核心需要关注的信息，包括了工作的描述、工作的痛点、需求和使用的工具。
一个角色往往需要完成多个Job，描述一个Job 包含：
四要素：情景、角色、活动、目标。
一个句式：在什么情景下，角色需要完成什么样的活动，来达成一个目的。
举个例子，在飞行前 1.5 小时（情景），角色（飞行员）需要去查看飞机情况（活动 A ）、气象情况（活动 B ），来判断能否起飞（目标）。
为了给设计提供具体的依据，我们需要进一步纵向解构Job，来构建 1 个完整 Job 场景，设计师可以阶梯式对一个 Job 进行拆分，Job 下面有多个 Activity，Activity 下面有多个 Task 组成，Task 下面有不同的 Action，到这种颗粒度可影响到设计界面中的具体元素。
看一个具体案例，如何拆解一个 Job，首先用我们的上面的四要素和句式描述。Job：飞行前 1.5 小时，飞行员需要查看飞机情况、查看气象情况，来判断能否起飞。在飞行员这个角色的 Job 里包含了两个 Activity ：1. 查看飞机情况；2. 查看气象情况。查看气象情况这个 Activity 下包含了三个 Task：1.查看起飞地天气；2.查看降落地天气；3.查看备降地天气。
每个 Task 下面会有不同的 Action。除了 Job 的纵向拆解，我们还需要关注每个 Job 场景下的需求、痛点、费力度、成就感。
做好一件复杂的事情，往往需要多个角色在多个工作场景中协同配合。我们会以Job 场景为核心，梳理角色之间的协作关系，建立全局视角。比如，在飞机起飞前，机组飞行员查看飞机和飞行信息、查看起降地天气等；同时乘务组空姐们为此次飞行做相应准备工作。准备完毕，机长会通知机组和乘务组开始登机。上飞机后机组需要检查驾驶舱情况，乘务组检查客舱情况，检查完毕，会一起协同机场地勤人员安排乘客登机。完成登机后，飞行员需要联系机场管制申请起飞........ 设计师可以通过Job 场景去串联角色之间的协作关系，如下图。
以上是「角色分析」的方法，是从 Job 出发洞察角色的工作需求以及协作模式，帮助设计师构建角色协同的全局观。
业务分析的方法是借鉴面向实体的思路帮助设计师去深入分析复杂业务。企业级产品中会有各种技术术语、复杂的数据流转、业务逻辑等，我们需要一个系统的方法来分析和理解业务，为设计提供准确有深度的信息输入。我们的用户大部分是软件工程师，这个思路可以让设计师在理解和认知上对齐用户的心理模型。我们业务分析的有三个维度：
产品定义
实体建模
业务逻辑
通过以上三个维度，从纵向和横向去深入和全面的理解业务。
通过沟通交流、桌面研究的方法，去了解产品和用户相关信息，熟悉相关概念和技术背景、沉淀信息资料，来收集产品的信息，具体的产出有名词库、产品画布、产品的关系图、业务结构图、产品形态图等，这里不展开详述。
实体建模是本次分享的重点，实体建模按照面向实体的思想分析业务，围绕实体进行问题和内容抽象和分析，聚焦于产品内实体和实体间的关系，以及实体的生命周期的分析。
我们先看什么是实体，参考领域建模（此处感谢幻星给实体的定义）给实体一个定义：实体是产品中客观存在，具有唯一标识的并可以相互区分的业务载体，通常包含属性和行为。
企业级产品系统的实体，很多情况下都是熟悉的字母，陌生的单词，在设计之前设计师如何去准确、系统的去分析实体。
举个例子，现实世界中，「机票」是一个实体，在产品里，可以把「机票订单」看成一个实体。围绕着机票订单，我们梳理出它的基本属性信息，以及它具有的所有状态和对应操作，设计师可以进一步把这些状态和操作梳理出一个「机票订单」这个实体从产生到消失整个生命周期经历的过程。这些分析可以作为后续任务流程和设计细节的信息输入。
一个实体不能构成一个产品，一个系统会有很多实体存在，我们需要进一步去梳理「机票订单」与系统中其他实体的联系。在下图的案例中，机票订单与机票是聚合 n：1 关系, 一张机票订单会包含多张机票，机票订单与收支明细是关联 1：n 的关系，一张机票订单会关联到多个收支明细，比如会有支付成功、退款等明细。
以上是实体建模的过程，产品定义和实体建模都是对业务内容层进行理解和梳理。但是我们的业务除了内容外，还有很多复杂的业务规则、业务流程，我们也需要进行梳理和分析，这样设计师才能对业务有全面的理解。
所以我们需要把结合实体、业务规则、业务流程，进一步梳理业务逻辑。最终会得到一张业务逻辑图，不仅能够帮助设计师洞察到业务的本质，也能帮设计理解业务的全貌。
第二个方法业务分析，是通过面向对象分析思路去深入的理解业务，为设计提供更精准，更有逻辑的依据。
回顾以上三部分内容，JCD 是什么？Job - Centered Design 是以 Job 为中心的设计思维。JCD 的定义：以 Job 为中心，设计完成 Job 所需要的一切，包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它包含了原则、流程、方法&工具、产出&资产，上面重点分享了其中两个方法「角色分析」和「业务分析」。
文章来源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
真正出色的金融产品是基于可用性，在成熟的数字生态系统中，能持续满足用户的特定需求。在UXDA每年交付的数十个UX/UI设计中，我特别选出了一些重要的作品来举例，与大家探讨设计对塑造金融产品方面的影响。
过去20年来，人们认为在创建数字金融产品时设计发挥的作用微不足道，这种刻板印象根深蒂固。大多数情况下，甚至被认为是出于营销目的的包装，关注点也多在产品功能和特性上。
使用标准化设计模板来加速产品开发是常见的做法，但这也解释了为什么许多金融服务看起来如此相似——平淡、乏味且对用户不友好的。
10年前出现的金融科技，打破了人们对设计的偏见，企业用其来吸引客户，并试着将设计潜力发挥到最大。而现在，进入金融行业的新玩家更专注于独特创新的设计，来凸显品牌身份。
大多数客户厌倦了乏味又复杂的模板设计，量身定制作为一种全新的趋势应运而生，不仅为产品注入了新鲜活力，还令金融公司的市场飙升。
「Private Wealth Systems」的财富管理平台就是一个很好的例子，通过量身定制的设计，为超高净值人士 (UHNWI) 提供他们对精致生活所期望的奢华体验。
该平台的优势在于它旨在解决用户每天遇到的痛点，关心客户财富的同时并尽最大努力协助其管理，而量身定制也增强了品牌与客户之间的情感联系。敢于打破禁忌并投资于大胆现代设计的金融机构知道，随着客户忠诚度和参与度的提高，肯定也会带来回报。
Takeaway
根据品牌VI创建的产品界面，可以使其在日后的竞争中脱颖而出。
向移动模式转型时，集中出现了几家金融科技公司，他们的优势在于功能单一，非常简单易懂。对客户来说，这就像一股新鲜空气，因为当时的银行服务功能既复杂多又对用户不友好。
当今的金融产品，正在不断扩大外部服务，打破功能壁垒。「Revolut」就是一个很好的例子，它不断扩展功能，逐渐成为一个超级应用程序。
单一模式的设定确实很简单，但随着用户期望的增长，以同样方式呈现更多功能的需求也在逐步增加。对用户来说，如何用一种既直观又体验佳的方式，展示100多个功能呢？
既要为客户提供解决功能，又不能在使用体验上打折扣，这并不简单。需要UX架构师和经验丰富的UI设计师密切合作，共同面对挑战——创建直观的产品架构与合乎逻辑的、用户友好的界面布局。
来看一个UXDA的多功能银行应用程序例子：我们将区块链、游戏化、机器人咨询、语音处理、生物识别、大数据等数十个功能整合进同一程序内，打造银行即平台的应用理念。
越来越多的功能服务不断涌现，可用性高的产品更容易吸引用户。这就解释了为什么金融机构都在努力创建自己的新银行或超级应用程序，但展示的服务内容也需要与公司的发展方向保持一致。
根据我们的经验，品牌希望在产品中包含大量「现代」功能，他们相信这会使解决方案在竞争中脱颖而出。但也可能会适得其反，建议在UX研究阶段做好取舍，以便确定更符合品牌受众的功能。非常成功的金融产品都是基于品牌受众的特定需求设计的，这些需求为客户提供额外的价值。
Takeaway
从超级应用程序设计中学习实践经验，保持简单性和可用性的同时，再进行产品拓展。
相信多数人看到银行后台，都会惊讶于它的复杂。员工必须同时使用多个软件程序，按照说明输入代码才能进行工作。操作系统也需要数月时间去学习，甚至用了很多年，还是无法全部记住。
由于涉及到大量的客户信息，这些解决方案全靠数据驱动，非常复杂。许多银行都在努力降低后台成本，却没有意识到对客户体验的影响。这导致了一个悖论：银行在数字化转型中投入大量资金以改善用户体验，而削减银行核心系统的成本又对客户服务造成损害，银行员工的负面体验又会影响服务质量和最终客户满意度。
后台系统的改进可以显著提高服务质量和速度，从而使客户更满意。以用户为中心的设计方法，在当今创建金融产品中也越来越流行，它不仅可以应用于外部银行产品，还可以应用于内部解决方案。
提高内部工作效率的一种方法是使用游戏化设计。这种方法使整个工作流程更加现代化，从而实现了工作流程的转变，如「ITTI Digital」所示。
为了使其以用户为中心，我们将大量繁重的数据翻译成人类语言。员工的学习曲线从几个月缩短至几个小时，人为失误的可能性显著降低，服务速度、员工效率和客户满意度都大幅提升。
此方案在IF的数字金融服务设计大奖中也得到了认可
金融机构将员工视为内部用户，为他们创造尽可能好的体验，相当于也为银行客户提供了最好的服务。认为游戏化和银行业务没有共同之处的想法太过时了，游戏化不仅提高了员工的生产力和积极性，也让结果变得更好。
Takeaway
尝试应用游戏化来激励用户，还能使最无聊的金融产品焕然一新。
5年前，移动应用程序还被当做非主流的使用渠道，但今天它却满足了大多数客户的要求。令人惊讶的是，移动程序的功能非常有限，用户体验也相当差，甚至一些银行服务只在分行提供。疫情反应了严峻的现实——金融业还没有做好迎接数字时代的准备。
为改善金融品牌的客户体验，需要对移动应用程序进行全面的设计审核，以确保远程用户可以访问所有服务和功能。一家成熟的金融科技公司应快速找出适合客户的远程体验设计方法，而不是冠冕堂皇的借口。
设计「阿拉伯联合银行 (UAB)」移动应用程序时，我们的主要挑战是简化所有的日常功能操作步骤，使其简单高效。
流程的优化使用户更容易浏览应用程序，探索新的可能，同时也鼓励用户与程序互动，而不是联系银行或直接去分行。新应用仅发布数月，在App Store 和Google Play的下载率都大幅提升。
Takeaway
找到缺失的功能并完善它，建立一个完整的使用流程。
越来越多的老牌银行企业敢于走出舒适圈，挑战自我，踏上数字化转型之路。在金融科技的启发下，现有企业为用户体验设计注入了生命力，从而创造出令客户惊叹的产品，激励用户长期使用。
他们与内部或是外部的UX/UI设计师合作，整合公司各层级的设计方法和组织文化。这种融入了设计角色的团队，以用户为中心快速转型，成为金融科技独角兽的有力竞争对手。
「VTB银行」是一家被数百万人信赖的银行，升级用户体验后，产品重获新生，也体现了企业对线上银行用户的重视。
「VTB银行」的用户反馈说：新升级的产品更贴合他们的生活方式了；银行员工们也表示，紧跟时代变化的品牌，更能为客户提供最优的服务。
Takeaway
设计至上，跳出传统，才能打造出一流的数字产品。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：UX辞典
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
增长设计是时下的热门话题，越来越多的企业开始关注增长设计，成立独立的增长部门。在蚂蚁体验技术部，我们除了做好体验设计的「老本行」外，也在往增长的方向探索。在现有的增长理论指导下，我们结合自身业务，边落地实践，边沉淀总结。以下是我们的一些小心得。
本文会讲述我们是如何利用增长大图梳理产品各个环节，以及如何用定量的用户行为数据漏斗，和定性的痛点比重数据，综合分析，去找到机会点。辅以在 Kitchen 和 语雀 中的增长实践案例说明。在增长一块，我们还处于初步探索阶段，若有不成熟的地方，欢迎大家一起讨论。
为什么要关注增长？
说到增长，过去 10 几年是中国互联网高速增长的阶段，但近 2-3 年来，随着人口、流量、资本的红利衰退，越来越多企业开始关注增长。典型的是，2017 年可口可乐宣布取消 CMO（首席营销官），由 CGO（首席增长官）替代，之后各种增长类职位相继涌出。
增长是建立在用户基础上的，用户产生需求，需求又衍生出产品，产品之上才可能有增长。所以我们理解：产品在创造价值，而增长其实是传递价值，让价值被发现。只有让更多的用户，最大限度地体验产品的核心价值，才可能迅速扩张以及有效地变现。它有几个特点：
1.首先他是关注用户全生命周期，不仅仅是获客、变现。还需要关注怎么激活用户，让用户用起来，留存下来，传播出去
2.另外，增长不是一个单打独斗的独行侠，而是体系化的，以团队共创聚焦的方式来推动增长
3.强调数据和实验：从数据分析中洞察，提出假设，循环实验的过程
那什么样的产品适合做增长？我们所做的 To B 产品适不适合做增长？
首先看下 To B 和 To C 的差异：To B 产品，多数是群体决策，决策链路复杂，买的人不一定是用的人，如果是客单价较高的话，基本靠销售关系驱动购买，但像具有 C 类属性的产品，因为是个人消费场景，单一决策购买，就像平时大家在淘宝买东西一样，随心所欲。那运用增长策略去推动转化，能节约很大的获客成本，可见增长更适用于 C类属性的产品。
但经过大半年的实践，并且和其他增长团队交流，我们发现虽然 To B 增长很难，但在 SMB（中小企业）的增长很有机会。SMB 中小企业，有可能是 2-3 人组成的小团队，这类企业的客户和用户通常是同一类人，我们理解这也具有 To C 属性。并且中小企业数量多，实验数据也有保障。
一句话总结：To SMB 中小企业客群的产品可以做增长。
那具体怎么做呢？结合我们自身经验，给大家分享 1 张增长大图，2 个实践案例。
增长大图是基于 AARRR 模型，在用户旅程图的基础上进化得来。为什么不用用户旅程图，而用增长大图呢？用户旅程图主要通过情绪曲线来体现问题的严重性，但在使用上也存在难以量化的问题。
所以在增长大图上，我们选择定量的用户行为数据漏斗来取代情绪值。漏斗其实是对一个流程和路径的分析，目的是定位出问题的关键所在，这样才能对症下药。但定量数据通常只会告诉我们是什么，而定性数据能告诉我们为什么？
所以，我们还建议梳理用户调研中的定性数据，按流程、阶段、产品模块、问题类型等维度归类，通过痛点比重公式，算出每个维度痛点比重的百分比，去综合分析，找到机会点。另外，增长大图还可以记录从业务总目标拆解增长目标的过程，以及实验的策略、方案、指标结果，所以增长大图也是一份连接战略和执行，不断更新的「活文档」。
公式：痛点比重= [每个阶段的问题数 / 问题总数 ] X100%
那怎么用呢？当你确定某个项目可以做增长时，最关键是邀请不同角色的 Key Person，包括 PD、技术、运营共创去搭建增长大图。
从业务总目标出发拆解增长目标，然后将定量和定性数据梳理到大图上，找出机会点，从而确定聚焦领域，开始增长实验。想想就像大家在吃自助餐的过程，基本都是先看一遍有什么，再筛选一下，小份量的取餐尝试，最后再确定几样好吃的，重点吃。
小份量的取餐尝试，就等于增长实验的过程。分为 4 个步骤：
从定量和定性数据中分析洞察——不断的提出假设——然后排定优先级，进行实验——验证应用的过程。
（增长实验流程）
接下来，分享两个我们在增长中做的小 Case。
Kitchen 是一款为设计者提升工作效率的 Sketch 工具集。先利用增长大图看下 Kitchen 的现状，我们捞取用户从访问——下载——安装——使用的数据漏斗，可以看出整体漏斗还是很不错的，整体留存率达到 40%。
然后我老板就说：「可以去做拉新增长，给你一块钱成本，去撬动一个地球吧。」其实，我当时就想给他一个白眼，现在一块钱能做什么？但反过来想想，这确实是增长很重要的一点：怎么用最小的成本去撬动最大的价值，找到最大的发力点。
基于当时的 DAU 数据现状，并初步讨论后，我们敲定 6 周 DAU 增长翻倍的目标。围绕这个目标，再进一步拆解为新增和留存，前面有提到留存率不错，所以我们这 6 周的增长聚焦在拉新上。那么拉新最重要是找到低成本的渠道运营。然后，我们脑爆了一些平时设计师会去的和我们可以切入的网站，虽然筛选了一些，但还是有很多，我们不可能全部去铺。在人有限、钱有限、时间有限的情况下，再回归我们的目标，需要找到最合适和低成本的渠道去运营。
（利用增长大图分析 Kitchen 访问到使用的流程）
所以基于 ICE 评分体系以及结合业务，我们做了局部调整，最终以渠道的「影响力」、「转化率」和「可行性」3 个维度进行打分，确定前 4 个打星标的渠道去做实验，这里主要分享下在 Ant Design 渠道上做的小实验。
（所以基于 ICE 评分体系以及结合业务，选定渠道）
在增长之前，我们已经在 Ant Design 首页投下过广告，通过数据发现转化率不足 0.2% ，后来我们分析 Ant Design 各个页面上的数据，从中发现一个有趣的现象，从招聘贴过来的用户竟然比首页过来的用户还多。
对比这两个入口，一个是首页，一个是很内页的文字链，比较偏僻的入口，位置是微不足道，但给 Kitchen 带来的用户却是首页的 10 倍。
我们又对比了他们之间的差别：首页虽然是比较大的位置，浏览量大，但用户普遍是大致浏览，看的欲望不强。而点击招聘页，通常是带着目的进来，所以这部分的用户是高欲望点击的。正所谓，欲望 - 摩擦 = 转化，为了提升转化，要么提升客户的欲望（Desire) ，要么减少摩擦（Friction)， 往往消除摩擦要比提升客户欲望更简单。所以让用户有欲望进行来时，我们把摩擦尽量减少，则可以带来更大的转化。
所以我们就提出了一个大胆的假设：如果我们在用户点击欲望更强，关注度更高，浏览量更高的页面，并且和 Kitchen 功能相关的页面上增加引导，这个引流的效果可能会更好。因此开始了我们的实验，首先分析 Ant Design 浏览量最高的前 20 的页面，从中筛选出和 Kitchen 功能相关的页面。
（筛选出高频页面，以及相关功能）
在相关功能页面下，增加一个叫设计师专属的模块。在不同功能的页面下，加入了不同的引导文案，去吸引设计师点击。比如 Table 这个组件，我们加入的引导文案是：安装 Kitchen Sketch 插件 ，两步就可以自动生成 Ant Design 表格组件。（甚至连在文案前加 emoji 、文案后加或不加 emoji ，我们都尝试做了实验 ）
Ant Design 的用户有一半是设计师，那么当设计师进入到该页面，并且也想使用 Table 这个组件时，就可以减少用户的摩擦，增加转化。
1 个月后我们发现：对比首页，在功能页上的引流效果更好，也说明这次试验是成功的。通过 Ant Design 渠道过来的访问量，总体提升 2460%。并且这个影响是长久性的。
（渠道优化带来访问量提升）
在同一时间，获得实验成功后，我们继续在不同的渠道尝试了不同的增长实验。6 周后，DAU 整体提升 42%，虽然6周的目标没有达成 100%，但最关键是不断试验的过程。
更详细的案例实践请查看 ：https://zhuanlan.zhihu.com/p/68707241
语雀，是蚂蚁金服孵化的一款知识协同产品。在蚂蚁、阿里内部，大家都是用语雀来管理自己的办公文档与个人笔记，是十万阿里人都在使用的笔记与文档知识库。当然，语雀不仅在阿里内部使用，对外，语雀也服务外部企业和个人用户，所以没有使用过的同学欢迎大家来试试：
https://link.zhihu.com/?target=https%3A//www.yuque.com/yuque/help
作为文档管理工具，「写」是其中的关键环节。因此，语雀将「注册后写一篇文档」作为用户的激活动作，此次增长实践的目标，就是提升新用户的激活率。
同样利用增长大图先梳理新用户注册激活的流程，从数据漏斗中我们可以看到，从注册登录后，到激活的转化率是非常低的，这是我们的一个机会点。
由此我们也去做了一轮用户调研，从调研结果来看，许多用户在注册后其实不知道「语雀能拿来干啥」「能怎么样解决我的问题」。具体反映在用户的操作和困惑上是：一是引导太弱不知道怎么开始写一篇文档，二是概念抽象令人费解，三是整个激活流程冗长容易失去耐心。这里边其实有比较大的提升空间，那我们能不能通过一些实验去提升转化率呢？
首先分析原有方案的问题
这是我们老的引导方案，用户注册完成后，默认会进入到他的个人页面，语雀默认为用户创建一个空的默认知识库。
现在回顾这个页面，也难怪用户会说不知道语雀能拿来干什么了。
首先，场景引导弱。每天不同用户带着各自的场景和问题，来到语雀，有希望做办公文档协同的，有希望做读书笔记的，有希望写专栏博客的。面对这形形色色的需求，语雀只提供了一个空的「默认知识库」，余下的便留给用户自行探索，也难怪用户会感觉无从下手。
此外，像「知识库」等概念，对于小白来说，其实非常抽象，难以理解。而且在此页面中还有像「关注了」「关注者」等与创作关系不太大的干扰信息。这些东西，都会阻碍用户激活，需要优化。
针对上述问题，团队同学经过讨论，提出假设：我们是否可以通过场景化引导的方式，来提升整个激活率呢？
所谓场景化引导，就是通过语雀产品定位以及用户实际使用情况，提炼出最典型的场景模板，打包出样板间。用户带着场景与问题来到语雀，语雀带着相应的解决方案去迎接用户，如此一来，需求和方案就能很好的匹配上，「语雀能用来干什么」的问题自然迎刃而解。
与此同时，新方案将「知识库」等很难理解的概念通过场景化包装，变成「笔记本」「攻略书」等更具像化的东西，用户不再需要上来就学习这些概念，只需要在使用的过程中慢慢去体会其作用即可。
（第一批场景模板）
以上就是我们最初提炼的六大场景，我们将它放置在新用户注册后进入的第一个页面。此处以学习笔记为例子：新用户完成注册后，如果想用语雀做学习笔记，他可以点击笔记下方的「立即新建」。
（学习笔记新建流程）
此时，会进入学习笔记的创建流程，语雀会默认帮用户填写好表单内容，并在右侧紫色框框内展示一个样板，通过样板见，用户就能大概知道语雀是如何解决他所在场景下的问题。下一步，用户只需要点击新建，就能创建出一个适用于做学习笔记的知识库。
（学习笔记知识库）
瞧，一个学习笔记知识库也就新建好了，这里，用户可以选择自行「新建文档」，或者基于我们为他进行准备的模板文档，开始自己的创作。整个引导过程，始终围绕用户的目标与场景，并将结果前置供用户预览，让他更有体感。
最终，我们的增长实验取得了还不错的效果。相较于旧版，新版用户激活率提升了 52%。
既然实验效果不错，是否能百尺竿头更进一步，放大成功影响呢？这里运用了两个小方法，举一反三和乘胜追击：
· 举一反三：把成功模式运用到产品的其他地方
· 乘胜追击：针对同一个点进行更多实验，看能否进一步提升实验指标
回到刚才的例子，在验证了场景化引导的有效性后，我们也将模板用在用户日常的新建流程里，除新手引导外，用户在自己常规的新建过程中，也可以通过我们总结出来的场景模板去新建知识库或团队，做到举一反三。
（将模板复用到常规新建流程中）
这一设计有利于向存量老用户介绍语雀的用法，也方便他们去探索语雀更多的可能性，在弄明白「语雀怎么样解决我的问题」之余，还能知道「原来语雀也能干这个！」
与此同时，我们在原先六大模板的基础上，借着双 11 和双 12 的东风，提炼出了「电商团队」模板，乘胜追击。
希望借此转化一部分商家流量，让商户也在语雀中管理自己的进销存等内容。
经过一轮举一反三以及乘胜追击，场景化增长实验取得了还不错的效果，除刚刚说的整体激活率提升 52% 以外，自语雀场景化模板上线以来，语雀新建的所有团队中，有 57% 是通过模板创建的；新建的所有知识库中，有 21% 是通过模板创建的。可以说，我们的场景化模板还是比较契合用户实际场景，被用户接受的。增长实验取得了不错的成效。
整个过程，在产品功能上，其实并没有做多少增量，从前语雀能做的，现在也能做；从前语雀不能做的，现在也不太能做。
通过场景化的方式，让产品的价值显性化，通过让显性化后的产品价值被用户发现，促使用户增长。
场景化，让价值被发现，这是我们在语雀增长实践中学习到的小小经验，分享给大家。
最后总结一下关键点：
利用增长大图，用定量的用户行为数据漏斗和定性的痛点比重数据，去综合分析，找到机会点，然后从业务总目标出发去层层拆解增长目标，确定增长实验的聚焦领域，现阶段先做什么，后做什么？用最小的成本去撬动最大的价值。但增长大图也只是工具和手段，最关键是与 Key Person 共创聚焦、共同推进，这样才能做到事半功倍。
增长实践不是一帆风顺、一蹴而就的，最重要的是持之以恒，反复迭代实验的过程。如果实验成功则可以通过乘胜追击和举一反三的方式，继续放大成功影响。如果实验失败则要吸取教训，了解原因，继续下一个试验。
最后想说的是，增长只是一种思维方式，在设计中增长，让产品核心价值被更多人发现和使用，通过设计的方式去最终帮助业务增长，甚至还可以做到对商业有影响。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
目前关于“体验度量”比较成熟的理论模型当属 Google 的 HEART 模型、ISO 9126 软件质量模型和Davis 的 TAM 技术接受模型。后人在此基础上进行了很多实践，譬如 SAP 的用户体验问卷（UEQ）、Oracle 的客户体验价值公式（CX）等。公司内部各个 BU 也在不断的尝试和探索，譬如新零售技术团队的 TES 模型，技术团队研发效能的 DEVA 模型，国际 UED 语音设计的 HII 模型，阿里云的 QoUE 模型。纵观这些模型和实践，大多是主观数据和客观数据的结合。
我们团队也曾提出过 TECH 、PTECH 模型，但由于模型的操作门槛较高、对埋点数据有不少要求，难以推广到各条业务线。痛定思痛后，我们决定重新回归业务，回归“体验度量”的初心，去繁从简，提高通用性。
企业级中后台产品最大的特点是任务性质非常明确；用户使用这类产品通常是为了解决某个确定的问题点，期待用新的解决方式降本增效。
桌面研究也表明：可用性问题是软件行业的普遍问题：在英国，一般商用计算机用户只有30%-40%的有效生产率；软件缺陷中，48%是可用性问题。
正是基于上述原因，我们尝试提出了“两章一分”的标准，分别从设计验收、可用性测试、易用度分数等三个维度对产品体验进行体检和把关。
“设计验收章”主要有 3 个维度：产品还原度、任务流程跑通率、单页面加载时间。
产品还原度：指技术同学的最终产出与设计稿之间的差异；
汇总人工智能线、技术风险线等 5 个产品近 1 年的可用性测试结果。除功能、性能问题外，高频体验问题主要集中在“帮助引导”、“操作反馈”、“任务流程”、“概念术语”、“功能入口”这 5 个方面。同时，结合之前项目沉淀的设计经验和设计工具，我们最终将“产品还原度”的子维度定为“信息导航”、“帮助引导”、“操作反馈”、“文案名词”；每个子维度用 2-3 句描述来进行评分。
任务流程跑通率：验收确认能跑通的主干任务流程数，在所有主干任务流程数中的占比；举个例子，设计稿中枚举了 10 条主干任务流程，验收发现其中 9 条已跑通，那么任务流程跑通率就是 9/10*100%=90%。
单页面加载时间：接入雨燕性能指标数据的产品看“首次有效渲染时长 fmp”这个指标；未接入的产品直接主观判断，超过 3 秒的视为不合格。
“可用性测试章”也在验收阶段执行，同样有三个参评维度：最终完成率、人均求助次数和高阻碍页面。
我们没有考虑将可用性测试的常用指标——操作时长作为参评维度，主要原因是企业中后台产品类型多、使用场景复杂程度各自不同：用语雀创建企业空间只需要 5 分钟；用云凤蝶搭建一个后台页面可能需要 60 分钟，用 sofa stack 创建并发布一个应用可能需要 2-3 个小时......难以确定可以作为标准的具体操作时长。
“易用度分数”标准为 5.5 分。（关于“易用度分数”的更多详情，请查阅《企业级中后台产品体验度量探索（上）》）。
截至 2020 年 9 月，已有 58 个 产品实践过“两章一分”系列方法，基本覆盖平台设计团队支撑的重点项目及 UV 超过 100 的产品。详细数据如下图：
完整体验“两章一分”的 18 个产品，仅可用性测试就帮助发现 364 个问题，平均每个产品发现 20 个问题；其中，“九州2.0 发布部署”发现问题数多达 53 个。
企业中后台产品生产阶段中，由于一般没有专门的测试同学，因此设计验收都是由设计师或 PD 单独执行，没有作为必选环节，有时候甚至会因为开发周期紧张而直接略过；既没有方法论，又缺乏仪式感。
“两章一分”的实践中，我们首次践行“共创式验收”，以项目组会议的方式，邀请各个角色共同参与到验收环节中：如果产品没有什么技术门槛，那么各个角色分别独立操作核心流程；如果产品有一定的技术门槛，则由技术同学操作核心流程，同时共享屏幕，其他同学从旁观察。操作完毕后，项目组内共同讨论发现的体验问题，并将问题落地到 Aone 中进行排期管理落地。
引入“技术支持”
企业中后台产品通常有一定的技术门槛，以 SOFAstack的测试任务为例：
使用 sofaboot 技术栈，创建 “hello world” 应用，通过“经典版”发布部署模式发布成功。
测试过程中经常会出现一些涉及到底层技术系统的问题，非设计同学能解决，因此我们建议做企业中后台产品的可用性测试时，需要配备至少一名技术支持同学，以备不时之需。
圈定最低测试人数
Jakob Nielsen 在 2000年提出测试 5 人就能发现 85%的可用性问题；结合我们的实际业务场景：有些产品真实客户非常难找；前期“共创式验收”已跑通核心主干流程；因此我们将最低测试人数限制为 3 人。
线上测试降成本
我们开始实操案例时，恰逢疫情期间，于是就引入了线上远程测试的方式；后续实践下来，发现远程测试能在观察、分析阶段显著降低执行成本。
通过钉钉或阿里郎发起视频会议，邀请参加测试和观察的同学入会，请测试用户共享操作屏幕，主持人录屏捕捉用户操作轨迹，PD、技术等项目组成员从旁观察。测试结束后，使用语音转文本工具，快速将音频转成文字。这种模式最大的好处有两点：
突破了距离和观察人数的限制；从实践来看，现场测试结合远程测试的模式，至少能同时对 2-3 人进行测试，执行成本减半；
语音转文本后，显著提升了分析效率。
最开始提出“两章一分”的时候，我们原本希望这套标准能被作为判断产品体验是否好用，能否上线的标准之一；但实际并未推动成功。这里面有很多原因，其中一个非常实际的问题是很多产品需要调用线上数据库才能跑通核心流程，在测试阶段没法跑通；这就导致在测试阶段做可用性测试无法真实还原用户场景。
此外，设计师或 PD 新接手某款产品时，也希望能通过可用性测试的方式来快速了解产品问题。回归到“两章一分”的初心——帮助产品发现体验问题，因此，我们拓展了方法的执行阶段，不再局限于测试或验证阶段，只要场景适合，都可以用。
LinkE 研发运维中心是云通未来 Serverless 战场的重要产品；业务方希望用该产品来整合研发同学日常高频使用的研发、运维、中间件平台，大幅减少平台割裂和跳转，提供沉浸式的产品体验。
目前该产品还处于 0-1 建设的阶段。
为了确保产品体验良好，设计师在验收阶段引入“两章一分”，进行共创验收和可用性测试；
共创验收阶段，邀请 PD、技术 等 8 名同学一起参与，最终结果为“通过”；
可用性测试阶段，设计师根研发通用场景，招募 6 名研发同学参与两个可用性测试任务，分别为
任务 1：基于代码变更完成研发自测联调；
任务 2：基于发布完成分支的集成、预发、灰度、生产
结果用户在任务 2 遇到高阻碍页面，导致可用性测试结果为“不通过”，任务 2 的易用度分为仅 4.4 分，显著低于 5.5 分的参考标准；最终发现 30+ 问题点，并推动 PD 思考产品逻辑设置是否合理。
经过两次完整实践，LinkE 设计师已能完全独立操作执行“两章一分”；
业务方的参与度 & 认知度提升明显：已开始习惯将“两章一分”设为项目里程碑，并全员参与进来。
在实践过程中，我们发现企业中后台产品的典型场景大致可以分为 4 个场景；不同场景面临的设计项目有所偏重；不同设计项目在体验度量方面的切入点也有所不同。譬如：云凤蝶是一个典型的沉浸式画布页面，所有操作几乎都是通过编辑器属性面板来调整，那么如何来评估编辑器的效率呢？通过一系列实践和思考，我们提出可以通过“高频属性查找、配置的步骤数和时间”、“设置相同组件属性的耗时变化”等指标进行衡量。以下是我们根据不同典型场景、设计项目提出的体验度量切入点。
经过 S1 长达几个月的探索：我们制定了“两章一分”的标准；对 30+ 产品进行了易用度分数的测试，捕捉分数基线；提炼实操方法技巧，并赋能给各位设计师；联合设计师和业务方跑通近 20 个案例。不管是问题发现数量，还是设计师、业务方的主观反馈，都让我们坚定“两章一分”在企业中后台产品体验优化中是一个相对有效的模式。为此，S2 我们打算继续深化。
落标准：在关键业务线将“两章一分”落地到业务生产环节中，不过“两章一分”就不能上线；
分基线：区分不同产品类型和迭代大小，制定不同的易用度分数基线；
升方法：针对跨产品、跨域等难以推动的横向体验项目，我们考虑升级方法，如将可用性测试升级为“用户体验日”，以便更好地推动问题落地；
闭案例：针对 S1 已跑通的业务，我们会在 S2 进行案例闭环测试，以验证优化效果是否真的能在“两章一分”上体现出来；
始运营：我们会挑选一些案例在公司内外发声，找相关业务领域的团队进行交流和探讨；并从案例中总结和提炼设计技巧，帮助业务成长。
我们团队当前支持的企业中后台产品以 0-1 阶段产品为主，PD 通常缺少用户意识和体验优化手段，这就导致了设计稿还原度较差、产品上手门槛较高。针对这一现状，我们尝试性地提出了“两章一分”这个评价标准，从设计验收、可用性测试、易用度分数 3 个维度来评价产品当前的体验现状。
通过 S1 50+ 产品的实操，我们一边不断完善评价标准和实操经验，一边总结体验度量经验；共帮助 18 个产品发现 364 个产品，并在 link 、sofa 等重点产品线中落地到业务生产环节中，在业务方层面收到良好反馈。
在这过程中，我们总结了适合不同场景、不同设计项目的体验度量切入点，验证了这种方式在当前企业中后台产品中确实有效。后续我们将尝试细化标准，闭环案例，对内对外发声等方式，更好地推动体验思维在企业中后台产品生根发芽；同时，也期待能跟对这块感兴趣的同行朋友们多多交流。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今年，我们在内部中后台产品进行尝试，发现「易用度」可以作为合适的度量指标，并成功推广到 35 个产品，帮助PD、设计师、工程师等产品设计者去衡量产品体验现状，发现改进机会点。实践证明，易用度，相比满意度、尖叫度、NPS，更适合技术类产品的体验度量。结合用户行为数据，可以为用户画像、改进方向、运营策略提供更准确的决策依据。
在公司内部，技术类产品种类繁多，有很大一部分是开发、运维人员使用的中后台产品，且以从 0-1 阶段为主。由于这部分同学本身工作复杂度高，又必须依赖内部产品来完成，所以长期以来“简单易用”成为大家追求的产品体验标准，他们也把“如丝般顺滑”作为终极目标。但现实情况是，上手门槛高是使用技术类产品最大的痛点。
对于前台业务的设计者，经常会使用「人+钱」，也就是「流量+付费」来衡量产品效果。通过成功率、转化率等指标，可以快速看到用户行为上的反馈，来指引后续优化。但对于技术类产品，尤其是强流程、工具型产品，很难找到一套契合业务特点的度量方式。理论上，使用「成本+效率」是比较合适的衡量维度，实际操作下来，找到设计和产品效果之间的因果关系，并非易事。
我们做了一个内部调查，发现产品设计者经常容易遇到这些问题：
体验度量是一个绕不开的话题。天猫、阿里云、华为、京东都有尝试提出解决方案，但没有统一的衡量维度。
设计方案与产品的市场反馈，需要一个可以解释关联关系的抓手，这对迭代方向的指引至关重要。
产品团队逐渐重视用户用户，但缺乏有说服力的指标。
业界在体验度量上的方案，大致分为 3 个派别：
客观衡量法：通过数据埋点监测用户行为数据。例如经典的 PULSE 模型，还有大家熟悉的运营指标，活跃用户数、留存率、ARPU、LTV等等。这对于还未商业化、用户基数少的产品不适用。
主观衡量法：收集用户主观打分。经典的满意度、尖叫度、NPS，可用性测试量表（如SUS），美国客户满意度指数ACSI。
主观+客观衡量法：把用户行为数据和主观打分结合起来，多数用归一化方式得出一个总分，把分数划分成不同档次作参考。Google 经典的 HEART 模型，内部 的 PTECH 模型，阿里云 QoUE 模型 ，华为云的用户体验模型。
在掌握了这些信息之后，我们在内部的技术类产品上，进行了一轮新的探索。经过半年时间的试点，结合业界的解决方案、内部产品的业务特性，我们最终选择主观衡量法，并使用「易用度」这个衡量指标。
易用度，英文 Customer Effort Score ，简称「易用度」，也有译成「费力度」，指的是用户使用某个产品/服务来解决问题的难易程度。目的是消除或减少用户使用产品过程中的障碍。
该定义来自 2010年 《哈佛商业评论》发表的文章——《Stop Trying to Delight Your Customers》。2013年，Gartner 子公司 CEB 发布 易用度2.0版本 的测量方法，定义为“解决问题的难易程度”（make it easy to handle my issue）。
它的源头可以追溯到美国用户研究专家 Jeff Sauro(2009)提出的单项难易度问卷（Single Ease Question，SEQ），在可用性测试之后，用户需要对一个问题进行打分，问法是“整体上，这个任务是非常困难-非常容易（7分制）”。
为什么说「易用度」更适合技术类的产品？主要基于技术类产品的三大特点。
总体指标
易用度：使用**产品完成**工作的容易程度。
影响因素
主要因素：产品及设计给用户操作带来的复杂度，我们称之为「基础体验」，包括帮助引导、功能入口、概念术语、任务流程、操作反馈。
次要因素：用户特征对使用易用度的调节作用，也称之为「调节因素」。不同特点的用户，会影响易用度分数，包括操作熟练度、先验知识、行为习惯。
大家肯定要问，这些影响因素是怎么确定的，如何证明它们的合理性？这就要提到量表开发方法，基本上可以分为几个步骤：
step1.理论借鉴
从相关领域查找经典量表，站在巨人的肩膀上，经过实践检验的量表更可靠。我们首先从15种国际可用性测试量表中借鉴，抽出了一些关键的衡量维度。另外，易用度创始人Matt Dixon（2014）在《the effortless effort》书中，总结了在客户服务场景，费力的关键因素：
信息分类不恰当，反复描述问题（82%）
需要多次求助（62%）
帮助指引不清晰(59%)
找不到相关入口，频繁切换沟通渠道（59%）
step2.实践总结
我们盘点发现，技术类产品，绝大部分属于工具型产品，强调任务流程，也是用户痛点集中的地方。汇总多条业务线近1年的调研结果。除了功能、性能问题外，根据对完成任务的阻碍程度，无论是0-1阶段，还是1-N阶段，高频体验问题分布都集中在5个维度：
帮助引导
操作反馈
任务流程
概念术语
功能入口
step3.数据分析
通过整理归纳的影响因素，需要经过信效度验证，才能有说服力。简单来说，信度就是“可信与否”，指的是结果的一致性、稳定性及可靠性；效度就是“命中与否”，指的是结果反映所想要考察内容的程度。通过统计学的探索性因子分析，验证性因子分析，我们确定 5 个维度可以有效测量易用度分数的变化。详细可查阅《如何找到影响用户体验的关键因素？》。
从易用度-满意度-尖叫度-NPS，是一个用户预期的渐进变化。从中可以看出，易用度更关注的是基础体验，也就是“简单好用”。
为什么易用度相比其他指标更适合技术类产品呢？主要有 3 个原因：
1.内部试点发现，满意度无法准确衡量技术类产品体验
满意度不能很好衡量真实体验，分数虚高。我们在一些产品上，同时使用「易用度」和「满意度」作为总体指标，发现 43% 的用户满意度评分，高于易用度评分，可以理解为“产品我满意但不好用”。此外，易用度分数与满意度分数相关性高达0.77，具备很高的可替代性。
易用度更接近用户真实体验。对任务难易程度作出评价，用户在判断时会更直接，考虑使用过程中付出的脑力、时间等成本。对满意度作出评价，除了考虑产品本身的易用性，内部用户还会考虑其他主观因素，例如：
合作关系：你是研发，我是用户，担心给你满意度打低分了，之后就不满足我的需求了。
中庸倾向：满意度调查，已经是人尽皆知的评分，国人都倾向于打中上。
评价范围：易用度问的是完成工作的容易程度，范围更小，用户评价的时候更聚焦。满意度问的是整体是否满意，范围更大，用户会综合考虑很多因素，例如上面提到的服务支持、上下游协作、需求响应等等。
2.行业实践表明，易用度比 NPS 更能预测用户留存和成本变化
易用度更能预测用户留存。《哈佛商业评论》（2010年）发表易用度时，调研7500多名用户，数据显示易用度低的客户，94％的有复购意愿，88％表示会增加支出，仅1％表示会对公司持负面态度。Garter（2013）发布报告，基于49000多名用户数据发现，易用度分值从1分提升到5分，可以使用户忠诚度提高22%。Oracle（2015）发布服务云易用度白皮书发现，当用户表示使用产品付出了更少的努力，忠诚度提高18%。相反，从满足用户预期到超出用户预期，用户忠诚度的变化并不明显。
易用度更能预测成本变化。 Gartner（2019）对100+公司、12.5w用户的调研发现，易用度从高分到低分，可以降低37%的成本。
3.行业实践表明，尖叫度更适合成熟度较高的产品类型
目前在市场上，至少在国内，ToB 产品没有达到饱和，定位也各有不同。在企业用户心中，并没有足够清晰的心智和经验去判断。例如企业微信和钉钉，基本上很少有用户会同时使用这两个产品，那用户就无法准确评价二者的好坏。
更关键的是，很多 ToB 产品，用户多数是被动接受使用的，极少有选择余地。普遍的高技术门槛，也把他们尝试的意愿和可能性大打折扣。
对比满意度、尖叫度、NPS指标，易用度的优势在于：
关注用户完成任务过程中的阻碍，重视基础体验；
适合去度量特定的用户接触点和任务流程，以便了解用户解决问题的难易程度。
劣势在于：
对于分数过高或过低的情况，没有通用的基线，需要区分行业、产品类型、产品复杂度来衡量分数是否合格；
侧重基本体验，无法衡量用户的总体满意度。
经过半年的实践，我们采集了 35 个技术类产品的易用度，根据产品类型、产品阶段来区分。结合内部试点和行业调研，我们把技术类产品的易用基线，设定为 5.5 分。主要发现：
产品类型越复杂，易用度越低。试点产品中，ToC 产品易用度均值 5.46，ToB 产品易用度均值 5.32，ToD 产品易用度均值 5.07。
产品阶段越早期，易用度越低。试点产品中，0-1 阶段的产品易用度均值 5.09，1-N 阶段的产品易用度均值 5.28。
如图所示，易用度有很好的区分度，不同产品类型的不同产品阶段分数呈现出差异性，我们可以根据这个数据，去评估自己的产品所在位置。
为什么总体上选择 5.5 分作为“易用”标准？
我们在这 35 个产品上进行易用度的尝试，最终收集了 4000+ 问卷数据，得出了技术类产品的体验基线：
总体均值 5.07 分，中位数 5 分。具体分布如图所示，认为“比较容易”（5-7分）的用户占 69%。
但由于内部的技术类产品，大多处于 0-1阶段，以现在的状态作为“易用”基线，显然不合理。
因此，我们需要结合业界的实践作为参考。我们收集到 2 家用户研究领域的老牌公司 Nicereply 和 HotJar 的数据。Nicereply 是一家咨询公司，它服务的对象既包括 C 端用户，也包括 B 端用户。HotJar 是一家专做用户行为监控的公司，它服务的对象主要是 C 端用户。因此，我们倾向于采纳 Nicereply 发布的基线 5.5 分，作为参考。
Nicereply 公司在2018 年发布的易用度 benchmark，基线为 5.5 分。
HotJar 公司在 2019 年发布的易用度 benchmark，基线为 6.09 分。
很多设计者会想，不就是一个问卷嘛，能发挥多大的作用？实际上，当问卷数据+用户行为数据，它将发挥更大的价值。
现状描述：对产品当前的功能、体验、性能的在用户心中的水位进行摸底，通过数据和主观反馈找到原因。
对比差异：技术型产品往往有多个角色共同使用，并且有上下游协作关系，可以通过问卷和数据发现不同角色的偏好，找出差异化的改进方向。
影响关系：当发现某些模块用户评价低时，需要下钻找到最相关的影响因素，这时需要用到相关分析，找到此消彼长或相辅相成的变化关系，以及用到回归分析，找到可能的因果关系。
聚类分析：结合问卷数据和用户行为数据，我们可以对典型用户进行分层，也就是我们通常说的“用户画像”，可以结合经典的 RFM 模型，找到高频、忠诚、高付费且评价好的用户。
以某个技术类产品 A 为例，通过现状描述，可以发现低分人群抱怨的问题集中在哪里，提出问题优先级排序。
通过对比差异，把用户根据人口学、行为特征进行单维分类，与易用度分数做交叉分析，找出人群之间的差异，有针对性改进。
通过影响关系分析，可以找到影响产品 A 易用度分数的主要原因，也就是用户为什么觉得好用/不好用。
通过聚类分析，结合问卷数据和用户行为数据，可以发现典型人群，制定差异化的运营策略。
在 35 个技术类产品上的实践，我们发现了一些常见现象和经验性的洞察，它并非都是普适的，却有很高的参考价值。
基于内部技术类产品的体验度量实践，我们得出以下结论：
实践证明，易用度指标衡量技术类产品更有效。技术类产品降本增效的商业目的、降低技术门槛的用户诉求、流程复杂上手难的痛点，决定了体验度量要关注基础体验。满意度、尖叫度、NPS去衡量都不太准确。
易用度的衡量维度，包括 5 个部分的基础体验。即帮助引导、功能入口、概念术语、任务流程、操作反馈。
结合内部试点和行业调研，我们把技术类产品的易用基线，设定为 5.5 分。当前内部技术类产品的易用度基线是 5.07分，行业技术类产品的易用度基线是 5.5 分，产品类型（ToC/ToB/ToD）、产品阶段（0-1阶段，1-N阶段）也会有所差异。
结合行为数据，易用度可以进行描述、分类。使用现状描述找出低分人群的高频问题，使用对比差异找到多角色的不同诉求，分析影响关系找到影响易用度的主要因素，结合用户行为数据进行聚类找到典型人群。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近很长时间都在做招聘管理系统的大改版，管理系统用户角色众多、功能逻辑复杂、使用场景多样化，如何做到用户体验的突破？
在 ToB 领域，不能只关注中间的设计环节，而是需要参与到整个项目的流程中，围绕着客户服务的全流程，包括 理解业务-寻找机会-制定策略-设计原型-效果验证 进行全链路的体验设计触达。
理解业务，主要是理解业务逻辑、用户角色、使用场景；
1、业务流程图
通过客户现场访谈、问卷调查、用户行为数据分析、竞品分析、查阅行业报告等方式，梳理业务流程的关键节点，这些节点也就是我们后续设计的关键步骤。
2、用户角色
梳理出业务流程之后，从业务流程中可以找到对应的用户角色。招聘平台的用户角色包括招聘专员、招聘经理、部门主管、面试官、应聘者、猎头、企业员工等，最主要的用户角色是招聘专员。
通过角色画像，减少我们在设计过程中的盲目设计和闭门造车，时刻以用户的视角和感受来设计。
下图是“招聘专员”的用户画像
2、场景分析/用户故事
场景化设计的定义：根据特定时间、使用情景、及用户的特性，进行定制化的设计，使用户按照产品设定的路线快速完成目标尽可能的给予用户惊喜与感动。
可以应用“体验设计画布”来帮助我们更好的梳理场景。
主要是从操作流程、内容反馈、信息传达、视觉表现、情感关怀的角度来寻找交互和视觉的优化点；
「操作流程」是否高效
去除冗余：去掉哪一步骤仍能跑通流程；预判操作：下一步骤是否可预判，提前帮用户完成；自定义操作：高频操作是否允许用户自定义从而减少操作步骤；
2.「内容反馈」是否合适
符合预期：每一个操作后呈现的页面或信息内容是不是用户想要的；
一致性：不同界面同一个操作或样式，操作后是否呈现一致的内容？
轻量化：采用更轻量的内容呈现方式，是否依然符合场景，减轻操作成本；
3.「信息传达」是否清晰
边界清晰：能够明显区分各模块或信息，遵循格式塔原理；
易获取：主要模块或信息放置在容器边界的左上部分，因为用户阅读习惯从左到右、从上到下；
结构简洁：同一层级信息数量遵循7±2原则，若超过则考虑重新整合信息结构，或是提供更高效的信息获取方式；
4.「视觉表达」是否明确
减少认知负担：是否有信息内容可用视觉元素代替或辅助，规避用户阅读文字加重认知负担；
表意清晰：通过视觉元素能够快速了解信息大意，而不产生歧义；
降低疲劳：界面视觉是否容易加速用户的疲劳感；
5.「情感关怀」体现温度
正向情感：文案是否传达了正向情绪，避开负面情绪；
贴近日常：信息呈现贴近日常习惯，非必要不使用专业术语；
积极提供方案：当出现异常情况时，是否有解决方案替代异常提示；
1.「操作流程」优化操作路径
2.「内容反馈」更加人性
3.「信息传达」信息整合，清晰高效
4.「视觉表达」一致、易获取、动线合理
5.「情感关怀」体现温度
经过前面的理解业务、寻找机会、制定策略之后就可以进行原型设计了，考验大家设计功底的时候到了，这里不再赘述。
1.验证维度
2.验证方式
我们主要通过系统功能埋点、系统NPS信息收集、客户现场和电话回访、内部客户外部客户问卷调查等方式来收集用户反馈信息。
3.验证结果
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：ZZiUP
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
网站建设-如何建设一个优质的网站？
网站建设
互联网时代的到来，作为一个企业你如果还没有属于自己的网站，那么你就真的“out”了，互联网的日流量达到上亿，这些不是简单的点击率，而是一笔真真正正的大钱。如果你还不会互联网，不了解互联网，那么这些都与你毫无关系。而网站建设是企业面向互联的主要窗口之一。也是大家公认渠道之一。
网站建设对于企业来说意义重大，它不仅是企业展示的窗口那么简单。互联网时代下，众多企业纷纷进行互联网转型，那是因为这些企业的领导者拥有者敏锐的嗅觉，具有洞察时代大趋势的能力。网站建设使他们首先要做的事情。那么如何建设一个优质的网站呢？
网站建设
第一：网站建设平台要有强大开发团队
网站建设是一门技术活，没有强大的技术作为支撑，就无法保障网站的安全性和功能的实现。开发团队的强大决定了网站质量与品质。拥有一稳定的后台，才能确保企业网站的一系列工作顺利进行。
第二：网站建设要有专业的设计团队
一个网站就好比一个门面，设计人员就是装修的师傅。门面不好看给客户的第一印象就是不专业，第一印象分就大打折扣，不能引起客户的重视。设计的不合理，就会影响到客户的体验度。一个没有体验度网站，很难留住客户，进行流量的转化。一切设计以客户的体验度为核心。
第三：网站建设要跟上时代的步伐
时代变，网站建设的功能和需求点也在变，只有去适应时代的打造需求，企业才能在竞争激烈的时代下生存。功能的更新换代也要跟上时代的步伐，才能满足客户的体验需求。客户才会为我们买单。
SEO优化
第四：网站建设要有利于SEO优化
网站建设只是完成面建设，而我们建设网站的目的是为了，引来流量，转化流量，实现利润转化。一个没有不利于SEO优化的网站，就像埋藏再深山的金山，难以被发现，吸引不到客户。SEO的意义在于打通前往金山的通道。海、陆、空全方位立体打通，让客户络绎不绝前往。金山才得以被发现，被开发。
第五：网站坚持维护更新
这个时代不是大鱼吃小鱼的时代，而是快鱼吃慢鱼的时代。只有不断的去完善更新，才能适应生存。网站也一样，只有不断优化升级才能不被淘汰。
第六：网站建设要符合国家政策
要及时了解国家的相关法律法规以及一些相关的政策，例如最新的广告法，不能只用不符合要求的字眼。例如分销系统，不能越过法律底线。那些文字可以商业，哪些是有版权的等。
以上是一些个人的网站建设个人见解，如有更好的意见也欢迎大家一起探讨，相互学习。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：SEO
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编者按：互联网的诞生本就是一个奇迹，作为其中最重要的载体之一，网页就是这个大时代最重要的缩影，相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计发展史，我们可以看到技术、设计与思想的演进，看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。
当我发现设计网页有多投机取巧的方法之时，就逐渐开始对手打网页代码失去兴趣。的确，许多网页设计的问题并不止一种解决方案，但是很少有方案能解决所有的浏览器兼容性问题。最令我纳闷的是，为什么会有做设计和写代码的分工？随着技术的发展，许多在过去难以解决的问题现在可以轻松搞定，但为什么与此同时一些简单的事情反而越来越难以实现？这些问题的答案并不是简单的是与否，对与错，也许我们需要从网页设计的整个发展历程来寻找答案，找到真正弥合设计与代码之间隔膜的原因所在。
温故历史之前，不妨看看2014年最优秀的网页设计：《爱不释手！2014年最佳的20个优秀网页设计》
在互联网真正开始之时，黑色的显示屏仅能显示单色的像素。可以说，当互联网天地初开之时，Web Design 仅仅意味着字符和空格的排列组合。虽然图形化的界面早在80年代初就有了，但在此时普及率并不高。直到90年代，图形化界面才真正进入千家万户，而那时候，才是属于互联网的狂野西部。
能够显示图片的浏览器的诞生，是促使网页设计这个行业诞生的重要先决条件。实际上在当时，最接近于信息结构化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel 在他的网页设计书《Creating Killer Sites》讲述了他设计优秀网站的秘诀：在表格中嵌套表格，将静态的表格和动态的表格以巧妙的方式结合到一起。尽管表格本身是用来承载数据的，用来承载内容和图片有点奇怪，但是在那个时代，这种方法依然显得颇为靠谱，并且大行其道。
网页设计所面临的另外一个问题，就是如何保持网页那脆弱的结构。也正是因为这种需求，切片设计（Slicing Design）逐渐流行了起来。设计师创建出漂亮的网页布局，随后开发者将整个设计稿切片，找出呈现设计的最佳方法。另一方面，表格还有一些炫酷的功能，比如垂直对齐，以像素为单位或者以百分比来控制对齐。在那个时代，表格可是近乎栅格系统一般的灵活的设计神器，也正是因此，那个时代的开发者并不喜欢前端的代码。（表格嵌套表格有多乱？）
JavaScript的出现补足了尚且原始的HTML。举个例子，如果你想写个弹出窗，或者想动态修改某些对象的顺序？HTML不行，但是JS可以！不过此时JS的主要问题在于，它处于整个网页布局的顶层并且需要单独加载。很多时候它仅仅被懒惰的开发者用作一个简单的补丁，但如果使用得当，JS可以非常强大。今天，同样的功能如果CSS能实现，我们会尽量避免使用JS。不可否认的是，JS本身确实很强大，前端常用的jQuery，后端的Node.js都是不可多得的好东西。
作为一门新技术，Flash为网页开发者/设计师带来了前所未有的自由，它打破了之前网页设计所固有的限制。借助Flash，设计师可以随心所欲地在网页上展现任何形状、布局、动画和交互，可以使用任何喜欢的字体，他们借助Flash熔于一体。所有的这一切最终会被打包成为一个文件，然后被发送到浏览器端显示出来。这也就意味着，用户只需要拥有最新的Flash插件和些许等待时间，就可以享有一个魔术般的网页。这是启动页面（splash pages）、介绍动画以及各种交互特效的黄金时代。不幸的是，这种设计并不开放，也不利于搜索，还需要消耗计算机大量的运算能力。2007年，当苹果发布他们的第一台iPhone的时候，就决定彻底放弃Flash，也正是在这个时候，Flash开始走下坡路——至少在网页设计领域。
差不多是在Flash崛起的同时，一种更好的网页结构化设计工具CSS诞生了。CSS的基本概念是将网页内容的样式分离出来，所以网页的外观和格式等属性将会在CSS中被定义，但内容依然保留在HTML中。早期版本的CSS并没有现在那么灵活，和许多新事物一样，它最大的障碍在于许多浏览器还没来得及接纳这一新技术，对于开发者而言，这是一个头疼的事情。需要明确说明的是，CSS并非全新的编程语言，它仅仅只是一种声明性语言。那么网页设计师需要学习编程吗？可能需要。但是网页设计师需要懂得CSS么？当然需要。
此刻，在手机上浏览网页本就是一种全新的挑战。设计师除了要为不同设备设计不同的布局，还面临着内容控制的问题：小屏幕上展示的内容要和桌面端一样多，还是需要剥离开来？桌面端网页上闪亮精致的小广告要如何在手机上呈现？加载速度也是一个大问题，移动端设备的网络加载速度不够快，而且桌面端网页会消耗大量的流量。网页设计亟待改进。
第一个重大的改进是栅格系统的出现。经过摸索，960栅格系统最终胜出，经典的12栏栅格被设计师们广泛的接纳，甚至成为许多设计师最常用的设计工具。接下来，各种常见的设计元素诸如表格、导航、按钮被标准化，打包成为可复用的套件，这基本上就构成了视觉元素库，其中还纳入了常见的代码。其中最典型的代表就是Bootstrap和Foundation，它们也使得网站和APP之间的界限逐渐模糊。当然，它们也不是没有缺点，借助这些库设计出来的网页往往大同小异，而且网页设计师要想使用它们还得深入了解相关的代码知识。
惊才绝艳的设计师Ethan Marcotte决定挑战传统的网页设计，它让网页在内容不变的前提下，布局随着窗口和屏幕的变化而变化，并且将这种设计命名为响应式网页设计。网页设计师依然只需要HTML和CSS就可以实现这种功能，不得不承认这种设计理念非常超前。不过大家对于响应式设计依然有些许误解。对于设计师而言，响应式设计意味着为设计许多不同的布局。对于用户而言，响应式设计就意味着这个网页可以在手机上完美浏览。对于开发者而言，响应式设计意味着如何控制好网站图片应付移动端和桌面端，在不同情形和语义下，拥有良好的下载速度和呈现效果，等等。简而言之，就是一个网站能在任何情况下良好展现。至少在这一点上，所有人能达成共识。
设计网页布局总会花费大量的时间，好在这个时候我们开始抛弃复杂的光影效果，重新专注于根本的内容呈现。在此之前，网页设计讲求精美的图片和排版效果，漂亮的插画与周到的布局设计，而简化这些视觉元素之后，就是我们说所的“扁平化设计”。将复杂的效果淡化之后，视觉的扁平化，也促使内容和信息层级的扁平化。充满光影特效的按钮被扁平化的图标所替代，矢量图形和图标字体也开始被大范围使用，网页字体和版式设计的结合令网页视觉更加漂亮。有趣的是，这时候的网页设计开始有返璞归真的感觉。
技术的革新已经开始将网页设计推动到一个全新的境界。在许多设计平台上，设计师只需要在屏幕上移动不同的控件就可以生成整洁可用的代码出来，并且这些代码非常灵活，可控度极高！试想一下，开发者无需担心浏览器兼容性，可以专注于更加实际的问题！
新诞生的概念正在推动网页设计。CSS中新诞生的属性，诸如vh和vw（viewport height 与 width1），就使得网页元素的位置控制更加灵活自由，一次性解决了设计师纠结多年的顽疾。作为CSS一部分的Flexbox则是另一个新事物，它可以快速创建布局，轻松修改属性而无需编写过多代码。
网页设计正在飞速发展，未来还会有越来越多的创新，就让我们拭目以待吧！
文章来源：UI中国 推荐：陈子木
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com