expressive-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Material 3 Expressive Design System

Material 3 Expressive 设计系统

Material 3 Expressive (M3E) is Google's most researched design system update, based on 46 studies with 18,000+ participants. It creates emotionally engaging user experiences through strategic use of color, shape, size, motion, and containment.

Material 3 Expressive（M3E）是谷歌经过最深入研究的设计系统更新版本，基于46项研究、18000多名参与者的反馈打造。它通过策略性地运用色彩、形状、尺寸、动效和布局容器，创造出具有情感吸引力的用户体验。

Quick Reference

快速参考

Category	Reference	Description
Foundations	FOUNDATIONS.md	Research, principles, core elements
Color	COLOR.md	Tokens, palettes, contrast specs
Typography	TYPOGRAPHY.md	Scales, values, treatments
Motion	MOTION.md	Durations, easing, transitions
Shapes	SHAPES.md	Radii, tokens, containment
Spacing	SPACING.md	Spacing ramps, touch targets
Components	COMPONENTS.md	Component specifications
Migration	MIGRATION.md	M3 to M3E migration guide
Accessibility	ACCESSIBILITY.md	Compliance, testing
Platforms	PLATFORMS.md	Android and Linux desktop

分类	参考文档	描述
基础部分	FOUNDATIONS.md	研究成果、设计原则、核心元素
色彩	COLOR.md	颜色标记、调色板、对比度规范
排版	TYPOGRAPHY.md	比例、数值、样式处理
动效	MOTION.md	时长、缓动效果、过渡动画
形状	SHAPES.md	圆角半径、形状标记、布局容器
间距	SPACING.md	间距梯度、触摸目标区域
组件	COMPONENTS.md	组件规范
迁移指南	MIGRATION.md	从M3迁移至M3E的指南
无障碍访问	ACCESSIBILITY.md	合规性、测试方法
平台适配	PLATFORMS.md	Android和Linux桌面平台适配

Core Expressive Elements

核心 expressive 元素

Color - Expanded tonal palettes, container tiers, emotional selection
Shape - Expressive radii, containment, visual boundaries
Size - Larger touch targets, visual hierarchy
Motion - Energetic transitions, emotional timing
Containment - Surface elevation, tonal separation

色彩 - 扩展的色调调色板、容器层级、情感化色彩选择
形状 - 富有表现力的圆角、布局容器、视觉边界
尺寸 - 更大的触摸目标区域、视觉层级
动效 - 充满活力的过渡动画、情感化时长设置
布局容器 - 表面层级、色调区分

When to Use M3 Expressive

何时使用 M3 Expressive

Media and entertainment applications
Communication apps (email, messaging)
Social platforms
Creative tools
Consumer-facing products

媒体与娱乐应用
通讯应用（邮件、即时消息）
社交平台
创意工具
面向消费者的产品

When to Avoid M3 Expressive

何时避免使用 M3 Expressive

Banking and financial applications
Safety-critical interfaces
Healthcare and medical software
Productivity tools requiring efficiency
Forms-heavy applications

银行与金融应用
安全关键型界面
医疗健康软件
注重效率的生产力工具
表单密集型应用

Platform Support

平台支持

Android - Dynamic color, Android 16 integration, native behaviors
Linux Desktop - Keyboard navigation, focus management, desktop interactions

Android - 动态色彩、Android 16集成、原生行为适配
Linux 桌面 - 键盘导航、焦点管理、桌面交互适配

Key Research Findings

核心研究发现

87% preference among 18-24 age group
4x faster element recognition
32% increase in subculture perception
34% boost in modernity
Erases age-related usability gaps

18-24岁年龄段用户中87%偏好该设计系统
元素识别速度提升4倍
亚文化感知度提升32%
现代感提升34%
消除了与年龄相关的易用性差距

Flutter Integration

Flutter 集成

Use the m3e_design package for M3 Expressive implementation:

yaml

dependencies:
  m3e_design: ^0.2.1
  dynamic_color: ^1.8.1

使用m3e_design包来实现M3 Expressive：

yaml

dependencies:
  m3e_design: ^0.2.1
  dynamic_color: ^1.8.1

Next Steps

后续步骤

Review FOUNDATIONS.md for core principles
Apply color system from COLOR.md
Implement typography from TYPOGRAPHY.md
Add motion from MOTION.md
Apply shapes from SHAPES.md
Configure spacing from SPACING.md
Implement components from COMPONENTS.md
Migrate existing M3 from MIGRATION.md
Ensure accessibility with ACCESSIBILITY.md
Configure platform-specifics from PLATFORMS.md

查看FOUNDATIONS.md了解核心设计原则
应用COLOR.md中的色彩系统
实现TYPOGRAPHY.md中的排版规范
添加MOTION.md中的动效
应用SHAPES.md中的形状设计
配置SPACING.md中的间距设置
实现COMPONENTS.md中的组件
根据MIGRATION.md迁移现有M3项目
依据ACCESSIBILITY.md确保无障碍访问性
根据PLATFORMS.md配置平台特定适配