“加个tab吧！”，这是近几次做需求最常听到的一句话，由于开发周期紧，在扩充新功能时，产品往往直接采用生硬的功能嫁接形式，以至于出现了一些“宽额头”、“多重下巴”的页面布局，在具体设计过程当中苦不堪言，即使觉得在结构层、框架层上存在较多问题，但自己的角色还是属于执行层面，So...

在设计之初，发现容易存在两个误区：

1. 平铺 = 容易用？

2. 隐藏 = 不会用？

很多人认为将功能点平铺能够提高转化率，导航的目的之一是突出核心功能，隐藏甚至删除次要功能，扁平化路径，指引用户快速触达目标功能点。在有限的屏幕范围内，过多的信息陈列往往造成用户迷失，加重页面的认知负担。前段时间，跟着用研小伙伴进行了一次线下调研，用户反馈的问题中，“不知道怎么用”、“找不到这个功能”的回答很多，也证实了产品现有导航设计上存在的问题。

当下app的导航设计形式种类繁多，但对各自的使用场景、优劣势并没有很深的了解。《移动应用UI设计模式》一书中，为导航设计设置了独立章节进行分析，但由于互联网产品更新迭代迅速，书中的导航形式已经发生了不少变化，案例也稍显陈旧。基于该书所做的总结，结合现有的一些案例，重新进行了归类分析，帮助自己对导航设计有较为系统的认识，并更好的应用于日常的设计工作。第一次写经验，一些观点、措辞如果不太恰当，欢迎交流、纠正。

| 导航分类

全局导航：用户可以从一个主类别直接切换至另一个主类别

瞬时导航：需通过点击或手势显示，用户做出选择后，菜单消失（短暂停留）

次级导航：
    •     配合主导航组合使用，在选中模块内活动的导航
    •     二级或更深层级页面中的导航
    •     所有主导航均可作为次级导航

| 选项卡菜单式

可大致分为两类：
1.  底部Tab导航
2. 顶部Tab导航

底部Tab导航是目前应用最为广泛的主导航模式。
优点：功能架构清晰，减少用户点击，操作区域分布于屏幕底部，更符合人机交互。
缺点：最多可放置5个标签，拓展性较弱，并且占据一定的行高。

现在也延伸出一种底部Tab导航的变形模式，在导航中间设置行为召唤按钮，一些文章也称之为“舵式导航”，通过高反差、高对比的设计来引导用户点击，场景有两种：
1.  一个核心功能入口：常被应用于UGC（用户原创内容）平台，如摄影社交类app。
2. 多个核心功能的聚合入口：常以点聚式的形态展现，触发后同时展现多个同一等级的功能入口。个人觉得在实际应用过程中，不宜设置过多的功能，尽量避免翻页展示，以新浪微博为例，我几乎想不到去使用聚合入口中第二页的功能。

顶部Tab导航作为主导航出现情况较少，主要应用于音乐类app，将底部区域留给了操作最为高频的音乐切换键，这样的处理方式更符合该场景下的用户行为操作。如果在选中模块下长时间浏览，也会采用顶部Tab导航的形式，如新闻类app。

优点：满足沉浸式阅读需求，当功能模块过多时，可采用滚动选项卡。
缺点：需频繁切换Tab时，单手操作困难。

为了不产生堆叠，此前Google官方设计规范推荐使用顶部导航，但在大屏手机趋势下，底部Tab导航更接近拇指操作热区，在避免多重下巴和操作舒适度之间，很多安卓应用也选择了与iOS保持一致，采用了底部导航。2016年3月Google也更新了官方设计规范，将底部导航栏纳入其中。

当选项卡菜单式作为二级导航展示时，iOS、android也为其定义了不同的设计规范。
iOS：由两个或多个线性段组合而成，各段等分且互斥，用于显示不同的视图。

android：分为固定选项卡和滚动选项卡两种，较于iOS所定义的，拓展性更高。

ps：除了强化分段效果，两种展现方式其实目的相同，都是基于某一类别的再细分。现在许多iOS应用也会采用滚动选项卡，为了提升用户体验，取长补短，不同平台间的相互借鉴也趋于常态。

| 跳板式

也称之为启动面板（Launchpad），最典型的案例就是手机系统的功能主页。在不同的文章中也会有不同的叫法，如宫格式、矩阵式、网格式等等，目前几乎很少看到作为主导航使用，往往作为次级导航展示。

优点：架构扁平，可拓展性相对较强，功能层级相对平均，适合平台类产品。
缺点：每个版块相互独立，当选择一个板块进入时，视图将完全跳转，如果想要选择另一个板块，必须先折返至中心页面再选择，不适合需要频繁切换功能的应用。

| 列表式

常作为次级导航使用。

优点：符合至上而下的阅读习惯，易于理解，可满足显示较长字段的标题或辅助文字，通过组合方式对功能分类展示，扩展式的列表形式还能帮助降低页面层级深度，便于用户选择操作。

缺点：作为主导航时，有着与跳板式一样的通病：不适合需要频繁切换功能的应用。条目过多时，用户需要滚屏选择功能入口，查找不便，所以采用列表式导航需要注意条目数量，尽量保持在单屏可见范围内。

| 幻灯片式

常作为次级导航使用，一般通过页面指示器、卡片隐喻、箭头等方式来引导用户切换内容，适用于图片或整块内容的并列展示，页面数量不宜过多。

优点：可以结合手势，丰富页面动效，提升产品的趣味性。
缺点：作为主导航时，超过3个页面，用户便很难第一时间获悉产品的功能架构，非相邻模块间不能直接切换。

| 陈列馆式

极少情况下作为主导航使用，乍一看和跳板式导航有点相似，因为都采用了网格式布局。不过可以从一点区分：陈列馆式导航往往会抽取实时内容作为入口展示，常用于显示新闻、音乐、菜谱、照片等即时性信息。可视化导航，可以通过轮盘、幻灯片、瀑布流等展示功效，提升页面丰富性。

| 侧边抽屉式

属于安卓原生的一种导航方式，在iOS端往往作为次级导航配合主导航使用。按照显示形态可大致分为两类：
1. 嵌入式：底层显示，将原来页面推出至屏幕外
2. 浮层式：顶层显示，抽屉部分遮挡原来页面

优点：能突出核心功能，集合较多次要功能，用到时点击出现，不占用空间。
缺点：其操作区域位于拇指操作盲区，用户不易操作，甚至时常忘记该部分功能，降低了抽屉内内容的用户点击率，因此不适用于放置对用户参与度要求较高的功能。

| 下拉菜单式

也叫超级菜单（Mega Menu），沿用于网页设计，目前很少作为主导航模式出现，在移动端网页适配中应用较多。其操作原理与侧边抽屉式类似，均属于瞬时导航，也可分为嵌入式、浮层式两类。

优点：能突出核心功能，集合较多次要功能，用到时点击出现，不占用空间，满足长文本标题显示。
缺点：由于位于屏幕顶部，易与系统通知中心冲突，不适合结合手势，操作负荷大，因此不适合需要频繁切换的功能。除非下拉菜单选项中有很明显的优先级区分，一般情况下，会采用滑动选项卡来显示，便于结合手势操作，提升使用效率。

| 点聚式

一般作为次级导航（或辅助导航），常以FAB（悬浮行为召唤按钮）的方式展示，现在多用于UGC应用中用户选择不同形式发表内容时的集合入口。

点聚式导航最早来自于应用“Path”，与抽屉式导航将多个次要功能集合突出核心功能相反，点聚式导航是将用户最频繁使用的多个核心功能点汇聚在主界面显示，方便用户随时呼出使用。

虽然能够引导用户点击，但功能的高度集合，并不利于功能间的频繁切换，所以在新版“Path”中，你会发现主导航已经变成了底部Tab+点聚式相结合的导航形式。

最后，简单提下两种较为特殊的导航模式：仪表式、隐喻式。因为应用场景的特殊性，没能找到作为主导航时合适的案例，所以就简单说下：

1. 仪表式：主要应用于数据分析类app，每一项量度都可以显示出额外的信息，如支付宝消费报表，将饼状图中的数据作为各选项的入口。

2. 隐喻式：主要应用于游戏类app，例如关卡指引、操控盘引导等，此外也会通过页面模仿隐喻对象，如一些阅读类app，通过书架的形式，将应用与人们熟识的具象事物联系起来，引导用户操作。

|  总结

在写这篇文章前，我一直希望能以一种自己说的明白，别人也看得明白的方式来分析导航设计。浏览了很多有关导航设计的文章，发现导航设计这块内容涉及面很广，网上对于导航的分类解析也是维度众多。但我想目的都在于能够帮助其快速了解每一种导航模式背后的设计理念，做更好的产品用户体验。

聚焦现在，会发现越来越多的应用采用多种导航相结合的模式，很难将其准确地定义为某一种导航形式。设计师的脑洞无限，但万变不离其宗，在了解“其宗”之后，相信还会有衍生出更多创新的导航设计模式。

参考资料：

1.《移动应用UI设计模式》

2. http://www.woshipm.com/pd/514105.html

3. http://www.jianshu.com/p/aafd9d25bfc3

4. https://developer.apple.com

Powered by Froala Editor