在大幅菜單中，鼠標(biāo)經(jīng)過區(qū)域的響應(yīng)時間會很大程度的影響用戶的使用體驗，那么在現(xiàn)在具體的網(wǎng)頁設(shè)計中體驗時間都是怎么設(shè)計的呢？文章分享了幾個實例，一起來看看。

大幅菜單是一種可以折疊的菜單，它可以在一個頁面里，展示兩個層級的菜單選項，一般用于菜單選項比較多的場景，例如我們經(jīng)常瀏覽的電商網(wǎng)站。大幅菜單可以安置比較多的選項，并且可以快速讓用戶一覽選項全貌。

淘寶的大幅菜單

交互與時間

但這篇文章里我主要想分享的內(nèi)容，其實不是怎么去設(shè)計這個大幅菜單，而是一個交互時間與菜單的概念。

如果大幅菜單的詳情，是通過鼠標(biāo)經(jīng)過出現(xiàn)的話，一個很大的挑戰(zhàn)，是去區(qū)分兩種不同的用戶行為：

1. 用戶剛剛正在頁面上無目的地瀏覽，但鼠標(biāo)的路徑剛好與大幅菜單重合了。
2. 用戶正在看這個大幅菜單，并且希望瀏覽菜單里更加詳細(xì)的信息。

第二種場景下，的確是需要去觸發(fā)這個大幅菜單，但是第一種場景下，例如說下圖形式的菜單分布，用戶只是剛剛使用完搜索，想從A點到B點，但卻被中間菜單的彈出阻隔了。

（用戶瀏覽路徑）

對比蘇寧易購，京東，淘寶，一號店幾電商平臺，發(fā)現(xiàn)他們都采取左右布局的形式，而左右布局的形式，與上圖那種上下布局的形式相比，可能對于操作的影響是更小的，因為他們沒有切斷頁面的布局，而只是占據(jù)左邊的區(qū)域。但，這種方式也不是全無弊端，這個在之后會繼續(xù)詳細(xì)說明。

（各大電商平臺布局對比）

0.5秒可以做什么呢

所以說，如果要使得大幅菜單的出現(xiàn)不會太突兀，可能就要將鼠標(biāo)經(jīng)過時候的響應(yīng)時間減慢，根據(jù)nngroup研究文章里的分析，鼠標(biāo)應(yīng)該懸浮在菜單0.5秒之后，才出現(xiàn)二級內(nèi)容。這個點雖然很小，但是卻會影響用戶對于網(wǎng)站的總體印象，試想想用戶在瀏覽網(wǎng)站的時候，總是被突然彈出的菜單打擾，會是什么樣的感覺呢？所以綜合了鼠標(biāo)移動的速度等因素，0.5秒是一個很好的臨界點。

因此呢，這個時間是這樣的：

1. 等待0.5秒。
2. 如果0.5秒之后，鼠標(biāo)還在，就在0.1秒內(nèi)快速展現(xiàn)這個菜單的次級內(nèi)容。
3. 鼠標(biāo)離開點擊區(qū)域之后，還是展現(xiàn)菜單0.5秒，之后在0.1秒內(nèi)快速關(guān)閉內(nèi)容。

第二點可以理解，因為要區(qū)分用戶是剛好經(jīng)過，還是真的想要看里面的內(nèi)容，但是第三點又是為什么呢？鼠標(biāo)既然移出了區(qū)域，不是證明用戶已經(jīng)想離開了嘛？為什么還要停0.5秒呢？

這個可能就要用一個例子來更加詳細(xì)地說明，假如說我現(xiàn)在在淘寶上，我已經(jīng)選中了女裝的這個欄目，然后我希望去看里面的內(nèi)容，我想要看初夏新品，會有什么樣的效果呢？

（淘寶截圖）

我們來分析一下這個動作，如下圖，用戶想要去看初夏新品的話，就要從A點走到B點，路徑如虛線所示。

（瀏覽路徑圖1）

然而在走的過程中，路徑卻會經(jīng)過“鞋靴/箱包/配件”的菜單，那么這個時候會發(fā)生什么呢？就是會觸發(fā)到下方菜單，突然展現(xiàn)出其他的內(nèi)容。那么其實整個路徑就被打斷了，變成了下圖A到C的路線。所以如果等待時間不夠長的話，路徑就很有可能會被打斷，變成下圖的狀態(tài)。那么用戶就要重新去定位之前的內(nèi)容，再作一次選擇。

（瀏覽路徑圖2）

所以我個人覺得，這0.5秒還是很重要的，另外這0.5秒對于不同的群體，不同的場景，可能作用效果還不一樣，例如說老人家，例如說在休閑懶散狀態(tài)下瀏覽網(wǎng)頁的用戶，在這個情況下，用戶的動作時間就很有可能會變慢，進而被彈出的菜單干擾。

潛在解決方法

因此一個潛在的解決方法，是網(wǎng)站可以智能地預(yù)測出用戶的目的，預(yù)測出他們的潛在路徑，進而對于不同的行為作出關(guān)于這0.5秒的判斷。于是我嘗試尋找了一下各大電商對于這一點的設(shè)計，我發(fā)現(xiàn)我瀏覽的網(wǎng)站中，亞馬遜在這一點是做得很到位的，即使我把鼠標(biāo)移到最臨界點，朝著一個目標(biāo)移到，菜單也不會出現(xiàn)突兀的跳轉(zhuǎn)，似乎真的預(yù)測到了我的意圖（而且我還特意放慢了一點速度）。

（亞馬遜大幅菜單）

但，要判斷亞馬遜是否真的考慮到用戶路徑的話，個人覺得其實也要比對一下鼠標(biāo)垂直移動的等待時間，以及斜方向的等待時間?？v向路線代表用戶想要切換不同的主菜單，而斜向路線則代表用戶想要瀏覽主菜單下的次級內(nèi)容。

（瀏覽意圖與路線）

下圖是一個對比圖，看到亞馬遜的縱向等待與斜向等待時間是有區(qū)別的，京東也有這個趨勢，所以有可能網(wǎng)站對于用戶的路徑進行了一些考慮。

（等待時間對比圖）

例如說淘寶，在兩個方向的等待時間都比較短，因而菜單可能會被打斷。

（淘寶縱向路徑）

（淘寶斜向路徑）

例如說蘇寧易購，在兩個方向的等待時間都相對長一些，因而斜向運動的時候，蘇寧易購的菜單并不會馬上消失。

（蘇寧易購縱向路徑）

（蘇寧易購斜向路徑）

但再看看亞馬遜，它在兩個方向的反應(yīng)時間是有區(qū)分的，縱向很快，斜向卻較慢，縱向運動的敏捷給予用戶適時的反饋，而斜向運動的反饋卻相對較慢，似乎在猶豫著什么。所以我個人覺得，亞馬遜在用戶行為路徑這方面，可能是經(jīng)過了考慮。

（亞馬遜縱向路線）

（亞馬遜斜向路徑）