在任何特定的情况下,拥有正确的工具都是非常重要的,尤其是在正确高效地完成任务的时候。没有相关的工具,我们浪费时间只会感到沮丧、失落和困惑。同样糟糕的是:当周围有太多的工具时,我们会浪费时间去寻找正确的工具,否则就会以失败告终满意而是用一个不太理想的工具。

数字空间也不例外;在任何给定的应用程序中,都有大量的工具要使用,任务要完成,菜单选项要探索,命令要执行。因此,一个重要的用户界面元素纽约湾海峡可用命令的集合和伙伴关系它们到相关任务是上下文菜单。

什么是上下文菜单?

定义:A上下文菜单是一种按需显示的菜单类型,包含一组与控件、界面区域、应用程序中的一段数据或应用程序视图相关的相关操作。通常,该上下文由当前选择提供,或者在调用上下文菜单之前由用户指定。

文本中的上下文菜单
在Microsoft Word中,突出显示一段文字,按住控制键,单击鼠标显示包含与所选数据相关的命令的上下文菜单。
文字上下文菜单从较低的状态栏
右键单击Microsoft Word中的状态栏显示了一个上下文菜单,其中包含与整个文档有关的命令。上下文菜单还包含要切换特定元素视图以在状态栏中显示或隐藏的命令。

在上下文菜单中提供一小部分相关操作可以帮助用户准确地找到他们手头任务所需要的东西。这种菜单类型也减少了互动成本认知负荷由于用户不必通过长期列出的主菜单项来查找它们所需要的内容,并且每次希望使用某些命令时都不要返回工具栏。

上下文菜单存在于所有的操作系统中,在桌面和移动应用程序.但是,对于每个设备类型和系统,都有重要的可用性考虑因素。在本文中,我们将介绍若干上下文菜单的例子,并讨论设计时要记住的互动和视觉因素。

揭示语境菜单的触发器

上下文菜单通常不会被一致的UI元素,手势或交互触发。它们出现在用户点击,点击,按下或滑动的位置,以及产生的动作基于TAP目标而异。上下文菜单中向用户呈现的选项应该是相同的,无论用户如何与系统互动以揭示这些菜单。

在…上桌面,显示上下文菜单的主要交互包括:

  • 右键单击双键鼠标
  • 按下控制(Ctrl)按钮然后单击
  • 用两根手指在触控板上点击

在…上移动,显示上下文菜单的主要交互包括:

有效上下文菜单的提示

要确定应用程序中是否需要上下文菜单,问问自己,你是否能够识别出一组与特定任务、选定元素或应用屏幕相关的选项或工具.除了回答那个基本问题外,这里还有一些用于设计有效的上下文菜单的提示:

  • 只包括与手头任务相关的一组集中的操作和常用选项。上下文菜单中的项目应该直接与用户需要完成的任务或界面中选中或单击的元素相关。
上下文菜单在一个笔记
OneNote中所选注释的上下文菜单包括与编辑注释内容相关的命令。行动如粘贴插入链接在这里加入是有意义的,但是全球行动,比如保存打印没有意义,因为这些命令是与整个笔记本相关,而不是选择的笔记。
  • 确保上下文菜单中的命令也可以从应用程序的主菜单中使用。就像键盘快捷键,上下文菜单为用户提供了执行操作和选择选项的另一种方式。由于上下文菜单的默认视图通常是隐藏的,因此用户可能不知道它是否可用,也不知道如何访问它。在主导航菜单的上下文菜单中,应该始终有一种额外的方法来查找和使用操作。
图层中的Photoshop上下文菜单
在Photoshop中,通过右键单击图层,可以使用一致的上下文操作层数面板(顶部)或通过选择图层,并点击主导航中的标签(底部)。这种设计为用户访问命令提供了方便的选项。
  • 在UI中包含视觉元素,以表明上下文菜单可用。高级用户可能理解,右键单击、控制键单击、滑动或长按将显示上下文菜单,但并非所有用户都知道这一点。上下文菜单的常见视觉符号包括垂直或水平省略号和向下箭头。
Google照片上下文菜单
谷歌Photos的水平省略号按钮帮助用户访问与相册相关的命令。
Windows上下文菜单
Windows上的向下箭头按钮帮助用户访问与其配置文件和配置文件图片相关的命令上下文菜单。
  • 对于隐藏上下文菜单,(1)包含创建意识的提示,(2)允许用户以另一种方式执行相同的操作。例如,在移动设备上,通常会通过特殊手势访问(如3D触摸或滑动)访问上下文菜单。尽管移动手势用户对这些手势越来越熟悉,但这些手势并没有被发现,也没有成为标准。确保包括其他方式来执行动作,而不是依赖于手势。例如,滑动并不总是能够被上下文操作发现,所以提供辅助线索来帮助用户找到菜单。即使你的应用使用了一个初始提示来揭示手势,如滑动触发的动作,人们也不太可能自然地记得以后在应用中使用它。因此,上下文动作可能永远不会被发现。
Gmail上下文菜单
在所有列表中,滑动手势的部署并不一致,所以人们并不总是会想到使用它们,结果,这些手势变得不那么容易被发现。滑动动作是加速高级用户交互的加速器,但手势动作也应该出现在可见的UI中。例如,iOS Mail应用程序在邮件信息底部的上下文菜单栏中提供了冗余命令;这些命令也可以通过在列表视图中滑动电子邮件并点击更多的选项
  • 上下文菜单不应该由图标这可能会被误认为是主导航或应用程序设置避免使用齿轮图标或hamburger-menu表示上下文菜单的图标。用户已经认识到,这些元素触发了全局菜单和设置,而不是更狭隘的以任务为中心的元素命令
Quip上下文菜单使用设置图标。
Quip使用一个齿轮图标来触发上下文菜单;这个齿轮图标可能会被误认为是全球性的设置更广泛应用程序的菜单,而不是与文档相关的上下文菜单。
  • 限制上下文菜单中子菜单的使用。从上下文菜单中触发的子菜单如果光标远离主列表项,或者用户意外地单击上下文菜单外部,则可以很容易地消失。如果需要子菜单,请确保其选项都不会打开另一个级别的子菜单,并不将其重载与模糊的命令过度,以至于它变得混乱,令人困惑和难以使用的程度。
谷歌表具有许多重复命令的上下文菜单。
在Google Sheets中,当用户悬停在谷歌时,将出现一个子菜单特殊粘贴命令在上下文菜单中。虽然子菜单只包含了一层额外的选项,但它显示了许多类似的命令,难以解读或扫描。
苹果的3D触摸显示了Safari应用程序的上下文菜单。
苹果的3D Touch功能允许用户按住应用图标,显示一个单层的上下文菜单,其中包含与应用相关的最常见的操作。这个菜单帮助用户快速访问简单的工具和命令,而无需启动应用,然后查找这些命令。
  • 按使用频率顺序列出命令。不要让用户浏览一长串杂乱无章的命令。为了帮助用户关注最相关的选项,请将最常用的选项放在顶部。因为人们从上到下扫描列表,所以将很少使用的命令放在菜单的下方。让用户决定哪个选项最符合他们的需要,如果没有一个可用选项适合,则在关闭菜单时不应执行任何操作。
YouTube上下文菜单与命令在频率使用顺序。
在长时间按压后,YouTube的推荐视频上下文菜单出现了;如果用户点击动作溢出图标,同样的菜单也会出现。菜单选项按照重要性排列,如果用户决定不采取行动,他们可以很容易地执行取消任务,因此隐藏上下文菜单,而不需要更改其视图。
  • 在上下文菜单中显示快捷键。为了帮助用户节省时间和学习键盘快捷键,将它们包括在上下文菜单中。反复查看这些快捷方式将帮助用户记住特定任务的命令并提高效率。
文本的PowerPoint菜单
PowerPoint在上下文菜单中包含了键盘快捷键;这些快捷方式帮助用户学习节省时间的方法来导航和完成任务。
  • 限制上下文菜单项的数量。不要在上下文菜单中使用扩展的选项列表来压倒用户。保持清单的长度在可控范围内,包括少于10-12项,以避免选择过载并确保所有上下文选项都是可见的,而无需滚动。
Zillow上下文菜单,包含适当数量的列表项。
Zillow的移动应用程序在屏幕上提供了一个上下文菜单,显示有关房地产上市的统计数据。菜单中有9项都与屏幕上下文相关。菜单的长度使它容易理解可用的选项和选择一个不需要滚动。
  • 禁用与用户上下文无关的项目。与其隐藏不相关的操作,不如禁用它们,这样用户就不必试图找到菜单项消失的地方,也不必决定如何让系统回到适当的上下文中来显示特定的命令。另外,请确保将所有选项(而不是只有一个选项)包含在相关命令系列中。例如,如果有回来,也应该有一个向前.如果有一个,也应该有复制粘贴
Evernote上下文菜单
Evernote中的一个上下文菜单允许用户自定义在应用程序的侧栏中显示的元素。因为所有注释无法从侧边栏删除,此选项显示为禁用。如果它被从菜单中删除,用户可能会想,为了隐藏或显示它,为什么或在哪里找到它。

结论

尽管有许多方法可以触发和呈现上下文菜单,但这些UI元素的核心目的是为用户提供最重要的命令和相关工具,以便他们在给定的上下文中轻松完成任务。想了解更多关于设计有效的上下文菜单的知识,请参加我们的全天课程,必威手机app下载Web和桌面应用程序设计移动用户体验