专业架构优势 专业结构布局

UI 区域

为元素在 Z 轴空间的排列提供指导，以使其拥有正确的行为和阴影

• 手机端结构

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

• 平板端结构

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

• 桌面端结构

• 此结构包含一个固定的应用栏和一个浮动操作按钮。手机和平板的底栏可以合并到应用栏中。如果有可能，窗口控件也会被合并到应用栏中
• 侧边导航菜单可以占据屏幕大小的整个高度（包括应用栏下方的），可以临时显示，也可以永久固定显示
• 侧边栏菜单和内容区域一样，都可以有自己的二级工具栏，用来放置选项卡、选项或次要操作

工具栏

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

• 全宽，默认高度的应用栏
• 全宽，扩展了高度的应用栏
• 多级层次结构中与列同宽的工具栏
• 弹性工具栏和卡片工具栏
• 浮动工具栏
• 分离的调色板工具栏
• 底部工具栏，就像一块隔板，附着在键盘或其他底部组件的顶部
• 底部隔板工具栏

应用栏

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

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

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

• 应用栏中的标题反映当前页面。它可以是：

• 应用标题
• 页面标题
• 页面筛选详情

• 应用栏右侧的图标是与应用相关的操作。菜单图标可以打开弹出菜单，其中可以包含一些辅助操作，例如：

• 帮助
• 设置
• 反馈

• 应用栏结构：

• 左侧：导航图标，标题，筛选图标
• 右侧：操作和菜单图标

• 度量标准

• 默认高度：

• 手机端横屏：48dp
• 手机端竖屏：56dp

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

• 平板端/桌面端：64dp

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

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

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

系统栏

• 状态栏/窗口栏

• 度量标准：

• Android 状态栏高度：24dp
• Chrome 窗口栏高度：32dp

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

• 全屏

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

• Lean back 模式

• 最适合观看具有有限的屏幕交互的内容，例如视频
• 交互：触摸屏幕的任何地方会出现系统栏

• 沉浸模式

• 当用户需要和屏幕进行大量交互时，最适合使用沉浸模式，例如玩游戏或操作相册。你可以根据需要显示或隐藏应用控件和系统栏
• 交互：从屏幕任何一个边缘滑动，来显示系统栏。应用首次进入全屏模式时，会出现此滑动手势的说明
• 边缘滑动的例外：使用边缘滑动手势来执行操作的应用，在沉浸模式下触发滑动手势时，也应该显示系统栏
  
  例如，一个绘图应用使用边缘滑动（例如画一条线）时，也应该半透明地显示系统栏几秒钟

• 关灯模式

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

侧边栏

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

理想状态下:

• 左侧侧边栏应该是与导航相关的、或是与用户身份相关的内容
• 右侧侧边栏应该是与页面中的主内容相关的次要信息