hover的延時策略

hover 是 web 交互里的一個重要交互動作，當(dāng)鼠標(biāo)指針懸停或者劃過元素的上方時，會觸發(fā)對應(yīng)的反饋，或者展示隱藏的信息。

但是在實際的設(shè)計過程中，hover 觸發(fā)的東西并不是即時的。

如圖，京東頻道頁中，左側(cè)的商品導(dǎo)航是收起的。但是，當(dāng)鼠標(biāo)劃過收起的區(qū)域時，它并不會馬上展開導(dǎo)航。實際上你要在那里懸停0.3s左右，它才會展開。這樣的目的是，防止當(dāng)用戶要點擊京東 logo 時，劃過這塊區(qū)域，觸發(fā)展開導(dǎo)航，造成視覺上的干擾。

實際上，使用電腦看網(wǎng)頁時，大部分人都沒有注意到，我們的鼠標(biāo)指針并不“老實”：有時候，它會隨著我們的視線，不由自主的移動。這個時候，就有可能 hover 到某些元素，觸發(fā)某個行為。但是，這個行為并不一定是我們期望的行為，就比如上述京東的例子。所以，設(shè)計中采取 hover 延時的策略，減少這種“擾動”的發(fā)生概率。而當(dāng)用戶的目標(biāo)就是hover 觸發(fā)某個東西時，也不會造成太大的影響。

這里我們來看一個，我認(rèn)為應(yīng)該算反例的案例：

百度糯米的頻道頁中，同樣的導(dǎo)航收起區(qū)域，并沒有對hover進(jìn)行延時處理， 反而，在劃過時有很“強”的反饋效果。下圖中可以看出，hover 這塊區(qū)域時，導(dǎo)航欄的寬度變寬了……個人認(rèn)為，這是一個很嚴(yán)重的干擾；

百度糯米頻道頁

百度糯米頻道頁

體驗地址：百度糯米頻道頁

還是左側(cè)導(dǎo)航

電商網(wǎng)站中，使用左側(cè)的商品導(dǎo)航時，hover 一級導(dǎo)航觸發(fā)二級導(dǎo)航，也設(shè)置了延時。目的是為了保證，光標(biāo)在移動到二級導(dǎo)航的過程中，不會誤觸發(fā)其他一級導(dǎo)航，從而導(dǎo)致當(dāng)前的二級導(dǎo)航被切換。

這里的本質(zhì)原因是，我們的鼠標(biāo)光標(biāo)在移動到二級導(dǎo)航過程中，它移動軌跡是在一個三角形里（如下圖）

如果不設(shè)置這個延時，那么光標(biāo)在靠近這個三角形的邊緣時，就會導(dǎo)致當(dāng)前的二級導(dǎo)航被關(guān)閉（如下圖）

這里有篇文章，對這種延時機制和對應(yīng)的優(yōu)化策略，有較為詳細(xì)的解釋；
揭秘Amazon反應(yīng)速度超快的下拉菜單

作者：德川亮；VIA：簡書