编辑导语：说到导航想必大家都不陌生，所有的产品基本都离不开当导航，产品人要想办法优化导航，而用户也要通过导航快速的找到想看的东西。那导航的范畴是什么？其背后的产品逻辑是什么？有哪些常见导航结构？本文作者来为我们解答这些疑问。

导航，一个所有产品人都司空见惯的名词，一个几乎所有产品都离不开必备结构。包括正在看这篇文章的你和你的产品，还有我，我们都需要一个更好的导航！

做好一个导航就等于做好了产品的一半，但是大家真的理解导航吗？有没有认真的想过导航起作用的原理呢？

这篇文章从导航背后的产品逻辑出发帮大家重新认识一下导航，通过这篇文章我们可以了解到以下内容：

1. 导航的范畴
2. 导航起作用的产品逻辑
3. 常见的导航结构

一、导航的范畴

想做好导航就得先清楚什么是导航，我们先看一下新华词典对导航的解释：引导飞行器或船舶沿一定航线从一点运动到另一点的方法。

我们提炼一下关键词：引导，一点运动到另一点。

也就是说能够对达到目标点起到引导作用的，能帮助你顺利的从一个点到达另一个点的工具就可以称作为导航。

在我们产品设计中也是一样的道理，导航的目的或者说导航存在的根本意义，就是为了让用户在功能千千万或内容万万千的网站中迅速找到自己想要的。那么只要是有助于实现这一目的的设计，我们都可以划分在导航需要考虑的范畴之内。

即使你不是导航，但是你会影响到用户能否迅速便捷的找到自己想要的，在这一刻你就是导航。

那么从产品设计上哪些设计会影响到用户能否迅速便捷的找到自己想要的呢？

答案是：所有用户看到的都会影响。

用户想要找一个功能首先要知道这个功能在哪里，这个时候是页面上文字描述的是不是够准确在起作用。假如用户常用的功能被放在了一个突出显示的区域用户就会更容易找到目标，这个时候是排版布局够不够合理在起作用。

知道自己目标的位置之后用户要一层页面一层页面的点进去直到目标位置，这个时候是层级的控制是否合理、信息结构的处理是否轻重分明在起作用。

用户在使用过程中还会在不同的目标直接来回的切换需要保证切换的顺利方便，这个时候是路径是否清晰、交互引导是否友好在起作用。

我们模拟了一遍用户使用的具体场景之后会发现，影响用户能否迅速便捷的找到自己想要的点其实遍布了产品的每一个页面每一个角落，所以我总结了一个概念的说法：所见皆导航。

按照场景不同可以将导航的范畴划分为以下几个方面：

1. 文字表达
2. 排版布局
3. 信息结构
4. 跳转路径

最后一句话：导航并非只是看得见摸得着的树状的分类，分类只是信息结构的一部分，导航更多的代表的是对影响浏览效率的产品逻辑的处理。

二、导航背后的产品逻辑

刚才说完了导航的范畴，相信通过对上述内容的阅读大家对导航背后的逻辑也应该有了一些理解。

所有设计都是产品的一部分，最终目的都是为让用户使用产品的体验更好，导航在这方面起到的作用是举足轻重的。

大家经常会遇到一些诸如把导航做成悬浮的、减少一下导航的层级之类的产品优化，可能今天改改这个点明天改改那个点，看似每天都在优化产品倒不如说是随着不停暴露出来的问题在手忙脚乱的补漏洞。

原因是这些优化都很零散，没有人思考过他们背后的逻辑是什么、处在什么样的一个大场景里，是不成体系的，没有体系也就没有方向，每天都是遇到问题处理问题而不能提前预知并且掌握在自己的产品规划之内。

我们可以一起思考一下当用户打开一个网站时最初心理活动是什么？

导航，用通俗一点的话来说就是帮助用户找东西。就像逛商场，分为两种人：有目标和无目标，为了更好的说明导航的作用我们这篇文章只说有目标的情况。

清楚的知道自己要买什么但是这个人不一定知道怎么找，所以又分为这三种情况：

1. 知道怎么找
2. 不知道怎么找
3. 中途折回寻找

然后我们分别思考下这三种场景下用户的心理活动：

1. 知道怎么找

我很清楚商场的商品分类、每个分类的位置，我要找一条最近的路径直接走过去。

这个心理活动表现在产品使用上就是这样的：我用过这个产品，知道怎么用，我也知道我的目标位置（要操作的功能或要阅读的文章等），我知道要先去哪个页面再点哪个button，我希望快速的到达我的目标位置。

于是我们就知道了针对于这种情况该怎么有效的优化导航：

1）优化产品的信息结构避免层级过深；

2）调整页面布局提高常用功能的曝光度。

2. 不知道怎么找

我第一次来商场，并不知道商场里的各种商品是分类摆放的，甚至不确定我要买的东西属于哪一类。我需要先搞清楚这个商场里的东西都是怎么放的，要找的东西在哪，还要看下地标找到过去的路。

这个心理活动表现在产品使用上就是这样的：我对这个产品很陌生、我得先看下这个产品都能干嘛、我要找的功能有可能在哪一个模块或者页面、我怎么操作才能找到这个功能。

于是我们就知道了针对于这种情况有效的优化方式是：

1）页面标签明确与用户心理预期一致，我认为一把木质梳子属于日常用品类你就不要给它打上木质家具的标签；

2）清晰展示产品的框架结构，让用户对产品的功能范围一目了然；

3）适当的使用交互效果来引导用户快速的学会使用产品，比如在搜索框旁边显示一个放大镜的图标，多数人一看就明白这里可以搜索。

遵守易懂大于易到达的原则，用户对于一个陌生的产品首先要先能看懂第一步从哪里开始、怎么开始，再便捷的操作路径也需要用户先知道才会去操作。

3. 中途折回寻找

我现在刚刚吃完了美食，突然想到要买几件衣服，我得看下去服装区的路在哪。

我记得是在二楼，我先看下我现在在几楼就可以了。但是不巧这个商场设计的太差了根本没有标注清楚现在的楼层，但是我记得刚进来的时候是怎么到那里的，我可以先回到大门口再过去。

这种情况表现在产品使用上就是这样的：我刚看完了一篇科技类的文章，现在想去看一看教育类的文章，我得看下我现在在哪个分类，怎么过去教育分类。

如果知道返回的路径的话我能不能直接一步就跳转过去，如果不巧产品的信息结构设计的很乱，用户随便跳几个页面就迷路了，用户很可能会希望先重新返回首页再找教育分类。

于是我们就知道了针对这种情况有效的优化方式是：

1. 采用悬浮导航：不管用户在页面的哪个位置都能快速的通过导航切换到目标位置；
2. 提供相关推荐：预测用户在浏览当前内容或者使用当前功能时下一步有可能会采取的动作，并把他放在某个易见的区域；
3. 明确用户的当前位置和返回的路径；
4. 提供最近浏览是一个很好的选择；
5. 明确首页位置，并尽可能的在每个页面都提供直达首页的入口。

清楚了用户使用产品时的不同情境、在不同情境下的不同需求，才能采取针对性的产品优化措施。

我们把所有对导航的需求场景总结为三类，从用户的心理活动出发搞清楚每一类场景背后的需求逻辑。我们会发现所有需要做的优化都有了方向，这样我们就能把工作做在前边，提前对产品做好规划，效果显著而且事半功倍。

三、常见的导航结构

这个就是大家普遍认为的导航了，有抽屉式、下拉式、列表式，也有顶部布局、左侧布局、底部布局等等表现形式。

其实导航的结构只是导航的外在表现形式，只有先理解了导航背后的产品逻辑才能看懂不同的结构各自的区别在哪里，从而能根据自己的产品的实际情况选择最合适的导航结构。

这部分内容工具性就比较强了，没有多少好理解的，根据需要选择合适的拿来用就可以了。

这里只列举一些常见的导航结构供大家参考：标签导航、舵式导航、抽屉导航、Tab导航、宫格导航、点聚导航、组合导航、列表导航、轮播导航、瀑布导航。

每种导航各有优缺，需要大家根据需要自行判断或者组合使用，可以从以下几个方面进行考虑：

1. 我们的主入口有几个？
2. 我们是否有特别要突出的入口？
3. 界面中的次级元素入口多与少？
4. 界面是否要展示次级界面的部分元素信息？

……

四、结语

这篇文章是我这些年做产品以来对导航的一些个人思考，在写这篇文章之前也特意浏览过互联网三巨头体系下的一些官方主页，其中也不乏一些需要优化的点。

由此让我感觉到很多人对导航的理解可能并不是特别的深入，所以特意写了这篇文章希望能抛砖引玉，对产品路上的小伙伴们有所帮助。

大家有任何不同的看法欢迎在评论区一起留言讨论，谢谢大家阅读这篇文章！

进阶提问：

• 一篇写VR教育的文章是该归为科技类文章还是教育类文章呢？
• 一瓶桃子罐头应该把他放在休闲零食区？饮料区？还是水果区呢？

有兴趣的同学可以在评论区讨论。

本文由 @毛竹 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议