设计者可以根据定制需求，通过颜色、版式以及形状来对对主题进行定制。另外，官方还提供了五种样式的图标。

The following techniques can be used to customize and apply color, typography, and shape. Iconography is provided with five unique sets to choose from.

颜色

配色系统根据 UI 场景中的组件、文本、图标以及页面，提供了 12 类颜色。

The color system supports 12 categories of color that can be applied to components, text, icons, and surfaces.

1. 主色
2. 主色变形
3. 辅色
4. 辅色变形
5. 背景色
6. 表色
7. 报错颜色
8. “On” 主色
9. “On” 辅色
10. “On” 背景色
11. “On” 表色

12. “On” 报错颜色

13. Primary
    2. Primary Variant
    3. Secondary
    4. Secondary Variant
    5. Background
    6. Surface
    7. Error
    8. On Primary
    9. On Secondary
    10. On Background
    11. On Surface
    12. On Error

颜色主题

在 Material Theming 中创建颜色主题之前，首先要挑选合适的颜色。

可以通过几种方式进行配色：

• Apply colors generated with the Material Theme Editor across your stickersheet
• Generate colors with the inline tool in the Color section
• Select colors from the Material Palettes’ harmonious colors schemes

To use Material Theming with color, start by choosing suitable colors to apply to your UI.
Color can be selected in several ways:

• Generate colors with the inline tool in the Color section
• Select colors from the Material Palettes’ harmonious colors schemes

主色与辅色

主色与辅色一般不会大面积应用在 UI 设计中，通常以点缀的方式来突出品牌特色。

主色一般应用在应用栏或者按钮上，而辅色则用在 FAB 或 选择空间上。

作为，通过主色或辅色进行变形，获得的变体可以对其进行补充。

Primary and secondary colors are applied sparingly to strategic parts of your UI. They are typically chosen for their ability to represent your brand.

Primary colors map to components and elements, like app bars and buttons. Secondary colors are most often used as accents on components, such as FABS and selection controls.

Finally, color variants can also be used to complement and provide accessible options for your primary and secondary colors.

背景颜色、组件底色以及报错颜色

背景颜色、组件底色以及报错颜色通常跟品牌特点无关。

这三种颜色主要用于以下场景：

• 背景颜色，作为当前场景的背景色
• 组件底色，通常作为卡片、表格以及菜单等组件的底色
• 报错颜色，用于提示用户组件中出现了错误。

Surface, background, and error colors typically don’t represent brand.

In general, they occupy the following areas of the UI:

• Surface colors map to components such as cards, sheets, and menus
• Background color is found behind scrollable content
• Error color indicates errors in components, such as text fields

“对比色”

为了让元素清晰可见，我们需要设置“对比色”。

例如，我们在主色上放置其它的颜色时，需要考虑该颜色是否能够在主色上方清晰可见，那么这个被选出的颜色就被成为“对比色”。

以此类推，除了主色之外，辅色、组件底色、背景色以及报错颜色都需要考虑设置一个“对比色”。

我们通过给这些颜色加一个 “On” 的前缀，来进行区分，这些颜色主要应用与文本或图标（有时，它们也会应用于表面）。

The elements in an app use colors from specific categories in your color palette, such as a primary color. Whenever other screen elements, such as text or icons, appear in front of surfaces using those colors, those elements should use colors specifically designed to appear clearly and legibly against the colors behind them.

This category of colors is called “on” colors, referring to the fact that they color elements that are sometimes placed “on” top of key surfaces that use a primary color, secondary color, surface color, background color, or error color. These are labelled using the original category name (such as primary color) with the prefix “on”.

“On” colors are primarily applied to text, iconography, and strokes. Sometimes, they are also applied to surfaces.

“On” color 的命名方式

The colors in the “on” category are applied to text and icons (and sometimes surfaces) that appear in front of areas colored using: a primary color, secondary color, surface color, background color, or error color.

版式

版式系统为根据文本的层级，设置了 13 个类型的字号。设计者可以根据定制需求从中选取字体类型来组成版式主题。

版式设计会应用在 UI 设计中的各个地方，类型的属性主要包括以下几点：

• 字体
• 字号
• 字重
• 大小写
• 字距、行距以及行高
• 等等

The type system supports 13 categories that, when combined, form the typescale. This typescale is evident in the variety of text styles and sizes that appear on screen, ranging from body copy to buttons. Type appears across the UI, in places such as in components and on surfaces.

Type attributes are controlled by values that can be customized for the type family, font, case, size, and tracking.

字体主题

字体的定制化与应用

选择字体的方法:

• 使用 “Material Theme Editor” 来进行设计

• 在 Google Fonts 中选择合适的字体

There are multiple ways to choose typography:

• Use our type scale generator to select styles for headline and body text, and see them automatically resized and optimized for readability. Then copy the code for your platform.
• Pick a typeface from Google Fonts that reflects your product.

标题

标题（Headlines 1-6）是版设中字号最大的层级。

标题主要用于简短重要的文本。

Headlines 1-6 are the largest sizes in the typescale. They are reserved for short, but impactful, moments of text. They are also used for numerals.

副标题（Subtitles 1-2）的字号仅次于标题。

副标题在强调某些文本时，其优先级仅次于标题，一般作为标题的补充说明。

Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text used in shorter text strings.

正文以及字号更小的文本类型

正文（Body 1-2）用于书写长文本。

Body text 1-2 is typically used for longform writing. It should be optimized for small text sizes.

标注文字（OVERLINE）或者说明文字（Caption）是字号最小的字体类型。通常用于对图像进行或者对标题进行说明。

Caption and overline text are the smallest font sizes. They are used sparingly to annotate imagery or to provide a brief introduction to a headline.

按钮文本。

Button text is typically used in text buttons, outlined buttons, and contained buttons.

形状

形状系统当前支持两种类型的形状：

• 圆角
• 规范的裁剪

设计者可以根据定制需求对组件（例如卡片）角进行自定义。

The shape system currently supports two types of shapes that can be applied to component corners to suit your brand and app: rounded shapes and cut shapes.

• Rounded shapes have curved corners
• Cut shapes have angled corners

These shapes can be applied to corners of a component, to create either a symmetrical (all corners use the same shape) or asymmetrical effect (not every corner uses the same shape). Corners can customize their size and shape type.

1. Rounded (0dp), 2. Rounded (4dp), 3. Rounded (16dp), 4. Rounded (24dp)

The height of the shapes in images 1-3 is 36dp.
The height of the shape in image 4 is 64dp.

1. Cut (0dp), 2. Cut (2dp), 3. Cut (8dp), 3. Cut (12dp)

The height of the shape in images 1-3 is 36dp.
The height of the shape in image 4 is 64dp.

形状主题

如何选择形状类型：

• 根据规范 inline tool (in the Shape section) 进行创建
• 通过 Material Theme Editor 应用到 Material Design 中

Play with the shapes of small, medium, and large components using the shape customization tool.

类别与继承

在组件中对形状需要进行统一设计，保证形状的风格一致。

Components are grouped into categories based on their size. Changes made to a category’s values (rather than a specific component) are applied to all components in that category.
Changes made to a specific component’s values override values inherited from that shape’s category, enabling individual components to use different shapes than the category’s values.

圆角

4 dp 的圆角设计，被广泛地应用于 “Material Theme” 组件（卡片、菜单、提示框、对话框以及按钮等组件）的基本样式中。

Components such as cards, menus, snackbars, tooltips, dialogs, and buttons all use 4dp rounded corners as part of the baseline Material theme.

1. Zoomed at 2000%,2. Zoomed at 400%

圆角的最大值对应组件基线半径，例如 药丸形状的纸片与 FAB 组件。

1. Zoomed at 2000%, 2. Zoomed at 400%

1. Zoomed at 1200%, 2. Zoomed at 400%

矩形

矩形组件的圆角值为 0 dp。

Components with square shapes have 0dp rounded corners in the baseline Material theme, such as full-screen bottom sheets with square, or 90-degree angle, corners.

Cut 0dp corners and rounded 0dp corners are the same square shape and can be used interchangeably.

1. Zoomed at 2000%, 2. Zoomed at 400%

裁剪形状

对矩形组件的圆角位置进行裁剪（45°）。

Component corners can be straight cut shapes which are always at a 45-degree angle. These corners can be different lengths, measured from the 0dp rounded corner, going along the outline of the shape.

1. Zoomed at 2000%, 2. Zoomed at 400%

对于卡片来说，表面积足够大时，对应的裁剪切口可以更大，而小的按钮则需要较小的切口。
设计者可以根据自己的品牌特色以及组件的清晰度来对组件进行操作。

For example, larger surfaces like cards can have larger cuts, while buttons can have smaller cuts. Determine the best size for each component by considering your brand, component size, and amount of legible area required.

1. Large cut zoomed at 2000%, 2. Small cut zoomed at 2000%

图标

1. 实底
2. 棱角
3. 圆角
4. 线框
5. 双色

1. Filled
2. Sharp
3. Rounded
4. Outlined
5. Two-Tone

除了 “Material Design” 的基础样式：实底图标之外，还提供了四种变形。
在同一个场景中，图标风格需要保持一致。

In addition to the original filled Material Design Icons, four additional icon themes are available. Each icon set should be used consistently across an app to maintain visual consistency, without mixing multiple icon sets in a single UI.

主题

五种常见的图标主题：

1. 实底图标
2. 棱角图标
3. 圆角图标
4. 线框图标
5. 双色图标

Select an icon set from five different themes:

• Filled icons
• Sharp icons
• Rounded icons
• Outlined icons
• Two-tone icons

类型

实底图标

实底图标是 “Material Design” 的基础样式。

The filled icon set is the original set of Material icons.

实底图标示例

棱角图标

去掉实底图标的圆角即为棱角图标。

棱角图标示例

圆角图标

除了与实底图标共用圆角（2 dp）之外，内角、拐角等其它位置也会额外设置 1 dp 的圆角半径。

圆角图标示例

线框图标

线框图标通过对实底图标进行简化，减轻了给用户带来的视觉重量。

线框图标与实底图标可以组合使用来展示组件的两种状态。

The outlined icon set eliminates a majority of fills, converting most icons to 2dp strokes, reducing their visual weight. These can also be used to represent state, such as combining them with filled icons to show a selected state.

线框图标

双色图标

在实底图标的基础上对部分区域进行半透明处理。

The two-tone icon set uses the same color at varying opacities for the stroke and fill.

1. Grid structure
   2. Two-Tone set samples