系統(tǒng)類界面、數(shù)據(jù)儀表盤、PC端UI，三級菜單應該怎么設計？

今天討論一下系統(tǒng)類UI界面、數(shù)據(jù)儀表盤、PC端UI，三級菜單應該怎么設計？通常的導航布局包括：
上-上-上
上-左-左
上-上-左
上-左-上
左-左-左
左-上-上
左-左-上
左-上-左
我們分別從用戶響應速度、用戶猶豫率、光標移動、選擇出錯率和用戶使用偏好幾個角度來看一下那種最好。

1、用戶響應速度
通過研究發(fā)現(xiàn)，左側導航總比頂部主要導航更快些，此效果也適用于左側二級菜單級別。研究還發(fā)現(xiàn)，當一級與二級和三級分開時，導航速度會更快?？傮w而言，左-上-上 和 上-左-左 的用戶響應速度最快，上-上-上 和 上-上-左 最慢。

2、用戶猶豫率
猶豫是指用戶猶豫是否要將光標從一個菜單級別移動到另一級別子菜單。在所有布局中，左-上-上的猶豫最少，而左-上-左的猶豫最多。當?shù)诙壓偷谌壧幱谕黄矫鏁r，猶豫感顯著減少，反之猶豫率增加。

3、光標移動
光標移動到不正確平面的頻率代表光標移動。當主菜單位于左側時，光標移動較少。當輔助級別與主級別分離時，光標移動也會減少。當二級和三級菜單位于不同平面上時，會發(fā)生許多光標移動。但當他們在同一平面時，表現(xiàn)會更好。
左-左-左 和 上-上-上 的光標移動最少，而 上-上-左 和 上-左-上的光標移動最多。

4、選擇出錯率
選擇出錯率表示點擊次數(shù)過多表示選擇錯誤。當主要級別位于左側平面時，發(fā)生的選擇錯誤最少。與頂部初級相比，左側初級可減少 80% 的選擇錯誤。 當初級和次級都位于頂平面時，會發(fā)生大量選擇錯誤。
上-上-上 和 上-上-左表現(xiàn)最差。當二級和三級與一級位于不同的平面上時，發(fā)生的選擇錯誤會較少。
左上左 和 左左左的表現(xiàn)最好。

5、用戶使用偏好
用戶使用偏好大多數(shù)用戶更喜歡使用左側初級而不是頂部初級。左-上-上 和 左-左-左 為最優(yōu)選。左-上-上和左-上-左是最不受歡迎的。這種效果意味著用戶不喜歡在多平面間來回跳躍切換。

綜上研究，最佳與最差整體表現(xiàn)
根據(jù)每個布局在所有標準類別中的表現(xiàn)，對每個布局進行總體評分。
性能最佳的導航布局是：左 上 上，其次是 左 左 左。
表現(xiàn)最差的是：上-上-左 和 上-左-上。
最好的比最差的快大約 17 秒。

左-左-左 比 左-上-上 慢，是因為當所有菜單都在左側時，用戶需要通過滾動項目列表查看，隨著級別的擴展和深入，用戶必須滾動以更多內容，并且無法再在單個屏幕上查看所有主要項目。

左-上-上的屏幕視圖優(yōu)勢允許用戶一次查看更多主要項目，無論他們導航的深度如何。然而，由于頂部導航欄，他們在每個屏幕上看到的內容較少。因此，用戶體驗到的菜單滾動較少，但內容滾動較多。

最后，對于用戶體驗設計的影響：
這項研究具有三個重要的設計意義，將極大地優(yōu)化三級菜單的導航速度。
1：主菜單應該位于左側而不是頂部
將節(jié)省約 17 秒，因為以列列表的形式組織菜單項使它們更容易瀏覽。當項目位于列而不是行中時，用戶可以在單個視圖中看到一組項目。使用頂部主選項時，用戶在掃描行時只能單獨查看項目。

2：主菜單應與二級菜單和三級菜單位于不同的平面上
將節(jié)省約 23 秒，因為主菜單是父類別，其優(yōu)先級高于子類別。當二級和三級與一級分開時，可以清楚地區(qū)分層次結構并防止同一平面上的視覺混亂。

3：二級菜單和三級菜單應在同一平面上
將節(jié)省約 9 秒，因為二級和三級都是父類別的子類別，使它們更加相關度。將它們放在同一平面上可以使從一個子項導航到另一個子項更加直觀且更容易遵循。

當您在設計系統(tǒng)類UI界面、數(shù)據(jù)儀表盤、PC端UI時，請參考上面的研究報告，當然很多理論不能一刀切，具體情況具體分析，有時候還要考慮開發(fā)邊界問題，設計出最適合您產(chǎn)品的UI才是當下你值得擁有的最佳設計產(chǎn)品。