Material3设计规范:色彩系统(Color system)

2025年11月15日
Material Design
Material Design
谷歌的开源设计系统,用于构建美观、易用的产品
已累计原创 12 篇文章查看全部

创建可访问、个性化的配色方案,用颜色表达产品的层级、状态与品牌属性。


一. 概述

Material 色彩系统包含:

  • 内置的可访问性色彩关系
  • 超过 26 种映射到组件的颜色角色(color roles)
  • 内置深色主题配色
  • 静态的基准色彩方案,为每个颜色角色提供默认色值
  • 动态色彩功能,包括用户生成色与基于内容的色彩

如果你的产品正从 M2 迁移到 M3,建议先将 基准色彩方案(baseline color scheme) 映射到现有产品中,之后便可随时切换为动态取色。

了解 Material 3 动态色彩系统的价值、作用,以及它与以往色彩系统的差异。



支持动态色彩的产品可以自动生成并分配 UI 所需的颜色。这将带来:

  • 个性化 UI(Personalized UI)
  • 可访问的对比度(Accessible contrast)
  • 用户可控对比度(User-controlled contrast)
  • 自动深色模式(Automatic dark theme)
UI 颜色会根据输入动态变化。





1. 最新更新

2024 年 8 月

文字与图标的颜色更鲜明

以下颜色角色在浅色主题中进行了更新,更加鲜明但仍保持可访问的对比度:

  • On primary container
  • On secondary container
  • On tertiary container
  • On error container

受影响的组件包括:

  • Badges
  • Bottom app bar
  • Buttons / Extended FAB / FAB
  • Icon buttons
  • Segmented buttons
  • Chips
  • Lists
  • Menus
  • Navigation bar / drawer / rail
  • Switches

文字与图标的颜色现在更加鲜明、饱满。


2023 年 10 月

指南框架已重新组织

使用同一套色彩系统,但以新的方式进行说明。更新的章节包括:

  • 系统如何工作
  • 高级自定义
  • 色彩资源(Color resources)

指南内容已重新组织与更新


2023 年 2 月

基于色阶(tone-based)的表面颜色

基于色阶的表面色替代了以往基于海拔层级(+1 ~ +5 elevation)的方式。新的颜色角色不再与海拔关联,在色彩灵活性与用户可控对比度方面具有更高的适配性。

新的基于色阶(tone-based)的表面颜色提供了更高的灵活性和更强的支持能力

为了与 Android 系统界面一致,进行了以下技术调整:

  • 将浅色主题的默认表面色从 tone 99 调整为 tone 98
  • 中性调色板(neutral palette)的色度从 4 提升到 6
  • 深色主题的表面颜色略微变深

浅色主题默认表面色在色阶与色度上有所变化

2023 年 2 月

新增强调色(accent colors)

新增的强调色组带来更多色彩组合的自由度。

Primary / Secondary / Tertiary 强调色组新增的固定色(Fixed)在浅色与深色主题中保持一致,不会变化。

新增的强调色组为配色提供更多可选方案


二. 系统如何运作

1. 就像数字填色一样

想象一下,你的产品界面就像一张数字填色画布,界面中的每个元素都有一个对应的编号,而每个编号都会被分配特定的一种颜色。在「X 光视图」中,每个界面元素不显示颜色,而是显示编号。

会员文章
开通美叶 Pro会员,即可阅读此篇文章的全部内容,同时可阅读全站会员文章

0 人收藏了本文

Material3设计规范:开关(Switch)Material3设计规范:开关(Switch)
Material3设计规范:标签页(Tabs)Material3设计规范:标签页(Tabs)
Material3设计规范:工具提示(Tooltips)Material3设计规范:工具提示(Tooltips)
Material3设计规范:缓动与动效时长(Easing and duration)Material3设计规范:缓动与动效时长(Easing and duration)
Material3设计规范:高度层级(Elevation)Material3设计规范:高度层级(Elevation)
Material3设计规范:动效系统(Motion physics system)Material3设计规范:动效系统(Motion physics system)
Apple HIG:标签栏(Tab bars)Apple HIG:标签栏(Tab bars)
Material3设计规范:颜色角色(Color roles)Material3设计规范:颜色角色(Color roles)