什么是设计系统以及为什么需要它

2025-05-24

什么是设计系统以及为什么需要它

正在寻找改进设计开发工作流程的方法?您需要一个设计系统!为什么?因为它能帮助您更高效、更快速地工作,并将您的团队协作提升到一个新的水平!

设计系统是一个非常流行的概念,最近引起了很多情感和兴趣......甚至美国政府也有一个他们称之为美国网页设计系统:)

什么是设计系统

设计系统是可重用图形组件、设计标准和样式指南的集合,它们为产品团队定义了通用的视觉语言。它通过清晰的图形标准加速设计流程,并弥合参与构建最终产品的团队之间的差距,使使用组件组装网站变得非常容易。所以,设计系统本质上是图形和开发团队的规则手册,我们可以将其分解如下:

  • 设计系统——一套完整的设计标准以及实现这些标准的原则、模式和代码组件,
  • 模式库——设计系统的子类,定义允许的设计模式,
  • 风格指南——展示产品外观的子类,包含 UI 模式、排版等用例。

设计系统

资料来源:UXPin 工作室的 Zack Rutherford

优势

设计系统在设计公司或产品视觉识别的新元素时提供一致性。设计系统为最终用户和产品团队创造了直观美观的体验,使协作变得更加轻松:

  • 设计师可以将设计过程分解成更小的部分,比整个网页更容易操作、管理和更改,

  • 开发人员清楚地了解如何构建所需的组件来维护统一的样式,

  • 产品所有者/经理,因为基于组件的方法使得向开发团队请求额外的页面元素成为一个超级简单的过程

示例

你们可能都听说过谷歌著名的Material Design

材料设计

但这并不是唯一一个你可以从中汲取灵感的地方,像 IBM、奥迪或 Atlassian 这样的大公司都公开了他们的设计系统。你可以在这里看看其中几个:

IBM 的 Carbon React 组件
IBM 的 Carbon React 组件

Zendesk 花园
Zendesk 花园

Atlassian 设计系统
阿特拉斯

Shopify 的 Polaris
Zendesk 花园

想要了解更多?

请务必访问https://designsystemsrepo.com/design-systems/获取更多样本和灵感!

文章来源:https://dev.to/graphqleditor/what-s-design-system-and-why-you-need-one-31fh
PREV
DevOps 101:Ansible 简介
NEXT
GraphQL 能为您的 API 做什么?