分析背景

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

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

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

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

1.2 告訴用戶這里有什么

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Jennifer Rose Kingsburg 實(shí)驗(yàn)數(shù)據(jù)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小知識(shí)

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

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

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

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

頁眉還是導(dǎo)航

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

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

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

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

小知識(shí)

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

3.3 后話

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

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