一、上下結構

這種頁面結構將頁面劃分為「頂部導航」和「內容區」上下兩層。常見于一些企業官網、信息資訊網站中，更偏向于信息展示。例如阿里云官網、新浪、知乎等信息網站。

一般包含系統logo、功能菜單、輔助功能、個人中心等。功能菜單通常按照業務板塊進行設置，并且會限制菜單數量，一般為4-6個左右。

根據業務需要，功能菜單也可以進行級聯擴展，允許出現2級甚至3級菜單。方便用戶更深層地了解系統功能，同時提高用戶的操作效率，實現深層頁面的快速直達。

我個人認為，頂部導航的優勢并不是不占用頁面橫向空間。因為信息展示類的網站對橫向空間要求并不高，有些網站為了避免用戶視覺橫向跨度過大，采用的是版心定寬設計。企業官網產品則采用響應式布局，讓界面可以適應不同的屏幕寬度。

頂部導航的優勢在于面積小，對頁面的分割比較弱，不會對內容產生太大的影響。另外橫向排布更符合用戶的視覺習慣。

在展示形式上，頂部導航更加靈活，可以將菜單形成獨立的信息空間。例如百度官網的頂部導航，與Banner形成強烈對比，內容清晰可見。

頂部導航也可以與頁面內容融為一體，減少對內容的干擾。例如巨量引擎的官網中，將頂部導航與Banner信息混合，更加強調內容信息的傳遞。

在交互操作方面，頁面向下滾動時，頂部導航可以自動隱藏，從而為內容提供更大的可視面積；頁面向上滾動時自動展示，方便用戶的快速切換到其他菜單。

 

二、左右結構

對于簡單或者復雜的業務系統，頂部導航數量會面臨過少或者過多的問題，于是就出現了左右結構布局。

面對簡單的業務系統，左側導航的形式不會產生大量的頁面空白。例如百度網盤網頁版，Teambition都是采用的這種界面框架，將一級菜單簡化，與二級菜單并列展示，視覺關聯性也更加緊密。

面對復雜的業務系統，左側導航可以承載較多的菜單量，并且樹形結構配合展開收起面板功能，具有很好的延展性。例如有贊個人店鋪左側導航承載了10+個的業務功能。

不過左側導航的缺陷也比較明顯，主要有以下幾個方面：

• 尺寸空間大

為了盡可能地減少擠占內容區信息空間，通常會增加「收起」功能；

• 限制多

為了控制導航寬度，菜單名稱的長度需要做出限制，避免出現無法完全展示的情況；對系統logo和名稱也會有要求，不太適用于名稱較長的系統；

• 操作效率不高

默認收起的菜單項中，需要展開才能操作；如果信息層級較深，逐級漸進展開的方式也不方便用戶操作，因此對信息層級也需要做出限制；另外用戶無法直觀地全覽所有業務功能，尤其是對于新人用戶不友好，需要逐個點擊才能了解系統功能；

所以在設計時，需要針對以上問題進行優化設計。以下是部分產品提供的解決方案：

1）單層信息+級聯信息

有贊產品左側導航，沿用了頂部導航的交互方式。沒有采用收起展開的方式，而是采用級聯菜單形式，懸停即可顯示，從而方便用戶快速切換。

2）默認全展開

菜單功能默認全展開，減少用戶的操作。在微信公眾號、阿里云、知乎創作中心等平臺中，左側導航都是默認展開的，用戶不需要逐級展開，便于用戶快速切換菜單。在后續的使用過程中，用戶根據的自己的需要，手動收起不常用的功能就可以了。

3）雙列布局

對于功能繁雜的系統，默認全展開的方式，會導致導航區過長，用戶查看起來不方便。因此需要增加菜單的信息密度，減少導航的整體長度。例如拼多多商家后臺采用雙列布局的形式，當然這種場景下，會增加左側導航寬度，擠占內容區的空間。

4）查看全部

在門戶網站中，信息分類非常多，普通用戶通常只會用到高頻信息。為了讓用戶能夠全覽網站所有的信息門類，網站還提供了「網站導航」功能。

在B端產品中，也需要考慮如何讓用戶了解平臺的全部功能清單。例如釘釘管理后臺在左側導航底部增加了「查看全部」功能，展開后用戶就可以看到全部的功能菜單。

在形式感上，左右結構的布局會對系統logo 和名稱進行壓縮，我個人認為整體風格不如上下結構正式，對品牌形象表現力不足。因此該結構主要用于一些工具產品或者輕量型的系統，在大型的業務平臺或者G端的項目應用較少。

通過上面的案例，我們可以看到B端產品基本上是以「混合布局」的模式構建界面框架。

 

三、混合布局

在B端產品中，混合布局既有貫穿的頂部區域，可以承載導航菜單和產品框架信息，又在內容區增加左側導航，提升導航信息承載量，更好地滿足業務功能需要。

例如巨量縱橫產品中，采用了頂部導航和左側導航相結合的方式，將產品劃分為幾個獨立的業務單元，用戶可以根據自己的工作目標去選擇對應的功能。同時也減少了左側導航的信息承載量和層級，方便用戶操作。

如果系統功能極其復雜，傳統的「頂部導航+左側導航」的模式已經無法滿足產品需求。例如云類產品都是大型的業務平臺，包含幾十項業務功能，于是構建了「產品與服務」的中心模式，集中全量展示所有業務功能，方便用戶瀏覽查看。在一定程度上也增加了用戶探索更多功能的欲望。

在這種模式下，每個獨立的產品或服務則形成了子系統空間，采用統一的混合布局方式，讓原本復雜的業務系統變得簡單。

另外還有一個小細節。

左側導航菜單帶給用戶的心理暗示是「切換」，用來控制右側內容區信息。當我們在左側導航中嵌入其他系統功能時，如果是「跳轉」的操作方式，需要增加指示圖標，如下圖所示。

 

總結

以上就是關于B端產品界面框架的內容，我們可以得到3個設計原則：

1、符合產品的定位和業務需要

產品界面框架要能夠承載產品的整個業務體系，并且具備足夠的延展性，需要考慮到產品未來升級和發展。

2、保證用戶的操作效率

導航的形式會影響到用戶的操作效率，因此在層級設定上需要謹慎，避免層級太深影響用戶的操作效率，目前主流的左側導航以2層為主。

3、全局視角

導航是用戶了解產品功能的第一渠道，在設計時既要考慮到用戶用起來的感受，也要能夠讓用戶更直觀的了解系統全局。

作者：子牧先生

轉載請注明：學UI網》設計基礎(9)：拆解B端產品，總結界面框架設計的3原則

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司