5W2H 分析法详解设计规范（二）

How

讲了这么多，那具体如何制作一份内容明确、场景完备的设计规范呢？我觉得可以从内容和 workflow 两个方面来探讨下。

规范的内容

规范的内容可以着重从以下 3 个维度考虑：1.提炼设计原则 2. 构建组件系统（Design+Develop） 3.抽离公共场景。 除了以上这三个维度，设计规范还有行为手势、工具建设、资源库（sketch 组件库、Axure 元件库、图标库、图库、动效库、字体库……）等其他内容可根据团队需求决定是否添加。

1. 提炼设计原则

设计原则决定着一个产品的品牌基因，有了设计原则，设计师才能从中提炼出符合产品调性的设计元素，才能确定一个产品的视觉风格。设计原则体现着一个团队的设计价值观。深入人心的设计原则甚至可以在团队中生成内部凝聚力。

2. 构建组件系统（Design+Develop）

构成一套组件系统需要一份明确的组件规范文档以及与之相对应的一个前端样式库相结合。那如何体系化的构建设计与开发强关联的组件系统呢？我们是通过以下方式：首先定义基本的视觉元素，如文本、颜色、倒角、蒙层等，其中为文本及颜色定义统一的代号，便于工程师开发，这些基础元素是后续一切开发工作的基础。同时通过 sketch 插件建立统一的文本样式库，为设计师使用规范中定义好的文本样式减少阻力；其次，元素与元素的组合变为组件，如搜索框，是由倒角矩形、文本、搜索图标等基础元素组合而成；然后，让组件与组件结合，形成大颗粒组件，如各个组件拼合为一个完整楼层；最后大颗粒组件与大颗粒组件结合，形成完整的页面模板。严格按照此流程制作，整个组件系统便可实现从控制底层设计元素来控制整个网站页面。如下图：

元素： 文本，颜色，形状，图标等

组件： 元素+元素 如提示框，搜索框，导航条等

大颗粒组件： 组件+组件 如单个楼层，页脚，大型表单等

页面模板： 大颗粒+大颗粒 如：错误页面，固定楼层组合式页面等

3. 抽离公共场景

公共场景一般包括公共解决方案、公共交互、公共页面、公共流程。公共解决方案如文本超出显示区的统一解决方案、表格数据导出的统一解决方案。公共交互如点击数据表格中的操作按钮“详情”，统一右侧出现详情面板。公共页面如错误页面、未绑定邮箱页面等。公共流程如统一的购买流程、统一的产品上线流程。由于设计产品业务，此处就不一一详述了。

规范工作的 Workflow

好的 wokflow 其实就是在日常工作中不断优化迭代规范内容，打磨规范定义在实际需求中的可用性。

设计规范的 wokflow 我们分为三个闭环（如下图）：

闭环一：量化输出

通过现有设计，首次归纳整理形成规范 V1.0，后续设计师使用设计规范设计页面，研发根据设计稿使用前端样式库完成页面开发，页面上线，设计师再次使用规范设计页面……依次循环，完成第一个闭环。

闭环二：问题反馈机制

在设计师使用规范设计的过程中，发现规范的不合理处/未涉及场景等问题，通过 issue 给规范组提单，规范组将问题分发到责任人，责任人通过现状分析、友商/业界分析，制定修改方案，将新的规范定义合入规范。设计师在使用规范的过程中不断提出问题，规范组不断解决问题，便是规范本身的迭代及优化过程。这是第二个问题反馈及解决问题闭环。

闭环三：建立自创新渠道

规范需建立自己的创新渠道，否则长久维持现状意味着这份规范如同一潭死水，是没有活力也没有生命力的。在上述两个闭环进行标准化页面输出、内部不断提取公共属性的同时，规范整体也需要保持其灵活性，指定部分定制页面，这些定制页面在遵循基础规范的原则之上适当放宽约束使其保持创新，在定制页面不断发展过程中，规范组不断抽离出适合网站其他页面使用的公共属性合入规范。此为规范自身不断迭代创新的第三个闭环。

How Much

规范的度：标准化的设计规范是需要有约束力的，约束力不够，很多工作就无法量化输出，但过分强调标准化和约束力也会给团队造成阻力，抑制团队创造力，同时有作用力就会有反作用力，强制性的约束也会造成团队内的不满与分裂，所以规范在定义的时候需要权衡好尺度，在不断提取公共属性的同时保持其灵活性，留出自创新机制，自身不断迭代，使规范成为一份有生命的规范。

另外多去看看其他的优秀规范，研究优秀竞品是如何权衡，思路会开阔很多。

以下奉上我自己收集的一些对外开放的优秀设计规范链接（有些需翻墙）：

（注：请复制链接至浏览器窗口打开页面）

• Material Design : https://material.io/design/

• Human Interface Guidelines: https://developer.apple.com/design/

• IBM Design Language: https://www.ibm.com/design/language/

• Lightning Design System：https://www.lightningdesignsystem.com/

• Ant Design：https://ant.design/index-cn

• Clarity Design：https://design.teambition.com/

• （Microsoft）Fluent Design Guidelines：https://developer.microsoft.com/en-us/windows/apps/design

• （Firefox）Photon Design System：https://design.firefox.com/photon/welcome.html

• Atomic Design：http://atomicdesign.bradfrost.com/

• （Linux） GNOME HumanInterface Guidelines：https://developer.gnome.org/hig/stable/

• U.S,Web Design System：https://designsystem.digital.gov/

• Atlassian Design： https://atlassian.design/guidelines/product/overview

• Product Design Guide：https://productdesign.dnb.com/

• GitHub Primer : https://primer.style/

• 规范合集 1 Brand Style Guide Examples ：https://saijogeorge.com/brand-style-guide-examples/

• 规范合集 2 Website Style Guide Resources：http://styleguides.io/examples.html

• 规范合集 3 FINDGUIDELIN.ES : http://findguidelin.es/

• 规范合集 4 All The Style Guides : http://allthestyleguides.tumblr.com/

本文转载自 Think 体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/UIWWRyMOnX0Oj2zWUKLTkQ