最近几年在体验设计领域，发现很多 HC 指向 B 端体验设计师，我也误打误撞进入 B 端相关项目组。由于自己开始做 B 端的项目，慢慢接触到 Design System，随着自己在这个领域的学习深入，对 Design System 也有了一些浅薄见解，本文就写一下自己对 Design System 解读。

    说起来 Design System ，那么首先要解释一下什么是 Design System。
    引用 Medium 一位博主的话：“A Design System isn’t a Project. It’s a Product, Serving Products. ”设计体系不仅仅是一个项目，它是一个服务于产品的产品。既然说 Design System 是产品，那么就有迭代更新。就像 CRM 系统霸主 Salesfore 的 Lightning Design 、SAP 的 Fiori、蚂蚁的 AntD 也一直在迭代更新。

    为什么 design system 突然被重视起来了？
    由于数据的保密、业务的复杂性，特斯拉之前不再购买 salesforce 的服务，而是开始自研中后台工具。但是中后台产品工具的复杂特性，用户体验没有跟上产品更新迭代，用户学习、使用成本大大增加。但是，企业自研工具最终目的就是为了解决效率问题、员工价值最大化以及节约成本，所以慢慢开始有专业的设计团队关注 B 端体验问题，体验问题就是设计体系解决的问题之一。
    一个好的企业软件持续成长离不开一套完备的设计体系支撑，但是这个体系也不仅仅是我们日常简单的一套 UI 组件、颜色、字体规范等等，一套体验良好、有效的设计体系是需要基于一个明确、强大的设计理念来提供设计约束和设计扩展，下面结合 Lightning Design、Fiori、Material Design拆解一下设计体系。
    image.png
    这是 SAP 的设计体系构成，主要是由价值观、设计原则、设计实践、设计语言构成。

    然后再看 salesfore 的设计系统，主要有组件蓝图、令牌(token)、设计指南、工具等构成。
    image.png

    经过对 SAP、Salesfore、Adobe、Atlassian 等这些设计体系文档的阅读，根据我以往的认知，我把设计体系总结为下图内容。
    image.png
    设计体系主要分为以下几个模块，设计语言、设计指南、工具、开发库、其他等，现在逐个拆解一下。

    设计语言
    设计语言是“设计”和“语言”这两个词组成，那么什么是语言呢？

    维基百科中对“语言”一词的定义：当今“语言”一词是英语“language”的翻译，有时“语言”也指代码、密码或者是其他人工创造的交流系统，如编程语言或者是人工语言。在这个意义上，形式语言和先天的人类语言不同，它是一个用于编码和解码信息的记号系统。
    看到这里，不难发现，设计语言可表达为是一种“通过设想和计划创造的交流系统”。再进一步可以概括为“设计师创造的交流系统”，向用户讲述“我是谁”的故事。

    image.png例如：劳斯莱斯想必大家都见过，就算劳斯莱斯的天使 Logo 隐藏起来，大家也能知道这就是劳斯莱斯；用过 ThinkPad 电脑的同学应该都知道，每台 ThinkPad 电脑键盘中间有个小红点按钮，特别好用，这个小红点就是 ThinkPad 的设计语言。

    在设计体系中，把组件比作名词、动词，设计原则比作形容词，组合起来形成的“句子”就是设计模式。设计组件、设计原则、设计模式组合起来也就是设计语言。
    如果将设计语言比作世界观，说明构建设计语言具有很大的难度，所以一套新的设计语言创建是很有难度的一件事情，它需要体现出设计理念，覆盖绝大多数使用设计场景，更要经得起设计、产品、开发的挑战。
    了解设计语言后，我们再拆解一下设计语言的构成：设计模式、设计原则和组件。

    设计原则
    首先呢，设计原则不仅仅指产品的视觉方面，设计原则是帮助团队通过设计达到“产品目的”的指导性语句。设计原则将帮助团队做出有意义的设计决策。
    image.png
    以 Medium 为例。他们的设计原则之一是“方向优于选择”。由于这一原则，他们选择了一个更简单的文本编辑器，而不是设计一个有着无限选择颜色和字体的普通文本编辑器。这使得作者可以专注于文章的内容，而不是视觉效果。

    设计原则应该就如何帮产品解决设计问题提供实用的指导。就像Dan Mall在Researching Design Systems一文中讲的：“好的设计原则不会试图涵盖一切。它们有态度，并积极地鼓励设计师拥有自己的观点。”

    设计原则指的是包含团队如何理解好设计之精髓，以及如何体现这一精髓之建议的共享指南。换句话说，就是让你的机构或你的产品，对于什么是好的设计，有一致的标准。

    Salesforce 公司的 Lightning 设计体系的原则是“清晰、高效、一致、美观”。该体系强调，这些原则的优先级必须遵从以上顺序。“美观”不应该高于“高效”和“一致”，而“清晰”应该始终放在第一位。按照这种方式对原则进行排序，可以让团队在做设计决策时明确哪些东西应该优先考虑。
    image.png

    这里的“清晰”、“高效”等这些原则关键词，相信大家也经常使用，但是作为一个合格的原则关键词，我们必须了解如何讲这个宏观的词语概念，物化、落地到具体的设计页面中。拿 TED 举例，TED 的设计原则是清晰比美观更重要。试图将每个演讲都提炼成一个短句可能很难，所以有时候标题可能很长。对标题进行…显示是很容易的，但对他们来说，演讲信息的优先级是最高的。因此，他们没有选择相对容易的标题没有显示完整的方案，而是确保他们的设计模式可以容纳长的标题。
    image.png

    设计模式 & 组件库

    组件库
    在最早的网页时代，有一个 web 基础元素的概念，文字、按钮、线框、input、tag、下拉框等这些网页中经常用到的元素就是组件。
    组件库是 design system 的基础，如果我们把 design system 比作一幢大楼，那么组件库就是这座大楼的砖、钢筋等。

    组件解决的是一个点的问题，例如一个按钮的设计，一个下拉框的设计，如果想要解决一件事，一组操作，这就需要设计模式的帮助。如果把组件比喻为大楼的砖、钢筋，那么设计模式就是大楼中的一间房子。

    设计模式

    “每种模式都描述了一个在我们的环境中反复出现的问题，以及该问题的解决方案的核心思想。”——-克里斯托弗·亚历山大《建筑模式语言》。
    设计模式的概念最早来源于建筑设计中，城市布局、公路系统，房间内的布局、家具的摆放等都是建筑中的设计模式。

    后来，设计模式被引入到体验设计中，设计模式是重复出现的设计元素的集合，它定义了这些元素的行为方式、外观以及代码构成；设计模式是一种用于解决特定设计问题可复现、可复用的解决方案。

    从设计的角度来看设计模式，我们可以把设计模式分为两种。

    第一种是通用性操作
    比如系统通知、系统确认、CTA按钮这种比较基础的系统性操作，这种设计模式不需要过多，毕竟我们很多都是遵循iOS、Material Design 的设计规范，用户对系统平台的原则已经很清楚。

    第二种是业务上的设计模式
    例如：筛选和排序的设计，这是一个偏业务属性的设计模式，不同的业务筛选排序会产生不同的设计方法，所以这个模式就是复杂的。

    设计指南 Guideline
    设计指南具有辅助团队同事正确的使用设计组件、设计模式的指导意义。我把设计指南比喻为英语词典，当我不知道这个单词的含义时候可以通过 Guideline 找到正确的含义和使用方法。
    例如 AntD 的 Guideline 描述了组件、模式库的定义、使用方法、正确和错误使用方法的指南，确保设计师能更有效的使用 guideline 辅助设计。

    最近我看到过一些设计体系只是基于组件库、设计模式等文档类型，严谨的说这些只是设计指南 Guideline，只有将设计模式、组件库等落地到开发工程环境中才能称之为设计体系 design system。例如：AntD、Lightning Design、IBM 的 Carbon 等等。随着设计的更新迭代，工程师在开发环境中同步更新迭代，这样才能形成一个稳健、健康的设计体系。

    总结
    设计体系是一个设计和开发工程的问题。既然叫体系，那么这不仅仅是一个设计的问题，而是一个系统的工程问题，是一个融合了设计和开发工程的整体解决方案，这就是说我们不能仅仅思考设计问题，还必须和开发同事一起开发探索的过程。在设计体系架构的过程中，我们必须考虑工程方案的实现逻辑，最终通过技术落地设计，通过设计区探索更佳解决方案。

    这里只是从宏观的简单简单解释了一下什么是 design system，未来我会慢慢探索，更加深入的了解、认识 design system，然后总结输出出来。

    这里要感谢一下负能量补给站、5key等各位前辈，如果全靠我自己去分析总结 design system ，我相信我是总结不出来的，我只是站在了各位前辈的肩膀上，不断的理解总结才输出此文。感谢。