Design System 101｜构建「设计系统」前要了解的知识

SorcererDesign

北京/UX设计师/2年前/1639浏览

版权

SorcererDesign

设计系统不仅仅是设计师的可靠性准则，也是设计师与开发团队沟通的通用语言，同时设计系统应该随着业务成长而成长。

一旦我们摆脱了一遍又一遍构建相同事物的乏味，我们就可以将精力集中在更有价值的任务上，例如可访问性、性能和迭代。

—弥迦戈·博特

设计系统不仅仅是设计师的可靠性准则，也是设计师与开发团队沟通的通用语言，同时设计系统应该随着业务成长而成长。

>_01

写在前面

设计系统（Design System）已经成为公司和产品成功的重要组成部分，尤其是在当下竞争激烈的 ToB 软件市场中。一些顶级的 ToB 厂商已经通过整合自己独特的设计系统改变了他们设计数字产品的方式。通过一系列的可重复的组件和一套指导组件使用的标准，让这些公司中的每一个人都能够快速的跟进团队的步伐。

在过去的工作中，我参与过多次创建设计系统的工作，在这个过程中曾遇见很多问题，我从中吸取了教训，并与其他伙伴共解决我们遇到的一些问题。同时，我也花了很多时间学习、吸收和提炼我所获的知识，并对其进行简化和思考。在这里把这些经验和思考分享给大家，希望能够帮助到正在「创建设计系统」or对「创建设计系感兴趣」的小伙伴。

本文仅是对关于「创建设计系统」的一些基本条件的讨论。没有行话、没有具体操作、也没有一些所谓的标准。只是在实践过程中的一些思考、经验和技巧。

>_02

什么是设计系统

设计系统为数字产品带来了秩序和一致性。它们有助于保护品牌、提升用户体验，并提高我们设计和构建产品的速度和效率。它们是事实的来源，也是我们设计决策的记录系统。它让设计保持高标准，让团队保持一致，并帮助新的伙伴快速加入工作中去，更是设计师与开发人员沟通交流的通用语言。

那么设计系统的定义到底是什么呢？引用尼尔森诺曼集团（nngroup.com)给出的定义：设计系统是一套完整的标准，旨在使用可复用的组件和模式大规模的管理设计。

在这里设计系统，其实超越了设计师和开发工程师的职责和领域界限，可以说它是整个团队里的「通用语言」。

设计系统与产品&服务所要达到的理想和目标有着密切的联系。在这里我想强调，系统的设计、构建和规则不是一成不变的，它们是一项持续进行的工作，可以通过迭代来改进、适应和扩展，为产品&服务的变动和增长来提供可持续的支撑。

为什么设计系统很重要？

设计系统集中了团队成功设计开发产品所需要的所有元素，可以帮助我们构建统一的沟通语言，快速实现产品&服务的开发，以下6点是在创建设计系统过程中总结和发现设计系可以帮助我们达成目标的一些关键要素。

1、提升效率和速度
设计系统能够让我们更快更高效地工作。它简化了设计和开发的流程，减少了设计构建和交付所需要的时间。同时团队还能够以高保真原型来快速进行原型设计和测试，最终节省业务的时间和金钱。

2、保证产品&服务体验的一致性

设计系统帮助我们设计和构建品牌化的高品质数字产品&服务。团队能够遵循设计指南并保持一致，而不是使用风格各异设计方法。这可以确保界面更具可预测性和可访问性，从而促进用户对产品&服务的信任，并有效地帮助业务转化和留存。

3、构建产品的品牌化体系

设计系统帮助设计师和开发工程师，花更少的时间去创建相同的东西，从而将更多的时间集中在用户研究、问题解决和构建高品质的产品&服务上。

4、让设计师聚焦问题的解决

设计系统使我们的团队协作更加便捷。从主库中的通用设计元素，到对代码中的结构和命名约定使用统一的方案，再到代码的维护、迭代和同步，让设计师和开发工程师在一个生态中自由地沟通和交流。

5、让交付更加轻松

设计系统通过在设计和代码中建立命名约定和一致的术语，帮助我们的团队更加清晰高效的沟通。

6、统一的沟通语言

我们经常将设计系统与组件库混淆。它们之间差异是微妙的，很难在这两者之间划清界线，没有对错之分。

设计系统本身就是一个产品

我们经常将设计系统与组件库混淆。它们之间差异是微妙的，很难在这两者之间划清界线，没有对错之分。

设计系统本质上是产品或服务的基础构件，而非某个产品或服务的附属品，虽然设计系统中的很多模式来源于产品或服务。设计系统本身就是一个产品，作为一个产品，它应该被界定为这样的范围，受到监管，给予适当的条件来发展、成长并随着时间的推移跟踪其性能。

设计系统是一种为我们正在构建的产品提供支持的产品，它通过加快团队的生产速度、改善客户和用户体验以及产品的效率来影响它。

>_03

设计系统是一种语言

在设计系统中，需要以团队中每个人都能理解的形式将高纬度的概念落实到具体的界面和表达式中。

语言是我们文化的最终媒介。语言帮助我们交流、记忆、学习和进化。语言定义了我们。

自文明诞生以来，语言就与创造联系在一起。故事的创造、进步、变化，以及一些宗教所相信的宇宙本身的创造。语言的这种创造性本质自然地延伸到现代，并允许我们通过一种新的语言形式——编程语言来创造新的数字世界和新的数字经济。

我们知道，通过在实时设计系统中反映软件开发的动态特性（及其所有构建块、元素、规则、约定和决策），我们可以克服扩展软件开发的挑战。设计系统统一了团队的沟通，消除了误解，并在不损害一致性的情况下增强了创造力。

设计系统为团队提供了一个沟通的桥梁。它成为在特定语境下我们所说所说的语言。

在过去的实践中，我们认为设计系统是一种动态的语言，它在业务增长和迭代中不断发展成长。

「自然语言」和「设计系统」之间的区别是后者变化更快。软件每天都在变化和成长。设计系统需要反映这种动态以保持「可用性」（而不是变成僵尸）。在「自然语言」中需要几十年或几个世纪才能完成的事情，在软件中可能只需要几个小时。

为了应对这一挑战，设计系统不仅要编纂语言规则，还要反映当前用户体验的真实情况。

设计系统是一个动态词典，它描述了语言不断变化的当前状态，规定了它的正确用法，并邀请该语言的所有用户来扩展它。

设计系统是活的，就像任何语言一样，它可以分为逻辑部分、语言部分：将设计系统视为一种语言，去表明设计、代码和文档，不仅可以用于企业内部的沟通，也可以用来与用户交流。这三者虽然由不同的人管理，但却反映了相同的想法。

由于它们都服务于相同的目的，我们可以认为它们在功能上是相同的。

如果你在产品中放置一个按钮，它由设计、代码和实现规则来表示。这三个最终构成了与用户交互的最终按钮。

产品开发过程中将这三者联系得越紧密，我们的语言就会变得越强大——因此，过程也会变得越快。代码和设计描述的是同一个事物，就像口语和书面文字描述的是同一个概念。

制定统一且可操作的语言是设计系统的最终任务。一旦我们到达那里，软件开发将变得无比简单。

设计系统会是完美的存在的吗？当然不是。但是我们对设计系统的了解告诉我们，我们一旦构建了「设计系统」这个「共享语言」，软件开发就会更快，用户体验也会更加一致。

>_04

设计系统解决的问题

我们在网络上看到过无数将设计系统奉为明灯的文章，文中把设计系统描绘的甚是简单且收益巨大，但是现实并非如此：

-设计系统的构建非常耗时

-设计系统会占用大量的开发资源

-设计系统很难维护

-设计师会将设计系统视为创造力的威胁-

-设计系统需要大量的利益相关者支持才能成功

既然，如此那为什么还要构建设计系统呢？

对于企业来说「设计系统」被视为「企业资产」，它不会因为团队/员工的离开而消失，只要维护得当它可以一直延续下去且对公司产品/服务的可持续发展有着巨大的影响。

对于企业内部的软件开发团队，我们通过实践和访问，总结了设计系统解决的问题主要有3个：

1、效率

2、一致

3、沟通

效率

设计系统通过分解设计和代码组件以提高工作效率，在过去的多年已经被证实。而且它不仅解决了传统开发流程中经常出现的效率低下问题，并通过设计的抽象部分保持「跨领域的一致性」。

一致

对外设计系统本质上是公司品牌化战略的延续，它可以保证公司品牌和服务的体验一致，并将公司品牌的“相似性”传达给用户。

对内由于通过设计系统可靠且单一的信息源的集中管理，更易于实现一致的交互界面。

沟通

设计系统是提高团队沟通质量的语言，不仅可以优化业务，还可以将创建时间用于更高层次的讨论和扩展服务。

>_05

我们何时需要设计系统

设计系统总是有用的，但是由于业务、产品和项目的性质不同，导致设计系统的「需求」具有很大的差异。

对于设计机构、小公司和自由职业者来说，在没有设计系统的情况下进行设计和构建，然后交付，这是一种相当普遍的经历。这种方式比较适合产品的前期和验证间断，通常产品只构建一次，最终的产品可能只上线几年，然后在需要更改时被替换掉。这个过程本身并没有错。它经济高效、简单且快速的特点。

当公司的目标是随着时间的推移不断迭代和扩展产品时，设计系统会变得非常有用。因为这不再是单次构建，而是系统的、可持续的构建。

软件通常是由团队构建的。随着越来越多的人加入其中，创造一致体验的挑战呈指数级增长。此外，随着时间的推移，不同的团队成员都会贡献新的解决方案和风格从而导致体验分化。

对于初创公司来说，设计系统可能是一个低优先级，因为初创团队更加倾向于对产品&服务方向的发展和快速变化。这个阶段它们很少具备成熟公司所拥有的稳定性、安全性、预算和时间。但这并不是说初创公司不应该系统的设计，而是活下去可能是他们所需要面对的现实。

虽然推荐从一开始就创建一个设计系统，这样就可以避免以后的遗留问题。但是这对很多中小企业/团队并不现实。

在这里推荐大家引入 Paavan（https://designsystemcanvas.com）的设计系统画布，来帮助大家来应对不同阶段的设计系统构建。

>_06

设计系统实践要素

有效的设计系统会成为产品设计师和工程师之间的共享语言，在设计系统实践中，我们该如何保证设计系统的有效性，在这里引用了Nielsen Norman Group - Design System 101 中对 Elements of Desiagn System 的概述。

设计系统有两个重要部分：

-设计系统库

-管理它的人

设计系统库

设计系统库是由「有形要素」和「无形要素」组成的。「有形要素」例如设计标准和原则，它们是对服务、项目等的“好设计”的明确陈述，可以有效的帮助你遵循这些标准的「样式指南」和「组件库」；「无形要素」则是指公司和产品的「服务愿景」和「品牌资产」。

但是，并没有明确地规定说设计系统一定是由这些要素组成的，一个适合的设计系统，一定是会因组织、系统、项目和服务的不同而不同。

设计库可以采用多种形式，但它们通常包含风格指南、组件库和模式库。

风格指南

风格指南包含用户创建界面或其他设计可交付成果的特定实施指南、视觉参考和设计原则。最常见的风格指南往往侧重于品牌（颜色、排版、Logo和印刷媒体），但风格指南也提供内容（例如，文案和文案建议）以及视觉和交互设计方面的指导标准。这些指南有时候也会被纳入组件库，提供相关的上下文指导。

组件库

组件库是与设计实施强相关的部分，组件库应该包含预先确定的、可重复使用的 UI 元素，并为设计和开发人员提供一站式的服务。创建这些库需要大量的时间和资源。除了组件的可视化展示，还包括：

-组件名称：特定且唯一的UI组件名称，避免设计人员和开发人员之间的误解

-描述：清晰地解释这个元素是什么以及它通常如何使用

-属性：可以根据特定需求定制或调整组件的变量

-状态：推荐的默认值和后续随操作而改变的外观

-代码片段：元素的实际代码摘录

-框架：用于实现前端和后端的框架，以避免不必要的调试

模式库

在某些的设计系统中“组件库”和“模式库”被作为同义词使用，但是这两种类型的库之间存在明显的区别。组件库指单独的 UI 元素，而模式库以 UI 元素的分组或布局集合为特色。与组件库相比，模式库通常被认为不够健壮，但它可以根据需要提供更全面&高级的功能。它通常具地内容结构、布局和模板。与组件非常相似，但是模式旨在被重用和调整。

设计系统团队

设计系统的有效性取决于管理它的团队。无论你的设计系统当前处于什么阶段，它都需要持续维护和监督，以确保它们的可持续发展。

设计系统团队的规模，会根据实际项目的状态而有所不同，但至少这个团队应该包含 1 名交互设计师、1 名视觉设计师和 1名开发人员，团队人员的主要任务旨在编写交互设计指南、创建可视化示例、为每个元素提供代码片段和实现规范。理想情况下，团队还应该包含用户研究员、系统架构师和文案撰写人员。

最后，也是最重要确保一名来自领导层的执行发起人来协调设计系统工作。

>_07

推荐一些很棒的设计系统

1、Google Material Design

https://m3.material.io/