根据产品层级的深度和广度，选择适合的导航模式，是产品设计中的关键一环。与大家共勉。

写在前面：看了很多总结导航的文章，其实都基本雷同，但是都觉得不够细致，也不是从我们常用的产品去分析的，因此用自己的思路重新分析了一遍，某些段落来自引用，比如拇指热区，某些来自我读过的文章，但大部分的分析来自我的原创。这篇文章应该说是站在巨人的肩膀上，自己的一些浅见。

任何APP的组织信息都需要以某种导航框架固定起来，就像是建筑工人拔地而起的高楼大厦一样，地基非常重要，之后你想要盖多少层楼、每层楼有多少间房，都在地基的基础上构成。而一个新的产品也是这样，合适的导航框架，决定了产品之后的延伸和扩展。

不同的产品需求和商业目标决定了不同的导航框架的设计模式。而交互设计的第一步，就是决定导航的框架设计，框架确定后，才能开始逐渐丰富血肉。

首先，我们要为组织信息分层，在这一步骤，一定要做好信息层级的扁平化，不能把所有的组织信息都铺出来，这样做只会让用户心烦意乱找不到想要的重要操作，也不能把层级做的很深，用户没有那么多耐心跟你玩躲猫猫。一定要将做核心、最稳固、最根本的功能要素放在第一层页面，其他得内容收在第二层、第三层、甚至更深。

之后，根据层级的深度和广度来确定导航的设计模式。不要觉得这有多难，移动端的屏幕尺寸就这么大，操作方式也无非就是点击、滑动、长按这些。因此导航模式一般也就分为以下7种（当然你可以在这七种的基础上互相组合）接下来我们可以具体分析一下这七种导航模式。

一、标签式导航

也就是我们平时说的tab式导航，是移动应用中最普遍、最常用的导航模式，适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户使用频繁，彼此之间相互独立，通过标签式导航的引导，用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效。需要注意的是标签式导航根据逻辑和重要性控制在5个以内，多余5个用户难以记忆而且容易迷失。

而标签式导航还细分为底部tab式导航、顶部tab式导航、底部tab的扩展导航这三种。

1、底部tab式导航

如果此时你观察一下自己手机中常用的APP你就会发现QQ、微信、淘宝、微博、美团、京东等全部都是底部tab式导航

这是符合拇指热区操作的一种导航模式，那么什么是拇指热区呢？当你走在路上、单手持握手机并操作;站在公交车上，一手拉扶手，另一只手操作等等这些场景时，你最常用的操作就是右手单手持握并操作手机，因此，对于手机来说，为触摸进行交互设计，主要针对的就是拇指。

但在手机操作中，拇指的可控范围有限，缺乏灵活度。尤其是在如今的大屏手机上，拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边。当用右手持握手机的时候（左撇子毕竟是少数，我们还是要为主流用户设计，拇指的热区如下图所示）

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

随着手机屏幕越来越大，内容显示变多了，但是单手操作变难了。这也就是为什么，工具栏和导航条一般都在手机界面的下边缘，而将导航放置在屏幕底部即拇指热区，这样的方式为单手持握时拇指操作带来了更大的舒适性。

将导航放置在屏幕底部也不仅仅关乎到拇指操作的舒适性，还关系到另一个问题：如果放在上面，用手指操作时，会挡住阅读的视线。如果控件在底部，不管手怎么移动，至少不会挡住主要内容，从而给予清晰的视角。呈递内容的屏幕在上方，控制按键在下方。

这也是为什么我是个果粉的原因，iPhone把一个需要按压的home键放在手机底部比Android手机将三个触摸式物理按键放在底部高明多了，这些接近屏幕边缘的物理按键挤在一起，手指非常不便于操作。（华为甚至直接将3个物理按键放在了屏幕里），尤其是在我玩游戏的时候总会误触发这3个物理按键，造成无意退出，非常不爽。如果再将导航也放置在底部，只能对舒适性说拜拜了（市面上的主流Android手机）

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

2、顶部tab式导航

Android的物理按键已经放在底部了，为了不产生堆叠，很多Android应用运用了顶部tab式导航，这是一种妥协下的行为。（下图为微信Android和iOS图）

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

而如今，在妥协物理按键和拇指操作舒适中，微信Android版抛弃了顶部导航的方式，和IOS保持了一致

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

当然顶部导航也不是那么一无是处，QQ音乐和酷我音乐现在用的就是顶部Tab式导航，为了更好的浏览基本信息（歌手、歌曲名）、以及支持快捷操作（播放/暂停）播放器需要固定在底部,那么顶部tab导航不失为一个好选择（如下图）

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

还有腾讯新闻和网易新闻这种新闻类APP，由于内容、分类较多，运用顶部和底部双tab导航，而切换频率最高的tab放在顶部，这是为什么呢？因为新闻在每个tab都是沉浸式阅读，最常用的操作是在一个tab中不断地下滑阅读内容，将常用的tab放在顶部，加入手势切换的操作，反倒能带来更好地阅读体验。（如下图）

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

小结：在两种情况下可以选择顶部tab式导航，

l 某项功能必须固定在底部，那么其他tab只能固定在顶部，但为了方便操作，顶部tab导航最好支持手势操作，即滑动即可切换;

l 该APP是沉浸式体验，如新闻、小说等，为了带给用户更好的阅读体验，可以将tab放在顶部。

3、底部tab式导航的扩展形式

   在有些情况下，简单的底部tab式导航难以满足更多的操作功能，这个时候我们就需要一些扩展形式来满足需求。如微博和QQ空间、闲鱼都做了这种扩展，也因此给设计增加了一些个性化的亮点（如图）

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

在这些APP中，为了让用户更简单的贡献内容，突出了按钮的设计，让平淡的标签栏多了几分趣味。

标签导航总结：

实际上，底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式，他不怎么出彩，但是绝对不会犯错。在大屏幕时代，底部Tab模式的导航更能适应，也更好设计。

适用于：入口分类数目不多，可以控制在5个以内，且用户需要在入口间频繁切换来执行多个任务

需要注意：结构太过复杂而且不稳定的应用不适合标签式导航

二、抽屉式导航

经常和底部tab式导航结合使用的抽屉式导航，我们可以称之为优雅的隐喻。抽屉式导航将部分信息内容进行隐藏，突出了应用的核心功能。设想你的产品信息层级有非常多的页面和内容，难以在一屏内显示全部内容，那么你一定首先会想到去设计一个底部或顶部的tab导航，但导航太多无疑显得臃肿，而且使用户难以点击，那么这个时候，抽屉式导航是个不错的选择。

但是，抽屉栏式导航有两大缺陷

1、在大屏幕手机上，单手持握时处于操作盲区，难以点击

我们看到随着iPhone6和iPhone6 plus的推出，到今年6S的持续推进，大屏幕手机时代就这么不可阻挡的来了，而屏幕顶部左上角的抽屉栏位置，一个需要被经常操作的入口，现在，处在了操作盲区。（如下图）

网站导航设计 移动端导航设计 移动站点优化 移动站点策划

2、 抽屉式导航可能会降低你产品一半的用户参与度

抽屉栏为页面带来干净的设计的同时，也让用户忽视隐藏的信息，既然你第一眼看不到这些入口，那么你也就会时常忘记它们在哪儿。这也导致了隐藏在抽屉栏内的信息内容用户点击率下降，参与感降低。

那么，问题来了，到底什么时候适合用侧导航呢？

我们总结一下：

l  如果应用主要的功能和内容都在一个页面里面。只是一些用户设置这类低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观，可以把这些辅助功能放在抽屉栏里。

l  如果你的应用有不同的视图，且他们是平级的，需要用户同等地对待，抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。

l  在大屏时代使用抽屉栏，手势操作显得尤为重要，从屏幕边缘唤出抽屉栏是个不错的选择。

需要注意的是：需要用户有一定参与的信息层级，最好不好放置在抽屉栏