Back to Details

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

快速参考

CategoryReferenceDescription
FoundationsFOUNDATIONS.mdResearch, principles, core elements
ColorCOLOR.mdTokens, palettes, contrast specs
TypographyTYPOGRAPHY.mdScales, values, treatments
MotionMOTION.mdDurations, easing, transitions
ShapesSHAPES.mdRadii, tokens, containment
SpacingSPACING.mdSpacing ramps, touch targets
ComponentsCOMPONENTS.mdComponent specifications
MigrationMIGRATION.mdM3 to M3E migration guide
AccessibilityACCESSIBILITY.mdCompliance, testing
PlatformsPLATFORMS.mdAndroid and Linux desktop
分类参考文档描述
基础部分FOUNDATIONS.md研究成果、设计原则、核心元素
色彩COLOR.md颜色标记、调色板、对比度规范
排版TYPOGRAPHY.md比例、数值、样式处理
动效MOTION.md时长、缓动效果、过渡动画
形状SHAPES.md圆角半径、形状标记、布局容器
间距SPACING.md间距梯度、触摸目标区域
组件COMPONENTS.md组件规范
迁移指南MIGRATION.md从M3迁移至M3E的指南
无障碍访问ACCESSIBILITY.md合规性、测试方法
平台适配PLATFORMS.mdAndroid和Linux桌面平台适配

Core Expressive Elements

核心 expressive 元素

  1. Color - Expanded tonal palettes, container tiers, emotional selection
  2. Shape - Expressive radii, containment, visual boundaries
  3. Size - Larger touch targets, visual hierarchy
  4. Motion - Energetic transitions, emotional timing
  5. Containment - Surface elevation, tonal separation
  1. 色彩 - 扩展的色调调色板、容器层级、情感化色彩选择
  2. 形状 - 富有表现力的圆角、布局容器、视觉边界
  3. 尺寸 - 更大的触摸目标区域、视觉层级
  4. 动效 - 充满活力的过渡动画、情感化时长设置
  5. 布局容器 - 表面层级、色调区分

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

后续步骤

  1. Review FOUNDATIONS.md for core principles
  2. Apply color system from COLOR.md
  3. Implement typography from TYPOGRAPHY.md
  4. Add motion from MOTION.md
  5. Apply shapes from SHAPES.md
  6. Configure spacing from SPACING.md
  7. Implement components from COMPONENTS.md
  8. Migrate existing M3 from MIGRATION.md
  9. Ensure accessibility with ACCESSIBILITY.md
  10. Configure platform-specifics from PLATFORMS.md
  1. 查看FOUNDATIONS.md了解核心设计原则
  2. 应用COLOR.md中的色彩系统
  3. 实现TYPOGRAPHY.md中的排版规范
  4. 添加MOTION.md中的动效
  5. 应用SHAPES.md中的形状设计
  6. 配置SPACING.md中的间距设置
  7. 实现COMPONENTS.md中的组件
  8. 根据MIGRATION.md迁移现有M3项目
  9. 依据ACCESSIBILITY.md确保无障碍访问性
  10. 根据PLATFORMS.md配置平台特定适配