初探 Material 3：它到底是什么？
说实话，做 UI 测试这些年，我见过的设计系统少说也有十几个了。但 Material 3 给我的感觉不太一样。它不只是一套「长得好看」的组件库，更是一套完整的设计「操作系统」。你想想看，从颜色怎么算、形状怎么变，到动效怎么自然无感，它全都给出了可量化的规则。
这对于我们测试工程师来说，其实是个好消息。为什么？因为可量化意味着可测试。你要是靠设计师肉眼对齐，那才是灾难。我个人建议，接手任何 Material 3 项目之前，先把这套底层逻辑搞清楚，后面 Mock 回放才不会跑偏。
Material 3 的三层架构
我个人习惯把 Material 3 拆成三块来理解，这样测试的时候也容易分层下手：
- 设计 层：这是最底层的「变量」。颜色、字体、间距、圆角，全都用 定义。
- 组件库层：基于 构建的 UI 元件。比如 Button、Card、NavigationBar。
- 动效与交互层：过渡动画、手势反馈、触摸涟漪。这一层最容易被 Mock 工具忽略。
要我说，测试 Material 3 组件的核心就一句话：
「组件行为是否符合 定义，交互反馈是否符合动效规范。」
记住这个原则，后面几章你会反复用到它。我在项目中遇到过不少团队，只测了「按钮能不能点」，却没测「按钮圆角是不是 20px」——结果设计师拿到的截图和代码完全两回事。
为什么测试要重点关注「」？
说白了，Material 3 设计得再漂亮，最后跑在 App 里的都是代码。而 就是代码和 UI 之间的「翻译官」。
一个真实的教训：
我曾经接过一个项目，设计师在 Figma 里定义了一个「primary」颜色 #6750A4，但开发在 XML 里写成了 #6750A3。这种肉眼几乎无法分辨的差异，只有通过自动化的 Mock 回放对比才能发现。
分为五种类型，每种都有对应的测试方式：
| 类型 | 影响组件 | Mock 回放关注点 |
|---|---|---|
| Color（颜色） | 背景、文字、边框 | Hex 值是否与设计稿一致 |
| Typography（字体） | 标题、正文、标签 | 字号、行高、字重 |
| Shape（形状） | 按钮、卡片、对话框 | 圆角半径、边框宽度 |
| Motion（动效） | 进场、退场、切换 | 持续时间、缓动曲线 |
| Spacing（间距） | 布局、内边距、外边距 | 像素值是否存在偏差 |
你看这个表，每一列都是测试用例设计的基础。我在项目中经常看到测试同学拿着设计稿「目测」对齐——能对齐就见鬼了。人眼对 1 像素的偏差根本无感，但自动化工具可以。
Material 3 的关键设计原则（测试视角）
了解原则不是为了读文档，而是为了知道「哪里容易出问题」。我总结了三个和测试最相关的原则：
- 自适应布局：组件需要响应不同屏幕尺寸。Mock 回放时，不要只截图 iPhone 15 Pro Max，也要看看 SE 3 的截图。
- 表驱动设计：颜色、字体都通过 表注入，不用硬编码。这也意味着，测试数据可以抽出来做「 漂移检测」。
- 无障碍支持：文本对比度至少 4.5:1，触摸目标至少 48x48 dp。这个在 Mock 阶段就能判定是否合规。
警告：不要在主线程测动效
我个人建议：在 Mock 回放流程中，把动效相关的断言单独拎到子线程。记住，动效是异步的，用 Thread.sleep 去等动画结束，那是最土的办法，而且不稳定。
给 Mock 测试团队的「起步建议」
如果你所在的团队正要开始做 Material 3 组件的 Mock 回放测试，我的建议很直接：
- 先定义「组件清单」：哪些是 MDC 原生组件，哪些是自定义派生组件。派生组件更容易出问题。
- 抓取第一版 值：从设计 文件里导出所有变量，作为基线。这一步千万别偷懒，我见过因为基线错了后面全推翻的案例。
- 录第一轮「标准动效」：用你选择的工具（后面章节会详细讲）录制组件在正常状态下的截图和事件序列。
- 制定断言规范：每个组件至少断言 5 项——可视属性、语义属性、无障碍属性、动效曲线、空间坐标。
嗯，到这一步，你就已经比其他团队领先一大截了。接下来的章节我会带着你，从最简单的组件开始，一步一步把 Mock 回放流程跑通。放心，我会把踩过的坑全都标出来。