BEM/Yandex UI 设计令牌（Design Tokens）深度解析

什么是设计令牌

设计令牌是现代UI开发中的核心概念，它代表设计系统中最基础的视觉属性单元。在BEM/Yandex UI框架中，设计令牌被系统性地组织和管理，作为连接设计与开发的桥梁。

设计令牌本质上是一种与平台无关的抽象层，它封装了诸如颜色、间距、字体、阴影等视觉属性。这种抽象使得设计师和开发者能够使用相同的术语进行协作，同时保持设计系统的一致性。

设计令牌的核心优势

1. 一致性保障：通过集中管理视觉属性，确保整个产品界面风格统一
2. 高效维护：修改全局设计只需调整令牌值，无需逐个修改组件
3. 多平台适配：同一套令牌可转换为CSS、JSON、XML等不同格式
4. 设计开发协作：建立设计师与开发者之间的共同语言

令牌类型详解

全局令牌

全局令牌是设计系统的基础构建块，通常包括：

• 色彩系统（主色、辅助色、语义色等）
• 字体系统（字族、字号、字重、行高等）
• 间距系统（基础间距单位、布局间距等）
• 圆角系统（基础圆角大小等）
• 阴影系统（不同层级的阴影效果）

在BEM/Yandex UI中，全局令牌按照主题进行组织，典型结构如下：

主题目录/
├── 主题定义文件.theme.json
└── 令牌文件/
    ├── 色彩-light.tokens.yml
    ├── 传统样式.tokens.yml
    ├── 间距.tokens.yml
    └── 排版.tokens.yml

组件令牌

组件令牌是特定于某个UI组件的视觉属性，它们应该：

1. 尽可能引用全局令牌
2. 只在该组件内部使用
3. 包含组件的各种状态和变体

典型组件令牌结构示例：

组件目录/
└── 组件.tokens/
    └── 组件.tokens.yml

令牌文件最佳实践

结构组织原则

1. 扁平化结构：避免不必要的嵌套层级
2. 明确命名：使用直观的命名反映令牌用途
3. 状态分离：清晰区分组件的不同状态

代码示例对比

不推荐的做法（过度嵌套）：

按钮:
  字体:
    粗细:
      加粗:
        值: "..."

推荐的做法（扁平结构）：

按钮:
  字体粗细加粗:
    值: "..."

状态命名规范

BEM/Yandex UI推荐使用以下状态命名：

• base：默认状态
• hovered：悬停状态
• focused：获得焦点状态
• disabled：禁用状态
• pressed：按下状态
• selected：选中状态
• checked：勾选状态
• progress：加载中状态

高级技巧

文档注释

为重要令牌添加注释，提升可维护性：

按钮:
  圆角半径: "4px"
  注释: "控制按钮四角的圆角程度"

元素标注

明确区分属性和元素：

按钮:
  # 元素：按钮文本
  文本:
    字族:
      值: "Arial"

全局令牌引用

优先使用全局定义而非硬编码：

按钮:
  文本:
    字族:
      值: "{排版.字族.值}"

设计令牌工作流

1. 设计阶段：设计师在Figma等工具中定义视觉属性
2. 令牌化：将设计属性转换为设计令牌
3. 代码生成：通过工具将令牌转换为平台特定代码
4. 开发使用：开发者在组件中引用生成的令牌变量
5. 迭代更新：通过修改令牌值实现全局样式调整

常见问题解决

问题1：如何保持多团队令牌一致？ 方案：建立中心化的令牌仓库，定期同步更新

问题2：如何处理平台差异？ 方案：使用条件令牌，针对不同平台定义不同值

问题3：如何管理令牌版本？ 方案：采用语义化版本控制，重大变更升级主版本号

通过BEM/Yandex UI的设计令牌系统，团队可以建立高效、一致的设计开发协作流程，显著提升大型项目的可维护性和扩展性。