上帝就在细节中，Amazon怎幺让下拉式选单反应超级快

如果你以前觉得 Amazon 这家公司不太会在使用者体验下功夫，这篇文章可能会改变你的看法。

Amazon 首页 的左上角有一个商品分类浏览的下拉式选单。当滑鼠从选单中的选项上滑过时，子选单的显示速度超级快。我们可以看一下：

这个显示速度基本上是与滑鼠移动同步的，但是绝大多数网站的下拉式选单在显示子选单时会有一定的延迟，例如：

这个延迟反应是必须的，因为如果没有，当你想把滑鼠从一个主选单挪到一个子选单时，子选单会消失。就像这样：

但是 Amazon 的下拉式选单没有这个延迟，而且子选单也不会在不应该的时候消失。它是怎样做到这一点的呢？答案是透过侦测滑鼠移动的方向和轨迹。

想像将滑鼠当前的位置、子选单的左上角和左下角三个点连成一个三角形。如果滑鼠在这个三角形的範围之内移动，那使用者很有可能是想把滑鼠从主选单移到子选单上，所以就不应该立刻更新子选单。但是如果滑鼠移动到这个三角形之外，则可以马上更新子选单。这就是 Amazon 首页反应速度超快的下拉式功能表背后的演算法。

上帝就在细节中。

揭开一个前端细节的秘密，我们看到的不仅是一个精妙的演算法，而是一家大型网路公司对于产品和使用者体验的态度。Amazon 的数百亿市值有多少是从这些很小很小，但是很明显有用心的产品细节中积累出来的呢？

如果想把这个选单功能运用到你的网站上，这是 Khan Academy 工程师 Ben Kamens 写的 jQuery 程式 。

如果你觉得这个很神奇，很想做这方面的工作，或是觉得这没有什幺，你的 UX 设计比这个好，可以考虑给研发出这个细节的 Amazon 团队投一份履历，因为他们正在招募新员工。

原文出处：Breaking Down Amazon's Mega Dropdown

[HCI] 费兹定律 Fitts’ Law 与使用者介面设计