Material Design 3

Material Design 3 是 Google 的开放设计系统，覆盖颜色、排版、形状、动效、布局和组件。当前官网重点展示 M3 Expressive，强调更鲜明的颜色、灵活排版、对比形状和基于 token 的运动，并提供 Figma M3 Design Kit。它是一套跨平台规范与工具，不是一个可直接安装到所有项目的单一组件包。

先从基础层建立 Token

Expressive 需要与品牌强度匹配

高对比形状、弹性动效和鲜明颜色能增强情绪，也可能干扰工具型产品。为营销页、消费应用和高频工作台分别设定表达强度；关键任务优先保证信息和操作稳定，再把形状变化与运动用于层级和反馈。

动态配色仍要保留品牌与可读性

颜色系统可从种子色生成角色，但最终必须验证正文、按钮、容器、禁用和错误状态。用户壁纸或系统主题带来的动态变化不能破坏品牌识别和合规色；图表、插画与第三方内容也要适应不同表面。

组件规范需要映射到平台实现

Button、Navigation、Dialog、Toolbar、Progress 等规范说明用途与行为，真正代码由 Android、Flutter、Web 或团队框架分别实现。不要把 Figma 组件名称直接当作代码 API；建立设计 token、组件属性和平台组件之间的映射表。

Shape 与 Motion 必须服务状态

• 形状变化表达选中、容器关系或强调；
• 转场说明元素从哪里来、到哪里去；
• 动画关闭后信息层级仍然成立；
• 减少动态偏好下替换大幅位移与形变；
• 中低端设备保持响应速度。

Figma Kit 是协作起点

使用官方 Design Kit 建立组件和变量，可减少设计稿与规范偏差，但应复制到团队库后锁定版本、添加品牌 token 和业务变体。升级前比较变量、组件结构和已发布稿件，避免新 Kit 覆盖本地扩展。

Material 不是必须照搬的视觉皮肤

采用 Material 的可访问模式、布局和状态逻辑，不代表产品必须看起来像 Google 应用。保留品牌字体、内容语气和适当形状，同时用用户测试、可访问性和平台习惯验证；设计系统的价值在一致决策，而非机械套用外观。