结构

UI 区域

为元素在 Z 轴空间的排列提供指导，以使其拥有正确的行为和阴影，见环境和海拔高度和阴影章节。

手机端结构

此结构中包含一个固定的应用栏和浮动操作按钮。可以添加一个可选的底栏，用于放置额外的功能或弹出操作。侧边栏会遮盖结构中的所有元素。

Material Design 中的手机端布局 — 手机端结构
顶部从左到右：应用栏/主工具栏，内容区域（在应用栏/主工具栏下方），右侧导航
底部：底栏

平板端结构

此结构包含固定应用栏和浮动操作按钮。平板和手机的底栏中的元素可以合并到应用栏中。可以添加一个可选的底栏，用于放置额外的功能和弹出操作。侧边栏会覆盖结构中的所有元素。右侧导航可以临时显示，也可以永久固定显示。

Material Design 中的平板端结构图示 — 平板端结构
顶部从左到右：侧边栏，应用栏/主工具栏，内容区域（在应用栏/主工具栏下方），右侧导航
底部：底栏

桌面端结构

桌面端结构包含一个固定的应用栏和一个浮动操作按钮。手机和平板的底栏可以合并到应用栏中。如果有可能，窗口控件也会被合并到应用栏中。

侧边导航菜单可以占据屏幕大小的整个高度（包括应用栏下方的），可以临时显示，也可以永久固定显示。侧边栏菜单和内容区域一样，都可以有自己的二级工具栏，用来放置选项卡、选项或次要操作。

Material Design 中的桌面端结构 — 桌面端结构
顶部从左到右：应用栏/主工具栏
第二行从左到右：工具栏、次要工具栏、工具栏
第三行从左到右：侧边栏、内容区域、右侧边栏
底部：浮动操作按钮

UI 区域

定义水平或垂直的主分隔线。

Material Design 中的垂直分隔线 — 垂直分隔线

Material Design 中的水平分隔线 — 水平分隔线

避免把界面分隔成太多区域，这样会导致布局呈现 L 形。相反，可以使用空白来描绘辅助区域。

Material Design 中的使用空白效果 — 正确示例
使用空白。

Material Design 中的避免创建过多区域 — 错误示例
避免创建太多区域。

可以使用卡片和浮动操作按钮来打破区域的边界。

Material Design 中的卡片突破了传统边界 — 卡片打破了边界

Material Design 浮动操作按钮突破边界 — 浮动操作按钮打破了边界

当需要特定行为、或需要比空格或分隔符更多的分隔来进行信息分组时，可以使用卡片来组织内容。

Material Design 中的卡片元素 — 卡片

Material Design 中的卡片元素 — 卡片

工具栏

工具栏有多种用途，可以以多种不同的方式使用。

Material Design 应用栏，全宽，默认高度 — 全宽，默认高度的应用栏

全宽的 Material Design 应用栏 — 全宽，扩展了高度的应用栏

Material Design 中的与列同宽的工具栏 — 多级层次结构中与列同宽的工具栏

Material Design 中的弹性工具栏和卡片工具栏 — 弹性工具栏和卡片工具栏

Material Design 中的浮动工具栏 — 浮动工具栏

Material Design 的分离调色板工具栏 — 分离的调色板工具栏

Material Design 中的底部工具栏，类似隔板 — 底部工具栏，就像一块隔板，附着在键盘或其他底部组件的顶部。

Material Design 中的底部隔板工具栏 — 底部隔板工具栏

应用栏

应用栏（以前称为 Android 中的操作栏）是一种特殊类型的工具栏，用于放置品牌、导航、搜索和操作。

应用栏左侧的导航图标可以是：

打开导航栏的控件
导航到层次结构中的上一层的返回箭头
如果此屏幕不需要导航，则可以完全省略该图标

应用栏中的标题反映当前页面。它可以是应用标题、页面标题或页面筛选详情。

应用栏右侧的图标是与应用相关的操作。菜单图标可以打开弹出菜单，其中可以包含一些辅助操作，例如帮助、设置、反馈等。

Material Design 的应用栏结构 — 应用栏结构
左侧：导航图标，标题，筛选图标
右侧：操作和菜单图标

Material Design 中的亮色应用栏 — 亮色

Material Design 中的暗色应用栏 — 暗色

Material Design 中的彩色应用栏 — 彩色

Material Design 中的透明应用栏 — 透明

标题颜色

在应用栏中，所有图标的颜色都应使用相同的颜色。

如果需要增加视觉层次，标题可以使用和图标不同的颜色。不同的标题颜色最适合在白色和黑色背景上都有足够对比度的背景上使用。

Material Design 中的单一颜色样式 — 单一颜色（默认）

Material Design 中的不同标题颜色 — 不同的标题颜色

度量标准

默认高度：

手机端横屏：48dp
手机端竖屏：56dp
平板端/桌面端：64dp

对于扩展的应用栏，高度等于默认高度加内容增量。

Material Design 应用栏尺寸 — 应用栏高度：56dp
应用栏左右内边距：16dp
应用栏图标上、下、左边距：16dp
应用栏标题左边距：72dp
应用栏标题下边距：20dp

Material Design 中的应用栏高度增加以增强视觉效果 — 为了视觉效果更突出，应用栏大幅地增加了高度
应用栏高度：128dp

Material Design 应用栏操作区域和标题区域的高度配置 — 操作区域高度：56dp
标题区域高度：80dp
标题区域下边距：8dp
描述区域高度：72dp
描述区域下边距：16dp

应用栏高度 64dp 决定了 Material Design 的增量关键线 — 增量的关键线被设置为应用栏的高度 64dp，应用栏高度决定了关键线增量。

应用栏左右内边距：24dp
应用栏图标上下边距：20dp

Material Design 的应用栏高度和边距设置 — 扩展后的应用栏高度：128dp
应用栏左右图标边距：24dp
应用栏内容的左边距：80dp

密集型

当键盘和鼠标为主要输入方式时，可以适当压缩尺寸，以适应更紧凑的布局。

Material Design 中的密集型应用栏设计 — 桌面端的密集型应用栏
应用栏高度：48dp
应用栏左右图标边距：24
应用栏内容的左边距：80dp
图标的触摸目标高度：40dp

Material Design 中的密集型扩展应用栏 — 密集型的扩展后的应用栏
密集型的扩展后的应用栏高度：96dp
应用栏左右图标边距：24dp
应用栏内容的左边距：80dp

菜单

菜单是一张始终会遮盖应用栏的临时卡片，而不会表现的像是应用栏的扩展。

Material Design 中的应用栏示例 — 应用栏示例

Material Design 中的应用栏菜单示例 — 应用栏中的菜单示例

系统栏

状态栏/窗口栏

在 Android 上，状态栏包含通知图标和系统图标。在 Chrome 上，顶栏包含窗口控件：最小化、全屏、关闭。在 Chrome 应用中，顶栏可以消失，窗口控件会合并到应用栏。

Material Design 中的 Android 状态栏 — Android 状态栏

Material Design 中的 Chrome 窗口栏 — Chrome 窗口栏

度量标准：
Android 状态栏高度：24dp
Chrome 窗口栏高度：32dp

Material Design 中的 Android 状态栏位置 — Android 状态栏在应用栏上方

Chrome 窗口栏在 Material Design 应用栏上方 — Chrome 窗口栏在应用栏上方

Material Design 中的 Chrome 窗口控件 — Chrome 窗口控件位于应用栏内

全屏

有些内容在全屏模式下会有最佳体验，例如视频、游戏、书籍和幻灯片。全屏模式通过最大限度的减少控件对视频的视觉干扰，并防止用户意外地关闭应用，来增加用户与内容的互动。

全屏模式有以下几种类型：

Lean back 模式
沉浸模式
关灯模式

Lean back 模式

Lean back 模式最适合观看具有有限的屏幕交互的内容，例如视频。

交互：触摸屏幕的任何地方会出现系统栏。

Material Design 中的系统栏会在触摸屏幕时出现 — 触摸屏幕的任何地方会出现系统栏

沉浸模式

当用户需要和屏幕进行大量交互时，最适合使用沉浸模式，例如玩游戏或操作相册。你可以根据需要显示或隐藏应用控件和系统栏。

交互：从屏幕任何一个边缘滑动，来显示系统栏。应用首次进入全屏模式时，会出现此滑动手势的说明。

边缘滑动的例外：使用边缘滑动手势来执行操作的应用，在沉浸模式下触发滑动手势时，也应该显示系统栏。例如，一个绘图应用使用边缘滑动（例如画一条线）时，也应该半透明地显示系统栏几秒钟。

Material Design 中的系统栏可通过边缘滑动显示 — 从屏幕的任何边缘滑动，会使隐藏的系统栏重新显示。

Material Design 中的系统栏可通过边缘滑动显示

关灯模式

在关灯模式下，操作栏和状态栏不会消失，且会在几秒钟不活动后变为不可用。导航栏仍然可用，并会响应触摸操作，但显示为灰色。

暗色状态栏

默认情况下，状态栏或窗口栏的颜色是在应用栏上添加一层暗色的遮罩。但也可以使用布局中其他元素的颜色，或者半透明。

Material Design 中的暗色状态栏颜色基于内容样本获取 — 暗色状态栏的颜色是基于从内容中获取的样本得到的

Material Design 中的半透明状态栏，20% 黑色 — 半透明状态栏，20% 黑色 #000000

Material Design 中的暗色状态栏 — 暗色状态栏

Material Design 状态栏颜色比应用栏更深 — 状态栏颜色色调比应用栏的颜色更深

亮色状态栏

使用暗色图标的亮色状态栏，可以更好的和亮色内容协调，可以用来代替暗色状态栏。

Material Design 中亮色状态栏颜色基于内容样本生成 — 亮色状态栏的颜色是基于从内容中获取的样本得到的

Material Design 中的半透明亮色状态栏 — 半透明的亮色状态栏，70% 白色 #FFFFFF

Material Design 中的亮色状态栏，背景为 #E0E0E0 — 亮色状态栏，默认背景为 #E0E0E0

Material Design 中亮色状态栏颜色深于亮色应用栏 — 亮色状态栏的颜色色调比亮色应用栏的颜色更深

Android 导航栏

Android 中的导航栏包含几个设备导航控件：后退键、Home 键、任务键。对于 Android 2.3 或更早的系统还会出现菜单键。

高度：48dp

Android 暗色导航栏 — 暗色

Android 亮色导航栏 — 亮色

颜色变化

导航栏可以是不透明、半透明或全透明的。

Material Design 中的半透明导航栏 — 半透明导航栏

Material Design 中复杂图片上的半透明导航栏 — 复杂图片上的半透明导航栏

Material Design 中的全透明导航栏 — 全透明导航栏

Material Design 中纯色图片上的透明导航栏 — 纯色图片上的透明导航栏

Chrome OS 的底架

Chrome OS 上的底架包含应用启动器、应用图标和系统设置。

高度：56dp

Material Design 的 Chrome OS 底架示例 — Chrome OS 的底架示例

侧边栏

如果存在侧边栏，侧边栏可以永久固定显示，或者作为遮盖层临时显示。侧边栏可以位于屏幕左侧或右侧。

理想状态下，左侧侧边栏应该是与导航相关的、或是与用户身份相关的内容。右侧侧边栏应该是与页面中的主内容相关的次要信息。

参见抽屉式导航。

Material Design 手机侧边栏 — 手机屏幕

Material Design 侧边栏菜单 — 侧边栏菜单

结构

侧边导航栏可以永久固定显示，或是作为覆盖层临时显示。临时显示的抽屉栏会覆盖屏幕内容；而固定的导航面板则位于屏幕内容的旁边或下面。

屏幕尺寸可以决定面板是永久固定显示还是临时覆盖显示。有足够的空间时，面板可以固定显示，且内容需要及时做出调整。空间不足时，面板必须作为覆盖层显示。

度量标准

手机端：

宽度 = 屏幕宽度 − 56 dp

最大宽度：320dp

最大宽度仅在使用左侧导航时才适用。当使用右侧导航时，面板可以覆盖整个屏幕的宽度。

桌面端：左侧导航的最大宽度是 400dp。右侧导航可以根据内容变化。

Material Design 中的手机端左侧导航 — 手机端的左侧导航

手机端的右侧导航

Material Design 桌面端的左侧导航 — 桌面端的左侧导航

Material Design 桌面端的右侧导航 — 桌面端的右侧导航

线框图

线框图使用统一的界面、图层、阴影来提供多样化的布局结构。

下载资源和更多信息，参见资源。

Material Design 中的展开和折叠卡片 — 展开和折叠的卡片内容

Material Design 中的桌面应用栏详细信息 — 覆盖内容的详细信息，专注于桌面应用栏

Material Design 的左侧导航和单向流 — 桌面端的左侧导航和单向流

Material Design 中的资源列表 — 资源列表

Material Design 的全屏背景图片与内嵌搜索框和卡片式搜索结果 — 内嵌搜索框和卡片式搜索结果的全屏背景图片

Material Design 中的可展开底部抽屉 — 可展开的底部抽屉