【交互基础】系列之解析移动端导航设计模式

鉴于目前交互设计的知识体系较为混乱，我写了这个［交互基础］系列专题，旨在整理移动端交互设计基础知识。巩固自己的知识体系，也与大家共勉，打好基础，才能飞得更高！

前言

任何产品的功能及内容都需要以某种导航框架组织起来，以期使产品结构清晰，目标明确。在产品的结构层，我们需要考虑用户在应用的什么位置以及如何去往下一个目标位置。而导航通常就是引导用户使用产品、完成目标的工具。我们在确定产品的需求及目标后，需要选择合适的导航模式将其组织表达出来，这在整个产品交互设计过程中尤为重要。如何选择合适的导航模式？做为设计师，我们需要对移动端的导航模式有个系统的了解，让设计做的有理有据。

目前各种讲移动端导航设计的文章也很多，我也看了很多总结导航设计的文章和相关的书籍《移动应用UI设计模式》，该书针对导航模式，根据是否直观可见有全局导航与瞬时导航的划分，给了我很大的启发。在这里，我结合了自己的一些思考,从主导航结构和内容界面结构的角度出发，希望能够更加系统、清晰得阐述导航设计模式。同时也能对交互基础知识有个深刻的认知（明白设计为什么这么做，而不是因为别人也这么做），提升自己，也希望对大家有所帮助。

一.主导航结构

主导航结构主要表现有：底部tab式、选项卡式、抽屉式、下拉菜单式等 （包括它们的一些扩展、组合形式）。主导航结构区别与内容界面结构，是呈现应用的主要功能架构及布局的导航方式，是应用的顶层架构。

1.底部tab导航

底部tab导航对应iOS中的标签栏，是最常见的主导航模式，且这是符合拇指热区操作的一种导航模式。当我们所要构架的几个模块信息对用户来说重要性和使用频率相似，而且需要频繁切换时，就适合使用标签式导航（不支持左右滑动），能让用户直观了解到应用的核心功能。需要注意的是，iOS系统建议把标签栏限制在5个选项卡以内，超过5个，可以把“更多”放在最右侧的第五个选项卡上（选项过多，用户难以记忆且容易迷失）。

优点：

底部tab导航可以承载重要性和频率处于同一级别的功能模块、信息或任务。在第一时间支持使用者获取重要性最高、频率最大的信息或任务。支持拥护在不同模块、信息或任务之间快速切换。可以包容其他信息结构，构建出容量更大的模块、信息或任务结构。很多APP的主导航模式都是底部tab导航，然后又使用其他的导航模式去承载界面中的具体信息。

缺点：

由于尺寸限制，tab上限为5个，超过5个需要把“更多”放在最右侧的第五个选项卡上，或者需要考虑产品的需求结构是否合适，或者考虑更换导航模式。底部tab栏占用了一定的空间，减少了页面的信息承载量。有些产品为了更好展示页面信息、方便阅读，采用一种隐藏tab栏的做法，即上滑阅读时隐藏，下滑返回时再显示。这种做法虽然照顾了页面的信息展示，但也可能会让导航失去便利性，降低切换效率，使用需慎重。

如下图所示，微信、QQ等常见应用均使用底部tab导航。

2.底部tab的扩展导航——舵式导航

是底部tab导航的扩展形式（又称舵式导航），有些情况下，简单的底部tab导航难以满足更多的操作功能，因此在标签栏的中间加入了功能按钮（多为发布型的功能按钮），来作为应用最核心的操作功能的入口。

优点：

①作为底部tab导航的扩展形式，解决了底部tab导航无法合适地承载部分应用需要突出某些重大功能操作按钮的需求。

缺点：

1.舵式导航本身是存在设计矛盾的。既然舵式导航里放置的是重要性高、使用频繁的功能，那为什么要隐藏呢？放在二级页面，有一种被埋藏的暗觉，会增加用户的记忆负担和操作量。

实际上，舵式导航是设计师的折中之举，主要是通过这种带有缺陷的方式，将两组分类不同却都非常重要的信息功能整合在一起。

如下图所示，新浪微博标签栏中间的发布按钮，轻松筹标签栏中间的发起筹款的按钮。

3.分段选项卡

选项卡式导航，不同平台有不同的设计规则。iOS平台有分段选项卡，安卓平台提供了固定选项卡、滚动选项卡。本质都是一样的，即实现容器内不同视图或内容间的切换。分段选项卡是由两个或两个以上宽度相同的分段组成，正常情况下不超过4个，视觉上会有一个很明显的描边按钮。分段选项卡经常会作为二级导航，对主导航内容再次分类，可以在顶部导航栏的下方，也可以直接放在导航栏上。

优点：

分段选项卡可以承载重要性和频率处于同一级别的功能模块、信息或任务。让用户清楚地知道有多个可供选择的视图。支持用户在不同视图间切换

缺点：

选项卡个数有限，一般不超过4个。只支持点击分段实现视图间的切换，不支持左右滑动的切换。

如下图所示，iOS的app store与网易云音乐使用了分段式导航。

4.固定选项卡

固定选项卡（选项卡式的一种，又可称为顶部tab导航）是安卓系统提供的三种主导航方式之一，与iOS提供的分段选项卡类似。同样能够扁平化应用的信息结构，适用在应用的主要类别之间切换，并且支持左右滑动切换到不同视图。随着当今移动端交互设计的发展，在实际的运用当中，Android与iOS两大阵营相互借鉴、完善是一种趋势，大量iOS应用采用了固定选项卡。（同样Android应用也大量采用了底部tab导航的方式，归根结底，设计不应束缚于规则）

优点：

固定选项卡可以承载重要性和频率处于同一级别的功能模块、信息或任务。让用户清楚地知道有多个可供选择的视图。支持用户在不同视图间切换，并且支持左右滑动切换，方便操作。

缺点：

1.选项卡个数有限，最多3个（实际上好多应用有用4个的，还是要看情况）。

如下图所示，固定选项卡的位置一般放置在屏幕顶部（导航栏或导航栏下方）

编辑：未知