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

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

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

菜单是如此重要,你几乎可以在你遇到的每个网站或软件中找到它们,但并不是所有的菜单都是一样创建的。我们经常看到用户纠结于那些令人困惑、难以操作或很难找到的菜单。

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

使它可见

  1. 不要在大屏幕上使用小菜单(或菜单图标)菜单不应该隐藏当你有很多空间显示它们。
  2. 把菜单放在熟悉的地方。用户希望在其他网站或应用程序(例如,左侧轨道,屏幕顶部)之前找到ui元素。通过将您的菜单放置在人们期望找到它们时,使这些预期致力于您的利益。
  3. 使菜单链接看起来具有交互性.如果选项看起来不是可点击的(或可点击的),用户甚至可能不会意识到它是一个菜单。菜单可能看起来只是装饰图片或标题,如果你合并了太多的图形,或坚持太严格的原则平面设计
  4. 确保你的菜单有足够的视觉权重。在许多情况下,放置在熟悉位置的菜单不需要太多的周围空白或颜色饱和度来突出。但如果设计混乱,缺乏视觉重点的菜单很容易被淹没在争夺浏览者注意力的图形、促销和标题的海洋中。
  5. 使用与背景颜色对比的链接文本颜色.这真是太棒了多少设计师忽略了对比原则;通过数字空间导航令人幻向,而无需在屏幕上眯着屏幕即可阅读菜单。

即使是熟悉所有这些指导方针的设计师,最终也可能创建出被用户忽略的菜单,因为这太难了客观地评估自己的工作- 特别是对于像是否可见的主观标准。如果你知道它在哪里(因为你把它放在那里),那么你当然可以看到它!这就是为什么它非常重要测试你的菜单与用户。

传达当前位置

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

协调菜单与用户任务

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

让它变得容易操纵

  1. 使菜单链接足够大,以便轻松删除或点击.太小或太靠近的链接会让手机用户感到沮丧,也会让大屏幕设计的使用变得不必要的困难。
  2. 确保下拉框不是太小或太大.悬停触发的下拉菜单太短,很快就会让人感到沮丧,因为它们会消失当您尝试鼠标窥探时单击链接。另一方面,太长的垂直下落使其难以访问列表底部附近的链接,因为它们可以在屏幕边缘下方切断并要求滚动。最后,对于新页面来说,悬停激活的下拉片太宽阔的下落,即使他们没有点击任何内容,也会创造有关这一页面似乎改变的用户的混淆。
  3. 对于长页面,可以考虑“粘性”菜单。浏览了一长页的用户在返回顶部的菜单之前可能会面临许多冗长乏味的滚动。即使在滚动后,仍能在视口顶部看到的菜单可以解决这个问题,在较小的屏幕上尤其受欢迎。
  4. 优化以方便对常用命令的物理访问.对于下拉菜单,这意味着将最常见的项目放在推出下拉的链接目标上(因此用户的鼠标或手指不必旅行。最近,一些移动应用程序甚至开始复兴派菜单,通过将它们放在圆圈(或半圆)中安排所有菜单选项。

用创新和有趣的菜单交互方法让用户惊叹不已

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

试图用很酷的效果留下深刻的印象不是在创建菜单时,要优先考虑。其他设计师可能会对新颖的菜单设计印象深刻,但用户往往更喜欢那些通过熟悉的菜单呈现出诱人且易于访问的优秀内容。

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

(在我们的导航设计的全日制课程.)