有效地简化导航-Part 2：导航系统--go百科网

好效地简化导航-Part 2：导航体系

但是，我们还必要多做两步——选择准确的导航菜单情势，并计划出来。本系列 Part 2 将展现第三步和讨论哪种导航菜单顺应哪些内容。

界面上的导航菜单都为了给用户提供欣赏内容的导航选项。这不包含，文章或商品页面内里的超链接，由于它们的主要作用是流量，而不是导航。

主（传统的）导航和次级（备用的）导航之间是有区别的，但很难准确界定。有人说主导航主要是经过点击、悬停来选择或欣赏元素据典范，而次级导航在此中某方面有缺失。

传统的导航菜单

传统的导航菜单有以下5品种型，从简便到繁复排序

1. 菜单栏

2. 常规下拉菜单

3. 多栏下拉菜单 (Mega-menu)

4. 分页

5. 动态过滤器

固然还存在更繁复的殽杂型方案，但是一切殽杂型导航都能拆解成以上5个典范。如今成绩是什么时分该选择哪品种型。

就像 Part 1说的，计划师用3种办法来表明导航选项：标签；标签+图；标签+图+形貌。为了低落用户的认知停滞，计划师应为目标用户提供提供充足的信息来让他们了解这些选项。

底下这条履历端正 (rule of thumb) 可以帮你决定什么时分选用哪条端正：越少的选项，必要表明的就越少，以是导航应该尽约莫简便。

为什么有些 widget 更易用，什么时分应该选择这个而不是谁人…… 起首仔细看下这5种导航菜单。

菜单栏

几乎每个网站一个横向或竖直的栏来包容顶级种别。

最基本的导航——一个横向或竖直的栏

发起

最紧张或最经常被拜候的栏目或种别应该放到这个导航栏内里。

表明

一个导航栏是最简便的导航情势。这个导航栏内里的栏目或种别都是全局性的，可以直接被望见及拜候。比拟之下，用回会悬停在一个下拉菜单或等候分页加载要拜候的选项。

成绩

导航栏（横向或竖直）只能放下一小撮栏目，并且还受限于屏幕宽度和朝向，它会占据本应该体现主要内容的空间。

底下的截图中，会看到横向的导航也是很好用，它只占据一行空间。为了把它放到更小尺寸的屏幕内里，计划师把导航堆砌行家内里，但是如此就会把主要内容压下去，用户就必要多转动多次。

多列的导航就会变得很难用。

在宽屏中，竖直的导航实用于更多的菜单栏目，但它有另一个缺陷。它占据的竖直空间本可以更高效地展现主要内容，文章、视频、商品信息……底下我展现并比力它们的后果。

竖直导航会束缚内容在宽屏中的展现后果。

这就是为什么下拉、浮动菜单更合适多栏目。它们可以依据必要来体现分外的栏目，把舞台让给内容。

常规下拉菜单

下拉、浮动菜单，被触发的时分，就会显如今内容外表。它的条目都是竖直堆砌在一列内里，由笔墨或笔墨+图标构成。

下拉菜单把一切条目竖直堆砌在一列内里。

发起

假如栏目可以很好地用笔墨表达，并且不会太长，一个常规下拉菜单是最简便而又好效的方案。

表明

与多栏下拉菜单比拟，常规下拉菜单有如下优点：

快速加载

多栏下拉菜单必要更多的空间，而常规下拉菜单只必要少数笔墨。多栏下拉菜单还会干扰用户，最少也会低落他们的欣赏速率，由于他们必要破费时间来搞清晰这个布局。比拟之下，一个简略的竖直列表就很合适快速阅读和了解。

成绩

假如菜单太长，整件事就会变得很奇葩。一个长的竖直下拉列表会被欣赏器窗口切掉一局部，这就必要用户不休转动。有两个办法可以处理这个成绩。

把表弄成子种别。但这个办法，假如交互计划得不得当的话，从一个子菜单到另一个子菜单的导航会让人懊丧。这个成绩会在本系列的 Part 3 中说到。

第二个办法就是使用合适屏幕朝向的多列下拉菜单。

假如屏幕空间是决定性要素，让菜单顺应屏幕朝向不错的变通方案。

多栏下拉菜单 (MEGA-MENUS)

有一种很特别的下拉菜单叫做多栏下拉菜单。多栏下拉菜单就是下拉或浮动菜单，但它并不是用一列条目堆砌起来，而是用图片、印刷上的层级、不同的图层来体现选项。

多栏下拉菜单就是一个更大、更繁复的下拉菜单。

发起

假如选项必要笔墨+图片，那多栏下拉菜单就是个好选择。

表明

常规下拉菜单不克不及提供如此的空间或外貌化的选项。不管是常规照旧多列，与分页比拟都市有以下的优点

快速加载

低落熟悉停滞。分页的话，用户就会思索“哪个是倾销？”，“哪个才是真正的内容？”，“导航在哪？”……下拉菜单只会显如今导航，并且显如今鼠标光标四周。

成绩

即使是多列下拉菜单，空间也是仅限的。假如有很多很多栏目，那分页就不成制止。

分页

第四种体现栏目、种别的办法就是用一个独立页面。

分页就可以包容很多子种别。

发起

假如必要笔墨+图片+形貌，分页就是最好的。

表明

用多列下拉菜单来包容这些内容也是可行的，但也仅有质貌很短的时分。

成绩

把用户带到一个分页来欣赏导航选项，而不是内容，这并不是一个优雅的方案。同时用户也会被带离如今页面的语境。但假如多列下拉菜单不敷以包容这么多的选项，分页就是最好的方案。

动态过滤器

动态过滤器是最繁复，最强壮的方案，依托用户的组合他们想要看的内容流。

繁复而强壮，动态过滤器让用户可一构造他们必要的内容。

很多网站仅有前3种导航菜单，动态过滤器就没有单独显现。而是作为一个选项附加在主导航上。

Kmart （下图）以下拉菜单开头导航步调，常规和多列都有。本人一个层级，使用分页来展现产物种别。当用户导航至某个系内里，他们就会望见一个动态过滤器。用以精准搜刮。

动态过滤器常常会附加在主导航上。

发起

切合在Part 1内里讨论的元数据种别。可以如此说，前3种导航合适紧张和互斥种别，动态过滤器合适把种别整合在一同。

表明

动态过滤器的有点就是可以让用户选择，并及时改动值。而不是在不同导航层级内里行进、后撤，用户可以停在一个层级，动态地整合值，直到后果切合他们的要求。

动态过滤器通常是竖直的并不是一个缺陷，由于过滤后果并不是前方所说的“内容”。他们仍旧是导航的一局部，右方选择的值和右方及时反应的后果是有动态接洽的。

成绩

动态过滤器很强壮，也很繁复。它们占据更多的空间，必要更多的时间来加载。用户必要去分析这些不同的元素，包含过滤器、后果、后果排序、展现形式，这些使动态过滤器在电脑上形成挑唆，就更别说手机上。假如更简便的导航就可以完成事情，就不要使用它。

备用的导航

几乎一切的网站都市选用此中一种传统导航作为它们的主导航。但是，很多还会以备用导航体系作为增补。这么盛行的办法也是很紧张的。

这里有四种基本的情势：

搜刮

A-Z的索引

标签

搜刮

搜刮让用户从在各个导航层级中抽离出来，把他们直接带到目标地。此中的不同点在于，页面的标题以前由用户手动设定好了。

搜刮是在不同层级中欣赏想要的内容的快捷办法

计划师会在一切的页面上使用标签、紧张字体系，来表明用户和搜刮引擎之间的偏差，比如错别字、同义词、内容不同的看法模子。换言而知，搜刮引擎会实验推测用户毕竟想要什么。

发起

提供搜刮作为主导航的增补，并不即是作为主导航。

表明

用户对否以搜刮为主导，关于这点不同的研讨有不同的结论。固然，这也会受搜刮引擎是怎样计划、展现等要素影响，乃至导航的计划太差也会增长搜刮的占据率。总之，搜刮并不是主要方案。

只管开发者作出种种积极来制止错误，搜刮告捷率照旧很低。缘故是每个网站都市有本人的标签、分类方案、定名习气。用户不晓得这些细节，以是它们常常推测性地填写搜刮哀求，这是一个包袱而又不确定的历程，招致很多人仅有一、两次搜刮功效。在挪动装备上尤其分明，由于填写搜刮哀求的体验更不惬意。

别的一个成绩就是，即使搜刮后果都是干系，用户也不确定它的完备性。“会不会由于搜刮引擎曲解了我的搜刮哀求而招致少了些什么？”……传统的导航，建立并展现一切种别，同时展现一切干系条目，提供用户所欣赏的确定信息。

别的，还会常常讨论搜刮的转化率比导航菜单高。但是这可以被表明——欣赏和搜刮的区别。欣赏型的用户会用菜单，而很少决定买些舍呢么，那些晓得本人想买什么的用户，就会直接输入并搜刮。

但是，搜刮可以更好效地找到特定商品，它并不那么盛行。

用户会倾向于使用传统导航，即使是在找特定商品的时分。

用搜刮的成绩是，不同的具体设置、不同的地区定名或型号，很难说消费物的确切称呼。“GS-50 or G-150?”，“这个有分外的电池？”经过动态过滤器，用户可以指定他们想要的功效，而不必要想起具体型号、编码。

别的一个成绩就是，搜刮会拦阻用户寻觅干系条目，假如用户找到他想要的确切条目，他就不会去看其他。而使用动态过滤器，用户就会看到干系的条目，包含一些功效更多或价格更低的物品。

给搜刮引擎添加动态过滤器也是可的，这可以团结两种的有点。

总的来说，搜刮引擎，特别是有繁复的功效和算法，可以提供很好的后果，但是它本身存在的成绩使得它还不如一个颠末经心计划的传统菜单。这就是为什么把搜刮是作为一个备选方案，它并不是导航的中心。

搜刮在用户天生内容 (user-generated content) 的当地使用能更好地事情，由于用户晓得他们定名过、标志过的内容。

A - Z的索引 (A – Z index)

一个 A - Z 的索引包含网站外表的一切条目，并按字母排序分列。

A - Z 的索引按字母排序分列网站的一切内容。

发起

不要优先思索 A - Z的索引。只列出一切的种别页面，比列出上千个独立页面要有效。

表明

A - Z的索引的利益在于各位都晓得怎样按字母排序来导航。但也存在3个成绩。

第一，A - Z的索引很合适笔墨，不实用于图片和形貌，有很多时分图片和形貌是不成或缺。

第二，拔取符实用户希冀的词汇也不简便。由于地区、年代、术语的干系，约莫会形成用户在错误的场合寻觅想要的条目。唯一的变通方案就是，包含同义词。在传统导航中，同义词并不是一个大成绩，由于用户不会同时面临多量选项。

第三，A-Z的索引，就像搜刮那样，也会拦阻用户发觉干系条目。比如，找“eggs and beans”(…蛋和豆)，他们就只能取得蛋和豆。在传统导航内里，用户还拜候到其他早餐，由于他们的导航线路是“早餐”->“蛋和豆”。

网站舆图 (site maps)

网站舆图经过主标题、副标题来展现网站的布局。

网站舆图展现网站布局。

发起

sitemap.xml文档可以协助搜刮引擎索引索引网站。但是不应该把它视作导航伎俩。

表明

网站舆图通常只包含笔墨，但是用户必要的是图标、图片、藐似来了解选项。网站舆图可以包含这些元素，不外这会加剧另一个成绩。网站舆图通常会一次性体现一切内容，并不提供挑选。这就会影响用户欣赏这些内容、获取信息。

标签 (tags)

标签，可以是紧张字，并不必要有父集、子集种别。通常显如今文章末了。

通常会带上“More about”的标签

发起

基于标签的体系在调用分外信息便利做得很好，即使云云，仍没传统的基于种别体系做得好。

表明

在一切的备用导航中，标签最接近传统导航。毕竟，标签实质上就是创造元数据，信息架构的第一步，传统导航的基本。但是每篇文章都有一串标签，你很快就会取得不计其数个标签。

这就是为什么为标签分类这么紧张。把这些标签整理成父种别、子种别，计划师就能把一大堆标签布局化成一组组干系的信息。包含这些种别的传统导航可以让用户跳过不想要的组别，直接欣赏想要的信息。

很多以内容为基本的网站，会用殽杂导航 (hybrid navigation) 来代替传统的菜单。这些分类标签寻常很大略，依托其他的导航模子，如外部和内里的搜刮引擎、feeds、交际媒体链接。这类体系可以把用户带到想看的文章，但这很难让用户找到想要的一类文章。为了处理这个成绩，一些计划师简便地把他们归结为一系列紧张字——“Barack Obama,” “Democrats,” “Republicans,” “health care,” “shutdown.” 用户拜候这些标签来欣赏他们感兴致的干系文章。

在传统的导航，用户会按干系的紧张字来做导航——News → Politics → US → Domestic policy → Health care。在这个案例中，用户会对这篇文章很感兴致，由于它叙述了美国医保体系，而不是由于它提到“Barack Obama,” “Democrats,” “Republicans,” “shutdown.” 拜候父种别就能查察干系文章。

传统基于层级的菜单，是最精准的导航典范。

基于标签的体系，假如在交际媒体和搜刮引擎的增补下，会变得十分好效。但是它作为一种导航办法，像垂纶，而不是目标性强的搜刮。同时，用户不一定依托搜刮引擎、外部链接来欣赏网站。他们更倾向在首页寻觅信息，以是颠末计划的传统菜单照旧最高效的办法。