深圳网站快速优化公司温州网站建设团队
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 |