APP常用导航总结

虽然我承认导航这种东西在现在的app非常常见，但是实际上，这种东西也不是必须存在的。如果应用够轻，比如雅虎每日新闻News Digest就不存在导航这种东西。只有当app的架构扩大到一定的程度，当内容繁杂到无法展示在一个页面中，这时候才需要用到导航。

在选用导航的形式之前，更重要的是对内容进行分类（只针对内容，功能的导航可以不需要）。类别分清楚了，就对这个类别起个名字。之后，用户就可以根据类别来找到他们需要的内容了。

当然，导航也是可以嵌套使用的，不过嵌套的时候建议选用不同的导航形式。

导航大概有如下：

• 底部Tab
• 顶部Tab
• 抽屉式
• 下拉筛选式
• 侧边栏式
• 九宫格式
• 列表式

一、底部Tab

底部Tab是iOS提出来的导航方式，已经延续使用了很多年，所以这种导航最为常见。

优点：

1、可见性非常好，底部Tab非常明显，易于发现；

2、同时，由于实在底部，操作性也非常好，用户很方便就能触及到这个区域。

缺点：

1、容纳导航的类别有限，iOS建议最多五个，**过五个之后，底部有人就容纳不下了。

2、占据空间大，一般都是文字+图标的形式，占据空间略大。

当然，这种导航还存在一种变形的形式。某些app**尝试在这里加入重要的操作，形成super tab，变成了一种兼顾导航和操作的导航栏。

不过，有个小小的疑问就是，为什么我见到的所有的操作都是放在中间的呢？这个问题欢迎探讨一下。

二、顶部Tab

顶部Tab是谷歌提出来的，为了区分与iOS的区别的一种导航模式，由于在顶部，手指难以触及，所以谷歌对应地提出了手势操作的解决方法：通过在屏幕左右滑动来切换标签。

优点：

1、扩展性非常好：标签的个数没有上限，不过太多的话，越是后面的页面渗透率**越低。

2、占据空间小：相比于底部Tab，顶部Tab一般占据的空间更小（因为不需要考虑手指点击，所以可以把区域缩小，只选用图标或者文字即可），可以把更多的空间安排给内容展示。

3、手势操作非常方便。

缺点：

可见性略逊：这是空间占据的区域变小之后的后果。

当然，顶部Tab有时候也**容纳一些按键，形成一种super tab，如上图的网易新闻，某种意义上，那就是一种super tab。

三、抽屉式

抽屉式也是谷歌提出来的一种导航模式，由于虚拟按键的存在，所以在安卓上使用底部Tab**造成双底栏，视觉观感不佳。但是，多重导航普遍是需要的，所以，谷歌提出来侧边栏的形式。通过汉堡菜单按钮触发这个侧边栏。

优点：

1、扩展性好，导航的个数没上限。

2、不占据空间，通过按钮触发，所以这种导航是占据空间最小的。

缺点：

1、可见性太差，用户还没能把汉堡菜单按钮和侧边栏联系起来，所以，侧边栏的渗透率很低。

2、操作复杂，汉堡菜单放置的位置比较难以触及，同时不同的标签页切换步骤也比较多。

四、下拉筛选式

下拉筛选式跟抽屉式很类似，可以说只是视觉上的一些区别而已。

优点：

1. 占据空间小，所以很容易嵌套到其他的导航里面去。

缺点：

1. 可见性差
2. 操作步骤较多

关于这个下拉筛选式，我设想的是如下的嵌套方式：

五、侧边栏式

侧边栏式是一种在手机上很少见的导航，更多的是在PC端**常见一些。

优点：

1. 可见性好，易于发现
2. 扩展性好

缺点：

1. 挤占了内容展示的空间
2. 手指难以触及，因为一般都是在左上角的位置

六、九宫格式

九宫格是一种常见的功能型导航，这种导航的思路很简单，就是把功能排布出来，任君挑选。

优点：

1. 扩展性非常好
2. 视野范围内可以展示的功能入口多

缺点：

1. 单纯的只是作为入口，无法展示内容
2. 当排布过多的时候，用户容易眼花缭乱

七、列表式

这也是一种常见的功能导航。

优点：

1. 扩展性非常好
2. 视野范围内可以展示的功能入口多

缺点：

1. 单纯的只是作为入口，无法展示内容
2. 当排布过多的时候，用户容易眼花缭乱

这篇东西其实只是一个总结，总结得也比较浅显，更多的是希望在以后自己在设计的时候，有个参考的东西而已。而且是考虑当有导航嵌套的时候，要怎么样选用这些导航。

而且，不同的导航之间，其实差别都不是特别大，翻来覆去就是：可见性、操作性以及是否**挤占内容展示空间这几点。这些点在导航设计中也不是难点。

[1] App常用导航框架  http://www.jianshu.com/p/45930d06d504

[2]［系列］APP设计之五：导航

[3]一种新的底栏交互方式尝试

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