每次我谈到广泛的层次结构在我们的UX会议课程中信息架构，出现了两个问题:
- 在全局导航中有7-9个以上的顶级分类可以吗?(提示:它是好的，你只需要适当地计划。)
- 如果我们使用大量的顶级类别，它们就不适合在水平导航栏中显示。他们应该去哪里?
许多团队会尝试在桌面网站的水平导航栏中嵌入一个宽泛的导航层次结构。为了使类别列表能够适应有限的水平空间，他们会过度使用小字体大小,人群相互接近的项目，或不自然地产生短的分类标签．最糟糕的是，将IA修改为只有足够多的主要类别能够容纳可用空间。当我们将广阔的信息空间限制在少数类别中时，我们最终将得到过于通用的顶级条目，这将使用户难以找到他们需要的内容。此外，用户将不得不进行更多的工作(点击和扫描各种低级类别)，以找到相关的类别。
然而，有另一种类型的主导航UI，在桌面，可以容纳尽可能多的顶级项目需要-垂直,左侧导航．
垂直导航的好处
这种导航UI的大部分优点来自于它能够容纳许多顶级类别。
- 特定类别增加了可查找性，降低了交互成本。
使用垂直导航消除了限制类别数量的视觉设计限制，允许团队创建一个自然适合信息空间的IA，并暴露特定的、高的信息的气味不需要用户深入到层次结构的第二层
- 垂直导航提供了增长空间。
对于导航在未来可能增长的网站来说，垂直导航是一个很好的选择——在B2B、企业、政府、高等教育和医疗保健等领域，大型组织的产品或内容可能会不断发展。为垂直导航添加额外的类别并不需要重新设计导航UI;唯一的主要决定是新项目应该如何融入现有的类别结构。
- 垂直导航支持比水平导航更有效的扫描。
我们从眼球追踪研究中知道，在网站上注意力是向左倾斜的:用户80%的时间都在看屏幕的左半部分．屏幕左侧的区域是很有价值的，将导航放置在那里很可能会被用户注意到和扫描。
此外,心理语言学研究表明,视觉搜索列表中更为高效如果列表比如果是垂直水平——人们能够找到感兴趣的一个项目用更少的眼注视,因为更多的信息可以来自一个固定。(请记住，眼睛不仅能够从它注视的确切位置感知信息，还能够从它周围相对较小的区域感知信息。因此，即使我们阅读了句子中的每个单词，我们也只需要专注于其中的几个单词。)
注意，一个常见的误解是水平导航设计支持f形阅读模式。然而，当用户阅读一段非结构化文本时，会遇到f形模式，这绝对不适用于导航、标题或其他页面chrome。
- 用户熟悉垂直导航．尽管垂直导航在当代网站上不太常见，但在桌面应用程序(本地应用程序和web应用程序)中经常遇到。
此外，许多网站使用垂直当地的导航(例如，显示当前页面的“兄弟”页面，它们是网站层次结构中同一类别的一部分)。
- 垂直导航可以很自然地转化为移动导航。将水平菜单条转换为页面设计可能需要一些调整，因为菜单栏通常转换为垂直导航(通常显示在汉堡包菜单下)。相比之下，为桌面和移动设备使用垂直导航可以让团队以相对最小的适应性应用相同的视觉设计选择。类别的边框、类型、间距、顺序和二级类别的UI可以跨设备共享。
话虽这么说,不要试图隐藏你的桌面导航在一个垂直的(汉堡包或其他)菜单下．可见导航是移动和桌面的黄金标准。而一些手机网站可能会被迫隐藏大部分或全部的导航栏汉堡菜单由于屏幕空间有限，存在着巨大的问题可发现性使用可见导航的好处。当导航栏被隐藏时，人们很容易忘记检查它。此外，相对于页面的其他部分，桌面的汉堡包菜单占用的空间很小，因此它被忽略的可能性甚至比移动设备更大。
垂直导航需要更多空间
与水平导航相比，使用垂直导航的主要缺点是它占用更多的空间，因此，可用于内容的空间更少。垂直导航通常会导致页面的底部content-to-chrome比水平导航。
在小的窗口尺寸(就像在更小的显示器或平板电脑上遇到的那样)中，这种权衡可能很难适应。如果你使用的是响应式设计，你可能需要决定不同断点的右导航UI应该是什么(例如，窗口大小)，垂直导航的显示大小将导致一个像样的内容与chrome的比例。然而，请记住，当你接近大窗口尺寸的范围时，垂直导航将很可能不再影响内容与chrome的比例(通常情况下，当显示真的很大时，视口区域将被左右空白填充)。
一个很长的垂直菜单可能在页面折叠的下方有一些项目。我们从很多研究中知道，用户更关注页面上方的信息而不是下方的信息。如果他们在页面上方看到的内容对他们当前的目标毫无用处，他们甚至可能根本不会滚动页面。(请记住，用户才是非常快的离开网页他们认为无用的。)另一方面，垂直导航是一种非常成熟的设计模式，大多数用户在看不到完整的菜单时都知道要滚动——假设在页面上方可见的信息让他们相信这个网站可能是有用的。
可用的垂直导航指南
- 在左侧放置垂直导航，并使用一个明显的设计。
正如前面提到的，视觉注意力倾向于屏幕的左侧。再加上我们经常看到的事实right-rail失明(用户避免看页面的右侧栏，如果它看起来可能包含广告)意味着页面右侧的导航不太可能被注意到。(与通常的左对右原则一样，这个建议适用于从左到右阅读的语言。如果你的语言从右向左阅读，则相反的建议适用。)
此外，确保导航在视觉上是突出的。不同的文本或背景颜色和边框可以使它从其他页面元素中脱颖而出。
- 不要垂直或水平复制菜单。
最近一个奇怪的趋势是使用两个冗余的ui作为全局导航:一个水平菜单栏和一个具有相同类别的汉堡包菜单。就好像设计团队不确定应该使用哪一种UI，所以两者都包含在内。这种重复(就像大多数UI元素的重复)是不必要的，潜在的混乱．
- 不要把导航栏隐藏在图标后面。
由于垂直导航比水平导航占用更多的空间，设计师经常试图最小化其相应的区域。这当然是一个可以理解的目标，但实现它的某些方法最终会产生更多的问题。一个新兴的趋势是使用图标代替文本标签进行分类。虽然每个导航项都可以使用文本标签，但用户只能在单击、轻击或悬停在导航栏上时才能看到它们。
我们多年来一直建议增加标签的图标．文本不仅减少了歧义，而且增加目标尺寸．然而，我们仍然看到一些网站认为用户能够立即理解它们的导航类别图标。我常说，在航海中，一个字抵得上一千张图片。
隐藏导航文本标签意味着用户很可能直接忽略导航(就像汉堡包菜单经常发生的那样)。的用户做与它交互必须承担额外的交互成本，如悬停或点击查看文本标签或附加认知负荷试图解读这些图标的含义。
最小化导航到一系列图标的策略(默认为显示文本标签(隐藏它是可选的)对于每天使用的应用程序来说可能是一个现实的妥协，用户可能很好学习类别代表什么。然而，在一个只有个别用户偶尔使用的网站上，这是不推荐的策略。
- 在长菜单中，把不太重要的放在底部。
由于页面折叠引起的可用性问题(上面已经讨论过)，一个非常长的垂直菜单可能会有不滚动就不可见的项目。不幸的是，由于不同的用户有不同大小的显示器，您无法知道页面折叠将击中您的菜单对任何个别用户。对于较长的菜单，要对项目进行优先排序，这样那些不需要滚动就可能看不见的功能就不那么重要了。
总结
垂直导航可能是桌面的一个合理选择，特别是对于内容范围广泛、增长迅速或只是想为用户提供特定类别的站点。垂直导航也很容易适应移动设备。为了保持垂直导航的帮助，不要把它隐藏在汉堡包菜单下，使用左对齐的、关键字前置的标签(而不仅仅是图标)来分类，并权衡它的好处是否值得从内容区拿走空间。
分享这篇文章: