最初在20世纪70年代在PARC开发，菜单是图形用户界面（GUI）中的选项列表。它们可以是可见的（有时称为“菜单栏”）或可扩展的。在可扩展的菜单中，当单击或点击菜单时，选项列表将被显示;菜单可以是一个标签，一个图标，或者两者都可以。在本文中，我们关注可扩展的菜单。

Internet Explorer菜单栏（左侧）和文件菜单（右侧）。“文件” 菜单是隐藏在“文件”下的可扩展菜单。菜单选项“发送” 可进一步展开以显示子菜单。

有关可扩展菜单的两大设计问题是：

• 如何让菜单可以被发现，换句话说，如何让手柄看起来是可点击的（所以人们点击它）并且具有良好的信息气味
• 如何最小化菜单内的选择时间，即如何缩短查找时间并点击正确的选项

选择时间本身有两个组成部分：

1. 视觉搜索时间：在菜单内选择一组选项中查找感兴趣的项目的时间
2. 移动时间：将光标（或手指）移动到通过视觉搜索定位的感兴趣项目所需的时间

熟悉菜单的类型可以调节这两个组件。如果用户必须先学习如何操作菜单，那么这个学习时间可以轻松地节省选择时间，除非他们多次使用相同的菜单。此外，新交互方法的初始使用更容易出错，浪费时间恢复表单错误远远大于优化选择时间节省的时间。

在过去的35年中，HCI研究人员已经探索了各种类型的菜单和菜单组织，试图最小化视觉搜索时间或移动时间。本文调查了几种菜单类型，并讨论了它们在平均移动时间方面的表现如何。但在讨论不同类型的菜单之前，让我们看看我们如何量化移动时间。

菲茨的法则和运动时间

菲茨法则计算人们到达任何目标所需的时间，无论是使用鼠标，手指还是双手抓住物体。它所说的很简单，并且具有直观的意义：人们达到目标所需的时间取决于：

• 目标的大小（目标越小，时间越长）
• 到目标的距离（目标越远，时间越长）

Fitts定律指出达到目标A的时间比到达任何其他目标的时间要短。尽管目标A和B具有相同的大小，但从光标到A（d1）的距离比到B（d2）的距离短，因此移动到A的速度会更快。目标C与目标A的光标位置相同（d1），但较小，因此将光标移动到目标A需要较长的时间。

虽然目标尺寸通常会将按钮和其他活动元素通知我们的设计，但到目标的距离是通常针对菜单设计进行优化的组件。

线性（或下拉菜单）

要了解到达菜单中的目标所需的时间，我们首先要关注传统下拉菜单或下拉菜单中的基于鼠标的交互。（这种类型的菜单也被称为线性菜单，因为所有菜单选项都显示在列表中。）我们将假定菜单刚刚通过单击菜单按钮触发。因此，菜单选项现在可以在屏幕上看到，并且光标放置在菜单按钮上。

在线性菜单中，到达菜单中第一项的时间最短，到达最后一个元素的时间最长，因为从光标（即菜单按钮）到第一个元素的距离最短，距离到最后一个元素是最长的。

请注意，到达菜单中第一个元素所用的时间比到达菜单中任何其他元素所用的时间要短 - 这是因为到第一个元素的距离比到第二个元素的距离短比到第三个元素的距离短等等。事实上，菜单中的最后一个元素需要最长的时间才能到达，因为它离按钮最远。这是我们建议不要让菜单过长的原因之一 - 人们从这样的菜单中选择一个项目需要很长时间（此外，有时，如果菜单长于窗口大小，会更具挑战性，用户必须向下滚动页面）。

我们可以通过线性菜单改善平均移动时间吗？一个简单的改进是实际更改列表的位置，以便中间元素与手柄而不是第一个元素对齐。通过这样做，减少了到菜单元素的平均距离。

通过将菜单按钮与中间元素对齐，可以减少平均移动时间来点击菜单内的选项

不幸的是，使用像这样的菜单并不总是可能的，因为按钮上方可能没有足够的空间来显示一半的选项。

矩形（或方形）菜单

减少菜单选项距离的另一种方法是将它们放在矩形中。因此，矩形（有时称为方形）菜单，更好地称为megamenu。

在megamenu内的一个项目的平均距离小于将所有项放在一个长列表中(也就是在一个线性菜单中)。

很容易显示（使用一些几何图形）矩形菜单与线性菜单的平均距离比任何随机元素要好。矩形菜单在优化移动时间方面效果很好，现在它们非常流行。

饼状（或径向）菜单

如果菜单中所有元素的时间相同，该怎么办？如果所有元素与手柄的距离相等，也就是说，它们可能位于菜单按钮中心的圆上。这就是饼状（或放射状）菜单的诞生。不管你信不信，饼状菜单都很古老：它们可以追溯到20世纪80年代末。

饼状菜单从来没有真正受欢迎。虽然HCI研究人员喜欢它们，但事实证明，用户并不十分熟悉它们。2010年的一项研究表明，实际上它们比标准的线性菜单和矩形菜单更难以学习，所以运动时间增益会因为不熟悉这个界面而丢失。但是，随着用户对饼状菜单的熟悉程度越来越高，这些菜单确实开始显示出研究人员预测的优势。

标记菜单

标记菜单是饼状菜单的一种版本，它利用菜单项由其方向唯一定义的事实。换句话说，当用户开始向目标移动时，只需通过查看移动的方向，就可以知道在目标被击中之前目标将会是什么。

标记菜单非常适合上下文使用，效率更高，因为用户不需要将整个路线传送到目标，但他们可以开始向目标移动。在专家模式下，菜单还为用户节省了额外的步骤（扩大菜单并检查内部物品）。当然，专家模式对于不太熟练的用户来说太容易出错，因为他们没有得到他们选择的视觉确认。

结论

可扩展菜单中的移动时间受Fitts法则管辖。当菜单选项的数量很少时，线性菜单是最好的; 随着数量的增加，矩形菜单（或megamenus）更合适。标记菜单非常适合触摸屏，并且像馅饼菜单一样，可以优化各个选项的到达时间，但由于其在触摸屏设备上的流行性，现在才开始变得更加熟。

点个赞再走～