material-3-expressive

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Material 3 Expressive (Android UI/UX)

Material 3 Expressive（Android UI/UX）

Overview

概述

Design and review Android UI/UX using Material 3 Expressive. Prioritize component-token requests for dialogs, sheets, modals, toolbars, and buttons, with guidance plus token references by default.

使用Material 3 Expressive进行Android UI/UX的设计与评审。默认优先处理对话框、底部弹窗、模态框、工具栏和按钮的组件token请求，并提供规范及token参考。

Intake Questions

需求收集问题

Target device class (phone, tablet, foldable, Wear OS)
Window size class (Compact, Medium, Expanded)
Brand constraints and dynamic color usage
Primary action(s) and desired hero moments (1-2 max)
Motion constraints and reduced-motion expectations
Accessibility targets (contrast, touch target)

目标设备类型（手机、平板、折叠屏、Wear OS设备）
窗口尺寸类别（紧凑、中等、扩展）
品牌约束与动态色彩使用情况
主要操作与期望的核心视觉焦点（最多1-2个）
动效约束与简化动效的需求
无障碍目标（对比度、触摸目标）

Default Assumptions

默认假设

Intensity level: Foundational
Window size class: Compact
Dynamic color: enabled
Standard navigation patterns preserved

表现力强度：基础级
窗口尺寸类别：紧凑
动态色彩：已启用
保留标准导航模式

Quick Workflow

快速工作流程

Confirm intensity level + hero moments
Confirm device class + window size class
Load Tier 1 index and output template
Load component overview + token spec files
If theming needed, load Tier 3 foundation tokens
Output: guidance + token refs (see template)

确认表现力强度与核心视觉焦点
确认设备类型与窗口尺寸类别
加载一级索引并输出模板
加载组件概述与token规范文件
若需主题定制，加载三级基础token
输出：规范说明 + token参考（见模板）

Default Output Format (Guidance + Token Refs)

默认输出格式（规范说明 + token参考）

Use

references/m3-component-token-output-template.md

verbatim as the base output shell.

Context and intent (1-2 lines)
Intensity level + hero moments (count + location)
Window size class + device class
Component + variant
Token references: file paths + token groups to use (quote minimal key values only if needed)
Compose mapping reference (optional):
```
references/compose-mapping.md
```
Behavior or interaction constraints (from overview)
Reduced-motion fallback note
Accessibility and performance checks
Optional: Compose mapping notes

直接使用

references/m3-component-token-output-template.md

作为输出的基础框架。

背景与意图（1-2行）
表现力强度 + 核心视觉焦点（数量 + 位置）
窗口尺寸类别 + 设备类型
组件 + 变体
Token参考：文件路径 + 需使用的token组（仅必要时引用最小键值）
Compose映射参考（可选）：
```
references/compose-mapping.md
```
行为或交互约束（来自组件概述）
简化动效回退说明
无障碍与性能检查
可选：Compose映射说明

Expressive Tactics

表现力策略

Lever	Application
Shape contrast	Bold corners on primary, subtle on secondary
Rich color	Primary/secondary containers for emphasis
Type hierarchy	Size + weight variation
Motion	Shape morph on press/select

Constraint: Max 1-2 hero moments per flow

手段	应用方式
形状对比	主元素使用圆角，次要元素使用细微圆角
丰富色彩	使用主/次要容器色强调重点
排版层级	尺寸 + 字重变化
动效	按压/选择时的形状变形

约束： 每个流程最多1-2个核心视觉焦点

Expressive Intensity Levels

表现力强度等级

Foundational: Clarity and familiarity first
Excellent: Stronger color, type, and shape while preserving patterns
Transformative: Bold layouts and motion with strict usability and accessibility

基础级： 优先保证清晰性与熟悉度
优秀级： 强化色彩、排版与形状，同时保留现有模式
变革级： 大胆的布局与动效，同时严格遵循可用性与无障碍要求

Common Mistakes

常见错误

Mistake	Fix
Removing text labels for "cleaner" look	Keep labels; usability drops without them
Too many hero moments per screen	Limit to 1-2 per flow
Breaking navigation patterns	Preserve standard nav behaviors
No reduced-motion fallback	Honor system animation scale; provide reduced-motion or instant transitions when animation scale is 0
Hardcoding token values	Use semantic tokens ( `md.sys.color.*` )
Ignoring window size classes	Test Compact, Medium, Expanded

错误	修复方案
为了“更简洁”而移除文本标签	保留标签；无标签会导致可用性下降
单屏核心视觉焦点过多	每个流程限制为1-2个
打破导航模式	保留标准导航行为
未提供简化动效回退方案	遵循系统动画缩放比例；当动画缩放为0时，提供简化动效或即时过渡
硬编码token值	使用语义化token（ `md.sys.color.*` ）
忽略窗口尺寸类别	测试紧凑、中等、扩展三种尺寸

Android-Specific Guidance

Android专属规范

Preserve navigation and component behaviors
Keep touch targets generous and platform-consistent
Honor system animation scale; provide reduced-motion alternatives or instant transitions when animation scale is 0
Apply window size classes for tablets and foldables

保留导航与组件行为
保持触摸目标的尺寸足够大且符合平台一致性
遵循系统动画缩放比例；当动画缩放为0时，提供简化动效替代方案或即时过渡
针对平板与折叠屏应用窗口尺寸类别

Review Checklist

评审检查清单

Hierarchy

层级

Primary action identifiable within 2 seconds
Max 1-2 hero moments per screen
Labels preserved on all interactive elements

主操作可在2秒内识别
单屏最多1-2个核心视觉焦点
所有交互元素保留标签

Accessibility

无障碍

Color contrast: 4.5:1 text, 3:1 non-text
Touch targets: 48dp minimum
Motion: reduced-motion alternative provided
Screen reader: content descriptions present

色彩对比度：文本4.5:1，非文本3:1
触摸目标：最小48dp
动效：提供简化动效替代方案
屏幕阅读器：提供内容描述

Expressive Compliance

表现力合规性

Intensity level consistent across feature
Standard patterns preserved
Dynamic color tokens used
Window size classes tested

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

Reference Tiers (Load in Order of Need)

参考层级（按需求顺序加载）

Tier 1: Always Load First

一级：优先加载

Need	File
Component token lookup	`references/m3-expressive-specs-tokens-index.md`
Output format template	`references/m3-component-token-output-template.md`
New/updated components	`references/m3-expressive-components.md`

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

Tier 2: Component-Specific (Load When Requested)

二级：组件专属（按需加载）

Component	Overview	Tokens
Buttons	`m3-buttons.md`	`m3-buttons-specs-tokens.md`
Button Groups	`m3-button-groups.md`	`m3-button-groups-specs-tokens.md`
Dialogs	`m3-dialogs.md`	`m3-dialogs-specs-tokens.md`
Sheets	`m3-sheets.md`	`m3-bottom-sheets-specs-tokens.md` / `m3-side-sheets-specs-tokens.md`
Toolbars	`m3-toolbars.md`	`m3-toolbars-specs-tokens.md`
FABs	`m3-fabs.md`	`m3-fabs-specs-tokens.md`
Extended FAB	`m3-extended-fab.md`	`m3-extended-fab-specs-tokens.md`
FAB Menu	`m3-fab-menu.md`	`m3-fab-menu-specs-tokens.md`
Icon Buttons	`m3-icon-buttons.md`	`m3-icon-buttons-specs-tokens.md`
Split Button	`m3-split-button.md`	`m3-split-button-specs-tokens.md`
Navigation Bar	`m3-navigation-bar.md`	`m3-navigation-bar-specs-tokens.md`
Navigation Rail	`m3-navigation-rail.md`	`m3-navigation-rail-specs-tokens.md`
App Bars	`m3-app-bars.md`	`m3-app-bars-specs-tokens.md`
Carousel	`m3-carousel.md`	`m3-carousel-specs-tokens.md`
Progress Indicators	`m3-progress-indicators.md`	`m3-progress-indicators-specs-tokens.md`
Loading Indicator	`m3-loading-indicator.md`	`m3-loading-indicator-specs-tokens.md`

组件	概述	Tokens
按钮	`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`
扩展悬浮按钮	`m3-extended-fab.md`	`m3-extended-fab-specs-tokens.md`
悬浮按钮菜单	`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`

Tier 3: Foundation Tokens (Load for Theming)

三级：基础Token（主题定制时加载）

Foundation	File
Color system	`m3-color-system.md` , `m3-color-foundation-tokens.md`
Typography	`m3-typography.md` , `m3-typography-foundation-tokens.md` , `m3-typography-fonts.md` , `m3-typography-type-scale-tokens.md`
Shape	`m3-shape.md` , `m3-shape-foundation-tokens.md` , `m3-shape-corner-radius-scale.md` , `m3-shape-morph.md`
Motion	`m3-motion-physics.md` , `m3-motion-foundation-tokens.md` , `m3-motion-specs.md`
Elevation	`m3-elevation.md` , `m3-elevation-specs-tokens.md`
State	`m3-state-foundation-tokens.md`

基础模块	文件
色彩系统	`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`
层级 elevation	`m3-elevation.md` , `m3-elevation-specs-tokens.md`
状态	`m3-state-foundation-tokens.md`

Tier 4: Evidence & Research (Load for Justification)

四级：依据与研究（用于论证时加载）

Resource	File
Research findings	`references/expressive-research.md`
Testing guidance	`references/m3-testing-material-3.md`
Expressive blog	`references/m3-expressive-blog.md`
Expressive guidelines	`references/m3-expressive-guidelines.md`
UX article	`references/medium-ux-article.md`

资源	文件
研究成果	`references/expressive-research.md`
测试规范	`references/m3-testing-material-3.md`
表现力博客	`references/m3-expressive-blog.md`
表现力指南	`references/m3-expressive-guidelines.md`
UX文章	`references/medium-ux-article.md`

Tier 5: Wear OS (Load Only for Wearables)

五级：Wear OS（仅穿戴设备使用）

Resource	File
Benefits	`references/wear-expressive-benefits.md`
Levels of expression	`references/wear-levels-of-expression.md`
Design language	`references/wear-expressive-design-language.md`
Blog	`references/wear-expressive-blog.md`
Compose Material3	`references/wear-compose-material3.md`

资源	文件
优势	`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`

Supporting Resources

支持资源

Resource	File
Android UI design hub	`references/android-ui-design-hub.md`
Expressive catalog	`references/expressive-catalog.md`
Compose mapping	`references/compose-mapping.md`

资源	文件
Android UI设计中心	`references/android-ui-design-hub.md`
表现力组件库	`references/expressive-catalog.md`
Compose映射	`references/compose-mapping.md`

Maintenance

维护

Refresh references with

skills/material-3-expressive/scripts/update_m3_expressive_refs.py

Requires Playwright and Chromium (

.venv/bin/python -m playwright install chromium

if needed).

CI runs weekly; local runs are for urgent changes.

使用

skills/material-3-expressive/scripts/update_m3_expressive_refs.py

更新参考内容。

需要Playwright和Chromium（若需安装，执行
```
.venv/bin/python -m playwright install chromium
```
）。
CI每周运行一次；本地运行仅用于紧急变更。

Search Tips

搜索技巧

Find a token prefix:

rg "md.comp.button" skills/material-3-expressive/references/m3-buttons-specs-tokens.md

Find navigation tokens:

rg "md.comp.navigation" skills/material-3-expressive/references/m3-.*navigation.*.md

查找token前缀：

rg "md.comp.button" skills/material-3-expressive/references/m3-buttons-specs-tokens.md

查找导航token：

rg "md.comp.navigation" skills/material-3-expressive/references/m3-.*navigation.*.md

Examples

示例

Use

assets/examples/ui/ExpressiveHomeScreen.kt

as a Compose starting point

Use
```
assets/examples/ui/ExpressiveButtonComparison.kt
```
to see standard vs expressive button differences

Use

assets/examples/ui/ExpressiveAntiPatterns.kt

to learn common mistakes to avoid

Use

assets/examples/ux/expressive-ux-brief-template.md

to draft an expressive UX brief

Examples are illustrative; adapt sizes/colors to expressive tokens and project constraints.

使用

assets/examples/ui/ExpressiveHomeScreen.kt

作为Compose起始模板

使用
```
assets/examples/ui/ExpressiveButtonComparison.kt
```
查看标准按钮与表现力按钮的差异

使用

assets/examples/ui/ExpressiveAntiPatterns.kt

学习需避免的常见错误

使用

assets/examples/ux/expressive-ux-brief-template.md

起草表现力UX brief

示例仅作参考；需根据表现力token和项目约束调整尺寸/色彩。