Material Design 3 是 Google 的开源设计系统,用于构建具有美观性和可用性的产品。官网将 M3 Expressive 定位为面向情感化用户体验的设计方式,在 Material 原有设计体系上加入更鲜明的颜色、直观的动效、自适应组件、灵活的排版和具有对比度的形状。它不仅提供设计规范,也提供组件说明、Figma M3 Design Kit、入门指南、视频以及面向开发者的代码和开发文档,便于设计师制作界面方案、开发者按照 Material 体系实现产品。
核心功能
颜色系统
Material Design 3 提供颜色相关的设计内容,M3 Expressive 使用更鲜明的颜色来支持情感化用户体验。颜色内容通过 Material 官网的样式体系呈现,并与组件、排版、形状和动效共同构成产品界面的视觉基础。
动效与 Motion physics
官网提供 Motion 相关内容,并介绍由 tokens 驱动的 motion physics 系统。该系统用于实现更容易落地、也更便于定制的转场效果;相关资料还会说明 motion scheme 的工作方式以及对现有 APIs 的变化。
自适应组件
Material Design 3 包含组件文档,M3 Expressive 强调 adaptive components。官网展示了工具栏、分割按钮、进度指示器和按钮组等组件:工具栏可承载按钮等多种控件,也可以与 FAB 配合;分割按钮可将按钮与相关操作连接到菜单中;进度指示器用于实时展示流程状态,并支持调整波形和厚度;按钮组用于组织相关按钮,并加入会改变形状、彼此响应的交互方式。
排版与形状
M3 Expressive 提供灵活的 typography 与 contrasting shapes。官网还介绍了包含 35 种形状的新形状库,这些形状可用于添加装饰性视觉元素,并内置 shape morph motion,使形状变化可以与动效结合。
Figma 设计套件
Material 提供 Figma M3 Design Kit,用于快速创建设计 mockup 和 prototype。该套件包含最新的 Material 3 Expressive 组件和样式,也提供可自定义的样式与组件,设计人员可以用它进行 Material 3 界面设计。
设计与开发资料
官网提供 Get started、Material Design blog 和 Develop 等内容入口。入门区域包含指南、视频和工具;开发区域提供使用 Material 构建产品所需的代码和开发者文档;博客则发布 Material 团队的更新、教程和灵感内容。
使用方式
官网支持通过 Web 页面阅读 Material 的设计规范、组件说明、样式内容和博客文章,并可从 Get started 获取指南、视频和工具。设计人员可以使用 Figma M3 Design Kit 创建 mockup 与 prototype;开发者可进入 Develop 查看代码和开发者文档。页面还提供关于现有 APIs 变化的说明,但给定正文没有说明需要注册账号、自备模型 Key 或使用独立 API 服务。
适用人群与场景
产品设计师可以使用颜色、排版、形状、动效和组件规范制作 Material 3 界面方案,并借助 Figma 设计套件创建 mockup 与 prototype。前端或应用开发者可以参考代码和开发者文档,在产品中实现 Material 组件与交互。需要构建更具情感化用户体验的产品团队,可以使用 M3 Expressive 的颜色、动效、自适应组件、排版和形状设计方式;正在迁移到 Compose 的 Material Android 开发者,也可以参考官网关于 Compose-first 的内容获取更新信息。