編輯導(dǎo)語：McGovern曾說“相比于直接搜索，用戶更喜歡用導(dǎo)航，因?yàn)閷?dǎo)航是讓用戶做選擇題，而搜索是填空題”，由此可見導(dǎo)航在產(chǎn)品中的重要性。更有趣的是，大多數(shù)B端產(chǎn)品，其一級(jí)導(dǎo)航欄都在左側(cè)。為什么會(huì)出現(xiàn)這種現(xiàn)象呢？本篇文章中，作者分享了自己的看法，感興趣的小伙伴不妨來看看。

最近為了一個(gè) B 端項(xiàng)目的布局設(shè)計(jì)，調(diào)研了國內(nèi)外 11 款 SaaS 產(chǎn)品。

結(jié)果發(fā)現(xiàn)一個(gè)有意思的現(xiàn)象：一級(jí)導(dǎo)航大多在左側(cè)。

準(zhǔn)確來說，是這 11 款產(chǎn)品里，只有 3 款的一級(jí)導(dǎo)航在頂部，其余 8 款的一級(jí)導(dǎo)航都在左側(cè)。

而這 3 款一級(jí)導(dǎo)航在頂部的產(chǎn)品，其中 2 款也都有一個(gè)很重要的左導(dǎo)航，只是作為二級(jí)導(dǎo)航而不是一級(jí)導(dǎo)航。

這 11 款 B 端產(chǎn)品里很多都是我們耳熟能詳?shù)?SaaS 類產(chǎn)品，包括國外的 Jira、GitLab、Zendesk、Asana、Monday、TeamGantt、Trello、Clickup，以及國內(nèi)的 Teambition、Tower、Worktile。

對(duì)于這個(gè)結(jié)果我并不驚訝，因?yàn)椋簩?shí)驗(yàn)發(fā)現(xiàn)，左導(dǎo)航操作效率高。

一、左導(dǎo)航操作效率高

JR Kingsburg 曾經(jīng)做過一次實(shí)驗(yàn)（A comparison of three-level menu navigation structures for web design）。

他把一個(gè)三層導(dǎo)航電商使用 8 種不同的左導(dǎo)航和頂導(dǎo)航布局，分別給 8 組用戶使用，發(fā)現(xiàn)一級(jí)導(dǎo)航在左側(cè)時(shí)，效率高、遲疑和錯(cuò)誤更少，用戶也普遍比較喜歡。

但這次調(diào)研的 B 端產(chǎn)品都是使用的 Web 端，而做過 Web 端的設(shè)計(jì)師肯定知道，頂導(dǎo)航是最常見的網(wǎng)站布局方式。

隨便打開幾個(gè)網(wǎng)站，幾乎是清一色的頂導(dǎo)航：

百度

知乎

京東

那么為什么 C 端網(wǎng)站大多用頂導(dǎo)航，B 端產(chǎn)品卻大多用左導(dǎo)航呢？

其實(shí)準(zhǔn)確來說，應(yīng)該這么理解：信息型產(chǎn)品適合頂導(dǎo)航，功能型產(chǎn)品適合左導(dǎo)航。

《用戶體驗(yàn)要素》就把產(chǎn)品分成信息型和工具型兩大類，它們?cè)诜秶鷮印⒔Y(jié)構(gòu)層和框架層的體驗(yàn)要素都不相同，可見是有不小的差異。

《用戶體驗(yàn)要素》

二、信息型產(chǎn)品導(dǎo)航偏簡(jiǎn)單

用戶使用信息型產(chǎn)品時(shí)，大量時(shí)間都花費(fèi)在閱讀和搜索上，使用的功能反而比較少。

所以信息型產(chǎn)品容易走簡(jiǎn)潔風(fēng)格，因?yàn)橹恍枰故境錾贁?shù)基本功能，就能滿足多數(shù)用戶使用。

即便提供高級(jí)功能，也可以隱藏起來，反正使用的人不多。

例如百度導(dǎo)航的「更多」里，就折疊了不少小眾功能，這些東西擺出來只會(huì)讓絕大部分普通用戶覺得礙眼。

百度

既然導(dǎo)航里放的內(nèi)容少，放在頂部是最合適的，主要占用空間少。

以前的電腦屏幕小，又尺寸不統(tǒng)一，通常都定一個(gè) 960px 之類較窄的固定寬度。

這么窄的頁面，要是再往左側(cè)加一條導(dǎo)航，頁面就更擁擠了。

而網(wǎng)站早期大多都是信息型的，例如2000 年左右的門戶網(wǎng)站、新聞網(wǎng)站……

2003 年的Hao123

所以頂導(dǎo)航自然而然就成了網(wǎng)站設(shè)計(jì)的經(jīng)典布局……

直到后來出現(xiàn)越來越多的功能型網(wǎng)站。

三、功能型產(chǎn)品導(dǎo)航偏復(fù)雜

所謂功能型產(chǎn)品，大多都是當(dāng)工具用的，B 端產(chǎn)品就是如此。

C 端也有功能型的產(chǎn)品，例如在線文檔，雖然一級(jí)導(dǎo)航也在頂部，但是通常都有一個(gè)很重要的左導(dǎo)航。

語雀

功能型的產(chǎn)品的用戶，追求的是使用產(chǎn)品完成目標(biāo)任務(wù)，注重的是功能完整性和操作便捷性。

功能型的產(chǎn)品需要把很多功能擺出來，不能像信息型產(chǎn)品那樣只展示少量功能，否則大部分用戶都會(huì)覺得不方便。

所以，功能型產(chǎn)品很難走簡(jiǎn)潔風(fēng)格，需要一個(gè)足夠大的導(dǎo)航容納各種豐富功能。

電腦屏幕本身就比較寬，瀏覽器本身已經(jīng)占了頂部一行，如果產(chǎn)品再把導(dǎo)航放在頂部，會(huì)讓頁面的縱向空間十分有限。

如果把導(dǎo)航放在左側(cè)，容納的信息更多，面積大一些也不會(huì)覺得特別擁擠。

如果內(nèi)容還是放不下，左導(dǎo)航還可以加縱向滾動(dòng)，而頂導(dǎo)航加橫向滾動(dòng)就沒那么方便了。

綜上所述，對(duì)于功能型產(chǎn)品來說，使用左導(dǎo)航真是再合適不過了。

但是，功能型產(chǎn)品即便需要左導(dǎo)航，也沒必要用作一級(jí)導(dǎo)航吧？可以一級(jí)導(dǎo)航用頂導(dǎo)航，二級(jí)導(dǎo)航再用左導(dǎo)航。

但是文章開頭說過了，調(diào)研發(fā)現(xiàn) 11 款 B 端產(chǎn)品中 8 款使用使用一級(jí)左導(dǎo)航，只有 2 款使用二級(jí)左導(dǎo)航，那么……

四、為什么B 端產(chǎn)品，大多用一級(jí)左導(dǎo)航呢

C 端功能型產(chǎn)品確實(shí)很多使用一級(jí)頂導(dǎo)航+二級(jí)左導(dǎo)航的布局：

騰訊收集表

其實(shí)最理想的情況，是頁面上只存在一種類型的導(dǎo)航，如果頂導(dǎo)航和左導(dǎo)航同時(shí)存在，不論是理解成本還是操作成本，都要增加的。

C 端功能型產(chǎn)品，尤其是免費(fèi)那種的，功能相對(duì)簡(jiǎn)單，很多場(chǎng)景只需要頂導(dǎo)航就夠了，所以才會(huì)盡可能地使用看起來輕量一點(diǎn)的頂導(dǎo)航。

但是 B 端功能型產(chǎn)品通常比 C 端功能型產(chǎn)品要復(fù)雜得多，反正用戶遲早需要左導(dǎo)航，頂導(dǎo)航的信息容量有限，還不如就去掉算了。

所以對(duì)于功能型產(chǎn)品，輕量的也可以使用一級(jí)頂導(dǎo)航的，較復(fù)雜的就建議用一級(jí)左導(dǎo)航了。

五、總結(jié)

看到這里，我發(fā)現(xiàn)一個(gè)更有趣的問題。

網(wǎng)上很多對(duì)比 B 端與 C 端產(chǎn)品差異的文章，但其實(shí)這二者的差異并不是關(guān)鍵，B 和 C 只能代表這個(gè)產(chǎn)品的商業(yè)模式。

功能型和信息型，才更能代表產(chǎn)品本身的差異。

然而我發(fā)文章時(shí)，也是經(jīng)常用「B 端」作為標(biāo)題，而不是「功能型」，因?yàn)榇蠹覍?duì)前者的敏感度和認(rèn)知度更高。

這一方面說明了溝通時(shí)使用流行詞匯的重要性；

另一方面，大家自己思考分析的時(shí)候，就不用太過糾結(jié)于 B/C 端差異了。

#專欄作家#

作者：Z Yuhan，一名前華為騰訊留英設(shè)計(jì)師；公眾號(hào)：體驗(yàn)進(jìn)階。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。