您当前的位置: 主页 > A时生活 >上帝就在细节中,Amazon怎幺让下拉式选单反应超级快 >

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

发布时间:2020-06-14 浏览量:842人次
上帝就在细节中,Amazon怎幺让下拉式选单反应超级快

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

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

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

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

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

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

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

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

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

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

上帝就在细节中。

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

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

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

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

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

上一篇: 下一篇:
可能感兴趣信息