Part 05

系统的
分层结构

FIVE LAYERS

5.1 / Architecture

五层金字塔

页面最终呈现，注入真实内容

模式组件的常见组合方式

组件可复用的界面单元

设计令牌最小的命名值

设计原则永恒不变的决策判据

越往下越稳定，越往上越灵活

换风格 = 替换令牌层 + 调整组件层。

原则层和模式层的逻辑不受影响。

设计令牌
系统的细胞

Design Token 是设计系统中最小的、命名了的值。

Hard Coded (反模式)

/* 难以维护 */
 color: #E53935;
 margin: 16px; 

Token (推荐)

/* 语义化命名 */
 color: var(--color-accent);
 margin: var(--space-4); 

令牌的价值在于语义化命名——当你换主题时，--color-accent 的值从红色变成紫色，所有引用它的组件不需要改一行代码。

四大类别

色彩

前景、背景、强调、语义色（成功/警告/错误）

排版

字体族、字号阶梯、字重、行高

间距

基于基数的间距系统

效果

圆角、阴影、边框、过渡时长

组件
令牌的组合体

一个按钮不是"一个按钮"。它是一组令牌的排列组合。

/* Button Anatomy */
 background: var(--color-interactive);
 color: var(--color-on-interactive);
 padding: var(--space-3) var(--space-6);
 font-size: var(--font-size-sm);
 radius: var(--radius-sm); 

当令牌变了，按钮的外观自动跟着变——不需要单独改按钮的代码。这就是系统的力量。

组件的三条铁律

单一职责

一个组件只做一件事。如果它又是按钮又是链接又是标签页，拆开。

API 最小化

变体不超过用得上的数量。每多一个 prop 就多一条需要测试的路径。

组合优于继承

用小组件拼出大组件，而不是从"万能组件"中塞参数。

模式
验证过的组合

模式是组件组合后的常见结构。比如"表单页面"不是一个组件，而是一种模式。

Form Page Pattern

Component: Page Header

Component: Input Field Group

Component: Button

模式的价值是：你不需要每次都重新发明一个表单页面的布局。它由标题、输入框、标签、按钮等组件按照特定的间距和层级规则组合而成。

系统的分层结构