AIAI学习站
继续学习
本章进度 17 / 18
94%
交互与审美工程·判断·13 分钟
正文已完成

把色彩、间距与状态变成设计令牌

用语义化令牌连接设计决策与代码，控制跨页面漂移并支持主题变化。

L238
为什么现在学

把“视觉一致性”从听懂变成会判断，避免遇到真实任务时仍靠感觉选择。

本课会用什么
  • 无需安装新工具
  • 准备一个可对照的真实问题或样本

设计令牌给稳定的设计决策命名，让实现可以集中修改、自动检查和跨主题复用。单独整理一份颜色清单还不够。

这一课的结果

能建立一组语义化视觉令牌，并说明组件如何消费而非硬编码。

核心概念

先把关键判断说清楚

01

语义名优于色值名

使用 text-muted、surface-danger 等用途名称，而不是 blue-500 直接写进业务组件。

02

基础层与语义层分开

基础色阶提供原料，语义令牌表达用途，组件令牌再处理具体状态。

03

状态不能只靠颜色

令牌系统还应覆盖图标、边框、文案和焦点样式，以满足不同感知方式。

案例拆解

深色模式里警告消失

组件直接写死浅黄色背景，切换深色模式后文字与背景对比不足。

  1. 01

    创建 warning-surface 与 warning-text 语义令牌

  2. 02

    分别映射浅色和深色值

  3. 03

    用对比度和键盘焦点测试两个主题

案例结果

组件无需知道具体色值，也能在主题切换后保持警告语义和可读性。

提交前练习

现在轮到你

为结果页的正常、进行中、成功、警告和失败状态建立令牌表。

完成本课需要：完成以下内容用于本课收口。

内容会自动保存在当前设备
查看参考答案与评分标准

参考答案

status-warning-surface/text/border 在两套主题分别映射；同时使用警告图标和明确文案，不以黄色作为唯一线索。

评分标准

  • 名称表达用途
  • 覆盖至少两种主题
  • 状态具备非颜色线索

本课收口 · 应用检查

完成一次应用，再检查理解

完成一次必填练习，再通过理解检查；阅读标记和总结不设硬门槛。

0 / 2
02完成本课必填练习0 / 3 项必填内容已填写03通过理解检查点此去回答，约 30 秒
04补一句总结（可选）可以留空，不影响完成本课。
哪个令牌名称更利于跨主题维护？
你现在更接近哪一种状态？
尚有必填项未完成，请补齐后再继续。

资料来源

继续核对与延伸阅读

本课内容最近更新于 。