参考卡 · 设计 · Phase 1（贯穿）· 可反复回看 / 可打印
设计系统：用系统限制选择
大公司的产品看起来"统一、专业"，背后通常有一套设计系统（design system）：把颜色、字号、间距、圆角、阴影提前定成几个固定选项，做每个页面时只能从里面挑，不能随手乱填。对不写代码的人来说，这意味着不必凭空发挥审美，让 Agent 照一套系统来做，页面就能保持一致。这张卡先看三套常见系统（Apple、Google、Apple 的"液态玻璃"），再讲清一套设计系统由什么组成，方便你准确指挥 Agent，也能看出它有没有跑偏。
这张卡讲四件事
- Apple 人机界面指南（HIG）：清晰、谦逊、有深度
- Google Material Design：把规则定得很细的"意见型"系统
- Apple 液态玻璃（Liquid Glass，2025+）：半透明、流动、有层次
- 设计系统的本质：它由哪 5 块组成、和"风格指南"差在哪
设计系统的作用是减少选择，而不是增加选择。选项越少，越不容易出错，也越容易让 Agent 做出统一的页面。
1. Apple 人机界面指南（HIG, Human Interface Guidelines）
设计哲学：三块基石
Apple 的设计围绕三个词展开：
立即预约维修
文字易读、图标准确、装饰克制。用留白、颜色、字体让重要内容更显眼，并提示哪里能点。
界面帮人理解和操作内容，不和内容抢镜。动效和界面尽量干净，让注意力落在内容上。
用视觉层次和动效传达谁在前、谁在后，让界面层次清楚、便于理解。
六条核心原则
- 美学一致性（Aesthetic Integrity）：外观和功能要相称（严肃的工具就别花哨）。
- 一致性（Consistency）：沿用大家熟悉的标准和习惯，比如系统图标、标准文字样式、统一的用词。
- 直接操作（Direct Manipulation）：让人直接对屏幕上的内容下手（旋转、手势），更有参与感。
- 反馈（Feedback）：确认每个操作、展示结果、用动效给出上下文。
- 隐喻（Metaphors）：能帮理解时就用现实世界的比喻（文件夹、开关、滑块）。
- 用户控制（User Control）：让人发起并掌控操作，允许撤销，破坏性动作要可逆。
好例 · 可撤销 / 可控
删除 已删除 · 撤销
iOS 的"设计原子"（设计的最小零件）
下面这些是 Apple 在手机上反复用的固定零件。你不用记，但知道它们存在，就能让 Agent"按 iOS 风格来"：
- 字体（Typography）：SF Pro 系统字体；Dynamic Type 让字号能随无障碍设置放大。
- 颜色（Colors）：系统色，会自动适配浅色 / 深色模式。
- 图标（Icons）：SF Symbols 图标库，5000+ 图标，多种粗细和大小。
- 间距（Spacing）：基于 8pt 网格。
- 圆角（Corner radius）：用"连续曲率"的圆角（squircle 超椭圆），不是普通的圆角矩形。
- 材质（Materials）：半透明模糊（vibrancy 通透感），用于分层内容。
左：普通圆角矩形 · 右：连续曲率（更接近 Apple 的 squircle 观感）
不同平台，不同规矩
同一套哲学，落到不同设备上有不同的摆法：
各平台要点
- iOS：标签栏在底部、导航栏在顶部、全屏手势、左滑返回
- macOS：菜单栏、工具栏、侧栏导航、键盘快捷键、可缩放窗口
- visionOS：空间设计、眼动追踪、手势、深度与距离
- watchOS：一眼能看完的信息、短交互、复杂功能小组件（complications）
- CarPlay：驾驶安全第一、尽量少交互、大触控目标
2. Google Material Design
核心理念：一套"有主见"的系统
Material Design 把理论、资源、工具合成一套统一系统。它的特点是意见型（opinionated）：不只给原则，还给出具体到数值的指引。对零基础的人来说，照着数值填就行，不用自己拿主意。
地基层 1 · 布局系统（Layout）
- 基于 8dp 网格（dp = 与屏幕密度无关的像素，保证不同手机上看起来一样大）。
- 响应式列数：手机 4 列、平板 8 列、桌面 12 列。
- 预设断点（breakpoint）：紧凑 compact（<600dp）、中等 medium（600 到 839dp）、扩展 expanded（840dp+）。
- 各断点下边距（margin）和间隙（gutter）保持一致。
手机 · 4 列
平板 · 8 列
桌面 · 12 列
地基层 2 · 颜色系统（Color）
- 主色（Primary）：品牌主色及其深浅变体。
- 辅助色（Secondary）：用于不那么显眼的组件的点缀色。
- 表面色（Surface）：卡片 / 容器的背景色。
- 错误色（Error）：错误状态和破坏性动作。
- 动态配色（Dynamic Color）：Material You 能根据用户壁纸自动生成配色（Android 12+）。
- 使用 HCT 色彩空间（色相 Hue、彩度 Chroma、明度 Tone），让颜色在人眼看来更均匀。
主色 Primary
辅助色 Secondary
表面色 Surface
错误色 Error
地基层 3 · 字体系统（Material 字阶 Type Scale）
把所有文字按用途分成五大类、每类三档（大 / 中 / 小），挑字号时从这套里选：
Display · 展示（巨标题、数字）
Headline · 大标题（区块标题）
Title · 标题（卡片 / 对话框标题）
Body · 正文（段落文字，就是这种）
LABEL · 标签（按钮、说明、元数据）
地基层 4 · 高度系统（Elevation）
用"离屏幕多高"表达层级：越高的元素阴影越重、看起来越靠前。共 0 到 5 级（6 级），每级有固定阴影。组件也有默认高度，比如悬浮按钮 FAB=3、对话框=3、导航=2、卡片=1。
0 · 贴底
1 · 卡片
3 · 对话框 / FAB
5 · 最高
（深色模式里反过来：越高的表面颜色越浅。）
地基层 5 · 形状系统（Shape）
圆角也定成一套刻度，从"无（0dp）"到"全圆（capsule）"，按组件大小和重要性选用：
None 0
XS 4
S 8
M 12
L 16
XL 28
Full
地基层 6 · 动效与动画（Motion）
- 强调令牌（Emphasis tokens）：成套的时长与缓动预设（short1 到 4、medium1 到 4、long1 到 4、extra-long1 到 4）。
- 标准缓动（Standard easing）：用于在版面内移动的元素。
- 强调缓动（Emphasized easing）：用于进出场和戏剧性转场。
- 共享元素转场（Shared element transitions）：把两个视图里相关的元素连起来平滑变形，让跳转更顺。
常用组件清单
Material 把组件也标准化了
- 导航：底部导航（手机）、导航栏 rail（平板）、抽屉 drawer（桌面）
- 动作：悬浮按钮 FAB、扩展 FAB、图标按钮
- 容纳：卡片、对话框、底部抽屉、侧边抽屉
- 沟通：徽标 badge、进度指示、横幅提示 snackbar
- 选择：复选框、单选框、开关、标签片 chip、日期 / 时间选择器
- 输入：描边输入框、填充输入框，带辅助 / 错误文字
3. Apple 液态玻璃（Liquid Glass，2025+）
核心概念
Liquid Glass 是 Apple 跨所有平台的新设计语言，目标是各平台体验更协调、更一致，界面会随上下文自适应，视觉表现也更丰富。
五个关键特征
玻璃般的材质，能透出后面的背景内容。
状态之间平滑过渡、变形（morphing）。
多层表面，带真实的光线折射。
界面随上下文响应，包括内容、设备、用户操作。
元素共享同心几何：按钮的圆角和它容器的圆角彼此呼应。
Steve's Repair
浮在内容之上的玻璃卡片，半透明、有模糊、边缘会"接住"光。
系统颜色与字体
- 颜色会根据背后的玻璃材质动态调整。
- 字体用可变字体（variable fonts），自动调整字重和视觉大小（optical size）。
- 系统色带有语义含义，并自动调整对比度以保证可读。
形状几何
- 连续圆角（squircle）：所有圆角形状都用连续曲率。
- 同心原则（Concentricity）：内层元素圆角 = 外层圆角减去内边距（padding）。
- 胶囊形（Capsule）：按钮和标签片用完全浑圆的药丸形。
好例 · 同心：外 20 减内边距 8 等于内 12，浑然一体
同心小公式：内圆角 = 外圆角减去内边距。要让 Agent 用得上，直接告诉它："外卡片圆角 20、内边距 8，所以里面按钮圆角设 12。"
组件模式
- 标签栏 Tab bar：玻璃材质带模糊，浮在内容之上。
- 工具栏 Toolbar：半透明，与背后内容融合。
- 卡片 Card：玻璃表面，细边能"接住"光。
- 侧栏 Sidebar：带通透感（vibrancy）的半透明面板。
4. 设计系统的本质
一套设计系统由哪 5 块组成
- 设计令牌（Design Tokens）：给颜色、间距、字体、阴影、边框等起好名字的固定值。
- 组件（Components）：可复用的界面零件，每个都定义好状态和变体。
- 模式（Patterns）：反复出现的问题的通用解法（表单、导航、数据表格怎么做）。
- 指引（Guidelines）：什么时候、怎么用令牌 / 组件 / 模式的规则。
- 文档（Documentation）：用法示例、该做 / 别做、无障碍说明。
"设计令牌"长什么样
令牌就是提前命好名的一串固定值。做页面时只引用名字，不写死数字；想统一改时，改一处，全站跟着变。下面是一套典型令牌的结构：
primary（主色，50 浅 到 900 深）
neutral（中性灰，50 到 900）
semantic（语义色：成功 / 警告 / 错误 / 提示）
success
warning
error
info
xs · sm · md · lg · xl · 2xl · 3xl · 4xl
另外还有：字体家族（sans / serif / mono）、字重（regular / medium / semibold / bold）、行高（tight / normal / relaxed）、阴影（sm 到 2xl）、圆角（none / sm / md / lg / xl / full）。全都是"提前定死的几个名字"。
设计系统 vs 风格指南：别搞混
风格指南（Style Guide）
只管视觉标准：颜色、字体、logo 怎么用。是一份静态文档，写完基本不动。
设计系统（Design System）
一套活的可复用组件体系，含代码、设计文件和文档，随产品一起演进。
两者的关系：设计系统包含风格指南，范围更大。风格指南相当于"配色表"，设计系统相当于"配色表加现成零件加用法说明书"。
怎么把这张卡用在指挥 Agent 上
不需要从头发明一套系统。省力的做法是挑一套现成的，让 Agent 全程照着来：
- 先定一套"基调"。告诉 Agent："这个网站按 Material Design 来"或"按 Apple HIG 风格来"，一句话就把大量零碎选择定下来了。
- 把令牌当口令用。改东西时引用系统里的名字，而不是凭空报数字，例如"标题用 Headline 字阶""卡片用 elevation 1 的阴影""错误提示用 error 语义色"。
- 用同心、网格这类规则做验收。Agent 做完后，照这张卡的示例对一对：圆角内外呼应了吗？间距是不是从同一套刻度里取的？
- 定了系统就别中途乱改。系统的价值在于"统一"，今天 Material、明天 HIG，等于没系统。
给 Agent 的话术示例："这个 Steve's Repair 官网整体按 Material Design 来：主色 #1f6feb，标题用 Headline 字阶、正文用 Body，卡片用 elevation 1，圆角统一 12px（Medium），所有间距只能从 8dp 网格里取（8 / 16 / 24 / 32）。"也就是把抽象的"好看"换成 Agent 能直接照做的具体口令。
拿不准选哪套、或 Agent 做出来"还是乱"，就把页面截图发给你的 AI 老师（Agent），问："这页有没有遵循一套统一的设计系统？哪里不一致、该怎么按系统改？"
来源：Abel's UX Design Skill（abel-ux）· Abel's Design Note，综合 Apple Human Interface Guidelines、Google Material Design、Apple Liquid Glass 与设计系统通识。本卡为中文整理版加可视示例，贯穿全程可反复回看。