如果您使用纸质地图探索了一个陌生的城市，您可能熟悉这两个导航策略，我一直使用：要达到特定的吸引力（如博物馆），我试图弄清楚整体部分of the city it’s in and find the easiest path there. On the other hand, if I don’t have a specific place in mind, I’ll often take a look at what’s nearby, and go exploring a bit; perhaps find an intriguing coffee shop or park nearby.

一张显示伦敦大部分地区的地图
一张展示了伦敦大范围地理特征和社区的全球地图，对于寻找附近的咖啡店毫无用处，但对于决定从大英博物馆到白金汉宫的路线却很有帮助。
放大的伦敦布里克斯顿地区地图，显示当地的地理特征和商店
从伦敦附近的布里克斯顿看，可以看到更多不同的特征。在这里，附近很容易找到吃饭的地方，但却找不到去白金汉宫的路。

寻求特定地标和探索社区需要不同的城市细节。当我试图到达城市的完全不同的部分时，我正在寻找城市的整体地理和主要领域之间的路径。如果我正在探索一个邻居，我对附近的选项感兴趣。

对于网站的用户而言，存在相同的方向和WATFINDING的行为，以及在城市导航榜样中，帮助用户的各种提示取决于他们寻求信息需求。大多数网站都突出了全球导航（类似于城市社区的缩小地图）。具有大量页面的某些站点还具有本地导航，以帮助用户定位和探索当前类别中的内容。

定义:当地的导航是一种导航类型，即对用户的当前位置上下文 - 显示当前类别中的兄弟网页，如果适用，如果适用，儿童或侄女和当前页面的侄子。

大多数网站的IA结构是分层，熟悉的方法可视化层次结构是一棵树。无论用户当前都在结构中，网站的全局导航都显示了树的顶层。全球导航是稳定的 - 用户可以期望在整个网站中保持相同，并且他们可以使用它来跳转主要类别。另一方面，本地导航显示有关用户当前正在查看的节点的信息，还包括树的同一分支上的其他节点。因此，本地导航将因类别而异，并将显示与当前页面相关的内容提供（或者至少在网站信息架构中的）。但是，本地导航不会因用户或会话而异。

3层层次结构的树形图，除当前页面外，还调用了全局导航和本地导航。
一个网站IA的树形图:全局导航是层次结构的顶层(产品、产业、服务和支持)，无论用户在网站上，它都保持不变。本地导航是对用户当前位置的上下文 - 它显示了当前页面和兄弟页面;在这种情况下人力资源和人是当前页面，和供应链管理，客户关系管理和客户体验，和网络管理是包含在本地导航中的所有同级页面。

本地导航同时有以下几个用途:

  • 它表示当前页面的类别，因此，工作取向元素，类似于地图上的“您在这里”指示符。
  • 它显示了与同一信息 - 体系结构（IA）类别中的其他页面（或信息）的链接，因此，用作路径文件元素，告诉用户他们可以从当前位置到达的位置。
  • 它有助于访问IA（例如，第二层或第三层子类别）的深部部分，否则需要更高交互成本访问。
具有全局和本地导航的网站，如同水平栏显示在另一个下方
SAP使用全局和本地导航。两个导航栏的放置（全球导航在本地导航上方）表明它们的相对范围。

本地导航:适合于探索性浏览行为

本地导航并不适用于所有网站或应用程序，因为它占用了相当大的空间。具有相对较小的信息空间(即总体页面很少)的产品不太可能从可见的本地导航中获益。在光谱的另一端，有深度信息架构通常，本地导航ui会占用屏幕上太多的空间，而较轻的导航拐杖(如上下文链接到相关内容）.

当用户进行探索性浏览而不是已知条目搜索时，可见的本地导航通常是有益的。在这种情况下，用户可能会访问一个类别中的多个页面——要么是因为他们不知道完全他们需要什么类别，即使他们有一种邻近感，或者因为他们需要组合或比较来自多个类别的信息。例如，在大学网站上寻找学位的准学生可能会花一些时间详细研究一个项目，然后跳转到另一个项目。或者，有人购买汽车或电器可能弹簧单高跷经常出现在规范、图库和概述页面之间。

汽车网站，为每个汽车模型提供本地导航，允许快速访问该汽车模型的不同页面
日产网站为每个车型提供了本地导航，使用户可以在详细的功能、画廊，配件,规格页面。对于像汽车这样的重大购买，用户可能会在页面之间来回切换。

为了弄清楚你是否需要一个本地导航UI在你的网站的一个部分或所有部分，寻找用户数据(定性或基于分析)，表明你的用户:

  • 倾向于在单个会话中浏览一个类别的多个子页面
  • 倾向于比较或合并显示在多个页面上的信息(例如，产品信息)
  • 倾向于从内部页面(而不是主页)开始他们的网站访问，并需要在整个会议过程中保持定向

当你在设计本地导航UI时，询问它是否实现了以下目标:

  • 我它是否容易发现和识别?用户会注意到它吗?他们能够从全局导航中区分出来吗?
  • 它是否支持内容之间的典型路径?当用户执行一个会话时，本地导航是否有助于访问单个会话中需要的内容前任务？
  • 它是否产生最小的交互成本?用户访问本地导航是否容易?

在本文的其余部分，我们将重点讨论桌面的本地导航;在另一篇文章中，我们将讨论移动设备上的本地子导航．

放置本地导航

在桌面，本地导航通常放置在以下两个位置之一:要么水平放置，在页面顶部的全局导航的正下方，要么在页面的左侧，创建(与全局导航一起)一个倒l形状。就像选择在桌面上放置全局导航在美国，选择本地导航的位置取决于总体设计的细节和IA第二级的宽度。如果你的站点有一个狭窄的顶级层，其中有许多二级类别(就像在使用不平衡IA结构的大型电子商务网站中经常看到的那样，许多产品类别都集中在一个目录下产品项在顶层)，然后水平放置本地导航没有什么意义。

水平局部导航的一个好处是它的紧凑性——一般来说，它不会像垂直设计那样侵入主要内容区域。也就是说，水平和垂直的局部导航都难以适应深层的IA结构。垂直方向需要在每个后续层上进行越来越深的缩进，慢慢地侵占非常有价值的主要内容空间，而水平方向要么不显示多个局部层，要么将它们堆叠起来。

一个左侧垂直本地导航的网站，信息架构非常深，迫使大量缩进
波特兰大学有一个非常深入的信息架构，导致页面左侧的本地导航出现了严重的缩进。第六层(环境工程小）陷入与第五层几乎相同的缩进水平（土木工程)，因为空间不足。(注意，该网站的顶部两层导航在本地导航中是不可见的:学术>学院和学校> Donald P. Shiley工程学院>学位和课程>土木工程>环境工程辅修是可见页面的位置。另外，请注意，在本例中，导航路径不同于可见的面包屑，原因是 polyhierarchy ． ）

虽然不常见，但水平局部导航可以设计为包含第三层导航，而不会不合理地侵犯内容区域。但实际上它只能支持2-3层，否则就会过多地侵犯主要内容空间。对于内容空间较深的页面，考虑使用面包屑而不是多层或截断的本地导航。虽然面包屑没有提供兄弟页面的可见性，但它们的布局更加紧凑(通常是一行)。它的深度权衡决定根据IA的整体深度和在同一会话中倾向于浏览的特定内容区域，每个站点必须做出不同的选择。目标总是考虑用户应该能够在哪些页面之间移动，并让用户尽可能轻松地在这些页面之间移动。

两个站点图像的线框，显示在站点层次结构的第三层中显示本地导航之间的迁移，并在向前移动到第四层时隐藏该子脉。
保诚在页面顶部的导航栏中有三个层次的IA。当导航到四层深度的页面时(右)，该网站去掉了堆叠的本地导航，转而使用面包屑导航。

本地导航应该是可见的，但不如全球导航突出

始终可见的本地导航的一个很大的好处是访问它不携带任何信息交互成本（例如，它不需要悬停或点击全局导航），因此，相关页面更多可发现的．你希望本地导航是显而易见的;否则，用户很有可能不会去寻找它(事实上，他们可能根本没有任何期望它的存在)。

然而，有一些细微差别如何值得注意的是本地导航应该是。特别是，本地导航不应该比全局导航更突出，因为如果发生这种情况，用户可能会将本地导航误认为全局导航。视觉层次结构应该反映信息层次。

例如，Generac以前的网站设计有一个非常突出的本地导航-高对比度文本白色的背景在叠加在一个大英雄形象上在这一页的顶部。另一方面，全局导航就不那么显眼了——白色背景上的低对比度灰色文本。在我们的测试中，用户完全忽略了全局导航，认为站点的选项仅限于本地导航中可见的类别。

局部导航比全局导航在视觉上更突出的一种网站设计
Generac网站以前的设计有比全局导航更突出的本地导航。这种设计导致用户根本不注意全局导航，而只依赖于本地导航。
一种大学网站，其本地导航是可见的，但在视觉层次结构上明显隶属于全局导航
社会研究新学院(New School for Social Research)在左侧显而易见的局部导航并没有压倒全球导航。这个成功的导航ui的视觉层次结构是通过与全局导航(显示在浅灰色背景上)的背景相比使用稍微高一些的对比度创建的。然而，大英雄形象推动页面的核心内容远，不建议。
罗德岛设计学院的网站 黏糊糊的 每个学位项目的本地导航，使用户可以轻松地在概述、教师、课程列表和其他页面之间跳转。这种设计明智地使用了持久的本地导航，因为潜在的学生通常会在课程期间深入了解特定学位课程的细节。

总结

本地导航是一个上下文改变的导航UI，用于显示用户在站点IA中的当前位置，以及同级和子页面。确保它的设计充分利用了典型的浏览路径，是可见的，但不会比主导航吸引更多的注意力，并且需要最小的交互成本。