material-3-expressive

Material 3 Expressive（Android UI/UX）

概述

使用 Material 3 Expressive 设计和评审 Android UI/UX。优先处理对话框、底部弹出层、模态框、工具栏和按钮的组件令牌请求，并默认提供指导和令牌参考。

收集信息的问题

• 目标设备类型（手机、平板、折叠屏、Wear OS）
• 窗口尺寸类别（Compact、Medium、Expanded）
• 品牌限制和动态色彩用法
• 主要操作和期望的视觉焦点（最多 1-2 个）
• 动效限制和减少动态效果的预期
• 无障碍目标（对比度、触控目标）

默认假设

• 表现强度级别：Foundational
• 窗口尺寸类别：Compact
• 动态色彩：已启用
• 保留标准导航模式

快速工作流

1. 确认表现强度级别和视觉焦点
2. 确认设备类型和窗口尺寸类别
3. 加载 Tier 1 索引和输出模板
4. 加载组件概览和令牌规范文件
5. 如需主题设置，加载 Tier 3 基础令牌
6. 输出：指导 + 令牌参考（见模板）

默认输出格式（指导 + 令牌参考）

使用 references/m3-component-token-output-template.md 作为基础输出框架，原样套用。

• 上下文和意图（1-2 行）
• 表现强度级别 + 视觉焦点（数量 + 位置）
• 窗口尺寸类别 + 设备类型
• 组件 + 变体
• 令牌参考：文件路径 + 要使用的令牌组（仅在需要时引用关键值）
• Compose 映射参考（可选）：references/compose-mapping.md
• 行为或交互限制（来自概览）
• 减少动态效果的备用方案说明
• 无障碍和性能检查
• 可选：Compose 映射说明

表现手法

手法	应用方式
形状对比	主按钮采用醒目的圆角，次要按钮采用低调的圆角
丰富色彩	使用主色和次色容器来强调
字体层级	调整字号和字重
动效	按下或选择时变换形状

**限制：**每个流程最多 1-2 个视觉焦点

表现强度级别

• **Foundational：**首先确保清晰、熟悉
• **Excellent：**增强色彩、字体和形状，同时保留现有模式
• **Transformative：**采用醒目的布局和动效，同时严格保证可用性和无障碍性

常见错误

错误	修正方法
为了让外观“更简洁”而移除文本标签	保留标签；否则可用性会下降
每个屏幕上的视觉焦点过多	每个流程限制为 1-2 个
破坏导航模式	保留标准导航行为
未提供减少动态效果的备用方案	遵循系统动画缩放设置；当动画缩放为 0 时，提供减少动态效果或即时切换的方案
硬编码令牌值	使用语义令牌（md.sys.color.*）
忽略窗口尺寸类别	测试 Compact、Medium、Expanded

Android 专属指导

• 保留导航和组件行为
• 确保触控目标充足，并符合平台惯例
• 遵循系统动画缩放设置；提供减少动态效果的替代方案，或在动画缩放为 0 时即时切换
• 为平板和折叠屏应用窗口尺寸类别

评审清单

层级

• 2 秒内能识别主要操作
• 每个屏幕最多 1-2 个视觉焦点
• 所有交互元素均保留标签

无障碍

• 色彩对比度：文本 4.5:1，非文本 3:1
• 触控目标：至少 48dp
• 动效：提供减少动态效果的替代方案
• 屏幕阅读器：提供内容描述

表现规范

• 整个功能的表现强度级别保持一致
• 保留标准模式
• 使用动态色彩令牌
• 测试窗口尺寸类别

参考层级（按需加载）

Tier 1：始终优先加载

需求	文件
组件令牌查询	references/m3-expressive-specs-tokens-index.md
输出格式模板	references/m3-component-token-output-template.md
新增/更新的组件	references/m3-expressive-components.md

第 2 层：组件专属内容（按需加载）

组件	概览	令牌
按钮	m3-buttons.md	m3-buttons-specs-tokens.md
按钮组	m3-button-groups.md	m3-button-groups-specs-tokens.md
对话框	m3-dialogs.md	m3-dialogs-specs-tokens.md
底部和侧边面板	m3-sheets.md	m3-bottom-sheets-specs-tokens.md / m3-side-sheets-specs-tokens.md
工具栏	m3-toolbars.md	m3-toolbars-specs-tokens.md
FAB	m3-fabs.md	m3-fabs-specs-tokens.md
扩展 FAB	m3-extended-fab.md	m3-extended-fab-specs-tokens.md
FAB 菜单	m3-fab-menu.md	m3-fab-menu-specs-tokens.md
图标按钮	m3-icon-buttons.md	m3-icon-buttons-specs-tokens.md
分割按钮	m3-split-button.md	m3-split-button-specs-tokens.md
导航栏	m3-navigation-bar.md	m3-navigation-bar-specs-tokens.md
导航轨道	m3-navigation-rail.md	m3-navigation-rail-specs-tokens.md
应用栏	m3-app-bars.md	m3-app-bars-specs-tokens.md
轮播	m3-carousel.md	m3-carousel-specs-tokens.md
进度指示器	m3-progress-indicators.md	m3-progress-indicators-specs-tokens.md
加载指示器	m3-loading-indicator.md	m3-loading-indicator-specs-tokens.md

第 3 层：基础令牌（用于主题设置）

基础项	文件
颜色系统	m3-color-system.md、m3-color-foundation-tokens.md
排版	m3-typography.md、m3-typography-foundation-tokens.md、m3-typography-fonts.md、m3-typography-type-scale-tokens.md
形状	m3-shape.md、m3-shape-foundation-tokens.md、m3-shape-corner-radius-scale.md、m3-shape-morph.md
动效	m3-motion-physics.md、m3-motion-foundation-tokens.md、m3-motion-specs.md
高程	m3-elevation.md、m3-elevation-specs-tokens.md
状态	m3-state-foundation-tokens.md

第 4 层：证据与研究（用于论证）

资源	文件
研究结果	references/expressive-research.md
测试指南	references/m3-testing-material-3.md
Expressive 博客	references/m3-expressive-blog.md
Expressive 指南	references/m3-expressive-guidelines.md
UX 文章	references/medium-ux-article.md

第 5 层：Wear OS（仅用于可穿戴设备）

资源	文件
优势	references/wear-expressive-benefits.md
表达层级	references/wear-levels-of-expression.md
设计语言	references/wear-expressive-design-language.md
博客	references/wear-expressive-blog.md
Compose Material3	references/wear-compose-material3.md

辅助资源

资源	文件
Android UI 设计中心	references/android-ui-design-hub.md
Expressive 目录	references/expressive-catalog.md
Compose 映射	references/compose-mapping.md

维护

• 使用 skills/material-3-expressive/scripts/update_m3_expressive_refs.py 刷新参考资料。
• 需要 Playwright 和 Chromium（如有需要，运行 .venv/bin/python -m playwright install chromium）。
• CI 每周运行；本地运行用于紧急更改。

搜索提示

• 查找令牌前缀：rg "md.comp.button" skills/material-3-expressive/references/m3-buttons-specs-tokens.md
• 查找导航令牌：rg "md.comp.navigation" skills/material-3-expressive/references/m3-.*navigation.*.md

示例

• 使用 assets/examples/ui/ExpressiveHomeScreen.kt 作为 Compose 起点
• 使用 assets/examples/ui/ExpressiveButtonComparison.kt 查看标准按钮与 expressive 按钮的差异
• 使用 assets/examples/ui/ExpressiveAntiPatterns.kt 了解应避免的常见错误
• 使用 assets/examples/ux/expressive-ux-brief-template.md 起草 expressive UX 简报
• 示例仅供说明；请根据 expressive 令牌和项目约束调整尺寸/颜色。