App 移动应用中九种导航设计总结及其优缺点分析

在各平台设计越来越规范的今天，产品设计越来越看重 app 的易用性，越来越多的 app 都使用 Tab Bar（标签栏）设计， 但是还是有一些 app 因为场景、功能需求会选择其他导航方式。先放上一本公认的 UI 入门书籍，就是下面这货，丁丁曾经头脑发热看完了，也写过读书笔记，虽然移动应用发展太快，里面很多截图的设计都挺旧了，但是不妨碍它的启蒙作用。今天主要是跟大家聊聊应用导航有哪些设计以及优缺点。

一、标签式导航

毋庸置疑，这种导航方式是目前的主流。如果细分还可以分为底部 tab 式导航、顶部tab式导航、底部 tab 的扩展导航三种方式，而随着设计的规范以及智能手机的屏幕越来越大，顶部 tab 式导航方式逐渐被淘汰，而底部 tab 的扩展导航方式多用于超级按钮，而超级按钮一般用于快速发图片、发文章等动作，所以这里我们主要讨论底部 tab 式导航。

优点

1、虽然设计不出彩但不会犯错

2、清楚当前所在的入口位置

3、轻松在各入口间频繁跳转且不会迷失方向

4、直接展现最重要入口的内容信息

缺点

1、功能入口过多时，该模式显得笨重不实用（最多不超过 5 个）

二、抽屉式导航

抽屉式导航最初出现在安卓端，后来 iOS 端也开始使用这种导航方式，经常和底部 tab 式导航结合使用的抽屉式导航，我们可以称之为优雅的隐喻。抽屉式导航将部分信息内容进行隐藏，突出了应用的核心功能。（手 Q 自去年改版用抽屉式跟 tab 式结合就一直没改）

优点

1、兼容多种模式

2、扩展性好

缺点

1、隐藏框架中其他入口

2、对入口交互的功能可见性要求高

3、大频幕时代单手持握时属于操作盲区

4、对排版要求高

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

宫格聚集在中心页面，用户只能在中心页面进入其中一个宫格，如果想要进入另一个宫格，必须要先回到中心页面，再进入另一个宫格。每个宫格相互独立，它们的信息间也没有任何交集，无法跳转互通。因为这种特质，宫格式导航被广泛应用于各平台系统的中心页面。

优点

1、清晰展现各入口

2、容易记住各入口位置，方便快速找到

缺点

1、无法在多入口间灵活跳转，不适合多任务操作

2、容易形成更深的路径

3、不能直接展现入口内容

4、不能显示太多入口次级内容

四、列表式导航

如果说标签式导航是 APP 中最普遍的导航方式，那么列表式导航就是最必不可少的一种信息承载模式，这种导航结构简单清晰、易于理解、冷静高效，能够帮助用户快速定位到对应内容。

优点

1、层次展示清晰

2、可展示内容较长的标题

3、可展示标题的次级内容

缺点

1、同级内容过多时，用户浏览容易产生疲劳

2、排版灵活性不是很高

3、只能通过排列顺序、颜色来区分各入口重要

五、陈列馆式导航

陈列馆式的设计通过在平面上显示各个内容项来实现导航，主要用来显示一些文章、菜谱、照片、产品等，可以布局成轮盘、网格或用幻灯片演示。

优点

1、直观展现各项内容

2、方便浏览经常更新的内容

缺点

1、不适合展现顶层入口框架

2、容易形成界面内容过多，显得杂乱

3、设计效果容易呆板

六、超级菜单式导航

移动设备上的超级菜单式导航与网站所用的超级菜单导航类似，它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。

这种导航模式在现在的 app 设计中使用的比较少，而且一般会用做分类检索的次级导航使用。在手机网站的导航设计中比较常见。

美团中就采用了超级菜单式导航做为次级导航使用。

七、点聚式导航

说到点聚式导航必然会想到 path 这个 app，当年刚出来时新颖的交互方式让人眼前一亮，它的方式是：将用户最频繁使用的多个核心功能汇聚在主界面中一个按钮上，通过点击按钮呼出功能菜单的导航。

优点

1、灵活

2、展示方式有趣

3、使界面更开阔

缺点

1、隐藏框架中其他入口

八、页面转盘式导航

图片或者整块内容并列展示，用户通过左右手势滑动来切换当前内容，形似转盘的导航，多用于陌生人社交软件（都懂的~）。

优点

1、单页面内容整体性强

2、线性的浏览方式有顺畅感、方向感

缺点

1、不适合展示过多页面

2、不能跳跃性地查看间隔的页面，只能按顺序查看相邻的页面

3、由于各页面内容结构相似，容易忽略后面的内容

九、仪表式导航

采用圆形布局具有指针或计数器类似仪表盘的导航。提供了一种度量 KPI （关键绩效指标）是否达到要求的方法。每一项度量都可以显示出额外的信息，这种模式对商业应用、分析工具、销售和市场应用非常有用。

优点

1、使数据更加生动直观易读，增加APP趣味性

2、工具类、数据分析类、数据可视化类应用

丨总结

移动互联网高速发展的今天，各个平台的设计已经越来越规范，未来的趋势中是淡化各个平台的差异，尽量通过一套设计来无缝的连接各个应用在不同设备上的体验，同时也节省了人力和物力。虽然因为手机屏幕越来越大导致底部 tab 式导航成为主流，但是在不同的场景还是需要其他导航方式去支撑设计，所以在选择导航时不应该只局限在「标准设计」中，而是应当本着以「内容」为先的思想来考虑。