編輯導(dǎo)讀：用戶在使用導(dǎo)航頁面的時候，最關(guān)心的就是效率問題，用最短的時間找到他們想要的東西。導(dǎo)航菜單的層級越多，消耗的時間也就越多。本文將以最常見的三級導(dǎo)航為例，分析如何優(yōu)化導(dǎo)航設(shè)計(jì)，希望對你有幫助。

當(dāng)用戶使用PC端導(dǎo)航時，效率是最重要的衡量標(biāo)準(zhǔn)之一，讓用戶更快的找到想要的東西，他們就能在任務(wù)流中節(jié)省更多的時長。

效率對于多個級別的導(dǎo)航菜單是至關(guān)重要的，菜單的層級越多消耗的時間越長，最常見的是三級導(dǎo)航，優(yōu)化三級導(dǎo)航的高效性最簡單的方式是優(yōu)化布局。

常見的三級導(dǎo)航布局包括：上-上-上、上-左-左、上-上-左、上-左-上、左-左-左、左-上-上、左-左-上、左-上-左。級別標(biāo)注按優(yōu)先級和層級排序，研究方向包括導(dǎo)航時間、用戶猶豫、光標(biāo)移動、選擇錯誤和用戶偏好。

一、導(dǎo)航時間

研究表明，左側(cè)導(dǎo)航比頂部導(dǎo)航效率更高，當(dāng)一級導(dǎo)航和二級導(dǎo)航分開時，識別速度更快，總之：左-上-上、上-左-左排版時效率最高。

二、用戶猶豫

猶豫是指用戶在將光標(biāo)從一個導(dǎo)航移動到另一個導(dǎo)航時猶豫不決思考的時長。在所有布局中，左-上-上結(jié)構(gòu)的猶豫值最小，上-左-上猶豫值最大。其中當(dāng)二級和三級導(dǎo)航在同一平面時猶豫值最小。

三、光標(biāo)移動

當(dāng)一級導(dǎo)航在左側(cè)時，光標(biāo)移動較少。一級和二級導(dǎo)航分開時，光標(biāo)移動也較少。當(dāng)二級和三級導(dǎo)航不在同一方向時，會發(fā)生許多光標(biāo)移動，反之則光標(biāo)移動較少。

左-左-左和上-上-上的光標(biāo)移動量最少，上-上-左和上-左-上的光標(biāo)移動量最大。這種效果是有意義的，因?yàn)楫?dāng)所有導(dǎo)航都在同一方向時，用戶就更難將光標(biāo)移到錯誤的平面上。

四、選擇錯誤

單擊次數(shù)過多表示選擇錯誤。當(dāng)一級導(dǎo)航在左側(cè)時，選擇錯誤率最低（左側(cè)與頂部相比錯誤率減少了80%）。

當(dāng)一級和二級導(dǎo)航都在頂部時，會出現(xiàn)大量的選擇錯誤。上-上-上和上-上-左效率最差，當(dāng)二級和三級導(dǎo)航與一級導(dǎo)航不在同一方向時，選擇錯誤率會大幅度降低。

五、用戶偏好

大多數(shù)用戶更喜歡一級導(dǎo)航在左側(cè)，最優(yōu)布局是左-左-左和左-上-上。人們強(qiáng)烈傾向于二級和三級導(dǎo)航在同一方向。

六、最佳布局

根據(jù)所有類別的表現(xiàn)，對每個布局進(jìn)行總體評分。性能最好的導(dǎo)航布局是左-上-上，其次是左-左-左。表現(xiàn)最差的兩個是上-上-左和上-左-上。在兩個最好之中，左-上-上比左-左-左快17秒左右。

左-左-左慢于左-上-上，因?yàn)楫?dāng)所有菜單都在左側(cè)時，它要求用戶滾動瀏覽項(xiàng)目列表。隨著級別的擴(kuò)展和深入，用戶必須滾動查看更多內(nèi)容，并且無法再在一個屏幕上查看所有主要項(xiàng)目類別。但是，左-左-左的好處是用戶可以在每個屏幕視圖中消費(fèi)更多內(nèi)容。用戶花費(fèi)在導(dǎo)航內(nèi)容屏幕上的時間少。

總結(jié)：

一級導(dǎo)航應(yīng)該在左側(cè)而不是頂部（節(jié)省約17秒）。

因?yàn)橐粤斜硎浇M織菜單項(xiàng)使它們更容易掃描。

一級導(dǎo)航與二級、三級導(dǎo)航應(yīng)在不同方向（節(jié)省約23秒）。

因?yàn)橹鞑藛问歉割悇e，它比子類別具有更高的優(yōu)先級。當(dāng)二級和三級與一級分離時，它可以清楚地區(qū)分層次結(jié)構(gòu)并防止在同一方向上出現(xiàn)視覺混亂。

二級和三級導(dǎo)航應(yīng)該在同一方向上（節(jié)省約9秒）。

因?yàn)槎壓腿壎际歉割惖淖宇?，這使得它們更為相關(guān)。將它們放在同一個平面上，可以使從一個孩子到另一個孩子的導(dǎo)航更加直觀和容易理解。

本文由 @UX Talk 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議