四、结构（Structure）
UI区域（UI regions）
关于通过在z轴上排列元素以实现正确的行为和投影的指南，请参见 环境 和 高度和阴影 部分。
结构：移动端
这个结构包含一个固定的应用栏和一个浮动按钮。还有一个可选择的底部栏（bottom bar），它可以添加附加功能和溢出操作。最后是侧边导航菜单，它能盖过所有其他结构元素（相对其他元素Z轴最高）。
结构：平板端
这个结构包含一个固定的应用栏和一个浮动按钮。平板端也拥有和移动端一样的底部栏和侧边导航菜单。右导航菜单可以临时显示，也可以固定在页面中永久显示。
结构：桌面端
这个结构包含一个固定的应用栏和一个浮动按钮。应用栏也拥有和移动端、平板端一样的底部栏。在可能的情况下，窗口控件都收入进应用栏中。
侧边导航菜单可以占用整个屏幕高度 （盖过应用栏），并可临时显示或固定在页面中永久显示。侧边导航菜单以及内容区域可以有自己的次级工具栏（tabs、调色板或次级操作）。
第二行从左到右：工具栏、次级工具栏和工具栏
第三回从左到右：侧边导航菜单、内容区域和右导航菜单
底部：浮动按钮
UI区域
定义一个基础的水平或垂直分隔。
不要把界面分割成太多的区域，产生类似L形状。 相反，利用留白来勾勒出次级空间。
用卡片和浮动按钮来打破边缘。
某些特定行为需要用到卡片（cards）对内容进行组织。此外，如果某些情况信息分组能够比留白或分隔的方式提供更多的分隔作用，那推荐使用卡片。
工具栏（toobars）
工具栏有着多种功能，它可以用不同的方式来表现。
应用栏（App bar）
应用栏原先在Android系统中被称为操作栏（action bar），它是一种特殊的工具栏，一般用于品牌、导航、搜索和操作。
应用栏的左侧导航图标可以表示：
打开侧边导航的控件
返回（应用层级导航）
如果页面不需要导航则可以省略
应用栏中的标题反映的是当前页面。它可以是该应用的名称、页面标题或页面筛选等。
应用栏右侧的icon与应用相关操作关联。比如菜单icon是用来打开溢出菜单，其中可能包含有次级操作以及菜单选项（如帮助、设置或反馈）。
左边：导航icon、标题、筛选icon
右边：操作和菜单icon
标题颜色
在一个应用栏中，所有的icons应是同一种颜色的。
如果需要增加视觉层次，标题可以使用与icons不一样的颜色。标题的颜色最好用白色和黑色，因为这样能够区分和背景的关系。
度量标准（Metrics）
默认的高：
移动端横屏: 48dp
移动端竖屏: 56dp
平板/桌面端: 64dp
对于展开的应用栏，其高度为默认高度加上内容的增量高度。
应用栏左、右内边距: 16dp
应用栏icon上、下、左内边距: 16dp
应用栏标题左内边距: 72dp
应用栏标题下内边距: 20dp
标题区高: 80dp
标题区下内边距: 8dp
输入区高: 72dp
输入区下内边距：16dp
应用栏icon的上、下内边距：20dp
应用栏左、右icon内边距：24dp
应用栏内容的左内边距：20dp
密度（Density）
当鼠标和键盘为主要的输入方式时，元素尺寸可以被压缩以适应密集的页面布局。
应用栏内容左、右内边距: 24dp
应用栏内容的左内边距（有icon或头像情况下）: 80dp
Icon高（包含点击区域）： 40dp
应用栏内容左、右内边距: 24dp
应用栏内容的左内边距（有icon或头像情况下）: 80dp
菜单（Menus）
菜单是一张暂时显示的sheet。菜单与应用栏重叠，而不是作为应用栏的一个扩展。
系统栏（System bars）
状态栏/窗口栏（Status bar/window bar）
在Android里，状态栏包含通知和系统icon。在Chrome里，顶部栏包含有窗口控件（最小化，全屏和关闭）。在Chrome app中，顶部栏可以消失，窗口控件可以被纳入应用栏里。
尺寸
Android的状态栏高: 24dp
Chrome的窗口高: 32dp
全屏
有些内容在全屏模式下体验会更好，如视频、游戏、书籍和幻灯片。全屏模式可以让用户沉浸在内容中，并能够有效减少注意力分散和用户跳出。
全屏模式有几种类型：
Lean back
沉浸式（Immersive）
熄灯模式（Lights Out）
Lean back
这种模式最适合在观看内容的同时与有限的屏幕进行交互，如视频。
交互：轻触屏幕任何地方显示系统栏。
沉浸式
这种模式非常适合用户需要与屏幕进行大量交互时，如玩游戏或查阅图片。此外，当有需要时，可以显示和隐藏应用的系统栏。
交互：从屏幕的任何位置滑动，系统栏会出现。第一次使用全屏时，要有手势提示。
边缘滑动例外：应用了边缘滑动手势执行操作的应用也应该在使用该手势时显示系统栏。
熄灯模式（Lights Out）
在熄灯模式下，如果几秒钟不进行操作，那操作栏和状态栏会逐渐淡化，并变为不可用状态。导航栏显示为暗灰色，但它仍然可用并会响应触摸。
深色的状态栏
默认情况下，状态栏或窗口栏的颜色深于应用栏的颜色。它也可以使用页面中其他元素中的颜色或使用半透明。
浅色的状态栏
浅色状态栏配合深色icon，可以作为代替深色状态栏的一种方法。
Android的导航栏（Android navigation bar）
Android导航栏中的设备导航控件：后退（Back）键、Home键以及Overview键。
高: 48dp
颜色变体
导航栏可以是不透明的、半透明的或完全透明的。
Chrome OS shelf
用于启动应用，显示应用icon和系统设置。
高：56dp
侧边导航栏（Side nav)
根据需要，侧边导航栏可以在页面中固定一直显示，也可以暂时出现在页面中。侧边导航栏可以放置在左侧也可以放置在右侧。
理想情况下，左侧导航栏的内容应该是导航或一些基础特性，而右侧导航栏的内容则是页面中主要内容的次要信息。
参见 导航栏
结构
侧边导航栏可以在页面中固定一直显示，也可以暂时出现在页面中。暂时显示的侧边导航栏覆盖内容区域，而永久固定的导航面板则出现在内容区域的旁边或下方。
屏幕大小可以决定使用永久固定还是暂时显示的导航栏。有足够的空间的话可以使用永久固定的导航栏并对内容进行响应式调整。如果空间不足，导航栏必须是暂时出现然后自动消失的。
尺寸
移动端：
宽度=屏幕宽度 − 56dp
最大宽度：320dp
最大宽度仅适用于使用左侧的导航栏。使用右侧导航时，面板可以覆盖整个屏幕。
桌面端：
左侧导航栏最大宽度是400dp。右侧导航栏可以根据内容的不同而变化。
线框图（Whiteframes）
线框图提供了各种布局结构下使用一致的面、层和阴影方法。
关于线框图的下载和其他信息，请参见 资源
