抽屉式导航与标签式导航

导航设计的目的就是突出产品的功能，扁平化用户路径，保障用户在页面切换时不迷失，时刻清楚自己的位置，并且明白何去何从。这就好比是你拿到一本书，通过看目录就能大致明白这本书的框架，一共分为几部分，各部分内容是什么。

抽屉式导航

抽屉式导航是由早期汉堡菜单改良而来，汉堡菜单曾经一度风靡，因为其对界面的简化备受设计师的宠爱，Facebook一度改版为汉堡菜单导航，后来Google把汉堡菜单改良为抽屉式导航写入了Android Design Guideline。

随着市场上抽屉式菜单的滥用，其弊端逐渐暴露出来。

问题1:功能容易被忽视

问题2:其次操作效率低，用户需要双手操作点击汉堡icon，然后等待菜单展开数据刷新出来，再点击功能。

如图是iphone 6s plus的操作热区，不管你是左手持机还是右手持机，不管你是男的还是女的，红色区域总是很难触达，而抽屉式导航的入口一般多是放在导航栏左右两侧，正是死角区域。

Facebook后来也意识到这些不足又改回使用固定标签式菜单导航。再后来设计师们都老实地遵循各家的规范乖乖做设计。不过如今市场上大多APP都是采用底部标签式导航，所以使用抽屉式导航仍然会给用户带来新鲜感。

值得注意的是如果你要使用抽屉式导航必须注意以下几点：

1. 被折叠的内容必须是不重要的、使用频率较低的功能
   

2. 从操作上使唤出抽屉式菜单更容易，不妨试试从屏幕边缘向屏幕中心滑动唤出抽屉式菜单

3. 不得影响核心功能的使用

下图是滴滴出行的抽屉式导航截图，滴滴整个app的结构突出打车的核心功能，让用户重点关注如何打车、打车成功、等待司机等核心交易链路，整体进行信息降噪，将订单、钱包、设置等二级菜单隐藏到了抽屉式菜单中。

标签式导航

标签式导航一般分为顶部标签式导航(包括分段式导航segment control)、底部标签式导航和舵式导航。

一、顶部标签式导航

顶部标签式导航多用于Android，早在Android 2.0时代，官方通讯录APP就使用顶部tab导航，由于Android在4.0之后移除了实体键而使用屏幕下方的虚拟键，所以Android将iOS中的标签菜单从下方移动到了上方，从而避免误操作虚拟键，Android 4.0规范和最新的Material design都将tabs最为推荐的导航形式。

如图，是微博首页的顶部截图，微博的框架其实相对比较复杂，他在底部标签栏的框架里嵌套了顶部标签栏作为一级导航，区分“关注”和“推荐”的内容，页面内左右滑动切换tab视图，又嵌套了滚动式标签作为二级导航，二级导航同样支持屏幕内左右滑动切换视图，个人建议在设计中还是尽量避免像微博这样多重tabs嵌套，体验上不是很友好。

顶部标签式导航设计规范

1. 标签较多可延展为滚动式标签导航，可左右滚动，无数量限制，支持在屏幕内左右滑动切换视图，常与底部标签栏混合使用
   

2. 除了点击标签本身，还可通过在屏幕内左右滑动切换视图

3. 图标与文案不可混用，文案不可折行

顶部标签式导航优缺点

优点：

1.占用屏幕的空间比底部标签栏小

2.给予沉浸式的阅读体验，遵循从上而下的阅读习惯

3.屏幕内左右滑动可以切换视图，弥补了不好单手操作的遗憾

4.无数量限制

缺点：

1.对于大屏手机不好单手操作

2.如果是滚动式的tab导航，后面的tab无法被用户看到，曝光率低，会降低使用菜单的频率

这里提一句，国内好多APP会把分段控制器(segment control)和tabs弄混。分段控制器(segment control)来源于iOS规范，同样可作为顶部标签导航，在app中一般用作二级导航，数量上一般2-5个，每个字段控制在2-4个汉字，不可文字图标混用。分段控制器作用于分割和筛选同类数据，iOS规范操作上只能通过点击分段切换视图。

     如图是iOS app store里使用的分段控制器

以下是用法总结：

二、底部标签式导航

底部标签栏是目前移动端最为常规的导航形式，一般采用图标+文字的表现形式。底部标签栏主要是用来承载同级别的功能模块、信息和功能，拉平信息层级结构并提供一次访问多个对等信息或功能，并且站在用户的角度也是比较常用的。数量上规定3-5个，在iOS设计指南中指出，如果选项卡数量需要超过5个，那么最后一个选项卡展示“更多”，点击后将在单独的页面的列表中显示其他选项卡。

底部标签式导航设计规范

1. 数量上展示3-5个标签。iPad可接受更多。
   

2. 选项卡不可用时，不可删除或禁用该选项卡。选项卡内容在某些情况会没有内容，无法使用会让应用界面变得不可预测，请在页面说明为什么选项卡内容不可用。

3. 视图切换时不要隐藏标签栏。标签栏的层级最高方便它在任何地方保持可见，除了弹框等模态视图。

4. 标签栏按钮只进行导航。标签栏按钮不应用于执行操作，请于工具栏(tool bar)区分开。
   

     

底部标签式导航优缺点

优点：

1. 方便用户切换视图，使用户不会迷失，操作简单高效
   

2. 位于屏幕底部，操作上比较容易

缺点：

   1. 占用一定高度空间，对小屏手机视觉体验不太好

三、舵式导航

舵式导航也称“点聚式导航”是底部标签式导航的衍生品，作为一种扩展导航比较适用于APP有很突出的功能，比如闲鱼APP中的【卖闲置】功能，或者之前的微博首页的【发布】功能。在底部标签栏中会突出此功能，以颜色和大小来凸显按钮，增强点击欲。

优点：

1.表现入口突出，快速吸引用户注意力

2.使APP更加个性化

缺点：

1.占据高度空间略大，对小屏手机视觉体验不大好

2.有的会将二级菜单导航放置在标签里，增加用户认知负担

闲鱼

总结：

怎么用底部标签栏和顶部标签栏？

1.如果APP内容是沉浸式体验，如小说、图片查看类，为了更好的阅读体验可以将tab放在顶部，为了方便操作最好支持手势操作。

2.底部标签栏的作用主要是承载同级别的功能模块、信息和任务，帮助用户获取重要性最高、频率最大的任务。初次之外可嵌套顶部tabs作为一级导航。

3.结构复杂且不稳定的应用不适合标签式导航。

4.实在不知道用什么导航形式，建议优先考虑底部标签栏，这是最安全的导航模式，虽然不怎么出彩，但是在大屏幕时代，底部标签栏更能适应。

Tab bar与Tool bar的区别

很多设计师会把底部标签栏和工具栏弄混，主要因为这两个bar都是出现在页面底部。标签栏可以让用户快速切换视图，工具栏主要是对当前页面的编辑，如删除、分享等操作。

TIPS：没有完美的导航。我们要做的就是符合规范的同时挑选最合适的设计形式，根据实际产品功能灵活运用。