編輯導語：B端產品系統介面如何設計才能提高使用者對產品的體驗？本文從介面框架的3種設計模式、介面框架設計的3個原則兩個方面進行了分析，推薦對B端產品感興趣的小夥伴閱讀，一起來看看吧。

B端產品給人的感覺總是千篇一律的，基本就是圖表、表格、詳情頁，或者業務流程，實際上也大抵如此。畢竟B端產品主要是工具型產品或者管理系統，面向企業使用者，解決使用者的實際需求，很少去引導使用者產生需求。

在這種背景下，

產品的效能、功能、使用者效率就成了第一位的。

必要時，甚至會犧牲一定的使用者體驗優先保證產品功能。所以B端產品系統介面不能為了“看起來新穎”而不同，更要注重使用者用起來的體驗。

本文主要討論以下內容：

從0開始構建新的產品，首先要確定好介面框架。B端介面框架並不複雜，

主要包括頂部資訊欄、左側導航和內容區3大部分

。透過不同的組合形式，介面框架就形成了3種設計模式。

一、上下結構

這種頁面結構將頁面劃分為「頂部導航」和「內容區」上下兩層。

常見於一些企業官網、資訊資訊網站中，更偏向於資訊展示。

例如阿里雲官網、新浪、知乎等資訊網站。

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

根據業務需要，

功能選單也可以進行級聯擴充套件，允許出現2級甚至3級選單。

方便使用者更深層地瞭解系統功能，同時提高使用者的操作效率，

實現深層頁面的快速直達。

我個人認為，頂部導航的優勢並不是不佔用頁面橫向空間。因為資訊展示類的網站對橫向空間要求並不高，有些網站為了避免使用者視覺橫向跨度過大，採用的是版心定寬設計。企業官網產品則採用響應式佈局，讓介面可以適應不同的螢幕寬度。

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

在展示形式上，頂部導航更加靈活，

可以將選單形成獨立的資訊空間。

例如百度官網的頂部導航，與Banner形成強烈對比，內容清晰可見。

頂部導航也可以與頁面內容融為一體，減少對內容的干擾。

例如巨量引擎的官網中，將頂部導航與Banner資訊混合，更加強調內容資訊的傳遞。

在互動操作方面，

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

二、左右結構

對於簡單或者複雜的業務系統，

頂部導航數量會面臨過少或者過多的問題，

於是就出現了左右結構佈局。

面對簡單的業務系統，左側導航的形式不會產生大量的頁面空白。例如百度網盤網頁版，Teambition都是採用的這種介面框架，

將一級選單簡化，與二級選單並列展示，視覺關聯性也更加緊密。

面對複雜的業務系統，

左側導航可以承載較多的選單量，並且樹形結構配合展開收起面板功能，具有很好的延展性。

例如有贊個人店鋪左側導航承載了10+個的業務功能。

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

尺寸空間大。

為了儘可能地減少擠佔內容區資訊空間，

通常會增加「收起」功能；

限制多。

為了控制導航寬度，

選單名稱的長度需要做出限制，

避免出現無法完全展示的情況；對系統logo和名稱也會有要求，

不太適用於名稱較長的系統；

操作效率不高。

預設收起的選單項中，需要展開才能操作

；如果資訊層級較深，

逐級漸進展開的方式也不方便使用者操作，

因此對資訊層級也需要做出限制；

另外使用者無法直觀地全覽所有業務功能，

尤其是對於新人使用者不友好，需要逐個點選才能瞭解系統功能。

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

（1）單層資訊+級聯資訊

有贊產品左側導航，沿用了頂部導航的互動方式。沒有采用收起展開的方式，

而是採用級聯選單形式，懸停即可顯示

，從而方便使用者快速切換。

（2）預設全展開

選單功能預設全展開，減少使用者的操作。

在微信公眾號、阿里雲、知乎創作中心等平臺中，左側導航都是預設展開的，

使用者不需要逐級展開，便於使用者快速切換選單。

在後續的使用過程中，使用者根據的自己的需要，手動收起不常用的功能就可以了。

（3）雙列布局

對於功能繁雜的系統，預設全展開的方式，會導致導航區過長，使用者檢視起來不方便。因此

需要增加選單的資訊密度，減少導航的整體長度。

例如拼多多商家後臺採用雙列布局的形式，當然這種場景下，會增加左側導航寬度，擠佔內容區的空間。

（4）檢視全部

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

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

在形式感上，左右結構的佈局會對系統logo 和名稱進行壓縮，

我個人認為整體風格不如上下結構正式，對品牌形象表現力不足。

因此該結構主要用於一些工具產品或者輕量型的系統，在大型的業務平臺或者G端的專案應用較少。

透過上面的案例，我們可以看到

B端產品基本上是以「混合佈局」的模式構建介面框架。

三、混合佈局

在B端產品中，

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

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

如果系統功能極其複雜，傳統的「頂部導航+左側導航」的模式已經無法滿足產品需求。例如雲類產品都是大型的業務平臺，包含幾十項業務功能，

於是構建了「產品與服務」的中心模式，

集中全量展示所有業務功能，方便使用者瀏覽檢視。

在一定程度上也增加了使用者探索更多功能的慾望。

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

另外還有一個小細節。

左側導航選單帶給使用者的心理暗示是「切換」，

用來控制右側內容區資訊。當我們在左側導航中嵌入其他系統功能時，

如果是「跳轉」的操作方式，需要增加指示圖示，

如下圖所示。

四、總結

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

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

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

保證使用者的操作效率。

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

全域性視角。

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

#專欄作家#

子牧先生。公眾號：子牧UXD（HelloDesign），人人都是產品經理專欄作家。產品體驗設計師。8年網際網路行業經驗，擅長體驗設計思維、設計方法論、互動設計研究。

本文原創釋出於人人都是產品經理，未經許可，禁止轉載。

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