帮助用户导航应该是几乎每个网站和应用程序的高优先级。毕竟,如果人们找不到它,即使是最酷的特征或最引人注目的内容也是没用的。即使您有搜索功能,通常不应该依靠搜索作为导航的唯一方法。大多数设计师都认识到这一点,并在其设计中包括某种形式的导航菜单。

定义导航菜单是内容类别或功能列表,通常作为一组链接或图标与视觉样式一起呈现,与视觉样式不同于设计的其余部分。

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

菜单非常重要,你几乎可以在你遇到的所有网站或软件中找到它们,但并不是所有的菜单都是一样的。我们经常看到用户在混乱、难以操作或难以找到的菜单中挣扎。

遵循这些指南的可用导航菜单,避免常见错误:

使它可见

  1. 不要在大型​​屏幕上使用微小的菜单(或菜单图标)菜单不应该隐藏当你有很多空间显示它们。
  2. 把菜单放在熟悉的地方。用户希望找到他们之前在其他网站或应用程序上看到的UI元素(例如,左轨道,屏幕顶部)。通过将人们希望找到它们的菜单,使这些预期致力于您的利益。
  3. 使菜单链接看起来交互。用户甚至可能无法意识到它是一个菜单,如果选项看起来不包括点击(或令人烦恼)。菜单似乎只是装饰图片或标题,如果您包含太多的图形,或者遵守原则平面设计
  4. 确保您的菜单具有足够的视觉体重。在许多情况下,放置在熟悉位置的菜单不需要围绕的空白空间或颜色饱和度,以便是明显的。但是,如果设计杂乱,缺乏视觉强调的菜单可以很容易地丢失在争夺观众注意力的图形,促销和头条线上。
  5. 使用与背景色形成对比的链接文本颜色。这是惊人的,有多少设计师忽略了对比原则;通过数字空间导航令人幻向如此令人幻想,而无需在屏幕上眯起来读取菜单。

甚至熟悉所有这些准则的设计人员仍然可以最终创建用户忽视的菜单,因为它很难客观地评估自己的工作- 特别是对于类似于某些东西是否可见的主观标准。如果你知道它的位置(因为你把它放在那里),那么你当然可以看到它!这就是为什么它非常重要测试你的菜单与用户。

传达当前位置

  1. 告诉用户当前可见屏幕位于菜单选项中的位置。“我在哪里?“用户是用户需要回答成功导航的基本问题之一。用户依赖菜单中的视觉暗示(以及其他导航元素面包屑)回答这个关键的问题。未指示当前位置可能是我们在网站菜单上看到的单一常见错误。具有讽刺意味的是,这些菜单最多需要定位用户,因为游客经常不要从主页进入

协调用户任务的菜单

  1. 使用可理解的链接标签。弄清楚用户正在寻找和使用熟悉和相关的类别标签。菜单是与制作单词和内部术语有可爱的地方。坚持清楚地描述您的内容和功能的术语。
  2. 使链接标签易于扫描。您可以减少用户需要花费阅读菜单的时间量左对齐垂直菜单前期吃重关键术语
  3. 对于大型网站,使用菜单让用户预览较低级别的内容。如果典型的用户旅程涉及到几个层面钻井,mega-menus(或传统的下拉)可以通过让它们跳过级别(或两种)来节省用户时间。
  4. 为局部导航菜单提供密切相关的内容。如果人们经常想要在单个部分内完成相关的产品或完成多个任务,请使那些附近的页面与本地导航菜单可见,而不是强迫人们'弹簧单高跷“上下你的层次结构。
  5. 利用可视化通信。帮助用户了解菜单选项可以帮助理解的图像,图形或颜色。但确保图像支持用户任务(或者至少不会使任务更加困难)。

让它变得容易操纵

  1. 使菜单链接足够大,可以轻松删除或点击。太小或太近的链接是移动用户的巨大挫折来源,并且还使大屏幕设计不必要地难以使用。
  2. 确保下拉菜单不是太小或太大。悬停激活的下落,太短地迅速成为挫折的运动,因为他们往往会消失当您尝试鼠标窥探它们以单击链接。另一方面,太长的垂直下落使得难以访问列表底部附近的链接,因为它们可以在屏幕边缘下方切断并要求滚动。最后,悬停激活的下落太宽的掉度太宽阔的下落对于新页面,即使他们没有点击任何内容,为什么页面似乎改变了用户的混乱。
  3. 考虑长页的“粘稠”菜单。已经到达一个长页底部的用户可能面临很多繁琐的滚动,然后才能回到顶部的菜单。即使在滚动后,仍然可以在视口之后仍然可见的菜单可以解决该问题,并且在较小的屏幕上受到特别欢迎。
  4. 优化容易物理访问经常使用的命令。对于下拉菜单,这意味着将最常见的项目放在靠近的链接目标,该项目推出下拉下拉(所以用户的鼠标或手指将不必旅行。最近,一些移动应用程序甚至开始复兴派菜单,通过将它们放在圆圈(或半圆形)附近保留所有菜单选项。

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

实际上......没有。

试图用很酷的效果留下深刻的印象在创建菜单时是您的优先事项之一。其他设计人员可能对新颖的菜单设计印象深刻,但用户往往对被熟悉的菜单吸引并轻松访问的巨大内容留下更深刻的印象。

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

(了解更多关于我们的菜单导航设计的全日制课程)。