移动端设计模式——常见的几种导航形式

在移动端，导航是APP最重要的区别。根据不同的内容，选择不同的导航方式。没有完美的导航，只有合适的导航。根据具体的场景与需求，去选择最合适的导航形式，是设计师需要去考虑的。

那么什么是导航，导航就像书的目录一样，它会讲哪些内容，以及这些内容又是怎样排布的，导航可以让你在页面中不迷路，告诉你当前处于什么位置。

下面介绍移动端几种常见导航形式。

一.标签式导航（也叫Tab导航）

大多数app会选择标签式导航，标签式导航结构如下图所示。底部标签导航是iOS页面布局中比较推崇的一种导航方式。而顶部标签式导航是安卓常用的导航模式，它可以避免导航与底部虚拟按钮之间发生冲突，引起误操作。

1.1-标签式导航结构

1.2-标签式导航

使用场景：如果你的app有多个主要的任务而且你觉得它们都很重要，且不超过5个（考虑到手指接触时候的面积因素），并且它们之间的切换比较频繁，这个时候非常适用标签式导航。

优点：1.入口扁平化，直接展现最重要的入口信息，用户在各入口频繁跳转不会迷失方向；2.导航控件占据面积大，能够轻松进行点击操作，进行功能间的快速切换。

缺点：会占用一定高度的显示面积。

案例：网易云音乐，App Store使用的就是标签式导航。如图1.3所示

1.3-标签式导航案例

二.滚动式标签式导航

前面介绍标签式导航使用时，任务切换不超过5个。那么任务较多时候，这时候应该使用滚动式标签导航。使用该导航往往需要给他们提示，告诉他们页面之外还有一些标签存在。如图2.1所示，会露出界面外的一部分文案，表示界面之外还有内容。

2.1-滚动式标签导航结构

三、分段式导航

分段式导航特点：1.有分段式控件所控制的一种导航模式；2.尺寸较小，能轻松地融入界面，不占用空间；3.设计师还能在其两侧放置其他的UI组件。

3.1-分段式导航结构

注意事项：1.它是IOS的标准控件；2.不适合作为一级导航，往往作为二级导航与标签导航嵌套使用

案例：网易云音乐朋友页面

3.2-分段式导航案例

四、 舵式导航

舵式导航可以看为底部标签式导航的一种变体。它在后者的基础上，突出强调了一个标签并且放在中间的位置，样子看起来像攒了一个舵，所以取名为舵式导航。如图3.1所示，中间的标签作为重要且操作频繁的入口，一般都用图形或者颜色凸显出来。

4.1-舵式导航结构

使用场景：如果你的app几个重要的功能，并且它们切换频繁，其中一个作为app的核心功能或者是操作。这个时候可以选择舵式导航。

优点：中间重要商务操作显眼，较大限度引导用户进行操作。

缺点：中间按钮旁边的按钮点击率会低。

案例：微博，Lofter,我的生活in记等，如图3.2所示。

4.2-舵式导航案例

五、抽屉式导航

抽屉式导航的核心就是“藏”，：隐藏不重要的功能，从而让你的核心功能更加突出。菜单隐藏在当前页面后，只要单击入口就能将它拉出来，大大减少了主界面中的导航控件的数量。让你的主界面更加干净利落。常用于社交类app，例如QQ我的页面。

5.1-抽屉式导航结构

5.2-抽屉式导航案例

优点：节省页面空间

缺点：1.抽屉内部功能点击入口变深；2.左上角的小按钮具有隐蔽性

此外，随着大屏的普及，一是：减少页面控件，节省页面空间，变得没那么重要。二是：屏幕变大，左上角的抽屉式导航按钮反而用一只手去操作的时候很难按到，故而网易新闻客户端之前的抽屉式导航，最后变成了标签式导航。抽屉式导航常用于突出一个核心功能，其他不重要藏，例如打车app，核心功能是打车，其他功能没有那么重要就可以藏。

六、下拉式导航

特点：当用户点击该UI后，它将在页面上加上一个菜单的条目列表。这种操作比较复杂，现在比较少用，但是下拉菜单作为导航，还是有一些在其他地方继续应用。常常和其他导航结合使用。

6.1-下拉式导航

使用场景：和滚动式导航相结合，滚动式导航的特点是显示数目有限，但是能够实现快速的切换，而下拉导航的特点是能够显示足够多的条目，但是切换起来比较麻烦，两者结合，正好进行优势互补。

案例：Lofter发现页面，网易新闻等

6.2-下拉式导航与滚动式导航结合案例

七、列表导航

7.1垂直列表导航

使用场景：适用于二级导航或者功能层级比较浅，且功能间切换不频繁的主导航，垂直列表的视线都是从左往右，从上到下，所以要把最重要的条目放在最上方。偶尔也用于一级导航，有多个平级功能，且入口较浅，例如邮箱。

垂直列表导航结构

垂直列表作为导航案例

优点：清晰冷静，利于理解，冷静高效，快速定位。

缺点：1.不能充分利用整个界面；2.条目的个数与条目的详细程度成反比。要根据特定的情况选择合适的形式。例如美团外卖需要每个列表足够详细，用户直接看列表就可以知道想要的信息。通讯录用户要寻找联系人，这时候就要展示足够多的条目，列表信息详细程度反而没那么重要。

7.2轮播列表导航

使用场景：适用一些选项比较少，且不频繁跳转的app中或者浏览体验式app中。

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

缺点：用户很难跳转到非相邻的选项。

轮播式导航

7.3宫格式导航

宫格式导航

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

优点：功能扁平化，充分利用整个页面，适用作为二级导航，在有限空间内罗列大量功能。

宫格式导航案例

总结：没有完美的导航，只有合适的导航。导航往往不是单一的存在，例如抽屉式和标签式导航相结合，下拉式导航和滚动式导航相结合，没有最完美的导航，只有最合适的导航，而最合适的导航也会随着场景和需求的变化而变化。

参考：移动导航篇

关于导航框架的那些破事

网易交互微专业

《交互设计精髓》

《术与道-移动应用UI设计必修课》