UE设计中上下文菜单：提供任务的相关工具

上下文菜单按需显示，并且包含与控件，内容，应用程序中的视图或UI区域相关的一小组相关操作。如果设计得当，他们将提供相关的工具来完成任务，而不会给界面增加混乱。

在任何给定情况下拥有正确的工具就可以带来很大的不同，尤其是在正确有效地完成工作方面。没有相关工具，我们会浪费时间，感到沮丧，迷茫和困惑。同样糟糕：当周围有太多的工具，我们浪费时间寻找合适的一个或结束了令人满意的与次优工具，来代替。

数字空间没有什么不同。在任何给定的应用程序中，都有大量的工具可供使用，要完成的任务，要探索的菜单选项以及要执行的命令。这样，上下文菜单是使可用命令的范围变窄并将它们与相关任务相关联的重要用户界面元素。

什么是上下文菜单？

定义：上下文菜单是一种按需显示的菜单类型，包含与控件，界面区域，应用程序中的数据或应用程序视图相关的一小组相关动作。通常，此上下文由当前选择给出，或者由用户在调用上下文菜单之前指定。

Word中文本的上下文菜单

在Microsoft Word中，突出显示一段文本，按住 Ctrl 键，然后单击鼠标，将显示一个上下文菜单，其中仅包含与所选数据相关的命令。

Word从下部状态栏中的上下文菜单

右键单击Microsoft Word中的状态栏，将显示一个上下文菜单，其中包含与整个文档有关的命令。上下文菜单还包含用于切换特定元素视图以显示或隐藏在状态栏中的命令。

在上下文菜单中提供一小部分相关动作，可以帮助用户准确地找到他们所需要的任务。这种菜单类型还减少了交互成本和认知负担，因为用户不必通过冗长的主菜单项解析来查找所需内容，也不必每次希望使用某些命令时都不断返回到工具栏。 。 

上下文菜单存在于台式机和移动应用程序中的所有操作系统中。但是，每种设备类型和系统都需要牢记重要的可用性考虑因素。在本文中，我们将介绍一些上下文菜单示例，并讨论在设计菜单时要记住的交互作用和视觉因素。

显示上下文菜单的触发器

上下文菜单通常不是由一致的UI元素，手势或交互触发的。它们显示在用户单击，轻击，按下或滑动的位置旁边，并且根据轻击目标的不同，产生的操作也有所不同。无论用户如何与系统交互以显示这些菜单，在上下文菜单中提供给用户的选项都应该相同。

在台式机上，显示上下文菜单的主要交互包括：

• 右键单击两键鼠标 

• 按下控制 （Ctrl）按钮，然后单击 

• 两指点击触控板

在移动设备上，显示上下文菜单的主要交互包括： 

• 点击图标或视觉元素

• 水平滑动

• 长按（点住） 

• 3D Touch（iOS） 

有效上下文菜单的提示

要确定您的应用程序中是否需要上下文菜单，请问自己是否可以识别与特定任务，所选元素或应用程序屏幕相关的一小部分选项或工具。除了回答这个基本问题之外，这里还有一些其他一些有关设计有效上下文菜单的提示：

• 仅包括与当前任务相关的一组重点操作和通用选项。上下文菜单中的项目应直接与用户需要完成的任务或所选择或单击的界面中的元素相关。

一键式上下文菜单

OneNote中所选便笺的上下文菜单包括与编辑便笺内容有关的命令。“粘贴” 和“插入链接”之类的操作应包含在此处，但“保存” 或“打印”之类的全局操作却不宜包含在其中，因为这些命令与整个笔记本而不是所选笔记相关。

• 确保上下文菜单中的命令在应用程序的主菜单中也可用。与键盘快捷键一样，上下文菜单为用户提供了另一种执行动作和选择选项的方式。因为上下文菜单的默认视图通常是隐藏的，所以用户可能不知道该菜单是否可用或如何访问。在主导航菜单的上下文菜单中，应该始终存在其他方式来查找和使用操作。 

图层中的Photoshop上下文菜单

在Photoshop中，通过右键单击“图层” 面板（顶部）中的图层  或选择图层，然后单击 主导航栏中的“ 图层” 标签（底部），可以使用一致的上下文操作来操纵图层  。这种设计为用户提供了访问命令的便捷选项。

• 在UI中包括视觉元素，以指示上下文菜单可用。高级用户可能会理解，右键单击，单击控制键，滑动或长按将显示上下文菜单，但并非所有用户都知道这一点。上下文菜单的常见视觉指示符包括垂直或水平省略号和指向下方的箭头。  

Google相簿内容选单

Google相册中的水平省略号按钮可帮助用户访问与其相册相关的相关命令。

Windows上下文菜单

Windows上的向下箭头按钮帮助用户访问与其个人资料和个人资料图片相关的命令的上下文菜单。

• 对于隐藏的上下文菜单，（1）包括创建意识的提示，（2）允许用户以其他方式执行相同的操作。  例如，在移动设备上，通常会通过特殊手势（例如3D触摸或滑动）访问上下文菜单。虽然移动手势随着用户越来越熟悉，这些手势无法发现并且仍未成为标准。确保包括不依赖手势的其他方式来执行操作。例如，对于上下文操作，并非总是可以发现滑动，因此请提供辅助提示来帮助用户找到您的菜单。即使您的应用使用初始提示来公开手势（例如滑动触发的动作），人们也不太可能自然记得以后在应用中使用它。因此，上下文动作可能永远不会被发现。 

Gmail上下文菜单

并非在所有列表中都一致地部署了滑动手势，因此人们并不总是认为使用它们，因此，这些手势变得难以发现。滑动动作是旨在加速高级用户交互的加速器，但是通过手势可用的动作也应该出现在可见的UI中。例如，iOS Mail应用程序在底部的上下文菜单栏中提供了电子邮件的冗余命令。通过在列表视图中滑动电子邮件并单击“更多” 选项，也可以使用这些命令。

• 上下文菜单不应由可能会误认为主要导航或应用设置的图标触发。避免使用齿轮图标或汉堡菜单图标来表示上下文菜单。用户已经意识到这些是触发全局菜单和设置的元素，而不是狭窄的，以任务为中心的命令。 

使用设置图标退出上下文菜单。

Quip使用齿轮图标触发上下文菜单。此齿轮图标可能被误认为是更广泛应用的全局设置菜单，而不是与文档相关的上下文菜单。

• 限制上下文菜单中子菜单的使用。如果光标从主列表项移开，或者用户不小心在上下文菜单之外单击，则从上下文菜单触发的子菜单很容易消失。如果需要子菜单，请确保没有一个选项打开另一个子菜单，并且不要用晦涩难懂的命令将其超载，以至于变得混乱，混乱且难以使用。 

具有许多重复命令的Google表格上下文菜单。 

在Google表格中，当用户将鼠标悬停在上下文菜单中的“选择性粘贴” 命令上时，会出现一个子菜单。尽管该子菜单仅包含一层附加的选项，但它显示了许多措辞相似的命令，这些命令难以解读或扫描。 

苹果公司的3D触摸显示了Safari应用程序中的上下文菜单。

Apple的3D Touch功能使用户可以按住应用程序的图标，以显示一个单级上下文菜单，其中包含与该应用程序相关的最常见操作。此菜单可帮助用户快速访问简单的工具和命令，而无需启动应用程序，然后随后查找这些命令。

• 按使用频率顺序列出命令。不要让用户浏览一长串杂乱无章的命令。为了帮助用户专注于最相关的选项，请将最常使用的选项放在顶部。由于人们从上到下扫描列表，因此很少在菜单中将很少使用的命令放在下方。让用户决定哪个选项最能满足他们的需求，如果所有可用选项都不适合，则在关闭菜单时不应进行任何操作。 

YouTube上下文菜单，其中包含按使用频率排列的命令。 

长按后，就会出现YouTube推荐视频的上下文菜单；如果用户单击动作溢出图标，则也会出现相同的菜单。菜单选项按重要性顺序显示，如果用户决定不执行任何操作，则他们可以轻松地取消任务，从而隐藏上下文菜单而无需更改其视图。

• 在上下文菜单中显示键盘快捷键。为了帮助用户节省时间并学习键盘快捷键，请将其包含在上下文菜单中。反复看到这些快捷方式将帮助用户记忆特定于任务的命令并变得高效。

PowerPoint文字菜单

PowerPoint在上下文菜单中包括键盘快捷键；这些快捷方式帮助用户学习节省时间的导航和完成任务的替代方法。

• 限制上下文菜单中的项目数。不要用上下文菜单中的大量选项让用户不知所措。通过包含少于10到12个项目，使列表长度易于管理，以避免选择过多，并确保所有上下文选项都可见，而无需滚动。 

Zillow上下文菜单，带有适当数量的列表项。 

Zillow的移动应用程序在屏幕上提供了一个上下文菜单，该菜单显示了有关房地产清单的统计信息。菜单中有9个项目都与屏幕的上下文有关。菜单的长度使您无需滚动即可轻松了解可用选项并选择一个选项。

• 禁用与用户上下文无关的项目。与其隐藏不相关的动作，不如禁用它们，这样用户就不必尝试查找菜单项消失的位置，也不必确定如何在适当的上下文中恢复系统以显示特定的命令。另外，请确保在一系列相关命令中包括所有选项（而不只是一个选项）。例如，如果有Back，那么也应该有Forward。如果有剪切，还应该有复制和粘贴。

Evernote上下文菜单

Evernote中的上下文菜单允许用户自定义显示在应用程序侧栏中的元素。由于无法从边栏中删除“所有笔记” ，因此该选项显示为禁用。如果将其从菜单中删除，用户可能想知道为什么要在何处找到它以隐藏或显示它。

结论

尽管有很多触发和呈现上下文菜单的方法，但它们的核心是这些UI元素旨在为用户提供最重要的命令和相关工具，以便他们在给定的上下文中轻松完成任务。有关设计有效上下文菜单的更多信息，请参加我们的全日制课程Web和桌面以及移动用户体验的应用程序设计。