什么是 Web 设计系统？

用共同的规则、组件和说明，让网站页面更一致，也更容易维护。

Web 设计系统是一套大家共同使用的界面规则、可重复使用的部件和使用说明。Web 指在浏览器里打开的网页。没有共同规则，同一个“保存”按钮在不同页面可能长得不同、用法也不同。

先记住这几件事

• 样式指南 记录颜色、字体和间距等外观规则。
• 组件 是能反复使用的界面部件，例如按钮或输入框；组件库是这些部件的集合。
• 设计系统还要解释部件什么时候用、有哪些状态、怎样修改，以及谁来维护。它连接设计稿与实际网页。
• 一致性 指同一种意思和操作使用相近的表达，不要求所有页面完全一样。

这些关系可参考 Adobe Spectrum 的系统介绍 ； USWDS 的设计原则 强调从用户需求出发、保持使用体验连续。

一个部件怎样走到网页上？

规则前后的示意

下面是假设的网站，记录的是设计决策，不是实际项目数据。

用一个例子走一遍

一家预约网站要新增“修改预约”页。设计师先找到已有的表单和保存按钮，开发者复用对应的网页部件。团队用真实长度的文字检查，并用键盘操作一遍。如果错误提示说不清楚，就先修正说明和组件，再让其他预约页面采用同样的改动。

边界与常见误解

设计系统不是只有一份漂亮的 Figma 文件。Figma 是制作和协作界面设计稿的工具；网页最终还要在浏览器里实现和验证。系统能减少重复决策，但不能自动判断每个页面的内容是否合适，也不能保证用户一定完成业务目标。