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
当导航本身就具有若干层级的时候,子级导航们应该被嵌套于他们的父级导航之下。
同时还有展开式与瀑布状式的形式。
手势式