可扩展菜单:下拉菜单、方形菜单还是馅饼菜单?

最初是在帕洛阿尔托研究中心于20世纪70年代开发的，菜单是图形用户界面(GUI)中的选项列表。它们可以是可见(有时称为“菜单栏”)或可扩展的。在可扩展菜单中，当菜单处理点击或点击;菜单句柄可以是一个标签，一个图标，或者两者都是。在本文中，我们主要关注可扩展菜单。

关于可扩展菜单的两大设计问题是:

• 如何让菜单被发现，或者换句话说，如何使手柄看起来是可点击的(所以人们点击它)，并有好的信息的气味
• 如何减少选择时间在一个菜单里面，就是如何把时间减少到找到和点击正确的选择

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

1. 视觉搜索时间:在菜单内的一组选项中找到感兴趣的项的时间
2. 运动的时间:移动光标(或手指)到通过视觉搜索找到感兴趣的项目所需的时间

熟悉用菜单的类型调制这两个组件。如果用户必须首先学习如何操作菜单，那么这种学习时间很容易使选择时间的节省变得微不足道，除非他们将多次使用相同的菜单。而且，初次使用一种新的交互方法更容易出错，而且恢复表单错误所浪费的时间远远大于优化选择时间所节省的时间。

在过去的35年里，人机交互研究人员探索了各种类型的菜单和菜单组织，试图最小化视觉搜索时间或移动时间。本文调查了几种菜单类型，并讨论了它们与平均移动时间的关系。但在讨论不同类型的菜单之前，让我们先看看如何量化移动时间。

Fitts定律与运动时间

费茨定律计算人们到达任何目标所花费的时间，无论是使用鼠标，手指，甚至是他们的手去抓取一个物体。它说的很简单，也很直观:人们达到目标所需的时间取决于:

• 目标的大小(目标越小，时间越长)
• 到目标的距离(目标越远，时间越长)

而目标的大小通常指示我们的按钮和其他活动元素的设计，目标距离是菜单设计优化的组件。

线性(或下拉菜单)

为了理解在菜单中达到目标所需要的时间，让我们首先关注传统下拉菜单中基于鼠标的交互。(这种类型的菜单也称为线性菜单，因为所有的菜单选项都以列表形式显示。)我们假设菜单是通过单击菜单句柄触发的。结果，菜单选项现在在屏幕上可见，光标被放置在菜单柄上。

注意,所花费的时间达到第一个元素在菜单小于所花费的时间达到任何菜单中的其他元素——仅仅因为第一个元素的距离比到第二个元素的距离短,比第三个元素之间的距离短等。事实上，菜单中的最后一个元素需要花费最长的时间才能到达，因为它距离手柄最远。这是其中的一个原因,我们建议不要过于长菜单——人们需要很长时间去从这样一个菜单中选择一个条目(另外,有时,它是更具挑战性,如果菜单长于窗口大小,用户必须向下滚动页面)。

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

(不幸的是，不可能总是使用这样的菜单，因为可能没有足够的空间上面的句柄显示一半的选项。)

矩形(或方形)菜单

另一种减少菜单选项距离的方法是将它们放置在一个矩形中。因此,矩形(有时称为广场)菜单，更广为人知的名字是megamenu．

很容易显示(使用一点几何体)矩形菜单与任意随机元素的平均距离比线性菜单更好。矩形菜单在优化移动时间方面非常有效，现在它们在网络上非常流行。

派(或径向)菜单

如果菜单中所有元素的时间都是相同的呢?这是可能的，如果所有的元素都在相同的距离，从句柄-也就是说，他们被放置在一个圆的中心菜单句柄。这就是为什么派(或放射状)菜单诞生了。信不信由你，派的菜单相当古老:它们可以追溯到20世纪80年代末。

馅饼菜单从未真正流行过。虽然人机交互研究人员很喜欢它们，但事实证明用户对它们并不十分熟悉。2010年的一项研究表明，在实践中，它们比更标准的线性和矩形菜单更难学习，所以由于不熟悉这个界面，移动时间的增益会丢失。然而，随着用户对馅饼菜单越来越熟悉，这些菜单确实开始显示出研究人员所预测的优势。

(我们曾在愚人节那天写过一篇文章披萨菜单甚至比派菜单更好．然而，这只是个玩笑，披萨菜单并不是一个真正的设计概念。)

标记菜单

标记菜单是饼图菜单的一个版本，它利用了菜单项是由其方向唯一定义的这一事实。换句话说，当用户开始向目标移动时，你可以通过观察移动方向，在目标命中之前就知道目标是什么。

打标菜单有两种“模式”:在正常模式，当单击句柄时，菜单将展开，然后您可以通过单击项目(就像在常规饼图菜单中那样)或将光标(或手指)移动到所需的项目来选择一个选项。在专家模式，然而，菜单不会显示:用户只是开始将光标移向目标的方向(这个动作称为“做标记”，因此得名“标记菜单”)，系统将该手势解释为对相应目标的选择。专家模式对于那些大量使用的应用程序是有意义的，在这些应用程序中，用户了解菜单选项的排列，而不需要看到它们的显示(例如，Kurtenbach和Buxton在1994年表明，在每个用户需要超过9小时的音频编辑任务的情况下，用户更喜欢专家模式。

标记菜单非常适合上下文使用，因为用户不需要走整个路线到目标，但他们可以开始向目标移动。在专家模式下，菜单还为用户节省了一个额外的步骤(扩展菜单和检查里面的项目)。当然，专家模式对于技术不熟练的用户来说太容易出错，因为他们无法得到他们选择的可视化确认。

其他类型的菜单

HCI研究人员在这些菜单上尝试了许多变体，试图最小化菜单内的移动时间(例如，在一个线性菜单中，远离手柄的元素将获得更大的目标区域，以补偿距离的增加)。其中大多数从未在现实世界的界面中找到它们的方式，因为尽管它们的理论属性很好，但它们并不熟悉，很难适应，所以它们从未在网络上流行起来。

联系怎么样?

尽管Fitts定律确实适用于触屏界面，但在菜单设计中，光标的初始位置却不是那么容易改变的。使用鼠标，可以假设打开菜单后，光标仍然在手柄上。但如果使用触摸屏，很有可能在打开菜单后，手指的位置不在手柄上，甚至不在手柄上方。(对于移动手持设备来说尤其如此——手机和平板电脑;为非常大的触摸屏(例如，桌面)，通常需要移动整个身体才能到达一个区域，用户和手仍然可能离手柄更近。)把手指放在菜单柄上方通常是没有效果的，因为它会遮住部分屏幕。此外，许多时候，手柄实际上会消失或移动到屏幕的不同区域。

因此，我们在本文中讨论的许多注意事项并不一定适用。对于触控式手持设备来说，有趣的问题是，相对于手和手指最可能的位置，菜单显示在哪里，以及如何优化相对于该位置的菜单到达时间。

话虽如此，但有一个例外:在普通模式下标记菜单(就像上面Pinterest应用程序中显示的那样)。标记菜单非常适合触屏界面，因为它们不需要精确地到达目标(这往往是触屏界面的问题，因为我们的胖的手指)．为了保持移动时间的优势，他们确实要求手指停留在手柄上，然后朝着想要的方向移动。这种限制的缺点有两个:(1)在给定的时间内将手指放在相同的位置检查菜单元素会产生一定的物理压力;(2)手指确实会挡住部分屏幕，所以通常这些菜单作为圆形碎片效果最好。

在触摸屏设备的时代，馅饼和标记菜单遇到了他们的荣耀时刻。我们在触摸应用中看到了越来越多的菜单版本。最后，这些菜单能够很好地克服不熟悉的障碍，并将其理论优势转化为现实世界。然而，许多这些菜单并没有经过优化设计。请记住，一个普通的馅饼菜单(就像上面的Yelp应用程序)，当手指从手柄上移开时，菜单仍然停留在屏幕上，用户可以通过点击想要的项目来选择一个选项，这并不会给你带来移动时间的好处。

结论

可扩展菜单中的移动时间受菲茨定律支配。当菜单选项数量较少时，线性菜单是最佳选择;随着数量的增加，矩形菜单(或超大菜单)更合适。标记菜单非常适合触摸屏，就像馅饼菜单一样，优化了每个选项的到达时间，但由于它们在触摸屏设备上的普及，现在才开始变得越来越熟悉。如果你考虑一个新的，不太熟悉的菜单，因为它有很好的移动时间(或任何其他理想的质量)，保留它的情况下，高频使用或等到设计更熟悉。