开发者深挖网页右键菜单设计难题的根源

回到手艺本身 看不见的形状 2026年10月 我相信每个用过电脑的人都接触过一种叫做“菜单”的组件，它就是展示给用户的一组选项列表。 如今菜单类型繁多。基于文本的菜单、下拉（或坠落）菜单、垂直菜单、上下文菜单，可能还有一些我一时想不到的种类。 我认为我们最常打交道的菜单类型是“上下文菜单”或“弹出菜单”。上下文菜单在现代界面中随处可见。几乎每一款你能想到的现代软件都大量使用它。 我自己在开发 Web 端上下文菜单组件时，发现大型上下文菜单和子菜单会带来一些问题。我顺着这个线索一路深挖下去。 今天我们就来探索这个兔子洞里的部分内容。 1976 年，Xerox Alto 的 Smalltalk-76 系统引入了第一个可用的弹出式上下文菜单的概念（以及许多其他东西）。 让它成为现实的人是 Dan Ingalls。他发明了 BitBlt，这是一种能以极快速度将一块像素从一个地方复制到另一个地方的操作。正是它让菜单能够弹出在屏幕上任何内容之上，然后消失，而无需重绘所有内容。今天听起来很无聊。当年没人见过这样的东西。当 Dan 在 PARC 展示它时，L Peter Deutsch 跳起来说：“你刚才是不是做了我以为你做了的事？” 1979 年，Steve Jobs 谈成了一项协议，允许 Apple 工程师参观 Xerox PARC，以换取 Apple 股票。Steve 被 Xerox 当时的 GUI 彻底震撼了。那是一个原创的想法。 0:00 -0:00 “他们给我看了，呃，三样东西，但我被第一样东西晃得眼花缭乱，以至于根本没真正看清另外两样。[...] 我被他们给我看的第一样东西——图形用户界面——晃得眼花缭乱。我以为那是我一生中见过的最好的东西……而且，你知道，不到 10 分钟，我就清楚地意识到，总有一天所有电脑都会这样工作。” 他们在 Xerox PARC 看到的许多概念深刻影响了 Apple Lisa 和 Macintosh 操作系统的设计与开发。这些最终被整个行业所采用。 有趣的是，1984 年的第一台 Mac 根本没有子菜单。它们直到 1987 年才随 Mac II 和 Mac SE 出现。而我们的问题正是从这里开始的。 没人想看到一个列着 50 个不同条目的菜单。它看起来会是这样。 解决这种杂乱的最佳方法是将条目按层级分组，并使用嵌套菜单 / 子菜单。你可以默认折叠一切，只在用户真正想看时才展开子菜单，从而保持界面整洁。 打开打开方式移到废纸篓显示简介重命名压缩“IMG_0042.png”拷贝共享…标签…快速操作预览.app（默认）照片.app文本编辑.appApp Store…其他… 在早期软件中，要打开子菜单，用户必须将光标从主条目出发，沿一条精确的直线拖动。如果你的光标哪怕在一瞬间滑离了父条目，菜单就会立刻收起。你无法斜向移动。 在这里，从“打开方式”到“其他”的最短路径是斜向移动。 打开打开方式移到废纸篓显示简介重命名压缩“IMG_0042.png”拷贝共享…标签…快速操作预览.app（默认）照片.app文本编辑.appApp Store…其他… 相信我，你不会想这么做的。它很慢，很累，而且你每天都会无数次滑离父菜单，结果每次都会把子菜单收起来。 Bruce Tognazzini（Tog）创办了 Apple 的人机界面团队，他对此的解释比我所能说的更好： 最初设计层级菜单的那位工程师，显然把他的前臂固定在一根轨道上，这样他就能完美地水平移动，不带任何垂直分量。然而，我们大多数人的前臂都固定在一个我们喜欢称为肘部的支点上。 你的手沿弧线移动，而不是直线。所以当你试图横向移动时，你会向下滑。 这其实有一条定律。转向定律指出，穿过一条隧道所需的时间随隧道长度增加而增加，随隧道宽度增加而减少：T = a + b × (A / W)。横向穿过父行到达其子菜单，就像穿过一条和菜单一样长、却只有一行高的隧道。又长又窄，最糟糕的那种。把菜单加宽以容纳更长的标签，隧道只会变得更长。 AW打开打开方式移到废纸篓显示简介重命名压缩“IMG_0042.png”预览.app（默认）照片.app文本编辑.appApp Store…其他… A = 120W打开打开方式移到废纸篓显示简介重命名压缩“IMG_0042.png”预览.app（默认）照片.app文本编辑.appApp Store…其他…A / W = 120 / 28 = 4.3文件名短长更长 悬停“打开方式”，然后转向子菜单。 我们怎样才能让光标能够斜向移动？同时确保子菜单不会收起，或者光标不会最终聚焦到其他菜单上？ 这在现代软件中是一个已解决的问题。但背后的机制在每个软件中略有不同。这使得每种解决方案的行为彼此略有差异。 而且它很久以前就被解决了。还是 Tog，谈 Mac： 20 世纪 80 年代中期，我在规范 Mac 层级菜单算法时，要求设置一个形状像 < 的缓冲区，这样用户在接近层级菜单时，可以犯越来越大的误差，而不用担心跳到不想要的菜单。只要用户的指针平均每向下移动一个像素就横向移动几个像素，菜单就会保持打开，无论他们移动得多慢。 那个 < 就是看不见的形状。下面几乎所有的内容都是它的某个版本。 我遇到过的最常见的解决方案有： 我们将在这里探讨在 Web 上看到的一些方法。不分先后顺序。 有人可能会认为最简单的修复方法是设置超时。当光标离开父行时，等待 300ms 再关闭子菜单。

（原文较长，此处译出前 6000 字，完整内容请点「打开原文」。）