Material Design 设计模式 —— Navigation

Navigation guides users through different parts of your app.

导航模式

  • 内嵌式导航
  • Tabs
  • 底部导航栏
  • 抽屉导航
  • 套叠导航(Nested navigation)
  • 展开式抽屉导航
  • 瀑布式抽屉导航(桌面端)
  • 手势导航

用法

应用内的导航方式应该是清晰而可预测的,无论是新老用户均要能轻易而且迅速弄懂如何在软件内进行移动。对几个特定的目的地有强调作用。


定义你的导航

导航将内容合理地组织起来以方便用户在 App 内进行浏览,找到自己需要的东西。导航内可能包含常用地点,设置或鼓励用户前往的目的地。

要从用户的需求或策略层出发来设计合适你产品的导航方式。

列目标用户与需求清单 定优先级 频率 解构

Up Button 与 Back Button

Up Button

Up Button 让用户返回到上一个界面,在层级中,它总是导向上层层级。

Back Button

属于系统层级的 Back Button 以时间作为逻辑顺序,按照访问的历史将用户导向上一个视图。

Back Button 还有更多的功能:

  • 关闭悬浮窗口
  • 关闭上下文状态 action bars,取消选中状态
  • 收起键盘

访问历史顺序并不包含:

  • 通过 tab 切换至的界面,swipe 手势翻开的按钮以及 dropdown 菜单。
  • 被改变排列逻辑的 list
  • 显示属性的改变(放大)

软件之间的导航

由一个 app 跳转至另外一个 app 以完成相应的任务。

活动、任务与意图

  • 对于安卓而言,app 可以说是一个活动(activity)集。
  • 用户通过使用一连串的的活动来完成他们的任务。
  • 意图是一个 app 想另外一个 app 发送的操作信号/命令。

层级结构

  • Home
  • Parent and child
  • Navigaiton
  • Sibling
  • Collection
  • Links


导航模式

产品导航的的设计应该做到能够满足大部分用户的使用需求,也要根据产品的属性来进行设计,层级复杂,页面多的产品使用的导航与结构简单,功能单一的产品使用的导航是不一样的。

一般要能够达成以下几个目的:

  • Promote engaging and responsive layouts
  • 作为导航与动作的锚点
  • 突出重要板块,不强调不重要的板块
  • 以 FAB 的形式显示首要动作

Embedded navigaiton(嵌入式导航)

适用于功能结构简单的产品(或功能),直接在内容区域显示,当然,导航的功能也要与内容强相关。

  • 有一个最主要功能的 app(工具类)
  • 该功能通常直接在主界面直接执行(例如原生的计算机)
  • 不常使用

Tabs

能够方便用户在若干个重要程度相当的页面之间快速切换。

适用层级:

  • 有若干子页面的父页面内
  • 一组 sibling 页面

推荐使用:

  • 需要频繁切换
  • app 本身有若干个顶级页面

Bottom navigation bar

底部导航栏让用户能够在几个顶级页面之间快速切换。

适用层级:

  • 有子级页面的父页面
  • 若干个父级页面

推荐使用:

  • 几个顶级页面之间频繁切换
  • app有数个顶级页面
  • 用于强调某些板块
  • Bottom navigation bar 更适用于移动端产品

Navigation drawer

除了作为 bottom navigaiton 的替代之外,navigaiton drawer 也可以作为 tabs 的替代品。当内容过多,没有足够的位置使用上述两种导航方式时就可以考虑使用 navigaiton drawer 也就是人们常说的汉堡菜单。

当 app 的主界面任务就是 app 最常用任务(工具类)时,就可以使用这种导航方式(gmail客户端)

适用层级:

  • 横向导航
  • 同等级页面

推荐使用:

  • 有数个顶级页面的 app
  • 快速切换
  • 结构复杂内容多
  • 放不常使用的页面

Nested Navigation

当导航本身就具有若干层级的时候,子级导航们应该被嵌套于他们的父级导航之下。

同时还有展开式与瀑布状式的形式。

手势式