Amazon反應速度超快的下拉菜單實現(xiàn)解密

如果你以前覺得 Amazon 這家公司不太在用戶體驗上下功夫，這篇文章可能會改變你的看法。

Amazon主頁的左上角有一個商品分類瀏覽的下拉菜單。當鼠標從菜單中的選項上滑過時，子菜單的顯示速度是超快的。我們可以看一下：

這個顯示速度基本是與鼠標移動同步的，但是絕大多數(shù)網(wǎng)站的下拉菜單在顯示子菜單時會有一定的延遲，例如：

這個延遲反應是必須的，因為如果沒有，當你想把鼠標從一個主菜單選項挪到一個子菜單選項時，子菜單會消失。就像這樣：

但是 Amazon 的下拉菜單沒有這個延遲，而且子菜單也不會在不應該的時候消失。它是怎樣做到這一點的呢？答案是通過探測鼠標移動的方向和軌跡。

想象在鼠標當前的位置和子菜單的左上角和左下角之間畫一個三角形。如果鼠標在這個三角形的范圍之內(nèi)移動，那用戶很有可能是在把鼠標從主菜單向子菜單里挪，所以不要立刻更新子菜單。但是如果鼠標挪動到這個三角形之外，則可以馬上更新子菜單。這就是 Amazon 主頁反應速度超快的下拉菜單背后的算法。

上帝在細節(jié)中（God is in the details）。揭秘一個前端細節(jié)，我們看到的不僅是一個精妙的算法，而是一個科技巨頭對于產(chǎn)品和用戶體驗的態(tài)度。Amazon 的數(shù)百億市值有多少是從這些很小很小，但是明顯很用心的產(chǎn)品細節(jié)中積累起來的呢？

本文關鍵詞：煙臺網(wǎng)絡公司

騰訊開放平臺啟動“送紅利計劃”