揭秘Amazon網站反應速度超快的下拉式功能表

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

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

　　這個顯示速度基本是與滑鼠移動同步的，但是絕大多數網站的下拉式功能表在顯示子功能表時會有一定的延遲，例如：

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

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

　　想象在滑鼠當前的位置和子功能表的左上方和左下角之間畫一個三角形。如果滑鼠在這個三角形的範圍之內移動，那使用者很有可能是在把滑鼠從主菜單向子功能表裡挪，所以不要立刻更新子功能表。但是如果滑鼠挪動到這個三角形之外，則可以馬上更新子功能表。這就是Amazon首頁反應速度超快的下拉式功能表背後的演算法。

　　上帝在細節中(God is in the details)。揭秘一個前端細節，我們看到的不僅是一個精妙的演算法，而是一個科技巨頭對於產品和使用者體驗的態度。Amazon的數百億市值有多少是從這些很小很小，但是明顯很用心的產品細節中積累起來的呢?

　　如果想把這個菜單邏輯運用到你的網站上，這是 Khan Academy工程師 Ben Kamens 寫的 jQuery外掛程式。

　　如果你覺得這個很神奇，很想做這方面的工作，或是覺得這沒有什麼，你的 UX 設計比這個好，可以考慮給研發出這個細節的 Amazon 團隊(chaddes@amazon.com)投一份簡曆，因為他們正在招聘。

　　VIA: bjk5.com