布局 结构

结构

UI 区域 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

手机端结构

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

手机端结构

顶部从左到右:应用栏/主工具栏,内容区域(在应用栏/主工具栏下方),右侧导航
底部:底栏

平板端结构

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

平板端结构

顶部从左到右:侧边栏,应用栏/主工具栏,内容区域(在应用栏/主工具栏下方),右侧导航
底部:底栏

桌面端结构

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

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

桌面端结构

顶部从左到右:应用栏/主工具栏

第二行从左到右:工具栏、次要工具栏、工具栏

第三行从左到右:侧边栏、内容区域、右侧边栏

底部:浮动操作按钮

UI 区域

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

垂直分隔线

水平分隔线

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

正确示例

使用空白。

错误示例

避免创建太多区域。

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

卡片打破了边界

浮动操作按钮打破了边界

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

卡片

卡片

工具栏 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

全宽,默认高度的应用栏

全宽,扩展了高度的应用栏

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

弹性工具栏和卡片工具栏

浮动工具栏

分离的调色板工具栏

底部工具栏,就像一块隔板,附着在键盘或其他底部组件的顶部。

底部隔板工具栏

应用栏 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

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

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

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

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

应用栏结构

左侧:导航图标,标题,筛选图标
右侧:操作和菜单图标

亮色

暗色

彩色

透明

标题颜色

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

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

单一颜色(默认)

不同的标题颜色

度量标准

默认高度:

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

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

应用栏高度:56dp
应用栏左右内边距:16dp
应用栏图标上、下、左边距:16dp
应用栏标题左边距:72dp
应用栏标题下边距:20dp

为了视觉效果更突出,应用栏大幅地增加了高度

应用栏高度:128dp

操作区域高度:56dp
标题区域高度:80dp
标题区域下边距:8dp
描述区域高度:72dp
描述区域下边距:16dp

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


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

扩展后的应用栏高度:128dp
应用栏左右图标边距:24dp
应用栏内容的左边距:80dp

密集型

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

桌面端的密集型应用栏

应用栏高度:48dp
应用栏左右图标边距:24
应用栏内容的左边距:80dp
图标的触摸目标高度:40dp

密集型的扩展后的应用栏

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

菜单

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

应用栏示例

应用栏中的菜单示例

系统栏 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

状态栏/窗口栏

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

Android 状态栏

Chrome 窗口栏

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

Android 状态栏在应用栏上方

Chrome 窗口栏在应用栏上方

Chrome 窗口控件位于应用栏内

全屏

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

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

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

Lean back 模式

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

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

触摸屏幕的任何地方会出现系统栏

沉浸模式

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

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

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

从屏幕的任何边缘滑动,会使隐藏的系统栏重新显示。

关灯模式

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

暗色状态栏

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

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

半透明状态栏,20% 黑色 #000000

暗色状态栏

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

亮色状态栏

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

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

半透明的亮色状态栏,70% 白色 #FFFFFF

亮色状态栏,默认背景为 #E0E0E0

亮色状态栏的颜色色调比亮色应用栏的颜色更深

Android 导航栏

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

高度:48dp

暗色

亮色

颜色变化

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

半透明导航栏

复杂图片上的半透明导航栏

全透明导航栏

纯色图片上的透明导航栏

Chrome OS 的底架

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

高度:56dp

Chrome OS 的底架示例

侧边栏 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

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

参见抽屉式导航

手机屏幕

侧边栏菜单

结构

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

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

度量标准

手机端:

宽度 = 屏幕宽度 − 56 dp

最大宽度:320dp

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

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

手机端的左侧导航

手机端的右侧导航

桌面端的左侧导航

桌面端的右侧导航

线框图 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

下载资源和更多信息,参见资源

展开和折叠的卡片内容

覆盖内容的详细信息,专注于桌面应用栏

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

资源列表

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

可展开的底部抽屉