App各类导航设计适用场景及优劣势总结

最近在看一些产品文章时，总会看到一些词汇（例如：“tabbar”、“抽屉菜单”、“宫格菜单”），开始也不是很能理解，但是结合上下文还是能猜出一二的。之后去搜了一下相关资料，得知这原来属于App导航设计的范畴，所以就简单总结了一下常见的App导航设计，跟大家共享。

1.Tab导航

又称为“标签式导航”，分上、下两种。

举例：

左：多看阅读   右：网易云阅读

适用场景：
（1）上面的tab导航，一般适用于对当前页面的分类查看，或者改变当前视图。可以滑动，所以数量可多可少；
（2）下面的tab导航，一般是用来展示App的核心功能，可以迅速切换，适合用于需要频繁切换的功能。受限于屏幕宽度，数量一般控制在5个以内，4个为最佳，（以4个举例）其中第2、3个最好操作。当有更多操作的时候，可以将最后一项设置为“更多”，来将一些次要功能进行隐藏。

优势：

1、让用户快速了解app的核心功能，且切换页面方便，简单高效，用户不易“迷路”
2、所有入口都可以看见，容易寻找

劣势：
1、占据一定屏幕高度，如果是下方tab,浏览时会阻挡内容
2、可展示功能数量少，最多只有5个

2.抽屉式导航

举例：

左：知乎日报    右：36Kr

适用场景：
将并不是太常用或者切换不频繁的功能隐藏在主界面之后

优势：
（1）导航界面隐藏在主界面之后，有助于用户集中注意力，营造沉浸式体验
（2）可容纳多个条目，可扩展性强

劣势：
（1）用户不容易发现，使用户认知成本增加
（2）用户容易“迷路”

3.宫格导航

举例：

左：美颜相机    右：美图秀秀

适用场景：
适合用于独立、无功能交叉、不频繁切换的部分，多用于二级菜单

优势：
分类清晰、入口独立、风格简约

劣势：
并不会展示实质内容，不适合需要频繁切换的功能

4.列表式导航

举例：

糗事百科

适用场景：
通常位于二级页面，不展示实质内容，作为内容列表的一种图形化方式展现

优势：
结构清晰、简单，能够让用户快速定位想要找到的内容

劣势：
不展示实质内容，需要用户点击后才能知道具体内容，增加了用户的操作成本

5.舵式导航

也称“点聚式”导航，path首创。

举例：

新浪微博

适用场景：
适用于非常重要且用户操作频繁适用的功能点，将这些功能点汇聚，放在底部tab的中间或者右边（根据app的具体功能确定）

优势：
突出的表现入口，能够吸引用户注意力，使得频繁使用的入口容易被用户接触到

劣势：
入口数量有限、可扩展性差

6.轮播导航

举例：

墨迹天气：当添加了多个城市，查看城市天气时，为轮播式导航

适用场景：
常用于查看图片类

优势：
（1）操作方便，只需手指左右滑动即可
（2）内容突出展示，增加了曝光率

劣势：
只能查看相邻卡片展示的内容，并不能跳跃性地进行选择

7.组合导航

举例：

QQ

适用场景：
当前很多app都使用了组合式导航。当一种导航方式已经不能满足app的复杂功能时，组合导航就能很好的安排信息的排列方式，以最优的方式来引导用户使用app

优势：
可以根据app的功能需要，进行多种导航方式的组合，来达到最优的信息展现

劣势：
app变得厚重，入口数量较多时，用户容易眼花缭乱，给用户造成心理压力

小结：
不同的导航方式都有各自的优缺点，导航方式的选择要依据自己app的信息架构和具体功能而定，最适合用户的才是最好的！

作者：summerHappy，个人公众号 i-pm-road，欢迎关注~