Designers make navigation structures to help people move through websites, but good structure and function are not enough. Navigation should not only show where you can go but also where you are now. Each page on a website could be the first page your website visitors see, so it’s important to convey enough context so that people can proceed immediately toward their goals.

照片of a freestanding map pillar on a city sidewalk
从Web搜索导航Web搜索有点像在一个陌生城市的任意位置被删除。良好的标牌至关重要。照片通过rk photography.
商店地图显示的照片与标记标记为“您在这里”，位于鞋类和小吃之间
固定地图，通常在购物区走道上放置，通过将他们的当前位置显示他们的当前位置来占据购物区走道。照片通过英国W.。

游客并不总是使用前门

在一个搜索引擎可以在任何地方丢弃您的网站访问者的世界中，对于用户在信息空间中的信号，因此可以从那里成功导航。即使访问者通过主页到达时，它们也可能需要定向，因为它们遍历网站。

标牌让人们放心，他们正在走向他们所需要的东西。与火车站一样，Web位置指示器可以是地标的颜色编码，照明，符号，箭头，路径和名称的组合。当人们变得困惑，有关或丢失，迹象和信号经常帮助他们更加信心如何继续。

让访问者可以轻松识别网站和页面主题。在Web上，您是这里的信令通常通过改变导航栏，图标或菜单的外观来完成。该导航信号由面包屑和标题加固。购物结账和应用程序（wizards）倾向于使用步骤名称和数字。

典型的你是这里的机制

  • 标志和品牌：Presenting a logo shows ownership of content. Logos should be linked to the homepage. Other branding, such as trademarks, color palettes, and signature fonts may be used to trigger recognition of an organization’s established credibility. Usually this effort is concentrated in the top left corner of websites, which is most likely to be onscreen first, regardless of device size.
  • 导航变革：当用户选择该主题时，与导航相关的链接或图形元素（标签，按钮，标签等）变得更加视觉上突出。通常，这种突出通过突出显示着色或抵消空间中的元素，或两者（用于更好的可访问性）来实现。
  • Headings：左转弯标题帮助左右语言读者快速扫描有意义的单词。可以立即公开几个级别的标题以显示更多上下文和路径信息。
  • 窗口（页面）标题：HTML标题显示在每个窗口或选项卡的顶部，搜索引擎结果，RSS源，新闻汇总器，书签和历史记录列表。描述性，唯一标题有助于表示所有权，信息组织和页面的特定内容。
  • URL.：精选，人类可读的网络地址对共享，可信度，识别和召回非常重要。页面的Web地址可用于揭示一些信息架构，以帮助上下文化内容。
  • 面包屑：信息层次结构暴露在链接路径中。与URL一样，面包屑结构可以帮助暴露附近的内容，而是以更具易商人心的方式。
  • 语境线索：日期，标记，图标和其他符号和标志可用于在右侧上下文中，以及在站点的信息架构中放置信息。
  • 视觉设计更改：颜色编码，品牌的变化以及其他可见差异可以发出变化的位置。颜色编码（其中取决于站点的部分的主要颜色）通常在具有急剧不同类型的内容中的网站中找到。例如，杂志，新闻网站和许多组织使用颜色和品牌变更，以区分功能，部门和产品系列。
  • Steps：Checkout steps, or other sequential task flows, are typically named and numbered on progress indicators. These step indicators usually run horizontally above application pages or appear as a vertical list on the left. They show both the entire sequence of steps and which step you’re on now, to help set expectations correctly.
Screenshot: BBC Technology News, with four location indicators marked in the top-left screen area.
BBC新闻表明您使用的是（1）徽标和品牌，（2）导航条更改，（3）标题和（4）语境提示。页面标题和URL包括文章的标题和网站名称。
屏幕截图：通过麻省理工学院通过开放式课程洁具授课所需的阅读列表。位置指示器在典型的左上页面区域中显示在第一个屏幕内容中。
麻省理工学院的opencourseware网站有很大的位置指示灯：（1）品牌，（2）导航栏改变，（3）面包屑，（4）标题，页面标题和网址，但它错过了重要的，可见，时间上下文。

页面标题和URL也有助于显示信息上下文和位置：

麻省理工学院的页面标题：读数|技术沟通简介：科学技术写作的探索|比较媒体研究/写作|MIT OpenCourseWorksware.（这有点长，但非常描述性和关键词丰富。）

MIT’s URL:http://ocw.mit.edu/courses/comparative-media-studies-writing/21w-732-5-introduction-to-technical-communication-explorations-in-scientific-and-technical-writing-fall-2006/readings/

在开放课程,教材出版日期(1995-2003) hint at the page’s vintage, but only the URL provides an intentional cue about the year of the course (2006). It’s best to show visible dates or date ranges on pages, so information that survives over time can be understood in the context of its era. The copyright in the page footer (for the entire website) indicates 2001-2015, but that’s too wide a range for technical or scientific content.

“位置”显示在黑色，水平导航栏上的红色矩形中。按钮包括“找到图书馆！”和“我附近的图书馆”。图书馆的街道地址出现在下面。
纽约公共图书馆的网站导航栏从黑色到红色更改当前页面类别名称。页面上的彩色按钮具有显示页面目的的信息标签，并立即显示样品内容。Logo Branding加上这些信号形成了您在图书馆数字领域的位置的连贯迹象。
European Space Agency’s website uses two navigation bars, breadcrumbs, two headings, and prominent branding to situate photos in its time-based, space-image collection.
It's difficult to show navigation bar changes effectively in the lower levels of a deep website information structure. That's where breadcrumbs save the day. The European Space Agency has strong signals in both areas. (It’s slightly confusing, though, that a photo taken in 2014 is categorized as a 2015 photo — possibly because of its release date.)

测试有效位置信令

许多网页设计使用太微妙的位置指示器沟通。设计师注意到他们设计的一切，并拥有一家公司mental modelof the site’s structure. They know how to get around on the website, and they don't need orientation, so it’s difficult for them to see the design as others do. Website visitors, on the other hand, may be new to the site, or they may use it infrequently, so everything there is novel and potentially interesting. For this reason, a signal that may seem distractingly obvious to the designer is often not even noticed by the visitor.人们很容易忽略微妙的变化。

何时测试

现有网站可以随时测试位置信令。

对于新的Web设计，当您的网站视觉设计处于高保真阶段时，最佳地完成位置方向的测试。显示真实内容与预计当网站生活时的所有分散注意力 - 尤其是任何广告，动画和照片 - 因为这些是design elements most likely to influence what people pay attention to。

如何测试位置信号效率

  1. 在某个时候向其他级别的各种页面显示各级，一个时间，不导航到他们。
  2. 说：“假装你刚到这个网页。你在哪里网站？“
  3. If they give an answer (right or wrong), ask: “How can you tell?”
  4. 如果他们说他们不确定，问：“你希望看到什么来帮助你知道你在哪里？”
  5. 如果他们仍然不确定他们在哪里，请问：“你通常会做什么，以便找出答案？”
The Telegraph.co.uk error page (404 not found)
避免制作导航死胡同。有时，URL不再有效，倒下了林特罗特。在这种情况下，显示他们的地方尝试要将URL留在位置栏中。如果有人弄错了，用户可以看到它并可能解决它。对于其他人来说，提供有用的建议和网站导航，正如电报所做的那样，人们可以快速重新定位自己。错误页面道歉，建议重新检查页面地址，提供索引链接以及完整的站点导航，并提供检查系统状态并联系人员的方法。搜索结果没有结果的页面，不应以非常相似的方式处理。

底线

Only与用户进行测试可以肯定地告诉你，但如果分析表明很多人都在徘徊，Pogo Sticking.和回溯，您可能有一个信息架构问题。视觉定位提示可能不够强大或良好放置;导航标签，标题和标题可能不足或误导;或以上所有。

历史记录

有趣的是，对用户越来越“在高度迷失空间”的担忧导致了很多在早期超文本系统中非常具有创造性但更复杂的解决方案在万维网之前。这些天，网络使用实用和最小的路标约定，浏览器提供了很好背部按钮，用户依赖to take them back to known territory.

相关课程

Information ArchitectureandNavigation Design