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

定义导航菜单是内容类别或功能的列表,通常以一组链接或图标的形式呈现,这些链接或图标组合在一起,其视觉样式与设计的其他部分截然不同。

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

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

为了避免常见的错误,请遵循以下导航菜单指南:

使它可见

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

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

传达当前位置

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

协调菜单与用户任务

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

让它易于操作

  1. 使菜单链接足够大,便于点击或点击.太小或太靠近的链接会让手机用户感到沮丧,也会让大屏幕设计的使用变得不必要的困难。
  2. 确保下拉框不是太小或太大.悬停触发的下拉菜单太短,很快就会让人感到沮丧,因为它们会消失当你试图将鼠标移到它们上面点击链接时。另一方面,太长的垂直下拉菜单会让访问靠近列表底部的链接变得困难,因为它们可能会在屏幕边缘以下被截断,需要滚动。最后,太宽的悬停下拉框很容易被误认为是新页面,让用户困惑为什么页面在他们没有点击任何东西的情况下似乎已经改变了。
  3. 对于长页面,可以考虑“粘性”菜单。浏览了一长页的用户在返回顶部的菜单之前可能会面临许多冗长乏味的滚动。即使在滚动后,仍能在视口顶部看到的菜单可以解决这个问题,在较小的屏幕上尤其受欢迎。
  4. 优化以方便对常用命令的物理访问.对于下拉菜单,这意味着将最常见的项目放在启动下拉菜单的链接目标附近(这样用户的鼠标或手指就不用移动那么远了。最近,一些手机应用程序甚至开始恢复派菜单,将所有菜单选项排列成圆形(或半圆形),放在附近。

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

实际上…不。

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

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

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