material-design-3-ui

Material Design 3 UI/UX

目的

创建行为符合 Material Design 3的界面，而不是仅仅看起来圆润或“像 Google”的界面。

将 M3 视为一个系统：

用户目标 → 信息架构 → 层级 → 自适应布局 → 语义化令牌 → 组件 → 状态 → 交互 → 动效 → 无障碍性 → 视觉表达

M3 Expressive 是可选的。使用它来强化层级、易用性、辨识度和情感表达；绝不要以此为由让每个元素都过于醒目。

信息来源

1. 优先参考 https://m3.material.io/ 上最新的 Material 3 官方指南。
2. 对于 Android 实现细节，优先参考 https://developer.android.com/。
3. 将设计指南与实现库/API 的状态分别对待。
4. 在断言具体尺寸、依赖版本、实验性 API 名称或近期变更的行为之前，先核实最新官方指南。
5. 不要悄然混入 Material 2 的规则。
6. Pixel 和 Google 应用的屏幕截图仅供参考，并非规范。

核心规则

必须

• 从用户任务、内容、层级和平台入手，然后再进行样式设计。
• 使用语义化设计令牌，而不是零散的一次性取值。
• 根据用途和行为选择组件，而不是根据视觉相似度。
• 优先使用能满足交互需求的成熟 M3/平台组件。
• 定义重要状态：默认、按下、焦点、悬停（适用时）、已选中、已禁用、加载中、错误、空状态，以及相关的成功状态。
• 根据可用窗口设计，而不是猜测设备类别。
• 确保对比度、目标尺寸、焦点、语义、缩放和非颜色状态提示均符合无障碍要求。
• 在适用时，尊重系统栏、安全区域、挖孔、键盘/IME、可折叠设备铰链和全面屏行为。
• 确保主要操作与次要操作及破坏性操作有所区分。
• 确保自定义组件继承系统的令牌、状态、动效和无障碍逻辑。
• 如果产品需求需要偏离 M3，请说明原因。

禁止

• 不要仅通过添加大圆角、柔和色彩、阴影或 Material Symbols 来让屏幕看起来“Material 化”。
• 在可以使用语义角色时，不要在整个屏幕中硬编码原始颜色值。
• 不要仅用颜色传达含义或状态。
• 不要将每个区块或列表行都放进卡片中。
• 不要让每个组件都采用最大圆角。
• 不要将 FAB 用于次要、破坏性或含义模糊的操作。
• 不要将芯片用作通用按钮或主要导航。
• 不要用标签页承载彼此无关的顶层目的地。
• 不要让所有组件都同样醒目。
• 当成熟的 M3/平台控件已能满足交互需求时，不要另创控件。
• 不要为了保留视觉布局而牺牲无障碍性。
• 不要将紧凑型/移动端布局不加调整地拉伸到宽窗口中。

渐进式披露参考资料

仅加载当前任务所需的参考资料。默认不要读取所有参考资料。

需求	阅读
颜色角色、表面、深色主题、动态颜色	references/color-system.md
字体层级、缩放、表现力字体	references/typography.md
形状、卡片、内容容器、海拔	references/shape-and-elevation.md
间距、对齐、易读宽度、安全区域	references/spacing-and-layout.md
按钮、FAB、卡片、芯片、选择、输入、反馈	references/component-selection.md
导航栏／轨道／抽屉、标签页、应用栏	references/navigation.md
表单、验证、设置、文本输入	references/forms-and-input.md
Snackbar、对话框、底部操作表、加载、空状态／错误状态	references/feedback-and-overlays.md
响应式、平板、折叠设备、桌面、多窗格	references/adaptive-design.md
无障碍审核或任何最终 UI 审查	references/accessibility.md
转场、反馈动画、形状变形	references/motion.md
Material 3 Expressive	references/m3-expressive.md
最终审核／可疑的“Material 风格”UI	references/anti-patterns.md

对于涵盖整个流程的设计，请随着决策需要逐步加载参考资料。最终批准前，务必阅读无障碍参考资料。

工作流程

除非任务明确限定某个阶段，否则请按以下顺序执行。

1. 了解产品

确定平台、用户的主要目标和操作、顶层目的地、内容层级、数据密度、输入方式、品牌限制、所需状态和边缘情况、目标窗口尺寸，以及是否适合采用 M3 Expressive。

如果缺少的信息不会妨碍工作，请做出稳妥且符合 M3 的假设，并说明该假设。只有当缺失信息会实质性影响架构或交互时才提问。

2. 建立信息架构

在确定样式之前：

• 将相关信息分组，并确定每个屏幕的主要任务。
• 将导航与操作分开，并区分破坏性操作。
• 移除重复控件，并定义渐进式披露。
• 不要仅仅因为有空间就展示信息。

3. 选择自适应结构

当窗口尺寸或导航形式有多种时，阅读 references/adaptive-design.md 和 references/navigation.md。

内容适用时，优先采用列表-详情、辅助窗格、信息流和自适应导航等经典模式。

更宽的空间应改善上下文呈现或提升效率，而不应只是拉伸内容。

4. 以语义方式构建主题

阅读相关的颜色、字体排版、形状／海拔和间距参考资料。

层级如下：

参考／系统令牌 → 语义／系统角色 → 组件令牌

屏幕应依赖语义角色，而不是散布各处的字面值。

5. 选择组件

阅读 references/component-selection.md，并根据需要阅读专门介绍导航、表单和反馈的参考资料。

对于每个重要控件，确定其语义用途、强调程度、即时或事务性行为、交互状态、无障碍行为和自适应行为。

6. 定义状态和反馈

涵盖相关的加载、空、错误、成功、禁用、已选中、按下、焦点、悬停和繁忙／提交中状态。

错误状态必须提供恢复途径。

7. 应用无障碍设计

阅读 references/accessibility.md。

无障碍设计是发布要求，不应推迟到视觉润色阶段。

8. 添加动效

只有当任务涉及动效时，才阅读 references/motion.md。

动效必须说明状态、层级、空间关系或响应。不要为了炫目而添加动画。

9. 适用时采用 M3 Expressive

阅读 references/m3-expressive.md。

谨慎运用少量精心设计的表现元素。常规阅读、表单、设置和密集型效率界面应保持平和，除非更强的表现力能提升易用性。

10. 审核后再批准

阅读 references/anti-patterns.md，并完成以下自审。

自审

交付设计前，为每个适用类别打 0、1 或 2 分。

• 0 = 不正确 / 缺失
• 1 = 部分正确 / 需要改进
• 2 = 已就绪

类别	检查项
任务清晰度	用户的主要目标和操作是否清晰
信息层级	分组和强调是否协调一致
组件语义	控件是否与其实际行为相符
令牌规范	是否一致地使用语义角色
自适应行为	布局是否在相关窗口中得到优化
状态与反馈	是否涵盖重要状态和恢复方式
无障碍	目标尺寸、对比度、语义、焦点、缩放、减少动效
表现克制	表现力是否提升层级且不会造成干扰

如果组件语义、状态与反馈或无障碍任一项得分为 0，则设计尚未达到批准条件。

不要为了满足用户而虚报分数。请说明具体问题及修正方案。

交付约定

当用户要求设计、重新设计、审核或交付 UI 时，需提供足够细节，让其他设计师或开发者能够复现相关决策。

除非用户要求采用其他格式，否则应酌情包含：

1. 设计意图 —— 用户目标和层级。
2. 布局 —— 区域、面板、导航、自适应行为。
3. 主题角色 —— 语义颜色、字体排印、形状、层级。
4. 组件映射 —— 重要控件对应的确切 M3 组件类型 / 变体。
5. 状态 —— 交互、加载、空状态、错误、成功、禁用。
6. 无障碍 —— 目标尺寸、对比度、名称、焦点、键盘、缩放。
7. 动效 —— 仅包含有意义的过渡 / 状态变化。
8. 实现说明 —— 平台特定注意事项，以及实验性 / 不受支持的 API。
9. 自审 —— 用户要求评审、审核或生产就绪性检查时提供。

创建实际代码或产物时，应落实这些决策，而不是止步于描述。

语义化交付示例

建议：

Screen background: surface
Primary text: onSurface
Secondary text: onSurfaceVariant
Primary CTA: filled button / primary + onPrimary
Secondary CTA: outlined button
Section container: surfaceContainer
Subtle separator: outlineVariant
Error container: errorContainer + onErrorContainer

避免使用任意字面值进行交付，除非它们来自项目的令牌系统。

平台实现说明

Android / Jetpack Compose

• 新的 M3 工作优先使用 androidx.compose.material3。
• 生产环境优先使用稳定 API，除非明确接受 alpha / 实验性依赖。
• 不要假设所有 M3 Expressive API 都已稳定。
• 使用 Material 主题角色，而不是原始颜色值。
• 遵循当前 Android 自适应指南，适配可调整大小的窗口和大屏体验。
• 将 edge-to-edge 和系统内边距视为布局问题。
• 对于 Wear OS，使用 Wear Material 3，不要混用移动端组件。

生成实现时，不要硬编码未经当前官方发布说明核实的库版本号。

Web / 其他平台

即使官方实现库未提供所有组件，也可以参考 Material 3 指南来设计。

• 复现语义和令牌关系，而非 Android 特有的行为差异，
• 保留原生平台的无障碍功能和输入惯例，
• 明确标示自定义实现，
• 未经验证，不要声称平台官方支持。

最终原则

Material Design 3 是一套语义化、自适应且无障碍的设计系统。

优秀的 M3 界面应始终保持一致，即使品牌颜色改变、窗口尺寸调整、深色主题启用、文本放大、触控改为键盘输入，或表现力较强的样式被弱化，也不例外。

如果设计只有在所有表面都采用圆角和彩色样式时才能奏效，那它就不是稳健的 Material 3 设计。