一：什么是设计系统
设计系统是产品开发的系统方法 - 完整的指南，原则，组件库，代码。它是规范多方跨学科合作的一个极好的工具。正如 Eight Shapes 的 Nathan Curtis 所说，“设计系统不是一个项目，它是一个服务产品的产品”。
二：为什么要搭建设计系统
构建一致的用户体验
越来越多的设计师们开始专注于构建一致统一的用户体验，希望将公司旗下各类产品或产品UI部件更加紧密且顺畅的融合在一起。
加强企业内部沟通效率
当企业内部业务量增加，人员不断扩充，沟通将是一个非常大的成本，跨部门沟通更是个老大难问题。沟通不到位，项目中后期将耗费无数的资源来弥补，甚至是复盘。
建立设计和交付标准
对于一个市场明确，且拥有较多项目经验的中大型软件公司。大型产品较多，且产品的数量会不定期增长。在大规模的协作和交接时，必须要有一个明确的标准。
总的来说 大规模协同工作，提高一致性和效率 是创建和使用设计系统的最大好处。设计系统使产品团队跨部门协作更灵活，避免重复工作，让大家更多地关注用户体验问题而不是大量基础视觉问题。
三：如何快速搭建一个设计系统
设计系统搭建的基本原理
Brad Frost 于2014年提出了原子设计这一概念，提出“原子设计是一种基于网络设计系统思维方式的规范性原则”的概念。它可以帮助设计师建立用户与产品元素互动的关系。基于原子设计根据设计系统来完成业务。这样做可以使得组件与业务同步更新并且多端响应。
或许是Brad Frost 的前端开发背景， React 的组件化思维给了他灵感。在Brad Frost 创建的设计系统理论方法——原子设计中将界面分为5个层次：Atoms/原子、Molecules/分子、Organisms/有机体、Templates/模板、Pages/页面。
原子设计概念的提出使得设计体系由设计规范演变成为了一种更为高效、科学的设计系统。当然这种高效，前端工程师的体验会更明显…当我们改变原子时，整个体系都会产生变化，同时我们也可以逐级调整，总之你的每次改变都会影响到这个系统，但是它又是保持一致性的。
完整的设计系统它应该包括以下5点：
1:设计原则：
原则是做设计体系的至高准则，它是根据此设计体系针对的业务、人群定位、工作环境、工作流程来制定的。它以同理心和逻辑性为基础，创造力和情感化为辅助。设计师可以把设计原则理解为一个社会的“法律”，所有的参与者必须遵守此原则。
2:设计语言：
数字产品的整体体验设计。该基础定义了布局、排版、颜色、图标、间距、空间、形状、删格、动效和信息架构等。这些均来源于设计师或者产品团队前期的规划和平时的经验积累，加以方法论的研究和使用，最终能确保产品的一致性。
3:设计工具包：
产品团队可以使用的共享样式，符号或组件库，库中的组件会不定期的保持多向同步。
4:说明文档：
将产品、设计、前端捆绑在一起，它将提供有关如何使用设计系统，设计和开发注意事项以及每个组件的详细文档和使用指南。
5:持续发展：
所有的东西都不是一尘不变的，科技和企业的发展同样会对现有的产品发起更多的挑战，我们需要做的只是：发现问题、发散思维、聚焦方案、得到最适合的方案、验证并循环。
组件的归纳和设计方法
每个产品或者说每一类产品我们都能看到形形色色的元件和组件，而我们要做的就是抽取这些产品中相似功能的组件归纳为一个，并通过带入不同业务场景验证他的可行性和通用性，最终才把敲定的组件沉淀到自己的设计体系中。
设计过程中产品和前端分别对于组件的使用场景和实现难度作出评估，最终在三方的监督中所产出的组件才是最适合的。（这将是一个非常反复的过程，如果对业务不够熟悉，设计师将会面对来自多方的挑战。因为我们考虑的是多个问题一个解决方案。）
所以到最后我们得到的一般都是通用性高，技术实现难度不会特别强的组件。
搭建设计系统的步骤可以归纳为：
了解基本原理-制定基本原则-定义设计调性-搭建设计基础-归纳组件种类-设计组件归纳用法-形成设计和前端组件库-项目验证和持续迭代。它不是一个项目，而是以满足实际业务为基础，不断更新迭代的一套多方协作规则的凝聚体，“是一个服务产品的产品”。
四：怎样确保设计系统的一致性
这将是整个设计体系中最基础也是最重要的一块。那么一致性我们将分为两大块来阐述，首先是对于产品使用方，它可以分为：实现模型和心理模型的一致性、界面和流程的一致性、视觉一致性；
其次是对于公司内部，它可以分为：产品的认知一致性、使用方法一致性、样式和组件命名一致性。
1：心理模型和实现模型的一致性
用户的心理模型是用户内心真正的需求，然而调研并不能给出完美的心理模型答案。一旦心理模型和实现模型相差较大，会让使用者内心产生强烈的反感或挫败感，最终有可能发生弃用的情况（2B用户为了达成工作目标也许会一边骂一边学习，但2C用户不会，这是由行为动机和可选择竞品种类决定的）。所以，产品和设计除了需要调研，更重要的是挖掘用户真正的需求，并寻找最佳的解决方案。尽量使“实现模型=心理模型”。
2:界面和流程的一致性：
此处比较好理解，界面主要的一致因素有以下几点：
交互上：布局、发散和聚焦的方式、同类问题解决方案流程的一致性；视觉上：视觉风格、效果、感染力和品牌的一致性。而这两点是整个设计体系的基础，是整个产品的基因。
流程的一致性主要体现在操作流中，我们需要给用户提供基本统一的操作流程。这个流程需要我们的经验和搞清楚用户的心理模型才能做的有逻辑可言。所以同类的功能和业务场景我们如果用不同的方案，会让用户的学习成本变高，并且无法满足用户的心理模型，我们当然不能允许这种情况发生。
3:视觉的一致性：
这边我们会再次强调视觉的一致性，此处的一致性把它单独拿出来说。品牌是一个庞然大物，我们此处所说的品牌只是整个公司的产品视觉基调，主观上的视觉感受。其中包括了：空间、颜色、层级、字体、形状和运动规律等基本原子属性。我们通过搭建基础来使整个视觉风格和感受达到高凝聚力的一致性。
4:认知的一致性：
我们需要与产品和开发团队在前期就达成认知的一致性，这个一致性的主要在于整个产品的设计原则。首先我们要明白，这个体系的真正的作用。其次在制作过程中我们需要用设计原则来框定整个制作流程，而设计原则是我们在遇到问题时可以依赖的法则。
5:用法的一致性：
设计体系的基础是组件，组件有本身的结构属性和它的使用场景，那我们需要做的就是通过多场景的复用验证和三方的交流来确保他在今后的业务中的使用方法是一致的。这样就可以尽可能的避免一个问题多种解决方案。最后这些用法和使用场景将沉淀成为设计系统中组件的使用指引，供大家学习和深入研究。
6:命名的一致性：
命名的一致性可以让夸团队的沟通更便捷，我们需要命名的除了组件以外还有最基本的样式。我们通常会推荐使用“BEM命名规范”（Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。）
多维度的一致性对于设计系统非常重要，它能保证一致的设计产出、高效的夸团队沟通和确保项目在快速落地的同时还能有自身的高质量的交付标准。以上这六点是我在做设计系统过程中总结的基准线。需要完全做到这六点难度很大，但是能确保其中 2345 这四点做到位，相信会是一个非常高品质的设计系统。
网友评论