- 電話:0535-6266360
- 微信號(hào):kuaiwang002
- 網(wǎng)址:antigravity.com.cn
- 地址:山東省煙臺(tái)市芝罘區(qū)青年路16號(hào)匯通商務(wù)大廈5層
Amazon反應(yīng)速度超快的下拉菜單實(shí)現(xiàn)解密
如果你以前覺(jué)得 Amazon 這家公司不太在用戶(hù)體驗(yàn)上下功夫,這篇文章可能會(huì)改變你的看法。
Amazon主頁(yè)的左上角有一個(gè)商品分類(lèi)瀏覽的下拉菜單。當(dāng)鼠標(biāo)從菜單中的選項(xiàng)上滑過(guò)時(shí),子菜單的顯示速度是超快的。我們可以看一下:
這個(gè)顯示速度基本是與鼠標(biāo)移動(dòng)同步的,但是絕大多數(shù)網(wǎng)站的下拉菜單在顯示子菜單時(shí)會(huì)有一定的延遲,例如:
這個(gè)延遲反應(yīng)是必須的,因?yàn)槿绻麤](méi)有,當(dāng)你想把鼠標(biāo)從一個(gè)主菜單選項(xiàng)挪到一個(gè)子菜單選項(xiàng)時(shí),子菜單會(huì)消失。就像這樣:
但是 Amazon 的下拉菜單沒(méi)有這個(gè)延遲,而且子菜單也不會(huì)在不應(yīng)該的時(shí)候消失。它是怎樣做到這一點(diǎn)的呢?答案是通過(guò)探測(cè)鼠標(biāo)移動(dòng)的方向和軌跡。
想象在鼠標(biāo)當(dāng)前的位置和子菜單的左上角和左下角之間畫(huà)一個(gè)三角形。如果鼠標(biāo)在這個(gè)三角形的范圍之內(nèi)移動(dòng),那用戶(hù)很有可能是在把鼠標(biāo)從主菜單向子菜單里挪,所以不要立刻更新子菜單。但是如果鼠標(biāo)挪動(dòng)到這個(gè)三角形之外,則可以馬上更新子菜單。這就是 Amazon 主頁(yè)反應(yīng)速度超快的下拉菜單背后的算法。
上帝在細(xì)節(jié)中(God is in the details)。揭秘一個(gè)前端細(xì)節(jié),我們看到的不僅是一個(gè)精妙的算法,而是一個(gè)科技巨頭對(duì)于產(chǎn)品和用戶(hù)體驗(yàn)的態(tài)度。Amazon 的數(shù)百億市值有多少是從這些很小很小,但是明顯很用心的產(chǎn)品細(xì)節(jié)中積累起來(lái)的呢?
本文關(guān)鍵詞:煙臺(tái)網(wǎng)絡(luò)公司