底部导航栏概述

底部导航栏

在这篇文章中学会提问，学会实践探索。

本文章将会从导航的本意开始，先讲明材质设计中对于该组件的相关内容再加以材质设计指南与人类交互指南对于移动设备底部导航的规范对比、部分谷歌以及苹果应用对该组件的实现现状来讲述这个后期才加入材质设计指南且备受争议的组件。

图片来自 Material-io.cn

·目的地：粗略理解为用户想要使用的各个功能页面

理解导航

导航使用户能够在应用程序各个功能页面中移动。

导航类型

导航是在应用程序的屏幕之间移动以完成任务的行为。它通过多种方式启用：专用导航组件、将导航行为嵌入到内容中 (例如: 通过一个显示行程信息的卡片可以查阅先前订阅的酒店详细信息) 以及平台可供性 (目前无需掌握)。

导航方向

根据您应用的信息架构，您的用户可以在三种导航方向之间移动：

• 横向导航( Lateral navigation ) 是指在同一层次结构的屏幕之间移动。应用程序的主要导航组件应提供对其层次结构顶层的所有目的地的访问。
• 向前导航( Forward navigation ) 是指在连续的层次结构、流程中的步骤或跨应用程序的屏幕之间移动。向前导航将导航行为嵌入到容器（例如卡片、列表或图像）、按钮、链接中或通过使用搜索。
• 反向导航( Reverse navigation ) 是指按时间顺序（在一个应用程序内或跨不同应用程序）或分层（在一个应用程序内）在屏幕上后退移动。平台约定决定了应用程序中反向导航的确切行为。

横向导航？

利用顶部选项卡的横向导航方式允许在此音乐应用程序信息架构的顶级导航之间移动。

横向导航是指在同一层级的屏幕之间移动。 它支持访问不同的应用程序目的地和功能，或在一组项目中的相关项目之间切换。

目的地和层次结构

应用程序的主要导航组件应提供对其层次结构顶层的所有目的地的访问。 具有两个或多个顶级目的地的应用程序可以通过导航抽屉、底部导航栏或选项卡提供横向导航。

底部导航栏

底部导航栏在屏幕底部显示三到五个目的地。 每个目的地都由一个图标和一个可选的文本标签表示。 当点击底部导航图标时，用户将被带到与该图标关联的顶级导航目的地。

重要原则

• 符合人体工程学

  底部导航栏在手持移动设备上会容易触摸。

• 持续出现

  使用时，底部导航栏出现在每个屏幕的底部 (不要死板，后面会谈到)。

• 重要程度相同

  底部导航栏目的地的地位应该同等重要。

上文提到了横向导航可以使用此方式来引导用户进行应用功能间的移动，这也是目前移动设备上较为流行的导航方式之一，毕竟，在屏幕逐渐增大的手持移动设备中，使用拇指点击屏幕底部的导航会有助于使用体验。底部导航栏成功地为应用厂商想要加入的热门功能带来了流量。但流行不代表着您可以随意使用底部导航栏，根据您的应用想要入驻的平台，可以参考谷歌的材质设计指南 ( Android ) 或者苹果的人机界面指南 ( iOS ) 来进一步地设计您的底部导航栏。

使用

• 材质设计指南
• 正确使用：
  1. 需要从应用各个位置随时访问的目的地
  2. 三至五个导航项
  3. 仅限使用于平板或者手机
• 错误使用：
  1. 针对单个程序动作 例如点击后撰写新的邮件内容或只浏览单封邮件
  2. 引导到用户界面偏好设置或者应用设置
  3. 使用少于 3 个导航项或多于 5 个导航项
• 谨慎使用
  • 结合底部导航栏和顶部选项卡可能会导致导航层级混淆，因为它们与内容的关系可能不清楚。 选项卡之间导航相似的内容，而底部导航目的地是顶级的并且彼此断开并无关联。(例如: 在一个图片百科软件中，用户先搜索宠物，出现了一个结果，页面顶部三个选项卡导航内容分别为：狗、猫、鸟 等，这些分类是类似的导航项目。在这个图片百科软件中，底部导航栏包含了三个导航项：推荐、搜索、历史，这些内容之间没有任何联系)
  • 相关文章
    • 顶部选项卡
    • 导航抽屉

• 人类交互指南 (有删减)

  ·标签栏：类似于底部导航栏

  • 通常，使用标签栏在各应用程序功能页面级别组织信息。标签栏简化了应用信息层级并且能同时提供几个同级别的模块
  • 严格使用标签栏进行导航。不要用来启用功能
  • 使用正确数量的标签。过多的标签项会减小各个标签项自身的可触碰面积，同时复杂化你的导航，这会使得您的用户难以定位信息。过少的标签项会使得您的交互逻辑出现失联的可能，虽然在标签过多的情况下您可以添加一个 “更多” 标签项来引导用户进入一个单独的页面来展示更多的标签项，但结果就是访问这个单独页面中的各个功能需要多一步点击，在影响流量的同时也是不能合理利用空间的展现
  • 当人们导航到您应用中的不同区域时，不要隐藏标签栏。
  • 当其功能不可用时，不要删除或禁用选项卡

    

    如果选项卡在某些情况下可用但在其他情况下不可用，则您的应用程序界面会变得不稳定且不可预测。 确保所有标签项始终处于启用状态，并解释标签项内容不可用的原因。 例如，如果 iOS 设备上没有歌曲，“音乐” 应用中的 “资料库” 标签项页面会说明如何能显示歌曲。
  • 始终在标签项的附加视图中保持上下文状态。为了让你的界面保持可预测性，选择一个标签项应该总是影响直接附加到标签栏的视图，而不是屏幕上其他地方的另一个视图。 例如，选择 “推荐” 不应导致 “历史” 的翻阅位置内容突然更改 (之后再次点击 “历史” 时保留用户的翻阅位置和操作记录)。 在弹出窗口中选择选项不应导致弹出窗口底部的的视图发生变化。
  • 确保标签栏字形在视觉上保持一致和平衡。

对比

两个规范无一不在强调底部的操作只能专注于导航，并且对底部导航栏的导航数量作了限制——不要过少或过多。同时，两个规范都提到了很戏剧的一点：为了从应用的各个位置访问导航，请持续显示底部导航。

实际上呢？

• Google Mail (邮箱): 首页显示底部导航栏，点击阅览单封邮件时底部导航栏下滑 隐藏 。返回主界面时保留之前翻阅位置，再次点击 “邮件” 将会更新翻阅状态并回到顶部。
• Google Photo (相册): 首页显示底部导航栏，点击阅览单张图片时底部导航栏快速 渐隐，新的工具栏快速渐出在底部，为了更好的浏览照片，工具栏背景透明。返回主界面时保留之前翻阅位置，再次点击 “照片” 将会更新翻阅状态并回到顶部。
• Google Drive (云端硬盘): 首页显示底部导航栏，点击查阅单个文件时，右侧快速滑入新的界面并且直接 覆盖 掉底部导航栏。不保留翻阅位置，每次进入首页都会进行刷新。
• Apple 音乐: 持续显示底部导航栏。点击正在播放的状态组件会放大该组件至全屏，而底部导航栏快速下滑被正在播放页面 挤压出 屏幕返回主界面时保留之前翻阅位置，再次点击相同标签项将会更新翻阅状态并回到顶部。
• Apple 照片：首页显示底部导航栏，点击阅览单张图片时底部导航栏快速 渐隐，新的工具栏快速渐出在底部，返回主界面时保留之前翻阅位置，再次点击 “照片” 将会更新翻阅状态并回到顶部。
• Apple 应用商店: 由于用户不能对未下载的推荐应用作出修改操作，将 持续显示 底部导航栏。从应用详情页面返回主界面时保留之前翻阅位置，再次点击点击相同标签项将会更新翻阅状态并回到顶部。

说明了什么？

对于某歌应用某些情况下不遵守文档来开发应用顺便反手更改文档规范我先表示 <beep——>

在前文中提到材质设计针对底部导航栏提出的重要原则时，我已经强调过，不要死板的阅读文档。没有实际为用户体验着想地进行设计或者说在不理解文档、指南真正含义的情况下忘我的背书——将会带领一个应用走向死亡。

为什么这么说？

请先阅读：

1. 材质设计提及 “需要从应用各个位置随时访问的目的地”
2. 人类交互指南写明 “当人们导航到您应用中的不同区域时，不要隐藏标签栏”

应用各个位置和应用中的不同区域到底指代的是什么情况下显示底部导航栏、需要注意什么，您现在是否有数？

• 在各个顶级的页面中导航时显示
• 如果用户不能对其中的内容进行操作，请显示
• ！请务必保留用户的翻阅状态，除非用户再次点击导航项/标签项，请勿刷新页面状态

留在最后

引用有知乎设计师工作经历的 NovaDNG 的一句话：

文章相关内容

导航选择参考

理解导航

导航抽屉 - Material Design

底部导航栏 - Material Design

顶部选项卡 - Material Design

标签栏 - Human Interface Guidelines