底部导航栏概述

底部导航栏

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

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

图片来自 Material-io.cn

---

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

理解导航

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

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

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

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

横向导航？

---

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

---

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

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

---

底部导航栏

底部导航栏在屏幕底部显示三到五个目的地。 每个目的地都由一个图标和一个可选的文本标签表示