分析背景

本專(zhuān)題分析的目的在于分析和定義兆日后臺(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 幫助用戶(hù)確認(rèn)在系統(tǒng)中的位置

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

1.2 告訴用戶(hù)這里有什么

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

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

清晰的導(dǎo)航就像一本用戶(hù)使用指南，能夠幫助用戶(hù)規(guī)劃行程，明確地提示用戶(hù)從哪里開(kāi)始，能進(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)類(lèi)產(chǎn)品的主界面，現(xiàn)在我們來(lái)觀察一下這幾個(gè)界面的"一級(jí)菜單-二級(jí)菜單-三級(jí)菜單的位置"。注意：不要把頁(yè)眉看成橫向?qū)Ш讲藛巍?/p>

其中，阿里云門(mén)戶(hù)首頁(yè)的一級(jí)菜單在上，二級(jí)菜單、三級(jí)菜單通過(guò)移入一級(jí)菜單出現(xiàn)，也可以看作在上；阿里云后臺(tái)產(chǎn)品詳情頁(yè)一級(jí)菜單、二級(jí)菜單在左，內(nèi)容頁(yè)中還有頁(yè)簽作為內(nèi)容頁(yè)導(dǎo)航；易觀數(shù)科后臺(tái)一級(jí)菜單、二級(jí)菜單、三級(jí)菜單都在左邊；神策數(shù)據(jù)后臺(tái)一級(jí)菜單在上，二級(jí)菜單、三級(jí)菜單在左；網(wǎng)易首頁(yè)的一級(jí)菜單、二級(jí)菜單都在上；百度首頁(yè)只有一級(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)營(yíng)造的沉浸感強(qiáng)，但是導(dǎo)航容量小，如果橫向?qū)Ш捷^多時(shí)會(huì)出現(xiàn)橫向滾動(dòng)條，導(dǎo)致滾動(dòng)不便。左-右結(jié)構(gòu)的導(dǎo)航時(shí)刻在視野內(nèi)，可以隨時(shí)切走，沉浸感較弱，不過(guò)這種結(jié)構(gòu)的縱向?qū)Ш饺萘看?，?dǎo)航較多時(shí)上下滾動(dòng)方便。由此，我們就可以根據(jù)產(chǎn)品功能結(jié)構(gòu)的規(guī)格來(lái)選擇是使用上-下還是左-右結(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í)菜單的展示方式。

先來(lái)看二級(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 組用戶(hù)使用，并得出數(shù)據(jù)），用以說(shuō)明網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)該如何設(shè)計(jì)導(dǎo)航體驗(yàn)更佳。

接下來(lái)我們引用 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ù)

為了更直觀地觀察每種布局的用戶(hù)體驗(yàn)滿(mǎn)意程度，此篇文章已通過(guò) 10 分制將上述數(shù)據(jù)轉(zhuǎn)化為分值（分值越高體驗(yàn)越好），見(jià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)容頁(yè)內(nèi)導(dǎo)航，是用③中的橫向頁(yè)簽，還是用④中的樹(shù)狀菜單，需要根據(jù)內(nèi)容頁(yè)導(dǎo)航數(shù)量決定，二者可以同時(shí)存在于一套規(guī)范中。

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

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

小知識(shí)

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

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

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

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

頁(yè)眉還是導(dǎo)航

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

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

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

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

小知識(shí)

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

3.3 后話(huà)

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

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