导航栏家族大揭秘 / 木子杰软件教程

前言

导航设计在产品或者页面中担任重要的角色，能在不同的场景下帮助用户快速找到自己想要的东西。我们如何区分在什么样的场景中使用那种导航设计是我们作为设计师必须要了解的，接下来我们会讲到我们经常用的 Tab 导航栏、抽屉式侧边导航栏、宫格式导航栏以及列表式导航栏。

1.导航栏定义

导航栏对于用户而言，最大的意义是帮助用户快速找到自己想要的“东西”；对于产品目标，可以通过“信息架构设计”去引导说服用户。好的导航设计符合用户的心智模型，能帮助用户快速了解产品的核心功能以及组织架构，而差的导航设计简直就一场噩梦！

2.Tab 导航栏

Tab导航栏是我们最常见的导航设计，由于功能架构清晰，内容暴露，保证页面内容突出，所以适用场景非常广泛。由于功能和使用场景不同，所以 Tab 导航栏分为底部导航栏和顶部导航。

底部导航栏底部导航栏是“产品信息功能架构“的体现，从内容和功能需求的角度上来讲，底部导航栏是通过对内容和需求的层层筛选以及分类归纳得到，所以基本都用于“一级导航”，选项内容通常在3～5个之间。从交互的角度上来讲，底部导航栏处于用户点击的最佳位置，方便用户操作。从设计的角度来讲，为了帮助用户快速识别一般是 icon 加文字信息的组合方式。

我们以知乎和 LOFTER 为例，底部导航是对整个产品的核心功能架构的分类，且处于拇指点击的最佳位置，设计上信息明确，能帮助用户快速选择用户想要的“功能”。

顶部导航栏顶部导航栏对于底部导航栏而言，是对其内容的延展。从内容和功能需求的角度上来讲，顶部导航栏是对页面内的内容进行分类，用于满足用户的浏览查看的需求；从交互的角度上来讲，顶部导航栏在屏幕顶端的位置，单手操作很难点击到，但是现在基本都会通过添加手势交互来解决手指不能方便点击的问题。从设计的角度上来讲，基本都会采用“纯文字”标签的形式，减少其他元素的干扰，帮助用户可以快速选择自己的想要的内容。

我们以今日头条和豆瓣为例，通过上图我们可以看出，设计上采用了“纯文字”标签的形式，减少了其他的干扰元素，使得页面中我们可以通过顶部导航栏的不同的标签在同一页面中快速浏览不同的内容。

3.抽屉式导航栏

曾经抽屉式导航风靡一时，由于将菜单栏的隐藏，显得画面干净整洁，所以受到了广大设计师的青睐，就连 Facebook 也曾为它做过 A/B test 测试，但最终测试结果是：用户的周平均使用率大幅度下降。这是因为抽屉式侧边栏从交互的角度上来讲，需要进行二级点击，导致信息不足够暴露，使得用户不容易发现，提高了用户的使用成本。所以用户会经常“懒得点击”或“忘了点击”；而且从交互的角度上，抽屉式导航的内容基本都会采用列表的形式，屏幕上半部分的选项单手的操作的时候比较难点到。从使用场景的角度上来讲，作为一级导航的话，抽屉式侧边栏导航虽然不够突出，但是可以突出app 的沉浸感，例如“单读”这一类注重内容的 app，或者像“滴滴”这类功能目的比较强的 app。

我们以单读和滴滴为例，单读为了提升沉浸感，侧边栏导航选用了全屏弹出的设计样式，而“滴滴”的功能目的性较强，所以在设计上只弹出屏幕的3/2的位置，让用户看到当前所操作的页面，提醒用户当前的任务和目的。

将侧边栏导航应用在二级导航中，则不需要像一级导航栏一样进行隐藏，所以在信息展现上充分暴露，从使用场景的角度来讲，侧边栏在二级导航中适用于内容品类丰富的页面；而从交互的角度上来讲，由于展示的信息较多，部分产品会添加上下手势滑动来辅助用户切换内容。设计上一般适用纯文字标签的形式，提高用户的信息获取率。

以“网易严选”为例子，左侧的二级导航栏帮助用户对商品进行分类，这样减少了用户在寻找商品的时多余的交互步骤，同时网易严选结合了上下滑动的手势交互辅助用户切换，纯文字标签的设计形式减少其他因素的干扰，帮助提高用户对信息的获取效率，帮助用户快速选择和浏览商品，进而减少页面的跳出率。

4.宫格式导航栏

宫格导航优势在于可以展示较多的信息展示而且信息相对独立，所以它的使用场景更加适用于内容信息架构丰富的页面。当内容较多的是也会一定程度上带来选择上的困难，所以这里我们需要对宫格导航里的内容再次进行分类，我们以今日头条和熊猫直播两个 app 为例。

在设计展现形式上，不同的类型的 app 会根据实际的功能业务进行调整，例如今日头条为了能让用户快速选择自己的感兴趣的频道，减少其他因素的干扰，所以选择了纯文字标签的形式。

熊猫直播中选用了 icon 加文字的组合，因为针对视频用户他们对图形化的内容更加感兴趣。为了防止内容过多而导致用户选择困难，两个 app 都对内容进行了内容分类。

5.列表导航栏

列表导航由于条目清晰、层级明确被广泛应用，一般应用在二级页面，而在一部分功能性较强的的 app 中也担任着以及导航的作用，例如有 QQ邮箱：

由于所要展示的信息较多，所以会对其内容进行分组断开，帮助提高用户的操作效率，防止用户选择困难。在设计上列表导航的设计特点一般是自左到右 icon 加文字的组合，符合人们的阅读习惯，通常页面内容的优先级排列是由功能的重要性和用户的使用频率决定的。

在二级页面中，例如 TIM 相对设计上弱化了 icon 的设计，突出了信息设计，并且做了信息的分组，能帮助用户快速选择切换。

6.总结

我们通过对主流的 Tab 导航和抽屉式侧边栏导航、宫格式导航栏以及列表式导航的分析，导航设计作为产品或页面中重要的组成部分，设计工作中我们需要从产品的功能信息架构来确定导航栏的等级，结合用户需求以及产品业务目标来选择适用那种导航栏的设计，同时从交互和设计的角度来兼顾用户体验。

参考链接：

移动app设计： Tab导航是否是大势所趋？ https://www.jianshu.com/p/b817ce73573f

tab设计总结 https://www.jianshu.com/p/aad725558d8c 交互设计实战！TAB导航与侧边抽屉导航的巅峰对决 https://www.jianshu.com/p/217b96aa6bed 从逛商城学习产品设计：信息架构梳理如何从小白到精通？ https://zhuanlan.zhihu.com/p/20042697

海盐社（公众号）

作者：姜正

导航栏家族大揭秘

前言

目录