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

最近為了一個 B 端項目的布局設計，調研了國內外 11 款 SaaS 產品。

結果發現一個有意思的現象：一級導航大多在左側。

準確來說，是這 11 款產品里，只有 3 款的一級導航在頂部，其余 8 款的一級導航都在左側。

而這 3 款一級導航在頂部的產品，其中 2 款也都有一個很重要的左導航，只是作為二級導航而不是一級導航。

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

對于這個結果我并不驚訝，因為：實驗發現，左導航操作效率高。

一、左導航操作效率高

JR Kingsburg 曾經做過一次實驗（A comparison of three-level menu navigation structures for web design）。

他把一個三層導航電商使用 8 種不同的左導航和頂導航布局，分別給 8 組用戶使用，發現一級導航在左側時，效率高、遲疑和錯誤更少，用戶也普遍比較喜歡。

但這次調研的 B 端產品都是使用的 Web 端，而做過 Web 端的設計師肯定知道，頂導航是最常見的網站布局方式。

隨便打開幾個網站，幾乎是清一色的頂導航：

百度

知乎

京東

那么為什么 C 端網站大多用頂導航，B 端產品卻大多用左導航呢？

其實準確來說，應該這么理解：信息型產品適合頂導航，功能型產品適合左導航。

《用戶體驗要素》就把產品分成信息型和工具型兩大類，它們在范圍層、結構層和框架層的體驗要素都不相同，可見是有不小的差異。

《用戶體驗要素》

二、信息型產品導航偏簡單

用戶使用信息型產品時，大量時間都花費在閱讀和搜索上，使用的功能反而比較少。

所以信息型產品容易走簡潔風格，因為只需要展示出少數基本功能，就能滿足多數用戶使用。

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

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

百度

既然導航里放的內容少，放在頂部是最合適的，主要占用空間少。

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

這么窄的頁面，要是再往左側加一條導航，頁面就更擁擠了。

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

2003 年的Hao123

所以頂導航自然而然就成了網站設計的經典布局……

直到后來出現越來越多的功能型網站。

三、功能型產品導航偏復雜

所謂功能型產品，大多都是當工具用的，B 端產品就是如此。

C 端也有功能型的產品，例如在線文檔，雖然一級導航也在頂部，但是通常都有一個很重要的左導航。

語雀

功能型的產品的用戶，追求的是使用產品完成目標任務，注重的是功能完整性和操作便捷性。

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

所以，功能型產品很難走簡潔風格，需要一個足夠大的導航容納各種豐富功能。

電腦屏幕本身就比較寬，瀏覽器本身已經占了頂部一行，如果產品再把導航放在頂部，會讓頁面的縱向空間十分有限。

如果把導航放在左側，容納的信息更多，面積大一些也不會覺得特別擁擠。

如果內容還是放不下，左導航還可以加縱向滾動，而頂導航加橫向滾動就沒那么方便了。

綜上所述，對于功能型產品來說，使用左導航真是再合適不過了。

但是，功能型產品即便需要左導航，也沒必要用作一級導航吧？可以一級導航用頂導航，二級導航再用左導航。

但是文章開頭說過了，調研發現 11 款 B 端產品中 8 款使用使用一級左導航，只有 2 款使用二級左導航，那么……

四、為什么B 端產品，大多用一級左導航呢

C 端功能型產品確實很多使用一級頂導航+二級左導航的布局：

騰訊收集表

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

C 端功能型產品，尤其是免費那種的，功能相對簡單，很多場景只需要頂導航就夠了，所以才會盡可能地使用看起來輕量一點的頂導航。

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

所以對于功能型產品，輕量的也可以使用一級頂導航的，較復雜的就建議用一級左導航了。

五、總結

看到這里，我發現一個更有趣的問題。

網上很多對比 B 端與 C 端產品差異的文章，但其實這二者的差異并不是關鍵，B 和 C 只能代表這個產品的商業模式。

功能型和信息型，才更能代表產品本身的差異。

然而我發文章時，也是經常用「B 端」作為標題，而不是「功能型」，因為大家對前者的敏感度和認知度更高。

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

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

#專欄作家#

作者：Z Yuhan，一名前華為騰訊留英設計師；公眾號：體驗進階。

本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。