中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

hover的延時(shí)策略

hover 是 web 交互里的一個(gè)重要交互動(dòng)作，當(dāng)鼠標(biāo)指針懸?；蛘邉澾^元素的上方時(shí)，會觸發(fā)對應(yīng)的反饋，或者展示隱藏的信息。

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

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

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

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

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

百度糯米頻道頁

百度糯米頻道頁

體驗(yàn)地址：百度糯米頻道頁

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

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

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

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

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

作者：德川亮；VIA：簡書