Material3设计指南笔记

Material3设计指南笔记

Table of Contents

• 1. 颜色color

• 1.1. 颜色分类

• 1.2. 强调色accent color

• 1.3. 中性色neutral color

• 1.4. 辅助色additional color

• 1.5. 调色盘tonal palettes

• 1.6. 颜色规范

• 2. z轴高度 elevation

• 3. 图标 icon

• 4. 动画 motion

• 5. 形状 shape

• 6. 字体

1. 颜色color

1.1. 颜色分类

Material3将界面中的颜色分为强调色accent color、中性色neutral color和辅助色additional color三类。强调色用于突出显示某些界面元素，中性色用作背景颜色，辅助色用于展示错误信息。

• 强调色accent color

• 一级色primary color

• 二级色secondary color

• 三级色tertiary color

• 中性色neutral color

• 中性色neutral color

• 弱中性色neutral variant color

• 辅助色additional color

1.2. 强调色accent color

强调色用于突出显示某些界面元素。强调色包括一级色primary color、二级色secondary color和三级色tertiary color。每个强调色包含一组4个色调hue相同，亮度lightness不同的颜色。比如一级色就包含Primary、OnPrimary、PrimaryContainer、OnPrimaryContainer4个颜色。Primary通常用于悬浮按钮、按钮、选中状态、hover状态。Primary是应用的基调颜色。OnPrimary是在Primary之上的内容（比如图标、文字）颜色。PrimaryContainer用于比强调性比Primary弱的元素。OnPrimaryContainer是PrimaryContainer上内容的颜色。二级色用于强调程度低于一级色的界面元素。三级色用于平衡一、二级色，通常用于输入控件。

1.3. 中性色neutral color

表面色	透明度opacity
Surface1	5
Surface2	8
Surface3	11
Surface4	12
Surface5	14

1.4. 辅助色additional color

1.5. 调色盘tonal palettes

Material3使用HLS色彩模式，根据亮度lightness将颜色分为13个色调，用色调对应的亮度进行标记。比如primary40表示亮度为40的主色。

Listing 1: Material3的13个色调

亮度 0 10 20 30 40 50 60 70 80 90 95 99 100

1.6. 颜色规范

类别	标识	亮度	说明
一级色	Primary	Primary40
	OnPrimary	Primary100
	PrimaryContainer	Primary90
	OnPrimaryContainer	Primary10
二级色	Secondary	Secondary40
	OnSecondary	Secondary100
	SecondaryContainer	Secondary90
	OnSecondaryContainer	Secondary10
三级色	Teritary	Teritary40
	OnTeritary	Teritary100
	TeritaryContainer	Teritary90
	OnTeritaryContainer	Teritary10
中性色	Background	Neutral99
	OnBackground	Neutral10
	Surface	Neutral99
	OnSurface	Neutral10
弱中性色	SurfaceVariant	NeutralVariant90
	OnSurfaceVariant	NeutralVariant30
	Outline	NeutralVariant50
	OutlineVariant	NeutralVariant80
辅助色	Error	Error40
	OnError	Error100
	ErrorContainer	Error90
	OnErrorContainer	Error10

2. z轴高度 elevation

z轴高度用于描述多个表面surface堆叠在同一位置时的效果。每个表面和组件component都有elevation属性。

3. 图标 icon

标准图标尺寸为24dp x 24dp。额外图标尺寸有20dp x 20dp、40dp x 40dp和48dp x 48dp。

4. 动画 motion

5. 形状 shape

Material3形状分为圆角rounded和斜角cut两种风格，并按元素尺寸分为7个级别。

Table 1: Material3的7种元素尺寸级别

尺寸	corner
none	0dp
extra small	4dp
small	8dp
medium	12dp
large	16dp
extra large	28dp
full

Table 2: 组件默认样式

控件	样式
Autocomplete menu	extra small
Badge	full
Banners	none
Bottom app bars	none
Bottom sheets (docked)	extra large
Buttons	full
Cards	medium
Chips	small
Dialogs	extra large
Extended FABs	large
FABs	large
Floating sheets	extra large
Full-screen dialogs	none
Icon buttons	full
Large FABs	extra large
Lists	none
Navigation bars	none
Navigation drawers	large
Navigation rails	none
Progress indicators	none
Rich tooltip	small
Search bar	full
Search view (docked)	extra large
Search view (full-screen)	none
Select menu	extra small
Side sheets (docked)	none
Sliders	full
Small FABs	medium
Snackbars	extra small
Standard menu	extra small
Switches	full
Tabs	none
Text fields	extra small
Time input	extra large
Time picker	extra large
Top app bars	none

6. 字体

Material3将文字元素按分为5种用途：display、headline、title、label、body。每种用途又分为small、medium、large三种尺寸。因此Material3一共支持15种不同大小的字体。

Table 3: Material3字体

用途	尺寸类别	字体font	行距line height	尺寸size	字距tracking	粗细weight
Display	large	Roboto Regular	64	57	0	400
	medium	Roboto Regular	52	45	0	400
	small	Roboto Regular	44	36	0	400
Headline	large	Roboto Regular	40	32	0	400
	medium	Roboto Regular	36	28	0	400
	small	Roboto Regular	32	24	0	400
title	large	Roboto Regular	28	22	0	400
	medium	Roboto Medium	24	16	0.15	500
	small	Roboto Medium	20	14	0.1	500
label	large	Roboto Medium	20	14	0.1	500
	medium	Roboto Medium	16	12	0.5	500
	small	Roboto Medium	16	11	0.5	500
body	large	Roboto Medium	24	16	0.5	400
	medium	Roboto Regular	20	14	0.25	400
	small	Roboto Regular	16	12	0.4	400