导航是什么？
导航是为避免人们迷路而诞生的，是一种帮助人们快速通向目的地的工具。同样，在互联网环境中，人们面对海量的信息时，也可能会迷失方向。为了避免人们因此耗费的时间和精力，互联网中的导航也诞生了。
在（移动）产品设计中，导航的设计开始于功能结构梳理之后，原型设计之前的阶段。导航的目的是让功能、信息的展现更加合理有序，能够引导用户快速到达功能点和信息点，并完成需求任务。试想没有了公路，只有建筑物零零散散的分布着，世界会不会失去了方向，人们的生活将无比繁重。其实，产品设计中的信息就相当于零零散散的建筑物，导航就是公路。
常见的导航模式有哪些？
网络上已经有很多版本，也很完整。在这里要分享的是来自傅小贞的《移动设计》一书（移动产品经理的必备工具书）中的观点。书中将导航模式分为以下六种模式：
1、标签式
标签式导航是移动产品中应用最普遍的导航模式，适合在相关的几类信息中间频繁跳转。这类信息优先级较高，用户使用频率上相对也较高。一般信息分为几类，分类的依据是信息的逻辑和重要性，信息标签的数量通常控制在2-5个之间，以便用户在标签之间快速查找并切换，直观且高效。
适用范围：入口选项数量较少，且用户有在几类相关信息中间频繁切换来完成任务的需求。
注意事项：不适合以阅读、图片展示为主要功能的产品。
如：淘宝、微信
标签式导航有一种创新形式，也得到了广泛的应用。即在传统的标签式导航基础上，对其中一个功能标签做修饰，以突出该功能并鼓励用户点击使用它。因为多数功能标签修饰后的形状像船上的舵盘，所以也有人把这种标签式导航的变体称为舵式导航。
如：QQ空间、在路上
2、抽屉式
抽屉式导航是近两年比较流行的导航模式，这种模式的特点是将信息点组合后隐藏在界面之外，而只保留一个按钮在界面内做提示的作用，很好的提升内容区的利用效率，给主题内容更充分的展示空间。就像我们把东西装进抽屉，而抽屉在桌子上表现出来的只有一个把手，拉动把手就可以打开抽屉并找到里面的东西。其好处就是，节省了桌面上的空间，让桌面看起来更简洁，主体物品也更加突显。抽屉式导航的作用，也是如此，并且抽屉式导航可以隐藏在界面的上下左右四个方向，因为上下方向与系统的快捷操作有冲突，所以我们看到的抽屉式导航多以左、右的隐藏为主。
适用范围：以当前内容为核心展示的应用，如知乎、周末去哪儿等。
注意事项：隐藏的导航方式，需要更加的便捷的方式辅助呼出，比如手势。
如：知乎、网易新闻
3、辐射式
辐射式导航最常见的是X宫格。常见的X宫格导航有6宫格、9宫格、12宫格等，这种导航的特点是将应用内的所有信息进行归类，将归结后的大类作为功能入口即一个宫格单元。从信息结构上来说，这种方式非常清晰并且各宫格的位置保持不变，方便了用户记忆。同时，因为信息归类的相互独立性，每个宫格所能完成的任务也是固定的，各宫格之间很难实现互通，不方便的地方就是每当用户需要在不同功能间切换时都需要返回首页（导航页）重新选择。Smartisan OS的9宫格界面也算是9宫格导航的一种。
适用范围：分类清晰，入口独立且固定。
注意事项：不适合在有交叉的信息类别中使用。
如：Smartisan OS、天天P图
4、列表式
列表导航是以列表的形式对信息进行归类并根据类别的重要程度依次向下排序的一种导航模式，可以理解为辐射式导航的列表展现形式。列表项的数量一般控制在15个以内，如果超过15个应考虑再分一级或相关性合并的方式来处理。其中，列表项的内容（标题）一般以文字和图标组成，文字为主图标为辅。
适用范围：较适合展示层次分明的等级结构或功能单一的工具型应用。
注意事项：控制好列表的数量和分组方式。
如：yo
列表式导航有一种创新形式，即在传统列表式导航的基础上加入了子列表形式，即树状结构。这种导航模式能够很好的在当前界面内展开和收起列表项，方便用户查看具体的某一组内容，而不需要拉动过长的距离才能找到需要的内容。
如：QQ手机客户端
5、点聚式
点聚式导航是将用户使用较多或产品核心的功能聚合在一起，以一个点的形式展现在主界面上的一种导航模式。适用于信息结构复杂，多个并列的类别中都有用户频繁使用的核心功能时。这种导航模式中的点就像一把锁，用户的手指的就像一把钥匙，当用户打开锁之后可以随意选择要打开哪扇门，进入哪个房间。而这个点的容量，一般是没有数量限制的。所以说，点聚式导航一种非常灵活、方便的导航模式，同时也可以让界面空间更加开阔。
适用范围：需要提取最核心的几个功能来展示产品特性的应用。
注意事项：汇聚后将使部分导航隐藏，需要良好的引导。
如：Path、百度阅读
6、平铺式
平铺式导航类似于一块全景图平铺在我们面前，界面主内容区只完整展示全景图的一块内容，如果需要完整的查看全景图就需要你左右切换屏幕逐块查看。平铺式导航适用于整体性较强且水平化的内容，能以线性的方式展现，充分利用手机有限的屏幕空间，让所有的信息都有展示的机会，同时让用户聚焦在当前的界面上，与我们平时在手机相册查看图片的感觉类似。因为是在应用中对功能展示，所以功能不宜过多（一般不超过5个），并且要给用户过程中的操作提醒，比如在平铺式导航的界面底部添加分页控件，以起到提醒作用。
适用范围：适用于少而精的内容和随意浏览场景下的应用。
注意事项：无法立即跳转至非相邻界面，不适合较多界面的加载。
如：App Store搜索结果界面、MUJI to Sleep
如何选择适合的导航模式？
有必要引入两个通俗的概念，深度和广度。
深度：产品功能在纵向层级上的数量表现。
广度：产品功能在横向入口上的数量表现。
在产品设计过程中，也会有两种倾向。即深度优先和广度优先。具体的选用要根据信息结构、功能结构以及各自的优先级来判断。举例：如果是展示商品的功能是最高优先级，优先保证该功能和信息展示，一般看来，商品相对于商户、商品分类等来说，属于较详细的信息，详细的信息优先显示的功能需求，应当选用广度优先的模式来展现。
综合考虑用户在移动设备的使用场景、对应场景下的用户体验要求时，好的产品结构应当兼具浅和窄的双重标准，具体到业务的执行逻辑时，我们也不应因此增加不必要的深度和广度。
导航设计中需要注意什么？
1、目标用户的使用习惯。微信和易信，都是非常好用的社交应用，目标用户相近，也都有其核心的、独特的价值存在。微信一直坚持标签式导航，直观易懂；而易信始终坚持相对隐喻的抽屉式导航。当面对大量的不同文化程度、不同职业和年龄层的用户时，抽屉式导航的使用成本无形中增加了很多。
2、充分利用屏幕空间。把手机屏幕看作三维的空间，界面与界面在空间内是上下、左右、前后的排列关系。比如抽屉式导航中的功能可以理解为隐藏在屏幕的左侧外部，同理也可以考虑在底部设置一个上拉呼出的快捷抽屉来提高操作效率，如爱逛街。这一点的目的是，我们在产品设计过程中不应局限在以上的导航模式中，只要是能够满足业务需求，突显产品核心功能的创新都应当被鼓励的。
3、观察行业趋势。手机屏幕越来越大，人的手掌没有变化的情形下，人们对于手机屏幕的触摸控制的范围是有限的，相对在屏幕上的占比是越来越少的。很典型的一个例子，抽屉式导航的优点是节省界面空间，一般放置在导航栏的左侧或右侧，但随着屏幕尺寸的增大，导航栏的左侧或右侧已经不在用户的有效触摸区域内了，所以应当考虑加入手势快捷操作或重新选用其他导航模式了。
本篇文章内容，多来源于《移动设计》和其他网络资源，在此向书作者傅小贞团队表示感谢，也感谢分享有价值内容的产品前辈们。
Openself
2015/2/13
网友评论