设计系统（第一部分：基础）

什么是设计系统？

设计系统的好处

设计系统的缺点

谁在构建设计系统？

网络是由一系列相互连接的页面构建而成的，其发展源于历史上内容消费的方式：书籍。由于书籍的内容以一系列页面的形式呈现，网页自然而然地沿用了人们熟悉的范式。于是，网页诞生了。

其他技术术语源自纸质书籍：书签和分页就是两个例子。虽然传统的网页概念已经沿用了几十年，但我们很快意识到，这种模式已不再适用于构建可持续的 Web 应用程序。

许多公司正经历着范式转变，通过使用可复用组件来构建更加模块化的 Web 应用程序。虽然模块化 Web 应用程序具有更高的可扩展性和可测试性，但它们也带来了一些挑战。

只要组织内的所有团队都开发和使用同一个库，构建组件库就是一种好的做法；但不幸的是，情况往往并非如此。更有可能的是，你会看到多个团队在不同的地方构建同一个组件；这会导致应用程序不一致。

这正是设计系统大放异彩的地方。
设计系统允许整个组织内的团队定义自己的身份，并将其融入到可访问且一致的组件中。这些组件随后会被产品团队使用，并对产品的成功产生不可估量的影响。

让我们深入研究设计系统的一些基础知识，并了解您的团队如何采用它们来构建可访问、可扩展且一致的产品。

什么是设计系统？

设计系统是一套可重复使用的标准和组件，用于强化品牌形象。这些标准和组件使团队能够高效地构建兼顾可访问性、性能、一致性和品牌形象的用户界面。

虽然业界尚未正式定义设计系统，但一般来说，它由三个方面组成：设计语言、组件库和样式指南。稍后我们将深入探讨每个方面。

设计系统的好处

建立设计系统有很多好处。以下列举一些好处。

可访问性

设计系统将可访问性融入设计语言和组件库，最终确保每个客户都可以使用您的产品并获得相同的结果。

通过设计语言，我们可以确保调色板具有足够的对比度，字体大小清晰，内容易于理解。

这些设计语言模式是构建组件库的基础，确保我们充分利用语义化的 HTML 元素。当 HTML 不够用时，我们会引入 WAI-ARIA 来弥补不足。
无障碍访问不再是事后诸葛亮。

涓滴式更新

当设计模式更新时，开发人员无需费力地在多个地方更新组件。设计系统为组件和模式提供了单一可信来源。因此，样式只需在一个地方更新。只需快速更新库包版本，这些更改即可传播到产品。

响应能力

组件库是响应式构建的，它们可以适应不同的屏幕分辨率和视口。

一致性

可以说，设计系统最重要的好处之一就是一致性。随着产品团队数量的增加，UI 始终保持一致。

轻松入职

拥有设计系统，可以显著缩短新团队成员的入职时间，因为它为新成员提供了统一的学习信息来源。通过在一个易于查找的位置提供全面的文档，我们减少了新工作带来的压力。

此外，当使用一个组件库时，开发人员和设计人员可以轻松地跨团队协作。

提高开发速度

一旦组件库稳定发布，开发速度将大大提高。

开发人员将不再需要从头构建组件并确保其可访问性和响应能力。他们只需导入并利用这些组件即可。

设计系统的缺点

设计系统虽然有很多优点，但也存在一些缺点。以下是一些最常见的缺点。

时间消耗

设计系统并非一朝一夕就能建成的。通常需要数月甚至数年才能构建出一个稳定的版本。

此外，设计系统永远不会“完成”。在系统生命周期中，某些阶段的重点主要放在维护上，而不是积极开发上。虽然这些维护阶段占用的设计师和开发人员资源较少，但最终的现实是，设计系统是产品，而不是项目；它们必须得到培育才能生存。

大量的前期投入

一个系统要想成功，必须有设计师和开发人员的前期投入。缺乏专用资源往往会导致系统失败。

产品团队支持

产品团队是设计系统的主要利益相关者。没有他们的认同和支持，系统就无法成功。

谁在构建设计系统？

许多备受推崇的公司正在采用设计系统的范式。系统的优势正得到越来越广泛的认可，促使行业领导者为采用系统铺平道路。

以下是一些正在开发的最广为人知的设计系统。

Mailchimp

Mailchimp 是一款流行的电子邮件营销工具。他们开发了一套全面的设计系统。

他们甚至发布了单独的内容样式指南，以帮助员工以 Mailchimp 的个性打造产品。

材料设计

Google Material Design是迄今为止最引人注目的系统之一。其样式指南不仅涵盖了色彩和图标等基础知识，其组件库还服务于 iOS、Web、Android 和 Flutter。

IBM Carbon

IBM Carbon是另一个备受推崇的设计系统。它们提供 React、Vue、Angular 以及原生 JavaScript 的组件。

Atlassian

Atlassian 的设计系统包含一份精美的风格指南。他们提供了许多关于品牌、标识和图像设计的资源。

希望第一部分能为大家打下坚实的设计系统基础。第二部分将深入探讨设计语言。欢迎在下方留言，分享你对设计系统的看法。

所有图形均由unDraw提供。