分析背景

本專題分析的目的在于分析和定義兆日后臺系統全局導航布局和套用規則，以便后期平臺改版及新平臺初建的時候，能快速指導設計人員選用合理的全局導航布局，節省調研成本。

更多導航干貨：

一、全局導航的作用

1.1 幫助用戶確認在系統中的位置

由于 B 端產品業務復雜、角色多樣，頁面層級結構往往比較多。這時候，清晰的導航設計能幫助用戶認清“我在哪兒” ，避免迷路。

1.2 告訴用戶這里有什么

B 端產品的系統架構通常通過導航結構來進行表現層上的劃分，這時候，導航名稱可以快速、直觀地告訴用戶該產品所包含的內容和層級。

1.3 告訴用戶如何使用網站

清晰的導航就像一本用戶使用指南，能夠幫助用戶規劃行程，明確地提示用戶從哪里開始，能進行哪些操作。

導航的作用如此之大，因此，作為一個 UX 設計師，知道如何為狹小的屏幕空間選擇合理的導航布局以準確表達業務需求是很重要的。

二、全局導航布局定義

2.1 全局導航實例及總結

下圖是幾個典型平臺類產品的主界面，現在我們來觀察一下這幾個界面的“一級菜單-二級菜單-三級菜單的位置”。注意：不要把頁眉看成橫向導航菜單。

其中，阿里云門戶首頁的一級菜單在上，二級菜單、三級菜單通過移入一級菜單出現，也可以看作在上；阿里云后臺產品詳情頁一級菜單、二級菜單在左，內容頁中還有頁簽作為內容頁導航；易觀數科后臺一級菜單、二級菜單、三級菜單都在左邊；神策數據后臺一級菜單在上，二級菜單、三級菜單在左；網易首頁的一級菜單、二級菜單都在上；百度首頁只有一級菜單在上。

根據以上梳理思路，結合更多實例，可以總結出全局導航布局不外乎有以下幾種：左-左-左、左-左-上、左-上-上、左-上-左、上-上-上、上-上-左、上-左-左、上-左-上。(這 8 種布局跟后面提到的 Jennifer Rose Kingsburg 的實驗素材是吻合的)

2.2 全局導航布局極致提煉

上面的總結中提到的布局太多，且相鄰布局間差異又不鮮明，好像選這個也可以選那個也可以。為了讓設計師更快地做出選用決策，就需要進一步提煉上述的 8 種布局。如何做呢？這次提煉，我們只關注一級導航的位置，及一級導航與內容區域的位置關系。

基于此視角可看出：左-左-左的一級菜單在左，內容區域在右，左-左-上、左-上-上、左-上-左同理。上-上-上的一級菜單在上，內容區域在下，上-上-左、上-左-左、上-左-上同理。由此可將上述 8 種布局縮減為 2 種：上-下，左-右。

上-下結構營造的沉浸感強，但是導航容量小，如果橫向導航較多時會出現橫向滾動條，導致滾動不便。左-右結構的導航時刻在視野內，可以隨時切走，沉浸感較弱，不過這種結構的縱向導航容量大，導航較多時上下滾動方便。由此，我們就可以根據產品功能結構的規格來選擇是使用上-下還是左-右結構。

綜上，以一級功能導航放在頂部還是放在左側為套用切入點，設計師就可以根據產品業務形態和需求快速確定全局導航布局。

注意：以一級功能導航的位置為切入點設計，并不是不管二級菜單，而是先定下是使用上-下還是左-右布局，再繼續做二級菜單的延展設計。

2.3 全局導航二級菜單放哪里

上面提煉后的兩種布局是理想情況，實際產品應用中，特別是 B 端產品，功能復雜，菜單層級往往不只一級。因此，如果我們確定了一級菜單的位置，還需考慮二級及更深層級菜單的展示方式。

先來看二級菜單，該如何確定二級菜單的位置呢？Jennifer Rose Kingsburg 曾從操作時間、操作遲疑時間、錯誤移動次數、錯誤點擊次數、喜好排名 5 個維度進行實驗（他把 2.1 章節中提到的 8 種不同的全局導航布局，分別給 8 組用戶使用，并得出數據），用以說明網頁設計中應該如何設計導航體驗更佳。

接下來我們引用 Jennifer Rose Kingsburg 在論文《A comparison of three-level menu navigation structures for web design》中的實驗數據并做分析，看二級菜單放在什么位置，體驗更好。

下圖是 Jennifer Rose Kingsburg 的實驗數據。

Jennifer Rose Kingsburg 實驗數據

為了更直觀地觀察每種布局的用戶體驗滿意程度，此篇文章已通過 10 分制將上述數據轉化為分值（分值越高體驗越好），見下圖。

實驗數據轉化為分值

①一二三級導航都在左邊

②一二級導航在左邊，三級導航在右邊頂部（評分較高，主要原因在于不易發生錯誤移動和錯誤點擊）

③一級導航在左邊，二三級導航在右邊頂部（評分最高，主要原因在于菜單全部平鋪，操作時間短）

④一級導航在左邊，二級導航在右邊頂部，三級導航在右邊左側

⑤一二三級導航都在頂部

⑥一二級導航在頂部，三級導航在下邊左側

⑦一級導航在頂部，二三級導航在下邊左側（評分較高，主要原因在于不易發生錯誤點擊）

⑧一級導航在頂部，二級導航在下邊左側，三級導航在下邊頂部

先看左-右結構，前四種布局中②③的平均分不相上下，單獨看各個維度也是各有千秋。我們根據②③的二級導航的位置，可以將2.2章節中定義的左-右結構拓展為以下兩種布局。

左-右結構布局拓展

同理，再看上下結構，后四種布局中⑦的平均分最高。我們根據⑦的二三級導航的位置，可以將2.2章節中定義的上-下結構拓展為以下布局。

上-下結構布局拓展

需要指出的是：三級導航以及更深層級導航可以看做是內容頁內導航，是用③中的橫向頁簽，還是用④中的樹狀菜單，需要根據內容頁導航數量決定，二者可以同時存在于一套規范中。

2.4 全局導航布局定義

依據一級導航、次級導航的位置及用戶體驗滿意程度，此篇文章定義了 3 種可供套用的導航布局，見下圖。

小知識

在 2.1章節中提到“不要把頁眉看成橫向導航菜單”。為什么這么提醒呢？

大家可以看下 2.1章節中神策數據的界面，它頂部導航承載的是功能導航，是真正關乎業務流程和用戶任務流程閉環的功能導航，此時，我們就稱它為頂部導航。而阿里云后臺產品詳情頁界面，頂部導航承載的是一些獨立欄目、頻道等生態鏈入口，或者全局搜索及實用工具，這種情況下，我們不稱它為頂部導航，我們稱其為頁眉。

上面說了，頁眉承載著一些獨立欄目、頻道等生態鏈入口，或者全局搜索及實用工具，是不大部分網站設計不可或缺的一部分。那如何判斷加不加頁眉呢？

有一些特殊場景，比如：登錄、注冊、查看購物車、支付等場景下，用戶需要沉浸式操作，不希望被干擾，所以不需要導航。但對于這些頁面來說，仍需要站點名稱可以回到主頁，也需要一些實用工具可以提高留存率，這種情況下，就需要一個頁眉（全站導航）來承載站點名稱、實用工具。

頁眉還是導航

如果是獨立頁眉，高度比較小，避免擠壓下方內容空間，如果將頁眉跟導航融合，頁眉高度就是導航的高度。因此，在 2.4章節中做上-下結構布局拓展定義的時候，沒有在頂部另起一行，而是將頁眉內容融入到了頂部的一級導航里。

三、套用規則定義

3.1 全局導航原子布局優缺點分析及適用場景

3.2 全局導航拓展布局優缺點分析及適用場景

小知識

實際工作中，如果設計師能充分了解信息型產品和功能型產品的特點，有助于我們做出最佳決策。

3.3 后話

經過詳細地分析和推導，此篇文章定義了適合兆日 B 端產品套用的 3 種全局導航布局（2 種原子布局）。各位觀者也可以根據自己公司產品的業務形態，從用戶體驗角度出發，定義合理的全局導航布局，便于隨時套用，從而節省前期分析的時間。

歡迎關注團隊微信公眾號：兆日 UCD