移动端导航设计，这里一定有你不知道的——细节系列第 01 篇

2024-5-23 资深UI设计者

移动端导航设计，这里一定有你不知道的——细节系列第 01 篇

写这篇讲导航的，本质上是希望提高自己界面设计的组件化意识，也是对近期自己看的关于导航方面文章的一个总结和输出，

为什么写这篇讲导航的，本质上是希望提高自己界面设计的组件化意识，也是对近期自己看的关于导航方面文章的一个总结和输出。

前言

结构和组织是关于建造房间的，而导航设计则是关于增加门窗的——《信息架构》

在英文中Navigation这个词源于拉丁文，原意是：操纵船只在海上航行。所以导航的目的在于帮助我们到达目的地。通俗的l来说就是你知道自己在哪，下一步怎么走，如果不想去先前的目的地，那也可以顺利的回到出发的原点，这就是导航的作用。

对于导航优缺点的思考，我主要从以下三方面来考量：

第一，操作方式。是滑动、点击还是其他手势，不同的操作方式难易程度是不同的；

第二，导航所处的位置。在页面顶端还是底部，结合操作方式来考虑操作的便捷性，例：导航在顶部，但不能滑动操作，对用户而言便捷性就比较差；

第三，导航模块之间切换是否方便。是否需要页面的跳转才能切换不同模块，不同的切换方式难易程度也不同；

这篇文章主要讲的是移动端的导航，但我们需要知道的是，在产品中没有孤立存在的模块，导航系统与组织系统、标签系统之间是密不可分的。

一、导航分类

导航分为主导航与次级导航，主导航进一步又分为全局导航与瞬时导航。

全局导航——你能看到每一个，找出你想要的那一个。

瞬时导航——平时藏起来，需要的时候一点就出来。

二、各种导航优缺点

（一）底部Tab栏（标签栏）

底部 Tab 栏最大的优势在于不同模块之间方便快速的切换，无论是 iOS 还是 Andriod 系统，我们看到最多的主导航方式就是底部Tab栏，形式如下图所示： 优点：

切换快速方便——可以承载同一优先级的内容，位置处于页面底部且层级扁平，可以进行方便快速的切换；

缺点：

遮挡内容——常驻的Tab 栏遮挡了部分内容，减少了页面承载信息的容量，当然现在有新型模式：上滑阅读时隐藏Tab 栏，下滑返回时显示，这种模式某种程度上解决了这个问题；

承载数量有限——模块数量不超过5个，数量上的限制也就限制了 APP 主导航的分类数量，是否使用此导航方式，要根据 APP 的组织系统来决定；

（二）底部Tab栏扩展形式——驼式导航

优缺点与底部Tab栏基本相同，“驼峰”的作用主要是把一项对于产品来说高优先级的行动放在突出位置，并用较大的“视觉重量”来展示，如下图所示的闲鱼、有道云笔记的驼式导航，它们都有自己的最优先级的模块需要突出展示，因此选用了驼式导航。

（三）跳板式导航（宫格式导航）

跳板式导航最大优势在于生动的图标设计使得模块“好找”，当然这也会有两面性，形式如下图所示：

优点：

好找——较大的设计“重量”是通过图标来实现的，用户对图像的记忆是超过文字的，这也会使用户在操作了几次后潜意识就能找到要找的模块，当然仅有文字的跳板式导航无此优点，如下图所示，仅就好找这个维度，有图标的爱奇艺是胜过仅有文字的网易严选的；

缺点:

麻烦——无法在多入口间来回转换，不适合信息较为扁平的 APP例：新闻类 APP不适合宫格式导航，你可以想象你看完军事类的新闻，想看看科技新闻，总得先回到主页面再跳转到科技类页面，页面跳转的增加导致用户操作的繁琐程度增加；

压力大——希克定律指出，一个人面临的选择越多，压力越大，这在宫格数量较多时会突显，再加设计模式的扁平化，进一步增加用户的选择压力；

题外话：虽然现在宫格式导航出镜率与早年相比大幅下降，但从手机操作系统诞生之日起，宫格式与轮播式导航的组合一直作为系统主导航存在，原因在于对大多数用户而言经常使用的 APP 最多也就十几个，宫格式突出图标的展现方式有利于提高APP的辨识度。

（四）列表菜单式导航（层级导航）

列表式导航的最大优势在于可以高效、清晰地展示信息，同时可以容纳较多信息，形式如下图所示：

优点：

高效——Y轴方向占用空间少，可以高效、清晰地展示信息，X轴方向可以容纳较多信息，适合于既要有名称又要有描述的模块，例：支付宝—支付-我的页面—余额一栏就可以看到你有多少余额，而不用进入，体现了列表式导航栏的高效；

好分组——鉴于屏幕Y轴方向有较大的空间可以利用，也就可以利用这些空间进行分组分类。

缺点：

麻烦——同宫格式导航导航缺点1，这里不在赘述；

压力大——同宫格式导航导航缺点2，举个例子，无论iOS系统或Andriod系统设置使用的都是列表式导航，很多情况下主导航与次级导航都是列表式导航，这种层级较深的情况就需要增加搜索系统辅助查找，从视觉设计的角度来看，列表式与搜索的形式很契合；

视觉疲劳——当同级内容过多时，由于列表式导航形式较为单一，不断在Y轴方向滑动，容易造成视觉疲劳；

题外话：鉴于以上优缺点，列表式导航也主要以次级导航的方式存在，仅有设置、邮箱等突出效率的 APP会将其作为主导航。

（五）固定选项卡&分段选项卡&滚动选项卡

iOS平台的分段选项卡与Andriod平台的固定选项卡、滚动选项卡本质上都是通过在页面顶端对内容进行再分类，这三种导航的最大优点在于在能够使用户清晰的看到APP的分类，滚动选项卡、分段选项卡一般以二级导航的形式存在，固定选型卡既有以主导航形式存在的情况，也有以二级导航形式存在的情况，下面来看看他们分别有什么优点与缺点。

（1）固定选项卡，形式如下图所示：

优点：

方便——相比列表菜单及跳板式导航，固定选项卡能够通过滑动方便的在模块间切换内容；

优先级一致——可以承载重要性及使用频率处于同一等级的信息、模块或者任务等；

显眼——位置处于页面顶部，基于用户由上至下的浏览习惯，固定选项卡处于页面“显眼处”；

缺点：

承载数量有限——数量一般不超过4个；

遮挡内容——同 Tab 栏缺点1；

（2）滚动选项卡：

优点：

能装——可以承载多个选项卡，且部分应用选项卡内容及顺序可以自己定制，这也就解决了固定模式带来的弊端——某些用户喜欢的内容需要滑动半天：

瘦——由于滚动选项卡是以滑动操作为主，点按的操作方式较为低频，因此选项卡大多以“瘦小”的文字形式展现，占用空间较少；

缺点：

压力大——同跳板式导航缺点2，一般滚动选项卡数量较多，这就增加了用户的选择压力。

遮挡内容——同 Tab 栏缺点1

（3）分段式选项卡：

优点：

优先级一致——可以承载重要性及使用频率处于同一等级的信息、模块或者任务等；

显眼——位置处于页面顶部，基于用户由上至下的浏览习惯，固定选项卡处于页面“显眼处”；

缺点：

不能滑——不能滑动操作，只能点按，且因分段式选项卡处于页面顶端，给用户的操作带来了不便：

承载数量有限——数量一般不超过3个；

（五）陈列馆式导航

一般以次级导航的方式存在，最大的优势在于能够突出展示内容，与跳板式导航的区别在于，陈列馆式导航可以随时更新内容，类似图片直播类的 APP 使用这种导航形式比较多，一般有三种形式——网格式布局、轮盘布局、瀑布流网格布局，如下图所示，从左至右分别是一直播、小米有品、花瓣：

优点：

直观——可以实时更新内容，对于内容的展示较为直观；

缺点：

不适合当家做主——由于其适合作为展示内容的窗口，因此不适合作为主导航；

题外话：瀑布流网格式布局的部分画面半隐藏式的展示内容，吸引用户继续往下探索，有利于使用户进入沉浸式状态，但轮盘式布局的缺点在于在用户以纵向浏览为主的情况下，向X轴要空间的但会打断用户向下浏览的顺畅性，且承载内容有限，一般卡片的数量都少于10个。

（六）隐喻式导航

隐喻式导航的最大优势在于降低学习成本，但我们需要避免的是为了隐喻而隐喻，不应该被隐喻限制住了手脚。

例：如果在移动端或者PC端使用隐喻式文件夹，那你就不可能在一个文件夹中放一个文件夹，再放一个文件夹......但实际上我们可以以俄罗斯套娃的形式不断在文件夹套文件夹，从而使对我们的资源进行更好的分类管理，打破现实中文件夹的局限性，而不是要死板硬套的隐喻。

题外话：如下图所示，这是锤子科技的 Smartisan OS 系统的相机图标，这就是很好的隐喻，采用相机镜头=作为手机相机图标，降低了用户成本，当然画的也很好。

（七）抽屉式导航

抽屉式导航最大的优势在于能藏，这也注定了它最大缺点是藏起来的内容人们经常会忘了它们的存在。如下图所示，从左至右抽屉式导航主要有三种形式，浮层式、嵌入式、3D模式。

优点：

能藏——将大部分模块隐藏起来，使得界面更加美观，且突出产品的核心功能，避免用户被不太重要的内容所影响，毕竟用户精力有限

好展现创意——由于主导航的内容在大半个页面上，页面背景部分给设计师留下的创意空间就比较大，设计师可以结合品牌特点在背景上营造相应的氛围。

缺点：

容易忘——藏在抽屉里的模块，优先级明显降低，所以产品大流量入口不适合放在抽屉导航中；

题外话：基于用户从左到右的文字浏览习惯，抽屉导航的图标大部分情况下是在左上角，属于用户单手操作的盲区。

（八）下拉菜单式

与抽屉式导航类似，最大优势在于能藏，使得界面内容保持简洁，一般下拉式菜单不会覆盖整个页面，甚至也不会增加黑色蒙版，因此会给用户页面层级较少的错觉，避免了频繁的页面跳转。

优点：

能藏——将功能隐藏在一小块，保证了界面的简洁，同时也使得界面上能够容纳更多的操作；

缺点：

容易忘——同抽屉式导航缺点1。

题外话：在iOS中下拉菜单为自定义控件，而Andriod 系统为这种导航提供了特别的控件——Spinner控件。Spinner用于同一个类别下的不同视图间进行导航，类似便签类APP，在顶部设置文件夹，在此导航中包括各种不同的文件夹，类似通话便签、私密便签等各类文件夹，但我们在保证对用户而言可理解且符合逻辑的情况下，不应该过于死板。

（九）卡片式导航

卡片式导航的原型是扑克牌，模仿了扑克牌中常见的切牌、洗牌、翻牌等手法，卡片式导航的最大优点在于可以突出内容，例：如下图所示，最新版（8.11.0版）微博在信息架构上做了调整，视频模块采用了卡片式导航。