近年来，“设计规范”逐渐被“设计体系”的概念重塑，与之俱来的新设计方法可以帮助产品设计团队更好的站在整体层面构建方案。

　　“设计规范”这一概念早已行之有年，它对于一个产品甚至一家公司的品牌识别效应的构筑起着重要的作用。如今，作为其升级版本，“设计体系”(Design System)又将这一概念提升到了新的高度。

　　过去，UI设计师们会创建一些结构松散的设计说明文档，其中包括配色、字体、按钮样式或是图标一类的风格定义。这些文档通常会被安静地保存在硬盘里，仅在新设计师加入团队或外部设计代理商需要了解相关规范时才会被想到。

　　在日常工作中，这些文档可能没有太多的实用价值，设计师们在很多时候仅会凭记忆来判断某些设计模式是否被使用过。长此以往，一致性方面的问题便会积累起来，最终导致难以收拾的状况也是十有八九。

　　近年来，“设计规范”逐渐被“设计体系”或“设计语言”(Design Language)的概念重塑，与之俱来的新设计方法可以帮助产品设计团队更好地站在整体层面构建方案。基于一套架构严谨、规则统一的体系框架，产品表现层面的设计工作可以逐渐实现模块化运作。诸如Brand.ai或是来自Invision的Craft等工具已经在一定程度上满足了标准化的、模块拖放式的设计需求，团队协作过程中的统一性得到提升，视觉设计工作变得更加高效，有时甚至可以跨过传统的低保真原型设计阶段。

　　本文旨在讨论设计体系的目标、价值及构成原理，而不会深入到具体的构建方法当中。

　　在过去的几年中，我参与了很多公司的设计体系项目，其中既有初创型团队，同时也包括了知名度和成熟度都相当高的组织。我最近的一个项目就是为Qstream打造设计体系。

　　我刚刚加入Qstream团队时就意识到尽快打造一套新型、实用的设计体系是非常必要的一件事。产品设计缺乏一致性，而问题还会随着功能复杂度的提升以及设计团队规模的扩大而愈演愈烈 – 通过详实、完备、易懂的设计体系对设计工作进行把控，从整体上稳定设计航向，这件事刻不容缓。

　　在这样的背景下，我们开始创建自己的设计体系，即QUIK – Qstream User Interface Kit。

　　第一步：解决不一致的问题

　　再次说明，本文不会就创建设计体系的具体方法进行深入探讨，不过我会对大致的流程进行简要说明。

　　我们做的第一件事就是对产品当中现有的界面组件进行彻底的清查。Brad Frost(“Atomic Design”一书作者)曾就如何进行UI清查写过一篇出色的指导文章“Interface Inventory”，建议阅读()。

　　这个环节会很艰难，你可能需要花费大量的时间，而且过程很枯燥，但却是值得和必要的。通过UI清查，你可以：

　　充分了解当前产品当中哪些地方存在不一致性的问题。

　　站在全局层面理解一些关键元素的使用方式。

　　快速掌握产品的信息架构与运作方式。

　　向团队集中展示现有问题，进而体现一套标准、统一的设计体系的必要性。

　　我们的平台UI清查文档，现有设计当中的不一致性问题一目了然。

　　第二步：创建元素

　　我们的设计体系由三个部分组成。

　　品牌：产品的品牌识别由一些关键的视觉要素构成，包括配色、字形、图标等等。

　　界面元素：包括那些最小颗粒度的、在全局范围内可复用的元素，例如按钮、文本输入框等等。

　　组件：组件由若干界面元素构成。多个组件协同配合，形成常见的设计模式，例如对话框、列表、卡片等等。

　　我们需要根据UI清查的结果对设计体系的组成元素进行优先级判定，看看哪些元素在产品全局范围内被使用的最为广泛，以此为序逐一梳理。

　　在着手处理诸如按钮、文本输入框等具体元素之前，我们会首先对风格与样式规则进行基础性的定义，包括配色、字形、图标、间距等等。

　　依照我们的执行顺序，设计体系的建设工作越深入，所涉及到的元素在产品当中的权重越低。不过无论怎样，它们都是体系的一部分;所有元素无一或缺才能确保设计语言的完整和一致。