交互模式应用(2)：Navigation

　　导航的目的是让应用程序的层次结构按照有条理的方式清晰展示，并引导用户轻松找到并管理信息，让用户在体验产品的过程中不会迷失。为了展示程序功 能，我们需要借助导航控件来对其内容进行逻辑分组和布局。在人机交互中，导航即在特定系统的用户界面中对内容进行合理安排。无论是软件、网页还是移动设 备，用户界面的成功与否很大程度上决定于导航的有效性，也就是能否高效的传递人机交互过程中的信息。 可以这么说，一套完备的导航系统对于应用程序的成功有着举足轻重的作用。网页设计/交互设计

　　为了更好的归纳导航在交互设计中的应用模式，我们按以下结构分类：

　　Main Navigation

　　通常出现在界面的固定位置(比如顶部)并且吸引目光，用来组织应用程序的主要内容框架。几乎所有的软件、网页或者移动应用都有一个main navigation模块，我们还可以将其细分为几种子类：

　　水平导航

　　垂直导航

　　倒L导航

　　水平导航

　　水平分布的一些可点击的图标或者标签栏，当前选择项高亮显示或者有明显的视觉区分，在页面跳转后也基本保持不变的导航模式。

　　特点：

　　根据文本长度有6-8项分类

　　向下层级不超过3层

　　比如常见的Ribbon工具栏，就是一种典型的Main Navigation。无论打开何种文件，Ribbon都固定显示在屏幕顶部，能清楚辨别当前所选tab，Ribbon上面的工具层级一般不超过3层。

　　垂直导航

　　即将导航内容以垂直的方式展现，一般都放在屏幕左侧，可以选择全部隐藏或者部分隐藏，也叫左侧导航。

　　特点：

　　垂直导航中可以显示的内容更多，方便上下滚动页面

　　可以将顶部视觉焦点留给主体内容

　　从左至右可以展示更多的层级

　　Porsche canada的网页中，你可以通过垂直导航按类别找到中意的车型详细信息。

　　倒L导航

　　有时候我们能把水平导航和垂直导航结合起来，方便展示更多内容以及层次，这种布局很像一个倒过来的字母L，于是就诞生了倒L导航。

　　特点：

　　水平导航展示第1层级，垂直导航展示第2,3层级，也可以反过来垂直导航展示第1层级，水平导航展示第2,3层级

　　用在信息条目过多，又需要分层展示时

　　Autodesk的网站就是一个倒L导航的例子，水平方向可以选择不同的类别，同时展开的垂直导航里有更多细分的条目可以参考。

　　Directory Navigation

　　应用内有一些分组的内容可供用户直接选择，无论是组内挑选还是组与组之间挑选，我们可以使用目录式导航，这样用户可以对全局内容的选择有一个大体的把握。

　　特点

　　多组内容分布

　　每组内容拥有不同的子内容

　　组内容或者子内容间快速切换

　　用户在了解全局架构的同时能快速定位目标内容

　　上过淘宝的同学都知道，其主页上的目录式导航是很多购物目标明确的用户寻找商品时最有力的导航工具。

　　Doormat Navigation

　　门垫式导航，就是把所有信息内容分成2层同时展示出来，第1层展示主要的类别，第2层展示主要类别下面的主要子项。它同目录式导航有点相似，不过仅仅展示部分子项而不是全部。

　　特点：

　　3-4个主要类目，用户能快速在第1层类目中作出选择

　　不重要的子项隐藏起来，不需要展示所有子项，4-8个主要子项就可以了

　　一些网站时常采用这类导航模式，把最新最热门的文章展示在主要类目下，通过点击类目(highlight部分)可以进入该栏看到全部文章。

　　Double Tab Navigation

　　当拥有足够多的页面需要按照结构组织起来时，每个页面使用一个tab来显示，用户需要知道他们目前在导航系统中的位置并且如何返回主页面，这里我们可以把tab分成两层来进行导航。

　　特点：

　　双层tab，首层tab下紧贴着次层tab

　　双层tab在视觉上是相连的，首层tab中的一个选项对应次层所有的tab

　　当前所在位置跟tab中其他选项有视觉区别

　　DesignSensory就用了双层tab来安排其页面内容，我们可以看到，选中相应的tab后，主浏览区域显示对应内容，这样很方便的可以在不同类型内容的页面之间快速跳转。

　　注：部分情况下，第二层tab可以隐藏起来，节省了不少页面空间。

　　Map Navigation

　　用户在地图上根据位置选择内容，点击后的链接能跳转到对应详细信息。

　　特点：

　　信息组织与地理位置有关

　　与地理位置相关的内容同地图上的位置一一对应

　　提供链接便于展开更多内容

　　Google Earth就是一种地图导航，通过点击地图上不同方位的图标，可以进一步获得该位置信息的详细内容。

　　Split Navigation

　　当信息内容按照一定的结构组织起来时，用户需要展开不同的节点查看子节点来确定内容，我们可以选择Split Navigation。

　　特点：

　　内容层级偏多，比如书的章节，一般有3-4层

　　末层内容间的快速切换，比如可以直接从第五章第四小节第六段直接跳转到第二章第一小节第三段

　　PDF文档的书签，Powerpoint的outline，Outlook左侧的导航栏，CHM帮助文档的目录等等都是这种分割式导航的应用。

　　Icon Navigation

　　使用图标+少量文本描述导航模块含义，便于用户第一眼了解基本用途。在视觉引导越来越受重视的今天，这种模式是很多应用程序的普遍选择，不失生动的同时也不会误导用户。

　　特点：

　　图标+少量文字标签

　　图表内容通俗易懂，即时没有文字解释也能被用户知晓，加上文字标签可以进一步确认其用途

　　某设计师的博客便是这种风格。

　　Other Navigations

　　导 航是信息设计中最重要的部分，自从应用程序的布局不再局限于同现实世界完全映射后，导航栏的设计出现了很多新的方法，更简洁，更直接更吸引眼球的成为人们 的首选。随着技术的发展，一些新兴的导航技术也逐渐被部分应用采用，这些导航方式主要是表现形式有所变化，大部分从逻辑结构上跟前面介绍的区别不大，大家 可以适当的选择一些新导航模式来为自己的设计增加魅力。

　　手绘风格

　　反映真实温度的月份导航

　　拟真映射式

　　色块导航

　　基于Flash的导航