分析背景

本專題分析的目的在于分析和定義兆日后臺系統(tǒng)全局導(dǎo)航布局和套用規(guī)則，以便后期平臺改版及新平臺初建的時候，能快速指導(dǎo)設(shè)計人員選用合理的全局導(dǎo)航布局，節(jié)省調(diào)研成本。

一、全局導(dǎo)航的作用

1.1 幫助用戶確認(rèn)在系統(tǒng)中的位置

由于 B 端產(chǎn)品業(yè)務(wù)復(fù)雜、角色多樣，頁面層級結(jié)構(gòu)往往比較多。這時候，清晰的導(dǎo)航設(shè)計能幫助用戶認(rèn)清"我在哪兒" ，避免迷路。

1.2 告訴用戶這里有什么

B 端產(chǎn)品的系統(tǒng)架構(gòu)通常通過導(dǎo)航結(jié)構(gòu)來進(jìn)行表現(xiàn)層上的劃分，這時候，導(dǎo)航名稱可以快速、直觀地告訴用戶該產(chǎn)品所包含的內(nèi)容和層級。

1.3 告訴用戶如何使用網(wǎng)站

清晰的導(dǎo)航就像一本用戶使用指南，能夠幫助用戶規(guī)劃行程，明確地提示用戶從哪里開始，能進(jìn)行哪些操作。

導(dǎo)航的作用如此之大，因此，作為一個 UX 設(shè)計師，知道如何為狹小的屏幕空間選擇合理的導(dǎo)航布局以準(zhǔn)確表達(dá)業(yè)務(wù)需求是很重要的。

二、全局導(dǎo)航布局定義

2.1 全局導(dǎo)航實例及總結(jié)

下圖是幾個典型平臺類產(chǎn)品的主界面，現(xiàn)在我們來觀察一下這幾個界面的"一級菜單-二級菜單-三級菜單的位置"。注意：不要把頁眉看成橫向?qū)Ш讲藛巍?/p>

其中，阿里云門戶首頁的一級菜單在上，二級菜單、三級菜單通過移入一級菜單出現(xiàn)，也可以看作在上；阿里云后臺產(chǎn)品詳情頁一級菜單、二級菜單在左，內(nèi)容頁中還有頁簽作為內(nèi)容頁導(dǎo)航；易觀數(shù)科后臺一級菜單、二級菜單、三級菜單都在左邊；神策數(shù)據(jù)后臺一級菜單在上，二級菜單、三級菜單在左；網(wǎng)易首頁的一級菜單、二級菜單都在上；百度首頁只有一級菜單在上。

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

2.2 全局導(dǎo)航布局極致提煉

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

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

上-下結(jié)構(gòu)營造的沉浸感強，但是導(dǎo)航容量小，如果橫向?qū)Ш捷^多時會出現(xiàn)橫向滾動條，導(dǎo)致滾動不便。左-右結(jié)構(gòu)的導(dǎo)航時刻在視野內(nèi)，可以隨時切走，沉浸感較弱，不過這種結(jié)構(gòu)的縱向?qū)Ш饺萘看?，?dǎo)航較多時上下滾動方便。由此，我們就可以根據(jù)產(chǎn)品功能結(jié)構(gòu)的規(guī)格來選擇是使用上-下還是左-右結(jié)構(gòu)。

綜上，以一級功能導(dǎo)航放在頂部還是放在左側(cè)為套用切入點，設(shè)計師就可以根據(jù)產(chǎn)品業(yè)務(wù)形態(tài)和需求快速確定全局導(dǎo)航布局。

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

2.3 全局導(dǎo)航二級菜單放哪里

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

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

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

下圖是 Jennifer Rose Kingsburg 的實驗數(shù)據(jù)。

Jennifer Rose Kingsburg 實驗數(shù)據(jù)

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

實驗數(shù)據(jù)轉(zhuǎn)化為分值

①一二三級導(dǎo)航都在左邊

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

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

④一級導(dǎo)航在左邊，二級導(dǎo)航在右邊頂部，三級導(dǎo)航在右邊左側(cè)

⑤一二三級導(dǎo)航都在頂部

⑥一二級導(dǎo)航在頂部，三級導(dǎo)航在下邊左側(cè)

⑦一級導(dǎo)航在頂部，二三級導(dǎo)航在下邊左側(cè)（評分較高，主要原因在于不易發(fā)生錯誤點擊）

⑧一級導(dǎo)航在頂部，二級導(dǎo)航在下邊左側(cè)，三級導(dǎo)航在下邊頂部

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

左-右結(jié)構(gòu)布局拓展

同理，再看上下結(jié)構(gòu)，后四種布局中⑦的平均分最高。我們根據(jù)⑦的二三級導(dǎo)航的位置，可以將2.2章節(jié)中定義的上-下結(jié)構(gòu)拓展為以下布局。

上-下結(jié)構(gòu)布局拓展

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

2.4 全局導(dǎo)航布局定義

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

小知識

在 2.1章節(jié)中提到"不要把頁眉看成橫向?qū)Ш讲藛?quot;。為什么這么提醒呢？

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

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

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

頁眉還是導(dǎo)航

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

三、套用規(guī)則定義

3.1 全局導(dǎo)航原子布局優(yōu)缺點分析及適用場景

3.2 全局導(dǎo)航拓展布局優(yōu)缺點分析及適用場景

小知識

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

3.3 后話

經(jīng)過詳細(xì)地分析和推導(dǎo)，此篇文章定義了適合兆日 B 端產(chǎn)品套用的 3 種全局導(dǎo)航布局（2 種原子布局）。各位觀者也可以根據(jù)自己公司產(chǎn)品的業(yè)務(wù)形態(tài)，從用戶體驗角度出發(fā)，定義合理的全局導(dǎo)航布局，便于隨時套用，從而節(jié)省前期分析的時間。

歡迎關(guān)注團(tuán)隊微信公眾號：兆日 UCD