布局 结构

结构

UI 区域 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

为元素在 z-轴 的排列提供指导,以规范元素正确的行为和阴影,参考环境层次 & 阴影

手机结构

结构中包含一个固定的应用栏和浮动操作按钮。底栏是可选的,当有额外的功能或操作指示时可以使用。侧栏菜单会遮盖结构中的所有元素。

手机结构

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

平板结构

结构中包含一个固定的应用栏和浮动操作按钮。平板和手机的底栏的元素可以被合并在应用栏中。底栏是可选的,当有额外的功能或操作指示时可以使用。侧栏菜单会遮盖结构中的所有元素。右侧导航可以临时访问,也可以固定展示。

平板结构

顶部从左到右:侧栏导航、应用栏/主要工具栏、内容画板(在应用栏/主要工具栏的下方)以及右侧导航
底部:底栏

桌面结构

桌面结构中包含了一个固定的应用栏和浮动操作按钮。平板和手机的底栏的元素可以被合并在应用栏中。可能的时候,窗口操作也会合并在应用栏中。

侧栏导航可以与屏幕等高(包括应用栏下方的),可以是临时访问,也可以固定展示。侧栏菜单与内容画板一样,都可以有自己的二级工具栏,用来放 Tabs、选项或是次要操作。

桌面结构

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

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

第三行从左到右:侧边栏、内容画板、右侧栏

底部:浮动操作按钮

UI 区域

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

垂直分割线

水平分割线

不要把界面分隔成太多区域,这样会导致 L 型。可以使用留白来替代风格线,勾画出次要区域。

使用留白

避免分隔过多的区域

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

使用卡片打破边界

使用浮动操作按钮打破边界

当需要特定的操作,或内容分组需要更大的间隔时,使用卡片来整理内容。

卡片

卡片

工具栏 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

工具栏有很多不同的用法。

全宽,默认高度的应用栏

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

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

固定的工具栏和卡片工具栏

浮动工具栏

独立的工具面板

底部工具栏就像搁板,固定在键盘的顶部或其他组件的底部

底部工具隔板

应用栏 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

应用栏,也就是之前 Android 上的操作栏,是一种特殊的工具栏,用来做品牌展示、页面导航、搜索以及操作。

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

  • 打开或关闭抽屉导航。
  • 返回箭头可以返回应用的层级中的上一层。
  • 如果页面不需要导航则可以完全忽略该图标。

应用栏的标题取决于当前页面,可以是应用标题、页面标题或是页面的筛选详情。

应用栏右侧的按钮是与应用相关的操作。菜单按钮可以打开悬浮菜单,其中包含一些次要操作例如帮助、设置和反馈。

应用栏结构

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

亮色的

暗色的

有颜色的

透明的

标题颜色

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

如果需要提升视觉优先级,标题可以使用不同于图标的颜色。有颜色差异的标题应当在亮色和暗色背景中都有足够的对比度。

单一颜色(默认)

不同颜色的标题

指标

默认高度:

手机横屏:48dp
手机纵向:56dp
平板/桌面:64dp

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

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

使用增量来提升视觉优先级的应用栏

应用栏高度:128dp

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

递增的关键线被设置为应用栏的高度,也就是 64dp,以确定增量值。


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

突出应用栏高度:128dp
应用栏左右图标内边距:24dp
应用栏内容的左边距:80dp

密度

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

桌面端的紧凑型应用栏

应用栏高度:48dp
应用栏左右图标内边距:24dp
应用栏内容的左边距:80dp
图标高度和触控范围:40dp

紧凑型突出应用栏

紧凑型突出应用栏高度:96dp
应用栏左右图标内边距:24dp
应用栏内容的左边距:80dp

菜单

菜单是临时的纸片,总是会覆盖住应用栏,它不是应用栏的扩展。

应用栏示例

显示出菜单的应用栏

系统栏 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

状态栏/窗口栏

在 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 Shelf

Chrome OS Shelf 包含了应用 Launcher、应用图标和系统设置。

高度:56dp

Chrome OS Shelf 示例

侧边栏 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

如果有需要,侧边栏可以固定来一直显示,也可以使用覆层来临时显示。侧边栏可以出现在屏幕的左侧或右侧。

理想情况下,左侧栏中是跟导航相关或是用户身份相关的内容。右侧栏通常显示与主内容相关的次要信息。

更多详情可参考导航抽屉.

手机屏幕

侧栏菜单

结构

侧边栏可以固定来一直显示,也可以使用覆层来临时显示。临时的导航抽屉会覆盖住内容画板;而固定的导航面板则在内容画板的旁边或下方。

可以根据屏幕尺寸来确定面板是要固定还是使用浮层。当有充足的空间时,面板可以固定显示,并且对内容进行及时的调整。当没有充足的空间时,面板可以使用浮层。

Metrics

手机

宽度 = 屏幕宽度 − 56 dp

最大宽度:320dp

最大宽度仅应用于左侧栏。右侧栏则可以遮盖住整个屏幕。

桌面:左侧栏的最大宽度为 400dp。右侧栏则取决于内容。

手机端左侧栏

手机端右侧栏

桌面端左侧栏

桌面版右侧栏

白框 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

白框通过统一界面、图层和阴影来提供多样化的布局结构。

更多详情和下载资源可参考资源.

展开收起的卡片化内容

桌面端(*原文为手机疑为笔误,译者注)浮层详情内容展示

桌面端(*原文为手机疑为笔误,译者注)左侧导航栏和详情页面

资源列表

全屏背景上的搜索栏和搜索结果

可展开的底部抽屉