如何设计导航？在我们的第一部分“简约高效的导航设计（一）：信息架构”中，我们提到，导航设计的第一步，便是架构内容，合理的信息架构能够自然的展示出导航选项，同时还能减少用户的认知负载。
（阅读地址：http://www.ui.cn/project.php?id=13546）
当完成导航的信息架构后，我们便需要开始第二步——讲述各种导航模式的利与弊，同时告诉大家该去如何选择正确的导航模式并设计。
导航菜单可以处于界面中得任何位置，并且能够提供导航选项供用户索引信息。像文章列表和产品细节页面这种页面，其中的超链接尽管主要用来呈递更详细的资料，但本质上其实也可以算是导航。
导航模式的区别，首先要体现在两大类导航模式的却别上，一种是“主要/传统导航模式”，另外一种是“次级/备用导航模式”。实际上，要讲清楚其中的区别很困难，但本文会逐条讲述种种导航模式，让诸位自行思考。
传统的导航菜单主要有5种形式，从简单到复杂如下排列：
尽管存在混合式导航菜单，但是如果将一个网站的导航系统分解，那么肯定包括上述5种导航菜单模式的一种。现在最重要的问题是，在什么情况下使用什么样的导航菜单。
正如我在第一部分中所说的那样，设计师有3种方法来解释导航项：纯文本标签，文本标签+照片，以及文本标签图片+简短描述(如上面3副图所示)，为了最小化用户的认知负载，设计师需要做好平衡，用“刚刚够”的信息来满足用户需求，同时又能让用户理解信息。
导航项尽可能要少，解释性文字尽可能简短，导航就越简单，越容易被用户所接受。
为了更好地解释在实际情况中如何选择导航菜单，我们来逐一讲述5种导航菜单。
几乎每个网站都有水平或者垂直固定的菜单栏，用来容纳导航项，提供一级分类。
第一种导航模式也是最基本的导航模式——水平或者垂直的导航菜单栏提供导航链接（图像来源：top: Sharify, bottom: Arbor Restaurant)
建议：
将较为重要、使用频率较大的分类项放入导航菜单栏中。
说明
导航菜单栏是最简单的导航形式。导航项以及导航分类全局性可见，非常容易点击。与之相比的下拉菜单式导航，用户还需要悬停。而子页面导航，用户需要等待加载。
缺点:
此类导航模式是否好用，取决于屏幕宽度和屏幕方向（大幅横栏导航在小屏中需要自适应处理），而且占据空间。
在下图的截图中，请注意在大屏情况下，导航效果极佳，仅仅占据了一排，而且并列层级清晰。
而在小屏适应设计中，设计者尝试将横排布局改为列表堆叠，我们可以看到，导航项可读性下降了；
而且导航栏的下移，导致了主要内容的下移，用户需要滚动才能阅读内容。
多排列表式导航比较麻烦，用户无法直接获取内容（图像来源： Bay Street Biergarten)
上面是水平导航栏，我们再来看看垂直导航栏，垂直导航栏虽然可以容纳更多地菜单项，但是也有缺点——占据了一定的内容空间。这里我做了一个对比展示，各位可以比较一下效果。
垂直导航栏在宽屏中，一定程度妨碍了内容展示。（图像来源:Bay Street Biergarten)
这就是为什么下拉式菜单和弹出菜单在展示内容较多时有奇效。如无必要，额外导航项隐藏，当悬停或点击时才会出现，增加了内容的空间。
下拉菜单或者弹出菜单，当被触发时，会出现一个内容覆盖层，提供额外的导航菜单项。一般是列表式呈现文本或文本+图标链接。
下拉菜单往往是单栏的，垂直堆叠 (图像来源：Blurb)
建议：
如果文本不是很长，且能够很好地诠释导航项含义，那么常规的下拉菜单便能胜任导航任务，且非常有效率。
说明：
和宏菜单导航模式相比，常规的下拉菜单具有以下优势：
缺点：
如果菜单过长，那么效果便不佳了。过长的下拉菜单会导致用户频繁的滚动，有两种方法可以解决这一问题。
第一种方法是将下拉菜单的导航项进一步细分，分出子分类，尽管是个不错的解决方案，但是分类套分类，容易让用户感到混淆，如果交互效果不恰当，用户会极度迷茫，在第三部分，我们将重新讲述这个问题。
第二种处理超长下拉菜单的方法是启用宏菜单导航模式，但在使用宏菜单导航模式时要注意，宏菜单的排列要依据屏幕方向。例如水平宏菜单适合横屏。
如果屏幕空间很宝贵，那么建议根据屏幕方向来对下拉菜单进行调整。（图像来源：Sunglass Hut)
宏菜单导航模式是一种特殊的下菜单，特殊之处在于宏菜单往往不是单栏式下拉，宏菜单往往包含更多、更复杂的信息：图像、字体层级、非单栏式布局，可视化包装导航项（原来只有文本标签）。
宏菜单实际上是更大型、更精致的下拉菜单（图像来源：Design Chemical)
建议：
如果导航项必须要图文结合，那么宏菜单是最好的选择
说明：
常规的下拉菜单无法提供充足的空间展示导航项信息，或充分可视化导航项信息。虽然加载稍慢，但是相较于独立页导航，具有以下有点：
缺点：
宏菜单导航模式占据空间，如果导航项过渡，那么便需要独立页导航模式来承载过多的导航项了。
第四种方法是使用独立的页面去包含的导航项信息。
独立页导航能够容纳大量子分类（图像来源:Danske Bank)
建议：
如果导航项同时需要文本、图像以及文字描述，那么独立页导航模式最适合。
缺点：
将页面跳转到独立的导航页面，而不是跳转到具体内容处，非常的不优雅。同时用户还会与上下文脱节，体验也比较差。但是当宏菜单中信息巨大，别无他法，也只能使用独立页导航模式了。
动态过滤导航非常复杂，也非常的强力，用户可以自行“装配”所需信息，然后进行阅读。
复杂却强大，动态过滤导航模式让用户根据选择，定制浏览信息。（图像来源： Walmart)
上述提到的5种导航模式，很多网站只有前三种的一种，动态过滤导航模式并不常见。而且网站绝对不会仅仅采用动态过滤导航一种导航模式，而是作为主导航模式的附加导航模式而出现。
Kmart (下图）的导航流程始于下拉菜单导航（常规下拉和宏菜单下拉兼而有之），而下一层级中，会以独立页导航的形式来展现产品分类。下一个层级中，用户开始使用动态过滤来提炼信息。
动态过滤通常作为常规导航模式的附加（图像来源:Kmart)
建议:
在第一部分中，我们曾经提到过动态过滤，上述5种导航模式的前三种，适合展现最基本的、独有的分类项。而动态过滤适合一些交叉分类。
说明：
动态过滤的优点是，可以根据用户的设置来进行信息过滤。不必切换层级，用户可以在同一层级内动态的进行选择，从而找到最合适的信息。
实际上，动态过滤在往往是垂直布局，左面选择，右面立即反馈。
缺点：
动态过滤是最强力的导航模式，同样也最复杂。占据空间巨大，加载时间最长。用户需要动脑去分析，然后在多类数据中进行选择。然后又需要过滤、思考。即便在桌面端，动态过滤的导航设计也是个巨大的挑战。更不必说空间更小，可读性更有限的手机端。所以，尽管动态过滤很好用，还是要尽量避免去使用。
几乎所有的网站都在使用传统导航模式其中的一种。然而，与此同时，很多网站还在使用备用导航模式，用来弥补传统导航模式的不足。
“其他导航模式”中，常见的有4种：
搜索避免了多次导航流程，让用户直接抵达目的地。通过用户手动输入搜索信息，排列出符合条件的信息。
当用户很清楚的知道自己想要什么的时候，当整个站点层级复杂时，搜索是一种捷径。（图像来源: The Boston Globe)
设计师通常会为页面定义关键词或者标签，来让用户的搜索结果更符合用户预期，拼写相似、同义词、近义词也会出现在搜索结果中，换言之，搜索引擎必须能够猜透用户的心思。
建议：
将搜索作为传统导航模式的附加，而不是作为主要导航手段。
说明：
很多用户在导航网站的过程中，偏爱使用搜索去导航，有很多人针对此进行了研究，得出的结论也不一。当然，用户对搜索的喜爱程度，决定了网站搜索的设计，但是我们要更深层次的去观察，为什么用户有导航不用，偏要使用搜索呢？是否是因为导航设计的太差了呢？尽量不要使用搜索作为主要导航模式。
除非你们有一支非常牛逼的开发团队，用搜索做导航模式，终究不太妙。因为搜索做好实在是太难了，搜索成功率也较低。不但和开发有关，而且每个网站都有自己的标签分类、命名方式。用户往往不知道网站的标签命名规则，用户会按照自己的习惯去搜索，而搜索出来的结果往往不得其意。用户尝试的次数不会超过3次，尤其是在移动端，输入特别麻烦的情况下。
另外的问题是，即便搜索结果是相关的，用户也会感到不“完满”：这个搜索引擎是否有遗漏，是否有一些相关的信息没有捕捉到？这种模糊的感觉无疑会影响到体验，而传统的导航模式，精确分离，紧凑的展示出相关信息入口，让用户感受到精确感。
还有人说，搜索的转化率更高，而导航的转化率较低。那当然，电商网站中，使用搜索的用户，有很大一部分知道自己想要买什么，因此直接上去就可以搜索，而使用导航浏览商品的用户，往往没有固定的购买欲望，很可能只是随便看看。
不论如何，即便搜索比导航浏览更有效率，用户还是更喜欢使用导航浏览信息。
用户还是习惯用传统的导航模式来寻找信息，（图像来源: KISSmetrics blog)
搜索的问题在于，若想得到精确的搜索结果，就必须输入精确的信息。而产品的型号往往复杂，比如说GS-50 Vs GS-150，GS 150带扩展电池。而动态过滤能够准确的筛选信息，而无需去记忆产品复杂的型号和特性。
而且，搜索还会妨碍用户发现相关类产品。用户可能搜索后，只能看到他们想要的特定产品，却无法发现更好的同类产品。通过动态过滤，用户可以发现更多的想关信息，筛选出更具性价比的商品。
当然，为搜索引擎加入动态过滤功能也是可以的，但是设计模式还是界面视觉风格上都需要借鉴动态过滤，意义就不是很大了。
算法优良、新能抢进的搜索引擎虽然好用，但是天生不稳定的特性还是要弱于传统的菜单导航模式。
最后要提的一点是，当网站内容主要由用户生成时，那么搜索导航就很好用，因为用户往往能记住他们自己生成的内容。
A – Z索引导航方式，其实就是通过紧密了列表来展示导航选项，主要依据字母表。
A-Z索引（图像来源:Simply Recipes)
建议：
A-Z索引不能作为主要的导航手段，而且，A-Z中展现的最好是分类页，而不要展示独立页（这样能更有效）
说明：
A-Z索引非常方便，因为人人认识字母表，但是它有3个问题。
第一，A-Z索引只能用来展示文本，无法展示图片和描述。
第二，排列方式只能按照A-Z，而有些时候网站想要主推某类内容就比较麻烦了，一些过时的信息可能会放在最前面。而且还会出现同义词的困扰。
第三, A-Z索引，跟搜索一样，会妨碍用户发现相关信息项。如果用户在一个食谱网站上，寻找“鸡蛋和豆类”做早餐，用A-Z，他们只能寻找到“鸡蛋和豆类”，使用传统导航模式则不一样，还能看到其他风味的早餐食谱。
站点地图展示了网站的导航架构，往往由标题和副标题构成。
站点地图可以清晰展示网站的导航架构（图像来源:NBCNews.com)
建议：
sitemap.xml 文件可以帮助搜索引擎蜘蛛索引网站。但是站点地图是一种交互展现方式，可作为所有导航模式不起作用的补救措施
说明：
站点地图往往只有文本构成，没有图像和描述，导致用户无法很好地理解导航项。但是站点地图会展示网站所有的导航项，无有遗漏。但是信息量太大，用户自行寻找信息是个麻烦事。
标签，或者关键词，往往出现在文章的末尾
更多关于：后面的标签导航项（图像来源： Euronews)
建议：
优良的标签系统导航效率极高，但即便如此，还是无法和以信息分类为基础的传统的导航模式抗衡。
说明：
在所有的备用导航模式中，标签导航和传统导航模式最为相近。建设标签导航的一步便是构建准确的信息架构，而信息架构是传统导航模式的基础。然而不方便之处在于，一篇小小的文章，就可能生成上百个标签。
标签的分类非常重要，通过组织不同标签的父子级关系，设计师可以完成大大小小的标签分类。传统的导航模式正是依赖大分类->小分类->细节的模式来让用户得以舒服浏览信息。
很多重度内容网站，往往采用混合式导航，标签分类也较为宽松，加之站内搜索和站外搜索，再添加上RSS feed和社交媒体链接。而标签分类，往往会生成大量标签，而用户对其中绝大多数的标签是不感兴趣的。一篇文章包含的关键词有：“奥巴马”“民主党”“共和党”“医疗保健”“关闭”，而用户关注的仅仅是“医疗保健”而已
在传统导航模式中，用户会按照分类和关键词联系来寻找内容——例如，新闻->政治->美国->国内政治->医疗保健。若是用户想要浏览相关文章，只需返回上一级即可。
传统的、以层级为划分的面包屑导航是最精确的导航模式（图像来源: The Telegraph)
如果搜索引擎强劲，切网站能够和社交媒体紧密结合，那么标签分类导航系统可以很高效。但是还是稍显复杂。传统导航模式还是无可撼动。
在选择导航模式时，要遵循这样一个定则：选择“导航项最少，且能够叙述清楚信息，并且整体操作起来简单”的导航模式
是否采用备用导航模式，怎样采用？这也是一个难题。
备用导航方案必须要选择一种成本低廉、易于实现的导航模式，且不能将备用导航模式作为主要导航模式。
综上所述，在构建网站的导航系统时，主要精力应该花在主要导航模式上，备用导航模式主要用来做为辅助或者不就。
本文的观点总结起来如下：
能够根据实际情况，选用合理的导航模式非常重要。这就是第二部分，而第三部分，我将教大家如何简单舒服的设计导航。
http://www.MartinRGB.com
234
作品
1.7w
粉丝
413
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册