【交互设计】八种导航模式在app中的应用

最近在自学交互设计，把学到的东西加上自己的理解整理出来，也算对自己学习过程的一个见证和总结吧！

导航像一棵树的枝干，构成了整个app的大框架和布局。

我认为导航的重要性有两点：

1）它能体现目前这款产品的主要功能和主推的核心业务

2）导航的设置需要根据用户需求和方便性来布局，我们把重要的、用户需求最大的，我们放在最重要的位置，让用户方便快速的找到他想要的内容，方便用户的选择。

下面我截了一些app截图

可以发现，使用导航的模式种类很多，但大致逃不开标签导航、舵式导航、抽屉导航、 Tab导航（分段式导航）、宫格导航、轮播导航、下拉导航和组合式导航八种。

一、标签导航

这是一种非常常见的导航模式，如果应用中需要频繁得在不同分页之间切换，可以采用这种导航。

特点：

1）入口扁平化

2）导航控件占据面积大，功能间能快速切换

「walk up」和「盒马生鲜」用了底部标签导航。用户能快速在四个标签之间切换，并能单手完成操作，一般使用这种导航时标签不会超过五个，否则点击区域很有可能重叠，会产生误操作。

「Bilibili」结合了底部标签导航和下划线式标签导航，优点能让二级导航更直观；缺点是会让内容部分被挤压，有点臃肿。

「喵街」在使用下划线式标签导航时，标签数量超过了五个，就使用这种滚动式标签导航。特别需要注意的是，使用这种导航时要给出提示，告诉用户页面之外还有一些标签存在。

二、舵式导航

舵式导航可以看为底部标签式导航的一种引深和变形。它在后者的基础上，突出强调了一个标签并且放在中间的位置，中间的标签作为重要且操作频繁的入口，一般都用图形或者颜色凸显出来。

特点：

1）核心功能放在导航最中间，能很大限度的引导用户点击操作

2）中间按钮旁边的标签点击率低

例如：有些音频app会把播放按钮放在导航最中间，有些生活记录app会把照片拍摄按钮放在最中间，另外一些app会把跳转到活动banner的按钮放在最中间。

三、Tab导航（分段式导航）

分段式导航是ios的标准控件，能够直接放在iOS  Tab栏中，所占空间小，能使内容区域更大限度得显示。

特点：

1）往往作为二级导航出现

2）可以在分段式导航两侧放其他按钮

四、抽屉式导航

抽屉式导航往往用于突出一个核心功能，隐藏其他不重要的功能的app，能大大减少主界面的控件数量。

特点：

1）若抽屉按钮放在左上角，不便于单手操作

2）抽屉式导航使内部功能点点击入口变深

类似「滴滴打车」和「摩拜单车」这类打车软件只有一个核心功能，就将打车、租车功能放在首页，其余不重要的功能隐藏起来。

五、宫格导航

功能扁平化，例如桌面导航，这种展现形式让我们以一种上帝视角去看整个页面的情况。所以所有的图标都是以平铺的形式去逐一的摆布。如果说列表式导航还有等级的区分，那么宫格式导航更佳扁平。除了运用于桌面上，也常用于app中，常用于二级导航，例如支付宝和微信。在界面上平铺使用频率相近但彼此又相互独立的功能条目。

六、下拉导航

下拉导航“藏”的层级比较深，单独使用的情况很少，往往和滚动式标签导航一起使用。滚动式导航的特点是显示数目有限，但是能够实现快速的切换，而下拉导航的特点是能够显示足够多的条目，但是切换起来比较麻烦，两者结合，正好进行优势互补。

七、轮播导航

适用一些选项比较少，且不频繁跳转的app中或者浏览体验式app中。但是在主流app中，我没有发现单独使用轮播导航的app,一般都与其他导航配合使用。

特点：

1）轮播式导航，隐藏其余导航选项，保证页面简洁，让用户在同一时间只专注一个目标，并且往往配合大图大背景，获得较好的体验。

2）用户很难跳转到非相邻的选项。

八、组合式导航

往往用两种或者两种以上不同形式或者相同形式的导航组合而成。

特点：1）不同导航的组合可以让界面层级更加丰富

         2）能削弱一种导航带来了劣势

注意事项

在导航的使用过程中，要注意不同操作系统会有自己的规范。如下图「网易云音乐」在安卓和iOS平台的导航模式运用的不同。在iOS中，主导航用的是底部标签导航。但是在安卓手机中，因为安卓手机很多机型底部自带虚拟键盘，若还使用和iOS一致的导航，很容易发生误操作，故「网易云音乐」将导航放在顶部类似iOS系统的Tab栏当中（2-3个为宜）。而且「网易云音乐」在两种系统的导航分类也不一样，安卓手机将相对不重要的一级导航放到二级导航的位置，避免一级导航都挤在Tab栏当中。