如果你(nǐ)以前覺得(de)Amazon這家(jiā)公司不太在用戶體(tǐ)驗上(shàng)下功夫，這篇文章可(kě)能會(huì)改變你(nǐ)的看法。

Amazon主頁的左上(shàng)角有(yǒu)一個(gè)商品分類浏覽的下拉菜單。當鼠标從菜單中的選項上(shàng)滑過時(shí)，子菜單的顯示速度是超快的。我們可(kě)以看一下：

這個(gè)顯示速度基本是與鼠标移動同步的，但(dàn)是絕大(dà)多(duō)數(shù)網站(zhàn)的下拉菜單在顯示子菜單時(shí)會(huì)有(yǒu)一定的延遲，例如：

這個(gè)延遲反應是必須的，因為(wèi)如果沒有(yǒu)，當你(nǐ)想把鼠标從一個(gè)主菜單選項挪到一個(gè)子菜單選項時(shí)，子菜單會(huì)消失。就像這樣：

但(dàn)是Amazon的下拉菜單沒有(yǒu)這個(gè)延遲，而且子菜單也不會(huì)在不應該的時(shí)候消失。它是怎樣做(zuò)到這一點的呢？答(dá)案是通(tōng)過探測鼠标移動的方向和(hé)軌迹。

想象在鼠标當前的位置和(hé)子菜單的左上(shàng)角和(hé)左下角之間(jiān)畫(huà)一個(gè)三角形。如果鼠标在這個(gè)三角形的範圍之內(nèi)移動，那(nà)用戶很(hěn)有(yǒu)可(kě)能是在把鼠标從主菜單向子菜單裏挪，所以不要立刻更新子菜單。但(dàn)是如果鼠标挪動到這個(gè)三角形之外，則可(kě)以馬上(shàng)更新子菜單。這就是Amazon主頁反應速度超快的下拉菜單背後的算(suàn)法。

上(shàng)帝在細節中（God is in the details）。揭秘一個(gè)前端細節，我們看到的不僅是一個(gè)精妙的算(suàn)法，而是一個(gè)科技(jì)巨頭對于産品和(hé)用戶體(tǐ)驗的态度。Amazon的數(shù)百億市值有(yǒu)多(duō)少(shǎo)是從這些(xiē)很(hěn)小(xiǎo)很(hěn)小(xiǎo)，但(dàn)是明(míng)顯很(hěn)用心的産品細節中積累起來(lái)的呢？

如果想把這個(gè)菜單邏輯運用到你(nǐ)的網站(zhàn)上(shàng)，這是 Khan Academy工程師(shī) Ben Kamens 寫的 jQuery插件。

如果你(nǐ)覺得(de)這個(gè)很(hěn)神奇，很(hěn)想做(zuò)這方面的工作(zuò)，或是覺得(de)這沒有(yǒu)什麽，你(nǐ)的 UX 設計(jì)比這個(gè)好，可(kě)以考慮給研發出這個(gè)細節的 Amazon 團隊（chaddes@amazon.com）投一份簡曆，因為(wèi)他們正在招聘。

VIA: bjk5.com