情景菜单又被叫作上下文菜单，在iOS系统中，存在两种类型的情景菜单，一种叫Context Menu，而另外一种就是上面这个Editor Menu。

同样，在Android 系统下，也存在着类似的情景菜单，在Android 官方设计指导中，将其命名为Contextual Menu。

由于有很多设计师对这三类情景菜单的特性，以及使用方法比较模糊，所以今天我们就花些时间，梳理、讲解一下这三类菜单。

▍Editor Menu

在iOS系统中，当我们通过长按或者双击操作，选中文本时，就会触发Editor Menu

1.构成

一个完整的Edit Menus主要由以下元素构成：面板容器（A）、功能选项（B）、分割线（C）、和更多选项按钮（D）

其中面板容器（A），通体为黑色，突出的尖角指向触发元素的位置。面板容器（A）的样式形态与气泡相近，这也就很好的解释了，为什么很多设计师，会误将其认作popover了。

2.选项

Edit Menus的功能选项（B）个数并不固定，可以是1个，也可以是多个。Edit Menus的选项设定，可以依照场景任务的不同，而做出随机调整。

其中有些功能选项（B）可以触发后续操作（比如，共享功能选项，触发后可激活新的操作页面），我们可以通过在功能选项字段后方添加符号“…”，的方式，向用户传递这一信息。

由于Edit Menu的功能选项，不可以换行显示，只能沿着横向进行排布，那么当菜单中的选项数目过多时，就会和屏幕宽度造成“冲突”。一个通用的处理技巧是，折叠隐藏部分选项。 

当Edit Menu下有隐藏的折叠选项时，通常会在其面板的一端增加一个“三角展开符号”来表意更多，用户可以通过点击这个更多选项按钮（D），来查看隐藏的选项。

▍Context Menus 

当我们在iOS系统中，对某些图片、文本链接或者应用图标，执行长按操作时，会触发一种全新的情景菜单。 

当这种菜单被触发时，屏幕中的视觉图形，往往会有非常明显的状态变化（整个界面中，除去触发元素和情景菜单外，其他的页面内容统统变成模糊状态），这种情景菜单，我们称之为Context Menus

1.构成

一个完整的Context menus主要由以下元素构成：触发元素（A）、面板容器（B）、文本标题（C）、分割线（D）和图标（E）

其中面板容器（B）主要用于承载内容元素。

文本标题（C）和图标（E）可以共同构成功能选项条，供用户进行选择

分割线（D）的主要用来划分选项条的触发范围。

2.位置关系

在Context menus的操作选项条中，文本标题（C）和图标（E）的前后位置并不固定，两者没有严格的前后位置限定。在有些任务场景中，图标（E）可以被放置在前，文本标题（C）紧随其后。但在另外一类任务场景中，文本标题（C）会被放置在前，而图标（E）被放置在后，两种元素被分别安排在菜单选项条的两端。

同样，Context menus的触发元素和菜单面板的显示位置，也没有严格的位置限制。在某些任务场景下，情景菜单会出现在触发元素的下方，而在另外的任务场景中，又会出现在触发元素的上方。 

3.警告色

在Context menus中，会通过使用红色（警告色），来标识那些可能带来破坏性后果的操作选项，并且将这一选操作选项，安排成在菜单选项的最后一位。 

4.排序

当情景菜单中的操作选项过多时，如何对选项进行合理的排序，就成了非常棘手的问题。一个通用的排序规则是，将那些用户高频使用的操作选项排序在前。并通过归类梳理，将不同的操作选项纳入不同的分组中。

5.选项设定

针对不同的任务场景，设计者可以灵活定义情景菜单的操作选项，但选项设定的出发点，应基于用户需求。

在真实的设计场景，有很多设计者会盲目的设定菜单选项，一个比较常见的错误是，是为情景菜中，安排“打开”按钮。由于单击这些触发元素就可以得到同样的结果，所以这种设定非常多余。

▍Contextual Menu 

在Android 系统下，当我们选中某些文字后，就可以触发Contextual Menu。

1.构成

一个完整的Contextual Menu，主要由以下元素构成：面板容器（A）、可用文本选项（B）、不可用文本选项（C）和分割线（D）

其中，面板容器（A）用来承载选项（B）元素，分割线（D）则用来界定选项分组。从Contextual Menu的构成中，我们不难发现，这类情景菜单不包含图标元素

2.选项

为了给用户带来一致的使用体验，Android 官方设计指导中要求，Contextual Menu中的所有的选项，必须在面板容器中出现，即使是在某些任务场景下，不可用的操作选项，也必须以置灰态（不可用态），向用户展示。

这一设计思路与iOS系统下的情景菜单，截然相反，后者为了避免不可用选项对用户操作可能造成的干扰，不会允许用户在菜单中展示这些不可用选项。

在Android 系统中，只存在一种情景菜单。虽然Contextual和Context 两个词看起来非常相像，但是分属于两个不同手机系统的菜单属性完全不同。

在本文的最后，我们再附上一个表格，通过这个表格，你可以对比出，三类情景菜单的不同。