导航设计的10种模式

导航设计的目的就是需要突出产品的核心，扁平化用户的任务路径。让用户能够顺利的在产品中畅行，让用户时刻清楚自己在应用中所处的位置，及如何前往目的页面。

产品的导航系统，是产品的信息结构在用户界面上的展现方式。移动端产品导航的设计没有最好之说，只有最合适，根据你的产品采取最合适的导航设计。

纵观应用市场上的APP，导航设计的模式总是几种的组合使用。下面我们来看一下常见的10种导航设计模式。

01 底部Tab导航

描述：

1. 当产品的整个体验流中是以几个常用功能模块（一般不超过5个）贯穿的，意味着用户需要在多个标签入口之间来回切换；为了保证切换的效率，将贯穿产品整个体验的流的模块平铺在Tab Bar位置，保证了用户任务路径的扁平。
2. iOS原装App Podcast，5Tab。

优点：

1. 可见性好，位置明显，易于发现，它能让用户直观了解到APP的核心功能；
2. 操作性好，用户很方便就能触及到这个区域，并可在几个标签中快速切换且不会迷失方向，简单而高效；
3. 符合习惯、ios原生控件，开发简单；
4. 优先级较高、用户使用频繁，彼此之间相互独立。

缺点：

1. 容纳个数有限，一般最多五个（不然需要结合其他方式，运用层级和收放）。
2. 占据高度空间略大，一般都是文字+图标的形式。

02 顶部标签导航

描述：

顶部Tab是谷歌提出来的，为了区分与iOS的区别的一种导航模式，由于在顶部，手指难以触及，所以谷歌对应地提出了手势操作的解决方法：通过在屏幕左右滑动来切换标签。

实际项目中，顶部与底部配合使用的挺多。

优点：

1. 扩展性好：标签的个数没有上限，不过太多的话，越是后面的页面渗透率会越低；
2. 占据空间小：相比于底部Tab，顶部Tab一般占据的空间更小（因为不需要考虑手指点击，所以可以把区域缩小，只选用图标或者文字即可），可以把更多的空间安排给内容展示。
3. 手势操作非常方便。

缺点：

可见性略逊：这是空间占据的区域变小之后的后果。

03 轮播导航

描述：

当你的应用信息足够扁平，可以尝试轮播导航；

优点：

能够最大程度的保证应用的页面简洁性，操作也是最方便；

缺点：

不能够快速的定位对应的分页内容；

04 宫格导航

描述：

1. 宫格式导航被广泛应用于各平台系统的中心页面；
2. 用在二级页作为内容列表的一种图形化形式呈现，或作为一系列工具入口的聚合；
3. 用户频繁切换的概率是比较低；
4. 在不同的文章中可能被称作：跳板（图标卡片式）、磁贴式。

优点：

1. 扩展性非常好，便于组合不同的信息类型（运营位、广告位、内容块、设置等）；
2. 视野范围内可以展示的功能入口多，能够让用户整体上了解APP提供的服务，从而选择自己所需要的那个服务；
3. 静态、动态结合可以展示出丰富的信息，同时保持视觉统一；
4. 跨平台不受平台限制。

缺点：

1. 每个宫格相互独立，它们的信息间也没有任何交集，无法跳转互通；
2. 当排布过多的时候，用户容易眼花缭乱，选择压力较大；

05 卡片式导航

描述：

1. 宫格导航的变式吧，可用来呈现实时内容，比如新闻、菜谱、文章或照片，可以采用网格布局（比如一直播和ins）或轮盘布局（比如格瓦拉电影），还可以采用幻灯片模式进行展示。
2. 卡片式模式最适合呈现经常更新的、视觉效果直观、彼此独立的内容。

优点：

1. 卡片式导航有更丰富的表现形式、更加随意的组合效果（瀑布流等）以及丰富的动态效果（轮盘、幻灯片形式）；
2. 直观展现各项内容。

缺点：

1. 不适合展现顶层入口框架；
2. 容易形成界面内容过多，显得杂乱；
3. 设计效果容易呆板。

06 抽屉式导航

描述：

1. 抽屉式也是谷歌提出来的一种导航模式，由于虚拟按键的存在，所以在安卓上使用底部Tab会造成双底栏，视觉观感不佳；
2. 一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能，或者不那么需要频繁切换内容的应用，例如对设置、关于、个人信息等内容的隐藏；
3. 更多的被应用于信息流产品设计中，这类产品注重核心内容的展示，用户的任务路径较为单一，几乎都是用于浏览产品的核心内容；至于其他比较低频的模块入口则会隐藏在当前界面后方，避免冗余的模块抢夺用户的眼球；
4. 在不同的地方可能被称为：扩展菜单、侧边导航、汉堡导航；
5. “2/8”法则告诉我们，80%的用户只用那些20%功能，这20%功能就是信息流里面的核心功能；如果那80%不常用的功能也占用着最重要的位置，那么用户就会被打扰，产生臃肿感，甚至会放弃使用产品。

优点：

1. 节省页面展示空间，让用户将更多的注意力聚焦到当前页面；
2. 由于导航界面是隐藏在屏幕之外，展开之后整一页面都是导航菜单内容，所以可扩展和个性化的空间很大；
3. 扩展性好，导航的个数没上限。

缺点：

1. 用户不易发现，使用次功能需要二次点击，给用户在切换功能带来了操作成本；
2. 可见性太差，用户还没能把汉堡菜单按钮和侧边栏联系起来，所以，侧边栏的渗透率很低；
3. 不直观、不适用于主导航、如遇频繁操作的功能，用户不断开关抽屉体验不好。

07 下拉式/菜单导航

描述：

1. 与抽屉式导航的目的相同，都是为了突出内容。一般位于产品顶部，通过点击呼出导航菜单；
2. 通常用来筛选同一信息模块下不同类别的信息，或者快速启动某些常用的功能模块，而不需要频繁的页面跳转 ；
3. Android中对应的控件为spinner控件，但该控件用于同一类别下不同视图之间的切换，而不是跳转至完全不同的视图。iOS中下拉菜单为自定义控件，可以实现不同类别之间的切换；
4. 下拉导航还有一种变式，就是下来菜单中展示两级甚至多级，一般在电商产品中比较常见，因为品类和筛选条件众多。

优点：

菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置；

缺点：

1. 位于屏幕上方，相对隐蔽且不能结合手势操作，不适合于频繁的切换功能使用；
2. 考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容。

08 列表导航

描述：

1. 作为信息组织框架，是我们在产品设计中必不可少的一个信息承载模式。
2. 适合用来显示较长或拥有次级文字内容的标题，每行可以融入较多信息。
3. 与宫格导航类似，常用于二级页面，不会默认展示任何实质内容，所以通常app不会在首页使用它；
4. 无论ios开发和android 都有现成的列表布局插件和模板。

优点：

1. 由上至下查看符合习惯；
2. 结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。

缺点：

1. 条目太多或分布不合理会导致用户查找困难；
2. 不适合需要频繁切换任务的情况。

09 弹窗式

描述：

1. 算是菜单式的一种变种，区别是位置在界面中央不依赖于某个边缘；
2. 弹出框在安卓系统上的使用很普遍，比菜单、单选框、多选框等，在IOS系统上使用相对少些；

优点：

1. 可在原有界面上进行操作，不必跳出界面，
2. 在需要的时候才弹出，以节省屏幕空间；

缺点：

1. 阻断式的操作有时候会打断用户的正常操作流程。
2. 非毁灭性操作尽量不使用弹框，例如：低电、病毒、删除、支付、出错等。

举例：

10 组合式

描述：

一个网站或者APP内不可能只用一种导航，通常都是组合来使用。在不同使用场景下根据实际需要进行选择。但是通常主导航会对这个产品的格调起决定性作用。

优点：

1. 适用于平台级的产品；

缺点：

1. 可能会增加用户的认知负担。

举例：淘宝首页

淘宝的首页布局就是是顶部搜索框（非常重要）+banner轮播（精准推送的广告、形成变现）+宫格（给阿里系产品进行导流）+卡片+底部tab。

总结

1.底部tab式

2.顶部标签式

3.轮播式

4.宫格式

5.卡片式

6.抽屉式

7.下拉式

8.列表式

9.弹窗式

10.组合式

导航可能不单单只有这几种，可能大家的叫法也不尽相同。每种导航都有其存在的意义，无所谓对错，只有合适与否。真正在实际项目中，还是得根据产品的实际情况综合去运用。