Web 设计系统学习目录

面向普通读者的中文 Web 设计系统基础读本：8 个模块、35 个专题，从共同规则到组件、网页和持续维护。

Web 设计系统是一套共同使用的网页界面规则、可复用部件和使用说明。Web 指在浏览器里使用的网页；SaaS 指通过网络使用的软件服务，例如在线排班或客户管理工具。

这份基础读本包含 8 个模块、35 个专题。每篇用简短原则、流程图、示意表格和一个具体场景介绍基础做法。可从第一篇按顺序读，也可从眼前的问题进入。

整个过程怎样串起来？

无障碍——让不同能力和不同使用方式的人都能获取信息与操作——要贯穿全过程。流程图是学习顺序，不要求团队做完所有基础才开始验证。

用一个例子走一遍

以下是一家假设的在线预约服务，不是实际项目数据或效果承诺。

团队先沿着预约过程检查，找到表单和保存反馈的问题；再统一必要的颜色、文字、间距和部件，放到窄屏与键盘操作中验证。实现后检查成功和失败路径，记录改动与采用方式。下一次出现同类需求时，复用已经验证的规则，再检查新场景。

1. 认识 Web 设计系统

先知道系统解决什么问题，再判断投入范围。组件是可重复使用的界面部件；系统还包含部件的使用条件和维护方法。

• 从用户要完成的任务和现有问题出发，不先追求资源数量。

• 盘点实际网页、状态和重复工作，保留有理由的差别。

• 学完能列出首批要统一的问题、基本原则和负责人员。

• 什么是 Web 设计系统？

• 你的网站什么时候需要设计系统？

• 怎样盘点现有网站的界面？

• 怎样确定设计原则与建设范围？

2. 建立视觉基础

视觉基础安排颜色、文字、空白、边界与素材，让页面能被看清和理解。视觉层级就是信息的主次，不等于把所有重要内容都做得很大。

• 先明确用途，再选择外观；颜色和动效要传达信息。

• 用实际文字和背景检查阅读，间距帮助区分内容关系。

• 学完能说明常用外观规则及其适用条件，不需要制定个人风格宣言。

• 怎样建立颜色与语义角色？

• 怎样建立适合网页的字体与排版？

• 怎样统一间距与尺寸？

• 怎样使用边框、圆角与层级？

• 怎样统一图标、图片与插画？

• 怎样定义动效与交互反馈？

3. 组织设计令牌

设计令牌是给可复用的设计决定起名字并记录值，例如“主要文字颜色”。它让设计与开发能按同一个用途讨论，而不只是互相传色值。

• 分清原始值、用途和部件专用规则，按实际需要组织层次。

• 明暗主题可以给相同用途安排不同值，并分别检查。

• 学完能看懂简单的命名、引用和网页变量对应关系；CSS 是控制网页外观与布局的样式语言。

• 什么是设计令牌，应该怎样命名？

• 怎样组织基础、语义与组件令牌？

• 怎样支持主题与暗色模式？

• 怎样把设计令牌映射到 CSS 变量？

4. 响应式与无障碍

响应式是页面随可用空间改变排列；无障碍是让不同使用方式都能获取信息和操作。两者需要在真实浏览器中检查。

• 检查宽窄窗口、长文字和缩放，而不只检查两张设计截图。

• 焦点是键盘当前操作的位置，用户要看得见，也能合理移动。

• 学完能提出阅读、键盘、状态和操作区域的基本检查问题。

• 怎样定义响应式布局与网格？

• 怎样处理长内容、缩放与溢出？

• 怎样设计键盘操作与焦点？

• 怎样检查对比度、操作目标与状态？

5. 构建 Web 组件

Web 组件要同时说明结构、允许变化的选项和交互状态。交互状态是默认、正在处理、错误等情况下的表现。

• 按用途区分按钮、链接、表单、导航和信息容器。

• 为等待、失败、键盘与长内容补齐规则，不只画默认样式。

• 学完能解释常用部件何时用、怎样变，以及需要验证什么。

• 怎样定义组件结构、变体与状态？

• 按钮、链接与操作应该怎样区分？

• 怎样设计表单控件与校验？

• 怎样设计网站导航与位置提示？

• 怎样组织卡片、表格与浮层？

6. 组合页面与交互模式

页面模式是围绕常见用户任务，组合内容与部件的方法。例如找服务、比较信息、提交表单和查看结果。

• 模板固定重复结构，真实内容按具体服务和任务填写。

• 搜索与筛选要说明当前条件；排序改变先后，筛选改变范围。

• 学完能分清等待、没有内容、无匹配、失败和完成，并安排下一步。

• 怎样建立页面模板与内容层级？

• 怎样复用落地页与服务页模式？

• 怎样组织搜索、筛选与结果列表？

• 怎样统一加载、空白、错误与成功状态？

7. 连接 Figma 与 Web 实现

Figma 是制作和协作界面设计稿的工具。资源库、变量和自动布局帮助表达规则，但实际网页还需要开发实现。

• 让共享资源容易找到，并说明可改选项和用途。

• 用变化中的文字与宽度测试设计稿，再记录与代码的对应。

• 学完能与实现人员核对名称、状态和变化条件，不必自己编写程序。

• 怎样组织面向 Web 的 Figma 资源库？

• 怎样使用 Figma 变量、样式与模式？

• 怎样用 Figma 组件与自动布局表达网页？

• 怎样让设计稿与代码使用同一套规则？

8. 记录、验证与持续维护

维护让共同规则持续有用。贡献是提交问题或改动；审核是核对用途与影响；迁移是帮助旧页面采用新规则。

• 文档回答用途、选项、状态、边界和维护入口。

• 在真实页面验证，改动后再检查原来正常的场景。

• 学完能说明谁负责、怎样处理反馈，以及更新影响哪些使用者。

• 组件文档应该记录什么？

• 怎样在真实网页中验证设计系统？

• 怎样处理反馈、贡献与审核？

• 怎样管理版本、发布与迁移？

学习依据与适用范围

这份读本整理公开指南中共同出现的基础做法，不把某家公司的一整套参数视为行业统一规范。

• 实务参考 Adobe Spectrum 、 Figma 官网团队案例 与 AWS Cloudscape 页面模式 ，学习复用、用途、状态和设计开发协作。
• 视觉教育参考 RISD（罗德岛设计学院）的 视觉沟通基础讲义 ，理解排版、网格与屏幕验证；其博物馆的 网页文字编辑指南 帮助区分视觉层级与网页结构。延伸教材参考 MICA（马里兰艺术学院）教师编写的 《Thinking with Type》介绍 与 《平面设计新基础》介绍 ，涵盖文字、间距、分组、层级与网格；作者背景见 Ellen Lupton 和 Jennifer Cole Phillips 。具体 Web 行为与检查要求以各篇引用的专业指南为依据。
• 网页使用与无障碍参考 USWDS 设计系统 和 W3C 检查指南 。普通设计建议与有条件的标准要求分别说明。

每篇的表格与场景都是教学示例，具体数值不代表 SiteMonk 已采用的配置。这里只讨论网页界面，包括手机浏览器；不讨论 iOS、Android 原生 App。后续可在这些结构内补充实际项目资料。