最近為了一個 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 端功能型產品確實很多使用一級頂導航+二級左導航的布局：
騰訊收集表
其實最理想的情況，是頁面上只存在一種類型的導航，如果頂導航和左導航同時存在，不論是理解成本還是操作成本，都要增加的。
添加微信,邀你進設計成長群🌟
🔥文章合集
致2020：設計文章合集
留言列表