这是知果日记的第 144 期分享
我是知果，欢迎来到知果日记公众号，看我的心得分享。
这是一篇旧文重新梳理，重新分享的文章，我想讲讲从0-1建立B端设计规范，会经过哪些流程，要注意哪些。
在「《B端体验设计：企业级视角的系统化方法》新书共读营」结营的时候，我会通过直播的方式，为你分享我当时是怎么思考构建企业级B端设计体系的，你感兴趣，可以提前进共读营，锁定那一天，不安排回放哦。
百度百科描述：“产品是指作为商品提供给市场 ，被人们使用和消费，并能满足人们某种需求的任何东西，包括有形的物品、无形的服务、组织、观念或它们的组合。”
因此，我在展开设计规范构建的时候，将“企业级B端产品的设计规范“看做是一个产品，用产品思维去解决以上的问题，用产品设计的方法去逐步建立设计规范。
用产品思维从0-1构建B端设计规范，分为以下几步骤：
当企业越来越大，产品越来越多，如何保证产品对内集成的高效性与展示的一致性，保证产品对外输出的一体性与品牌体验。
1、企业级设计规范的定制在一定程度上伴随着公司领导层在战略层面上已经达成共识，从上至下成为大家一致的目标。
2、产品界面上相同的元素和内容很多，可以被抽象，一旦统一，可以显著提升团队协同设计的效率与开发效率。
3、在产品研发流程中，保证产品经理与技术经理在输出的原型中都能遵循相同的设计规范，减少前端开发人员对界面的理解。
4、相同类型的设计稿在不同的前端人员中，开发实现度不一致，有了设计规范，就可以提高一致性。
1、目前大厂都在输出设计规范，设计规范提升了产研团队的协作效率，保障了产品的用户体验。
2、2019年，Sparkbox在对设计系统调查后汇总分析，结果显示：设计规范非常重要，它可以保证代码重用性提高、UX/UI一致性、维持品牌标准等。
我们可以发现 ，企业级B端设计规范的构建 ，是内外因素共同作用的结果。
既然要建立设计规范是大家一致认同的，那么行动起来吧，看看产品的实际用户到底关注哪些关键点。
设计规范不是设计师凭空想出来的，想象出来的规范无法在实际产品中落地，而不会落地的设计规范，那真的不如不开始。
列出设计规范的目标用户（如果无法接触到客方用户，那么代理用户也是好的），能让我们收集上来的需求更精准，后续更好的进行需求分析。
a、产品设计者：产品设计者的原型有时由于项目时间紧的原因，并没有时间交接到设计师处进行润色，就得进入开发。因此他们希望企业内部能输出一致的设计规范，对他们进行培训和辅导后，使得他们能快速输出可以被投入于开发的原型。
并且他们可以接触到一线用户，知道用户的一些使用习惯，产品设计者可以补充很多用户使用场景。
b、专业设计师：每个设计师都有自己的设计经验和设计方法，设计师们认为，没有统一的设计规范，会导致大家重复设计类似的功能或界面。
c、产品开发者：同样的组件和同样的页面，不同的开发者重复开发，效率很低，并且由于开发者本身技术能力的原因，同一个页面不同的开发者开发出来的效果都是不同的。因此，运用普适性的设计资产落地代码，可以提升产品研发效率和保证相同页面的实现一致性。
2、设计的问题可以引导用户描述问题的本质，而不是泛泛而谈。关注用户过去的行为和直接性体验，验证痛点是否存在。
3、内容可以区块化，使得被访谈者对方谈内容认知清晰。
提纲设计好，约上访谈人员到一个轻松的环境，就可以开始一对一访谈了。面对面访谈要注意以下几个技巧：
1、访谈前消除被访谈者的紧张情绪，找个访谈者熟悉的环境是最好的。
2、访谈前友好地邀请用户 ，比如“非常感谢能邀请你来帮助我们共同改善产品”。
3、访谈时候循序渐进，让用户充分表达他们的想法，从简单到复杂、从整体到细节。
当时，我们直接约在了设计师、产品经理、开发者的办公座位上，打开他们的产品，就愉快地进入访谈了。
我们首先询问他们对设计规范的了解程度，然后将设计规范的作用讲解给他们听，接着让他们聊聊对设计规范的兴趣点，最后进入组件（细节）的访谈环节，真正调研组件在他们产品中的使用程度和情况。
比如，如果他们提到某个组件不好用，是直接二次开发封装过的，那么我们就要记录下来，看看其他部门的产品是否也有类似的情况，这就是设计规范后续要去关注的点。
再比如，大家都想要某种控件，但当前是各自开发的，那么设计规范也要关注，看是否可纳入设计规范中。
用户调研的方式还有很多，此处不一一展开。你要认为某种调研方式对你建立设计规范有帮助，那么尽管去使用吧。
竞品分析是我们在设计一个产品前，必须要经历的过程。俗话说“知彼知己，百战不殆；不知彼而知己，一败一负；不知彼不知己，每战必殆。”
那竞品分析要怎么做呢？我在这里不具体详述竞品分析要用到的一些方法论（商业画布、PEST分析等等），而是说说在设计规范上，我是如何做竞品分析的。
主要步骤为（我抛个思路，你可以根据实际情况拓展）：
在设计规范界，目前有以下几个大厂在做：蚂蚁金服、饿了么、视图更新科技、用友网络。（新出来的一些设计规范，如字节的、腾讯的，我没放进去，这里仅做参考）
而蚂蚁金服的Ant Design，很棒。经蚂蚁金服体验技术部过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。
“饿了么的Element”在使用者数量上来说也是很多的，并且组件库功能也较为丰富，也有一定的生态体系，因此Element也被纳入我们的竞品分析范围。
iView2019年10月起正式更名为View UI，它经过4年左右的沉淀，也积累了大量的用户，同时拥有自己的生态：组件库、Admin Pro、View UI Pro等。
综上，竞品分析对象就确定了：Ant Design、Element和View UI。
我们根据设计规范本身的初衷和功能范围，去划定需要分析的竞品的范围。
在设计规范中，第一期我们希望能包含基础组件库、页面模板、设计理论体系、全局视觉、框架，而最重要的是基础组件库、设计价值观、生态体系，这三者奠定了设计规范成长的基础。
那么现在我们就来看看Ant Design、Element、View UI在基础组件库、生态体系、设计价值观上各自的情况吧。（这是当时的分析结果，应该和现在有所不同了，细节没做更新，框架思路可以复用）
Ant Design将基础组件库分为7类，共61个组件。Element为6类，共56个组件。View UI分为7类，共57个组件。它们的分类方式有所差异，同时，具体组件形态既有相同之处，也有差异点，这跟它们本身服务的中后台业务有关系，也和设计者的思维方式密不可分。
我将三者的分类差异和共有、非共有的组件都取出来了，如下三幅图展示：
Ant Design是这么描述设计价值观的作用的：“设计价值观为设计者提供评价设计好坏的内在标准，启示并激发了设计原则和设计模式，进而为具体设计问题提供向导和一般解决方案。”作为Ant Design指导性的设计价值观，帮助了Ant Design建立了横向和纵向的拓展性。
Element和View UI没有设计价值观一说，都只有设计原则，但是他们的设计原则不太一样。Element为：一致性、反馈、效率、可控。View UI为：对比、重复、对齐、亲密性。
Ant Design的生态体系包括：组件库、图表库、页面模板、Kitchen、海兔、图表库、设计理论体系等。
View UI的生态体系包括了：基础组件库、业务组件库、页面模板。
可见生态体系最全的是Ant Design，其生态体系中的每位成员都在为更好的服务中后台产品而贡献自己的力量。
由此可见，Ant Design在设计规范的制定上是进行了系统化的思考和探索的，如果我们要制定企业级的设计规范，可以借鉴和研究Ant Design的思路。
产品路线图是团队行动指南，是产品可预见的未来方向，通常产品负责人综合各方意见进行规划。同时，我们要意识到，在用户需求不明确、团队成员意见不一致的时候，越需要制定路线图，来保证团队的凝聚力。
我们需要根据自己企业的实际情况，制定符合公司设计规范的一期产品规划路线：
以下方式可以参考，实际情况将会复杂的多，我在共读营结营的直播上，会进行分享：
同时，我们可以将路线图上的内容进行了进一步拆解，包括：类目下的具体内容、实现目标及想要获得的收益、优先级、计划完成时间。
产品路线图中，计划了在一段时期内要做的东西，和需要达到的目标，那是不是马上就开干了呢，我认为不是的。
我们需要设计整个产品的信息架构。信息架构是对信息进行构建、组织以及归类的设计，是一个产品的骨架，它决定了一个产品的走向和内涵，是用户对一个产品最初的印象。
一个好的信息架构，是产品成功的开始，可以让用户很快的上手使用。为了让大家直观的感受什么是信息架构，我拿APP举例，APP的底部标签栏就是对整个APP的信息架构。
那我们对“设计规范的信息架构”设计，就要让用户快速知道我们的设计规范要表达什么，包含哪些大模块，他们如何从这些模块里找到自己要的东西，同时知道如何使用。
顺着这个思路走，我们将设计规范分为大信息架构和小信息架构两部分。大信息架构是全局性的，小信息架构是模块下的信息组织（举例：页面模板）。大致如下图展示：
当我们进入设计交互方案的阶段，也就是进入产品的详细设计阶段了。
对于设计规范来说，需要设计的内容实在太多了，每一项都马虎不得：每个组件的交互、布局的交互等。我在这里就不详细展开去说了，在这里和大家分享下一些交互设计原则，帮助我们更好的进行设计规范设计：
2、尼尔森十大可用性原则 ：状态可见原则、环境贴切原则、用户可控原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫原则、容错原则和人性化帮助原则。
视觉设计常常让我们觉得无法用理性去衡量，视觉是显性的，与大家的审美有很大的关系。特别是服务企业级B端产品的设计规范，我们该如何去定制他的视觉模式呢？
经过分析后发现，B端系统的视觉设计，不是为好不好看服务的，而是为了让用户在长时间使用后不产生视觉疲劳，提升用户的工作效率服务的。
找到视觉设计服务的对象和源头后，确定主色调、功能色、中性色等相关色调，让页面操作元素的视觉符合W3C的无障碍设计原则。
W3C的无障碍设计原则是：文本和背景的对比足够，为视力障碍者提供足够的对比度。
1、（3：1）在WCAG2.0 1.4.3（AA级）下，大型文本（18pt或14pt粗体或更大）的最小对比度。
2、（4.5：1）在WCAG2.0 1.4.3（AA级）下，常规尺寸文本的最小对比度。
3、（7：1）在WCAG2.0 1.4.6（AAA级）下，常规尺寸文本的增强对比度。
由此可见，视觉设计方案需要追溯源头，找出视觉设计服务的对象，从而给出视觉设计方案。而不是什么配色好看，设计成什么样子。
1、要建立规范：需“了解背景、进行用户调研、进行竞品分析”。
2、要落地到产品：需“进行用户调研、设计规范投入开发”。
3、解决设计规范与用户需求的矛盾：需“进行用户调研、进行竞品分析”。
4、设计规范迭代：需“进行用户调研、进行竞品分析、研究设计趋势”。
所以，企业级B端设计体系的建立，我们可以从产品设计的角度出发，将产品思维用于设计规范，剖析需求、快速迭代、建立生态。
我的新书《B端体验设计：企业级视角的系统化方法》中，对如何系统化构建B端产品体验设计能力做了全面地讲解，读后你会发现“用对思路和方法，设计B端产品用户体验不再难！”
具体福利见下图 
|
《B端体验设计》共读排期表
|
|
时间
|
分享内容
|
进度 |
|
10月8日
|
开营
|
已完成 |
|
10月9日
|
第一章·他们眼中的 B 端体验设计
|
已完成 |
|
10月11日
|
第一章·我眼中的 B 端体验设计
|
已完成 |
|
10月13日
|
第一章·多样化的 B 端体验设计现状
|
已完成 |
|
10月16日
|
第一章·企业级 B 端体验设计之旅从这里开始
|
|
|
10月18日
|
第二章·重新思考为组织与用户构建模型
|
|
|
10月20日
|
第二章·框架模型——厘清底层逻辑
|
|
|
10月23日
|
第二章·原型模型——绘制可视化界面
|
|
|
10月25日
|
第二章·视觉模型——制定产品设计风格
|
|
|
10月27日
|
第二章·支撑模型构建与迭代的五大要素
|
|
|
10月30日
|
第三章·企业级 B 端设计体系概述
|
|
|
11月1日
|
第三章·精神思想，让设计体系具有生命力
|
|
|
11月3日
|
第三章·基础资产，为数字界面打基础
|
|
|
11月6日
|
第三章·高阶资产，让数字界面更专业
|
|
|
11月8日
|
第三章·设计细节，让团队协作更顺畅
|
|
|
11月10日
|
第三章·构建设计体系需要关注的四大要素
|
|
|
11月13日
|
第四章·设计模式，沉淀可复用的最佳实践
|
|
|
11月15日
|
第四章·交互范例，给用户一致的操作体验
|
|
|
11月17日
|
第四章·体验度量，从感性到理性的跃迁
|
|
|
11月20日
|
第四章·工具构建，提质升效的有力武器
|
|
|
11月22日
|
第四章·知识布道，协同共建可持续发展的设计体系
|
|
|
11月24日
|
第五章·为什么要组建企业级 B 端体验设计团队
|
|
|
11月27日
|
第五章·组建企业级 B 端体验设计团队的前期思考
|
|
|
11月29日
|
第五章·建立团队内外的高效协作模式
|
|
|
12月1日
|
第五章·团队运作企业级 B 端设计体系
|
|
|
12月4日
|
第六章·宏观:全局视角
|
|
|
12月6日
|
第六章·中观:迁移性视角
|
|
|
12月8日
|
第六章·微观:具体视角
|
|
|
12月11日
|
结营
|
|
这里有书籍限时5折优惠（限时59元，原价108元）。
本篇文章来源于微信公众号: 知果日记
