起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端產品一級導航為什么大多在左側？
編輯導語：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協議。
好像這是我們主觀的一個行為習慣，超市里擺貨物也是這樣一個順序，左手邊讓人得心應手
B端產品，不都是頂部一級菜單做大的功能模塊分類，左側二三菜單做詳細的功能嘛。
你說的這種情況是屬于比較傳統的（阿里云、騰訊云），現在新型的「功能性」產品都是左側為一級導航，文章都講述很多細節，再仔細康康。
從左往右，從上到下，使我們看事物的一個主觀方向。第一個看到的，就會印象深刻
分析太淺。
想聽聽深入型分析，來，開始你的表演~
所以禪道是信息型嗎(???)?
禪道功能型啊。為什么禪道用左一級導航，頂層二級頂導航啊？作者可以幫忙分析一下嗎？
我也很好奇，感覺違背邏輯。難道是因為沒有產品經理？
up主可以分享這11個saas產品的調研界面嗎