几种常见移动导航模式详析图「导航类型」

今天给大家普及一下几种常见移动导航模式详析图「导航类型」相关知识，最近很多在问几种常见移动导航模式详析图「导航类型」，希望能帮助到您。

加入人人都是产品经理【起点学院】产品经理实战训练营，BAT产品总监手把手带你学产品

虽说一款应用的生死不是由导航决定，但毋庸置疑，导航模式的选择在产品用户体验上占有很大的比重。就导航本身来说，没有优劣之分，端看你的应用适合哪种。下面是我罗列的一些常见的移动导航模式，接下来会对其一一举例说明（注：重要模式会重点分析，其余简略，篇幅略长，不喜可跳过）

标签式

标签式导航是ios平台上公认的最经典的导航模式，看市场上几乎有80%的应用都在使用就能知道。标签式导航关注的是平行空间的展示，它的优点是适用于多个内容体系，且重要程度相似（平级关系），能频繁在不同页面间切换，切换成本底，只需一次点击；缺点是占用一定高度空间，且标签数量有限，最多5个标签。

下图中图1-淘宝，是标签式导航的标准使用形式，每个标签作为一个导航分类放在标签栏中（注意都是名词）。图2和图3可以算是标准形式的变形（还有其他变形形式，后面再讲），虽然也是有5个标签，但处于中间位置的标签不是作为导航使用，而是一个行为召唤按钮。行为召唤按钮主要强调某项重要功能的快捷使用，该功能需要是应用最核心且最常用的功能，优先级很高。比如图2的instagram,它的目标是以一种快速、美妙和有趣的方式将你随时抓拍下的图片分享出来，它关注的是能随时随地抓拍。因此，作为行为召唤按钮的“拍照”放在标签栏上就很有必要。

但是，有些应用对于行为召唤按钮的放置并不合理。如下图的图3-简书，虽然文章的撰写是简书的核心功能，将其作为标签栏中的一个按钮，即能在视觉上凸现出来，又能减少操作负荷，似乎很棒。但却忽略了一个重要的问题，从使用环境来说，文章或者文档的撰写是需要在安静且能集中注意力的环境下，但移动app天然具有干扰多且注意力不集中的问题。而且在手机上输入上百字也是一件痛苦的事。对于这款产品的手机用户来说，可能用户对内容的消费比对执行动作更重要。

另外，还有一种常见的标签式导航的变种，即传统的标签式 点聚式。这里先专门讲一下点聚式，最为我们所熟知的点聚式就是曾经经典的path结构，即抽屉导航 点聚式，如下图所示—改版前图示，它的目的是将用户最频繁使用的多个核心功能点汇聚在主界面中显示，方便用户随时呼出使用。只是，如今单独使用点聚式的应用越来越少，就连path也对这种传统的点聚式进行了调整，变成了依附于标签的点聚式结构，如下图中的path改版后。还有下图中的样式1和样式2，也是这种形式的不同展现。他们的共同点是，使用同一个导航入口，进行多个同级功能的不同操作，大部分都是2-5个不同的操作选项，当然也会有更多，比如下图中的新浪微博，点击“加号”入口，出现了更多的功能选项,且这些功能的优先级相若。

其实，在Android 5.0中，这种点聚式更常用的表现形式是悬浮响应按钮，它代表的是这个app中最主要的操作。只是就目前来讲使用场景有限，实际应用并不理想。

抽屉式

抽屉式导航的目的是带给用户更为沉浸的体验。它的特点是，“阅读”为王，点击切换少，专注于主体信息本身。从表现形态来看，抽屉导航很符合产品的二八法则，即产品中只有20%的功能常用，所以要突显，剩下的80%不常用，因此隐藏。它不像标签导航一样强调平级关系的切换，而是突出重要且核心的功能。抽屉导航的另一些优点是，侧边导航收纳的导航标签可以是5个以上，节省屏幕空间。缺点是无法快速完成导航切换，操作成本高。

关于抽屉导航，在Android和ios平台的使用也有区别。抽屉导航在Android平台上比ios更常使用。由于在ios上，抽屉导航没有专门的设计规范，所以使用上较为随意，表现形式也不受拘泥。

如果以抽屉导航和主页在空间位置为评判依据，其在风格上主要有3种表现：

第一种是浮层，即导航抽屉处于主页上层，通过滑动或点击的手势打开抽屉，抽屉部分遮挡或覆盖原来页面的内容，如下图中图4，这种风格多数会在Android上出现。

第二种是叠加式，即导航抽屉位于主页的底部，打开抽屉，原来的主页会向屏幕右侧滑动，显出主页下方的导航抽屉，如下图中图5，这种风格在ios上很普遍。第三种是嵌入层，即导航抽屉和主页处于同一层，通过轻滑、平移或点击打开抽屉，把原先的页面内容部分推出屏幕外，如下图中图6（注意导航和主页衔接处无阴影）。

而第三种风格经常会有如下图图7的变形，就是说在打开侧边抽屉的时候，嵌入式抽屉不仅把上一级页面向右推开，还采用3D效果将其推到后面。了解不同风格可在设计时斟酌使用。

选项卡式

对于选项卡导航，不同平台有不同的设计规则。今天主要说说ios上选项卡的表现，选项卡的本质即是，实现容器内不同视图或内容的切换。虽然对于选项卡本身，ios没有专门的规范约束，但这并不妨碍广大设计者们自由发挥。目前市场上主要有3种形式的选项卡：分段选项卡、固定选项卡和滑动选项卡。

分段选项卡：是由两个或两个以上宽度相同的分段组成，正常情况下不超过4个，视觉上会有一个很明显的描边按钮。分段选项卡经常会作为二级导航，对主导航内容再次分类，可以在顶部导航栏的下方，也可以直接放在导航栏上，如下图所示。标签之间互相关联，只能点击切换，操作效率较低。

另外，就是固定选项卡和滑动选项卡，两者都可以直接点击或左右滑动切换选项，且一级和二级导航都能使用。区别就是滑动选项卡可以有更多选项，且能直接通过手指滑动导航找分类，适用于相关类别多的应用，如下图的电子商务网站。

下拉菜单式

现如今，下拉菜单式导航并不常用。下拉菜单和导航抽屉一样，是以突出内容为主的导航模式；一般位于产品顶部，通过点击呼出导航菜单。

由于导航菜单位于屏幕顶部，不适合结合手势，操作负荷大，因此不适合需要频繁切换功能，且能在一定程度上节省屏幕空间。一般情况下，下拉菜单很容易被滑动选项卡取代，且滑动选项卡可以结合手势操作，使用效率更高，这也是现在下拉菜单很少被使用的原因，除非你的下拉菜单选项中有很明显的优先级区分。

比如下图所示，图8的新浪微博首页作为默认选中项，显示和用户相关的所有微博，常态下用户只需要一直浏览下去即可，很少需要主动点击切换，除非想要筛选某些特定的微博内容，此处的内容优先级很容易区分。同理，图9也是如此，用户关注更多且更感兴趣的是以项目为维度的内容分组，因此用下拉菜单来表现。另外，多数菜单是以点击后弹框的形式出现，也有一些是从底部滑出一个新的页面调出菜单，如下图中的图10。

宫格式

宫格式导航，是一种类似于手机桌面各个应用入口的导航方式。每个入口往往是比较独立的信息内容，用户进入一个入口后，只处理与此入口相关的内容，如果要跳转至其他入口，必须要先回到入口总界面。

这种导航经常用于工具类app中，它的优点是功能拓展性强，可增加多个入口。缺点是单页承载信息能力弱，层级深，不适合频繁任务切换。如下图的美颜相机就是标准的宫格式结构，每个功能类似于独立的app,且作为一级导航使用，这种表现形式现在越来越少。而剩下的其他三张图示，属于宫格式的一种变形，我称之为数据入口，这种只作为各种大数据入口的导航模式现在更多作为二级导航使用，特别是平台类产品。

列表式

列表式导航也是一种十分常见的导航模式，纯粹的列表导航很少见，一般都是搭配着别的导航模式一起使用，大多作为二级导航。

列表中可以放置图片、标题或者详情文字等来展示信息，列表本身是一个传达信息效率很高的载体，因此使用列表的时候要注意，每个列表所占的屏幕空间，以及每屏能显示多少条列表等。

如下图所示的图1-1采用了列表的分组模式，图2-2中列表中的每项信息可能都会影响用户的点击转化，所以如这种形式的列表，细节信息很重要。

图1-3和图1-4为二级列表，点击列表右侧的小符号，可以展开或者隐藏信息，这方便用户查找信息并快速定位，多数情况下，点击右侧小符号可能会出现快捷编辑模式或者部分详情信息，便于用户直接编辑或者浏览。而点击整个列表，通常会进入新一级的详情页面。因此，设计师在设计的时候要注意。

图示式

图示式是一种更加可视化的导航，它能根据页面内容的变化及时更新图片，适合以图片为主的内容，像新闻、美食、旅行、视频图片等经常使用，常作为二级导航。

由于图片可能需要经常更新，因此需要配置固定的栏目或标题，防止不断更新的图片让用户找不到入口。这种形式的导航常常会采用网格布局，如下图所示，每行基本上会有1-3个图示单位，不同的网格布局决定了每屏容纳的图示个数，因此用户浏览效率及点击转化率也会有所不同。

幻灯片式

幻灯片的导航方式，适用于图片或整块内容的并列展示，用户通过手指左右滑动来切换当前内容。正常情况下，幻灯片的数量不宜太多，最好控制在7-8个以内，避免用户操作疲劳。如下图所示，使用幻灯片设计最好在设计上提供视觉暗示，让用户清楚的知道所处的位置以及幻灯片数量，例如添加分页标识码，或者隐喻还有下一张图片等。

本文由 @butter 原创发布于人人都是产品经理 ，未经许可，禁止转载。