Helping users navigate should be a high priority for almost every website and application. After all, even the coolest feature or the most compelling content is useless if people can’t find it. And even if you have a search function, you usuallyshouldn’t rely on search作为导航的唯一方法。大多数设计师都认识到这一点,并在其设计中包括某种形式的导航菜单。

定义:导航菜单are lists of content categories or features, typically presented as a set of links or icons grouped together with visual styling distinct from the rest of the design.

导航菜单包括但不限于导航栏和汉堡菜单

菜单如此重要的是您在几乎每个网站或软件中找到它们,但并非所有菜单都是平等的。我们经常观察用户与令人困惑的菜单努力,难以操纵,或者只是难以找到。

Avoid common mistakes by following these guidelines for usable navigation menus:

Make It Visible

  1. 不要在大型​​屏幕上使用微小的菜单(或菜单图标)菜单不应该隐藏when you haveplenty of spaceto display them.
  2. 把菜单放在熟悉的地方。Users expect to find UI elements where they’ve seen them before on other sites or apps (e.g., left rail, top of the screen). Make these expectations work in your favor by placing your menus where people expect to find them.
  3. 使菜单链接看起来交互式。用户甚至可能无法意识到它是一个菜单,如果选项看起来不包括点击(或令人烦恼)。菜单似乎只是装饰图片或标题,如果您包含太多的图形,或者遵守原则平面设计
  4. 确保您的菜单具有足够的视觉体重。在许多情况下,放置在熟悉位置的菜单不需要围绕的空白空间或颜色饱和度,以便是明显的。但是,如果设计杂乱,缺乏视觉强调的菜单可以很容易地丢失在争夺观众注意力的图形,促销和头条线上。
  5. 使用与背景颜色对比的链接文本颜色。It’s amazing how many designers ignore对比度指南; navigating through digital space is disorienting enough without having to squint at the screen just to read the menu.

甚至熟悉所有这些准则的设计人员仍然可以最终创建用户忽视的菜单,因为它很难objectively evaluate your own work— especially for subjective criteria like whether something is visible. If you know where it is (because you put it there), then of course you can see it! That’s why it’s so important totest your menuswith users.

传达当前位置

  1. Tell users ‘where’ the currently visible screen is located within the menu options。“我在哪里?” is one of the fundamental questions users need to answer to successfully navigate. Users rely on visual cues from menus (and other navigation elements such abreadcrumbs)回答这个关键的问题。未指示当前位置可能是我们在网站菜单上看到的单一常见错误。具有讽刺意味的是,这些菜单最多需要定位用户,因为游客经常不要从主页进入

协调用户任务的菜单

  1. Use understandable link labels。弄清楚用户正在寻找和使用熟悉和相关的类别标签。菜单s arenotthe place to get cute with made-up words and internal jargon. Stick to terminology that clearly describes your content and features.
  2. Make link labels easy to scan.You can reduce the amount of time users need to spend reading menus byleft-justifying vertical menusand by前装键术语
  3. For large websites, use menus to let users preview lower-level content。If typical user journeys involve drilling down through several levels,Mega-menus.(or traditional drop-downs) can save users time by letting them skip a level (or two).
  4. 为局部导航菜单提供密切相关的内容。如果人们经常想要在单个部分内完成相关的产品或完成多个任务,请使那些附近的页面与本地导航菜单可见,而不是强迫人们'pogo stick“上下你的层次结构。
  5. 利用可视化通信。Images, graphics, or colors that help users understand the menu options can aid comprehension. But确保图像支持用户任务(or at least don't make the tasks more difficult).

Make It Easy to Manipulate

  1. Make menu links big enough to be easily tapped or clicked。太小或太近的链接是移动用户的巨大挫折来源,并且还使大屏幕设计不必要地难以使用。
  2. 确保下拉不太小或太大。悬停激活的下落,太短地迅速成为挫折的运动,因为他们往往会消失while you’re trying to mouse over them to click a link. On the other hand, vertical drop-downs that are too long make it difficult to access links near the bottom of the list, because they may be cut off below the edge of the screen and require scrolling. Finally, hover-activated drop-downs that are too wide are easily mistaken for new pages, creating user confusion about why the page has seemingly changed even though they haven’t clicked anything.
  3. 考虑长页的“粘稠”菜单。已经到达一个长页底部的用户可能面临很多繁琐的滚动,然后才能回到顶部的菜单。即使在滚动后,仍然可以在视口之后仍然可见的菜单可以解决该问题,并且在较小的屏幕上受到特别欢迎。
  4. 优化以容易地物理访问常用命令。For drop-down menus, this means putting the most common items close to the link target that launches the drop-down (so the user's mouse or finger won't have to travel as far. Recently, some mobile apps have even begun reviving pie menus, which keep all the menu options nearby by arranging them in a circle (or semicircle).

“哇”用户具有创新和有趣的菜单交互方法

Actually…no.

Attempting to impress your users with cool effects shouldnot在创建菜单时是您的优先事项之一。其他设计人员可能对新颖的菜单设计印象深刻,但用户往往对被熟悉的菜单吸引并轻松访问的巨大内容留下更深刻的印象。

当然有时新的菜单类型可以改善用户体验。(Mega-Menus是这种现象的一个很好的例子。)或者,有时新技术是如此不同,即某些这些指南不适用于 - 例如,视觉权重的指导方针与语音识别系统无关。但是,如果他们坚持这些原则,这些情况很少,而且大多数接口都会更容易使用。

(了解更多关于我们的菜单full-day course on Navigation Design。)