app常见的导航模式

导航是用户获取自己想要的信息以及完成任务的重要途径，app导航设计直接影响着用户的操作体验，一个好的导航设计可以让用户快速的了解到产品的功能和信息组织架构。

那么app的导航设计该如何做呢，说实话不同的app根据自己的实际情况采取一种导航或者多种导航结合的形式，比如快手app为了让更多的信息流展示，则采用标签式导航和抽屉式导航结合的形式。

那么我就把常见的导航形式整理出来，给大家做设计的时候提供参考。

1、底部标签导航

底部导航一般采用3-4个标签，最多不会超过5个，有更多的选项操作的时候将最后一项设置为更多，将一些次要的功能放在更多里面，这是一种非常常见的导航形式。

优点：适合在几类信息之间频繁切换使用，彼此之间相互独立，用户可以迅速的在不同层级找到自己想要的信息。

缺点：占用一定的高度，如果用户是小屏幕手机，用户体验不是太好。

2、顶部标签导航

顶部导航在ios app中一般用作二级导航，在andriod app中这种导航模式一般用作一级导航，但自从谷歌推出”抽屉式导航“以后，顶部标签导航一般就用作二级导航，当内容分类较多的时候一般采用顶部标签导航设计模式。

优点：可以固定数量，也可以不固定数量，像网易新闻客户端那样，可以左右滑动，衍生更多标签。

缺点：占有一定的高度空间，小屏手机体验不是太好。

二、底部和顶部双tab导航

标签式导航一般放在底部，如果产品分类内容较多，则采用顶部和底部结合的导航形式，例如下图的今日头条和爱奇艺。

三、抽屉式导航

有的人可能会说，我虽然有6-7个左右标签，但是只有一些标签是主要的，其他标签用户很少使用，这个时候一般采用抽屉式导航。抽屉式导航是指将一些不常用的功能隐藏在当前页面，当需要用到的时候点击入口或者侧滑即可像抽屉一样展开，上面也说了，这种适合不需要经常切换的次要功能，比如设置、关于、会员等，快手和QQ是采用这种导航形式。

优点：节省页面空间，用户更多的注意力集中在当前内容，而且不用担心小屏手机用户体验问题，适合不那么频繁切换内容的应用。

缺点：次功能入口比较隐藏，用户不容易发现，同时次功能需要二次点击，增加用户使用成本。

四、下拉式导航

和抽屉式导航类似，下拉式导航也是隐藏次要入口的一种形式，一般位于产品顶部，点击呼出导航菜单，导航的菜单以浮层的形式位于界面上层，通过点击导航菜单以外的区域使其收起，下拉式导航的面积一般较小，所以采用列表的形式展现菜单内容居多，这种导航形式一般用作筛选内容。比如下图的拍拍贷和美团。

优点：与界面的连贯性比抽屉式导航要好，同时用户能够感知当前位置。

缺点：由于位于屏幕上方，且相对隐蔽，不能结合手势的左右滑动操作，所以也不利于频繁切换使用。

五、宫格导航

宫格导航主要将入口全部集中在主页面中，各个入口之间相互独立，没有太多的交集，无法跳转互通。

优点：让用户整体了解app的服务，从而选择自己需要的那个服务。

缺点：用户无法第一时间看到内容或者执行操作，选择的压力会比较大。

由于上述优缺点，这种导航形式越来越少用在一级导航、一般作为工具入口的集合（例如：美图秀秀）或者内容列表的一种图形化表现形式（比如快手app的视频流）

宫格导航的变式有很多，比如上图的美图秀秀增加横向滑动来增加导航入口的数量，支付宝通过纵向滑动来增加导航入口的数量，快手通过控制卡片的大小来显得不单调和凸显主要的内容。

六、列表导航

列表导航是现有app中一种主要的信息承载模式，列表导航和宫格导航类似，属于二级导航，只不过有时候列表导航太长，不利于用户操作的时候才会采用宫格导航，通常不会展示任何实质功能。

优点：导航结构清晰，易于用户理解，用户能够快速找到自己想要的信息。

缺点：如果列表太多，一屏承载不下，用户需要下拉才能操作，这个时候不如宫格导航的用户体验好。

拍拍贷由于导航内容较多，采用列表导航和宫格导航相结合的方式，而微信发现界面由于导航内容较少，首屏就能展示的下，直接采用列表的导航形式。

七、舵式导航

驼式导航中间加了个＋号，像轮船上用来指挥的船舵，故而得名，比如闲鱼、新浪微博，当标签导航难以满足导航的需求，这个时候我们就需要一些扩展形式，和标签导航相比，驼式导航主要将类似生产内容的主要按钮放在中间，标签更加突出醒目，同时对主功能标签做了扩展功能。

优点：突出重要且频繁操作的入口

缺点：功能入口过多时，该模式显得笨重不实用。

八、点聚式导航

当需要更多展示内容和功能，需要极端简化其入口，一般可以使用点聚式导航。（其实我觉得上面的驼式导航就是点聚式导航和tab导航的结合体），点聚式导航将核心功能聚合到主界面展示，方便用户呼出使用，由于点聚式导航占用空间小，一般融入一些动态的效果，让导航更具有趣味性，一般视频拍摄、编辑类app会采用这种导航形式。

优点：灵活、有趣，界面更加开阔。

缺点：隐藏了功能，且隐藏功能不能太多，不然显示后，用户较难反应。

九、轮播导航

app首页的banner广告位就是采用轮播导航，当应用信息足够扁平的时候则采用轮播导航。

优点：页面比较简洁，导航不会占用太多空间，同时左右滑动即可，操作比较便捷。

缺点：承载的入口数量有限，如果超过10个则显得有点多。

总结：现有的app很少有采用一种导航的设计形式，一般是多种导航结合使用，并没有固定的说一级导航必须用哪种导航形式，二级导航必须用哪种导航形式，一切以用户体验为准，最后还是那句话，不要拘泥于形式，所有能达到目的，具有良好用户体验的导航都是好导航！