模式 导航

导航

导航指引用户穿梭于应用的不同部分。

根据用户的希望看到的内容和功能来对组织应用的结构。把最重要的页面放置到选项卡或侧边导航中,把非必要的内容放置在不显眼的位置。

导航模式

嵌入式导航
选项卡
底部导航栏
导航抽屉
内嵌导航栏
扩展导航抽屉
层叠导航抽屉(桌面端)
手势

组合导航模式

情景内导航
侧边导航和选项卡
内嵌导航抽屉和选项卡(桌面)

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

应用的导航应当直观并且是可以预期的。新老用户都应当可以轻松访问应用的各个部分。当用户从一个页面进入另一个时,他们会注意到场景中所包含的图片、操作和内容。每个场景通过突出正确的操作来引导用户逐步深入,组合起来就是一个关于内容的故事。

更多关于在场景之间转换的信息,请参考导航转换

关系沟通 & 情境

根据内容的相关度和逻辑来对内容分组,清晰的展示出条目之间的关系。

启发式操作

鼓励用户进行具体的操作或者自由探索,来指导用户从一个场景进入另一个。

注意力焦点

定制应用导航来突出重要内容和任务。

图片中通过对邮件进行分组(推广、社交、财务),展示了各条目之间的关系

当用户的需求很简单时,使用简约的设计和轻量的架构

定义导航 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

导航组织了内容,因此它能够让用户更轻松的在应用中找到所需的信息。导航可能包括用户经常访问的页面,包括设置或者鼓励用户使用的操作。

为了让导航更符合应用,首先要定义你的用户,他们使用应用的典型路径,以及你希望他们去用功能。

假如你做了一个餐厅指南应用,你的用户可能想要预定、菜单或发表评价。定义多数用户的目标,可以根据优先级来有定义更好的导航结构。

列出清单

定义用户以及用户可能的角色,例如消费者、商家或者记者。定义用户最常用的操作。

定义核心用户以及他们可能想要的用例

优先级

将用户的操作按照优先级分为高、中、低。在 UI 中突出高优先级的操作和用户常用的操作。

根据用户需求的改变来调整优先级。

再为餐厅应用设计导航时,高优先级的任务可能包括浏览餐厅详情和寻找新餐厅。

顺序

定义用户使用应用的不同路径,并以此来定义导航:

  • 在导航中突出常用的功能
  • 将相关的任务分组,并以此来建立导航结构

无论消费者想看新餐厅还是浏览收藏夹,两个路径都会引导用户进入餐厅详情页。让用户可以快速访问(例如搜索或收藏)常用路径。

解构

将复杂、宽泛和模糊的用例分解为更小的任务。这些小任务可以是很常用的、易于理解的或更符合用户目标的。

例如,把搜索分解为更小的活动,分别搜索名称、位置和欢迎程度可能会更符合用户需求,将这些小任务做为导航的一部分。

「寻找餐厅」这个宽泛的任务可以分解为小任务,例如:附近的餐厅、搜索餐厅名称和热门餐厅。这些小任务比直接搜索更方便,应当整合进导航中。

向上和返回按钮 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

应用栏包含最基本的导航擦操作,向上返回按钮。

向上按钮

向上按钮指引用户返回到之前所在的页面。它会将用户带到应用的上一级,直到最顶级。

向上按钮

图片库中的向上按钮

返回键

返回键用于按照用户最近操作的屏幕历史记录,按时间逆序导航。

向上按钮可确保用户留在应用内,与此不同的是,返回键可让用户返回到主屏幕,甚至返回不同的应用。

返回键还可以:

  • 清除浮动窗口(对话框、弹出窗口)
  • 清除上下文操作栏,并取消高亮显示所选项目
  • 隐藏屏幕键盘(IME)

用户在应用顶级视图中触发感兴趣的导航时,确保导航能够更符合用户的预期。

返回键

图片库中的返回键

屏幕内切换视图

以下操作不会创建新的导航历史记录:

  • 使用选项卡、左右滑动切换视图或使用下拉菜单切换视图
  • 对列表进行筛选或排序
  • 改变显示特性(例如缩放)

例外:导航历史是根据相关视图的链接创建的(不在同一个列表内),例如浏览 Play Store 中同一个艺术家的专辑。

应用间导航(Android) 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

用户可以直接从一个应用导航到另一个应用,这让用户在执行常用操作时可以获得一致的体验。 例如,需要获取照片的应用可激活相机应用。

Activity、任务和 Intent

  • 在 Android 中,Activity是一个应用组件,用于定义信息屏幕以及用户可执行的所有相关操作。 你的应用是 Activity 的集合,由你创建的 Activity 以及从其他应用重用的 Activity 构成。
  • 任务是用户为达成某个目标而执行的 Activity 序列。
  • Intent 是应用的一种机制,用于发出信号以表明需要另一个应用的辅助才能执行某个操作。 应用的 Activity 可指示其可响应哪些 Intent,例如「分享」。

从桌面启动应用可以开始一个新的任务。在相册中导航并浏览照片详情后,用户会停留在该任务中并通过添加 Activity 来扩展该任务。触发「分享」操作会通过底部列表来提示用户选择可用的 Activity,底部列表中会列出来自不同应用(所有之前已注册并用于处理「分享」Intent 的)Activity

等级体系 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

导航通过建立等级结构来组织内容。处于最高等级的场景是最高优先级并且最容易访问的,将用户带入到较低等级的场景中。

主页

主页是应用的入口。它介绍了应用和它的导航。

主页通常会展示多种内容。状态主页包含了用户之前与应用交互的记录。

父级和子级

相对等级更高的称为父级,相对等级较低的称为子级

例如,主页是应用中其他所有场景的父级。

导航

当你导航到应用更深的层级中,意味着你从高等级的场景进入了低等级的。

从父级进入子级是下降导航。从子级进入父级则是上升导航

同级

从属于同个父级的场景称为同级。有多个用例的应用,用例都是相同优先级的,通常会有很多同级场景。

横向导航是指在同级之间移动。

集合

集合包含从属于同个父级的多个项目。

链接

链接可以让用户快速在两个场景间移动,即使他们在导航系统中不相邻。

交链是可以引导用户去往应用中任何页面的链接。

外链是从外部链接到应用的链接,包括通知和桌面小部件。它们直接带用户进入应用的深层场景中。

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

导航最好包含绝大多数用户的需求。复杂和等级繁多(需要在多个视图间切换)的应用的导航,不同于只有一个主视图的应用。

以下的导航模式是用来:

  • 促进参与和响应式布局
  • 导航和操作锚点
  • 突出重要的导航,减弱不常用的
  • 使用浮动操作按钮来凸显主要操作

嵌入式导航

只有单一导航的应用,可以把导航嵌入内容中,这样会降低内容的展示空间。

推荐用于:

  • 有一个非常重要的视图,少数几个罕见的视图
  • 应用的常用任务都在主视图中
  • 不常用的应用

使用了嵌入式导航的手机应用,常规操作都在非常主要的视图中。

选项卡

选项卡可以让用户在少数几个同等重要的视图间快速切换。

适用于以下等级:

  • 父级视图和嵌入的子级视图
  • 一组同级视图

推荐用于:

  • 经常切换视图
  • 有几个顶级视图的应用
  • 提升其他视图的意识

手机应用的三个选项卡

平板应用的居中选项卡

桌面应用中的左对齐的固定选项卡,以及标题和扩展的标题栏

底部导航栏

底部导航栏可以让用户在少数几个同等重要的视图间快速切换。

适用于以下等级:

  • 父级视图和嵌入的子级视图
  • 一组父级视图

推荐用于:

  • 经常切换视图
  • 有几个顶级视图的应用
  • 提升其他视图的意识
  • 移动设备,做为底部导航放在更符合人体工程学的位置

手机上持续显示标签的底部导航栏

平板上持续显示标签的底部导航栏

手机上动态显示标签的底部导航栏

平板上动态显示标签的底部导航栏

导航抽屉

如果没有足够的空间来放置选项卡,侧边导航是很好的替代方案。侧边导航可以一次展示大量的导航目标,导航抽屉在用户触发后才会显示。

有单一的「主页」的应用,应当把最常访问的目标放置在侧边导航的顶部。

侧边导航可以选择是否使用导航抽屉

适用于以下等级:

  • 横向导航
  • 父级及其同级或其他同等级的目标

推荐用于:

  • 有多个顶级视图的应用
  • 允许在多个不相关的视图间快速导航
  • 更深层的导航结构
  • 降低不常用目标的视觉优先级

手机上关闭的左侧导航

平板上打开的左侧导航

手机上打开的左侧导航

桌面上打开并起固定在左侧的导航

层叠导航

当有多级导航的时候,同级可以被嵌套在父级下。

在桌面上,第二等级的导航可以被嵌套在导航抽屉中。

适用于以下等级:

  • 横向导航
  • 父级及其同级或其他同等级的目标

推荐用于:

  • 多个视图和更深层的导航结构
  • 允许在多个不相关的视图间快速导航

桌面上展开的左侧导航

扩展导航抽屉

如果应用导航的等级很深,你可以在导航抽屉中扩展等级。轻触一个等级,会从下方展开导航。选择一个折叠的选项,可以在行内展开其他等级,并且隐藏之外的其他等级。

桌面上展开的左侧导航

层叠导航抽屉(尽显桌面)

如果应用多深层导航,你可以在导航抽屉中使用水平展开的层叠菜单。每个视图都会显示各自的面板,当子项目被选中后面板就会关闭。

桌面上展开的左侧导航

手势

手势导航允许用户使用轻扫手势在同级或同等优先级的视图之间导航。支持的手势包括:轻触和水平拖拽(左/右)屏幕、垂直拖拽(上/下)、或者缩放。

推荐用于:

  • 自然排序,例如显示连续日期的日历视图
  • 几个同级视图
  • 类似内容的视图

更多关于在场景之间转换的信息,请参考导航转换

在 Inbox 中,你可以向下拉动信息来返回父级视图。

组合模式 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

情境内导航

情境内导航(和选项卡或者导航抽屉一起使用)允许用户灵活的在相关的数据集之间切换。

情境内导航被整合进了应用的内容,导航通常不是线形的。当用户通过情境内导航到新页面时,会展示这个页面的导航控制器。

适用于以下等级:

  • 父级和子级

推荐用于:

  • 显示大量的子级
  • 聚焦于特殊的任务集
  • 有一个非常重要的视图和几个罕见的视图的应用

示例:

  • 把一首歌链接到艺术家
  • 在最近访问的项目和完整历史记录之间切换
  • 通过用户发布内容链接到用户的个人资料页

向上箭头用来返回上级页面。

手机上导航整合进内容

手机上的向上箭头

平板/桌面上整合进内容的导航

平板/桌面上的向上箭头

侧边导航和选项卡组合

有两级导航的产品可以同时使用导航抽屉和选项卡。

手机上的两级导航:导航抽屉和选项卡

手机上打开的左侧导航

平板上的两级导航:导航抽屉和选项卡

平板上打开的左侧导航显示在选项卡前面

桌面上的两级导航:导航抽屉和选项卡

层叠导航抽屉 + 选项卡(仅限桌面端)

用有三级导航的应用可以同时使用层叠导航和选项卡。

桌面上的层叠左侧导航和选项卡