在過去的分享里，我提過 B 端的頁面看起來復雜，但是相對 C 端設計而言并不難，因為頁面設計的框架、樣式范圍很小，難的地方在于需求的理解和交互的構建。

雖然基礎的內容套路強，但作為新手也要完整掌握了才行。所以今天的分享就是圍繞 B 端管理系統的常見頁面類型進行分享，讓大家快速掌握 B 端頁面框架，對 B 端設計有更全面的認識。

一、B 端頁面類型總結

B 端管理系統的應用價值，說到底就四個字 —— 增刪改查，即針對數據進行的交互和操作過程。不管業務有多復雜，頁面有多少，字段有多少，目的都圍繞這四者展開。

同理，視覺界面作為用戶使用的載體，也是圍繞增刪改查而設計。常見的頁面類型包含四種：

1. 表盤：主要展示數據和圖表的頁面，類似飛機、貨輪的儀表盤
2. 列表：用于大量同類數據的條目，包括對它們進行排序和篩選等
3. 表單：主要用于添加、修改數據對象的操作型頁面，會包含多個表單控件的處理
4. 詳情：用于展示某個數據對象詳細內容、數據的頁面

雖然它們是 B 端最核心的頁面類型，但要成為一個完整的系統，就還有一些次要的頁面類型需要補充，比如下面這些：

1. 登錄/注冊頁：進入系統前進行身份驗證的頁面
2. 成功/錯誤頁：完成對應操作后用一個獨立頁面來反饋操作結果的頁面
3. 異常/空頁面：對系統錯誤、為空的狀態用特殊的頁面

除了特殊的頁面外，還有一些較為特殊，需要在設計軟件內使用單獨畫布呈現的組件，比如：

1. 新手/任務引導：對用戶進行特殊信息解釋、操作引導的頁面
2. 模態彈窗：包括大量內容、信息的模態彈窗
3. 側邊抽屜：側邊展開的包含信息、表單的抽屜

雖然 B 端頁面類型能做出區分，但不同頁面之間是包含通用的元素，即全局組件。而布局的核心根據導航的方向決定，包括導航在左側，導航在頂端，側邊頂端混合型三種。

正常項目的設計，就是先規劃好全局組件的布局形式，然后再在內容區域繪制對應的頁面。而我們掌握不同頁面的設計思路、框架，就是了解在內容區域的不同表現形式而已。
所以下面我們從全局框架入手，來展示不同的頁面布局和設計思路，讓你們快速上手整套 B 端項目的設計。

1. 全局組件

全局組件中主要包含導航、頂欄、頁簽三個核心組件。常見的組件形式包括下面這些：

①側邊導航

即導航在左側的做法，包含兩種模式，一種是單列導航，一種是雙列導航。雙列導航可以兼容更多的導航層級（3 級以上），能更好的突出下級導航選項。

②頂部導航

導航主要放在頂部，只適合導航選項少，需要較多內容展示區域的項目。

③混合導航

頂部和側邊都有導航的模式，通常是一個系統包含了幾個差異很大的模塊，切換模塊操作比較低頻，這些模塊用在頂部的導航。而模塊內的下級導航選項，則在側邊。

④包含頁簽

有的項目會包含頁簽，用于單個頁面中切換內容模塊，所以它也是全局組件中的重要組成部分，需要在這個階段確定布局形式。

2.表盤頁

表盤頁是數據、信息集合的頁面，包含的組件類型很多，但最核心的兩類組件，就是圖表和表格。任何表盤類頁面設計前，都要先確定包含的組件數量、類型、權重，然后再開始對內容區域進行劃分和布局。

①主頁型表盤頁

主要應用于主頁的表盤頁面，不是單純的表盤聚合頁，而是會包含大量不同的信息和模塊，對于內容的權重表現和布局比例要求較高。

除了表盤和表格外，還包括信息列表、輪播圖、公告、日歷、留言板之類特殊的模塊，需要花較多的時間來處理版式，尤其是面對作品集輸出需要關注美觀度，不同模塊樣式的差異性和設計感。

②數據型表盤頁

另一種就是純粹的表盤頁，主要以展示數據圖表為主，表格也有但權重不大。這類頁面的布局要先了解頁面需要展示哪些數據，并使用什么圖表，要確保數據的展示能符合實際使用需要。

3. 列表頁

列表是對于羅列同類數據進行展示的統稱，實際上包含多種列表類型，包括表格、卡片、封面、標題信息等。這些樣式即使數據相同也可以進行轉換，用過 Notion Database 或飛書多維表格的話應該非常熟悉（建議去用用看），也是為什么我沒把表格單獨拆成一個大類的原因。

①表格頁

列表中最基礎、常見的就是表格頁，使用橫、縱軸的排列規則來展示數據信息。不管表格本身有多復雜，它的設計是組件設計的一部分。而表格頁面通常會帶有針對表格內數據進行篩選的模塊，以及添加數據，操作所選數據的功能欄位。

②一般列表

一般列表就是字面意思，最基礎的縱向排列一行一條的列表模式。很多人會把列表和表格搞混，因為很多表格設計中并沒有把單元格全部畫出來，所以看起來很像。區分兩者最簡單的方法，就是看有沒有表頭，有表頭是表格，沒表頭的就是列表。

③卡片列表

將每個數據對象使用卡片的形式展示，對于不需要上下數據進行對比，每個數據對象都是比較獨立的個體的話，那么卡片的模式會比表格更合理，比如服務器列表、插件列表門店列表、項目列表等。

卡片列表的設計首先要根據響應式的斷點決定在不同寬下應該放置幾列卡片，然后再對卡片的內部信息進行設計和排版。

④封面列表

本質上也是卡片列表，只是使用了較大的封面圖，以圖片作為數據對象的主要區分點。包含了封面圖，以及標題和其它次要信息，比如員工列表、設計項目列表、設備列表、商品列表（SPU 商品品類少）等。

4. 表單頁

表單頁是用于填寫、編輯數據的頁面。在表單頁中，通常包含較多的表單控件和選項，要對它們進行歸類和整理，給用戶提供更好的輸入體驗。除了分類外，成熟的表單一行填寫一類信息，而不會為了填滿頁面強行把不相關的表單元素并排。

除此以外，表單頁面的展現形式有四種，包含響應式、定寬、抽屜、彈窗，需要根據項目實際需要選擇，而不是只能用固定的一種。

①響應式表單頁

即頁面內容區域寬度會根據畫布放大，但表單元素的尺寸并不會有變化，通常使用左對齊，或者居中對齊。

②定寬表單頁

因為表單元素本身并沒有響應式的需求，所以推導而來表單頁面本身往往沒有響應式，使用起來會更合理、有效。所以定寬表單頁就是內容區域寬度固定的頁面類型。

③表單抽屜

即用抽屜的形式放置表單，常用于編輯對象內容的場景，不用打開新頁面就能完成修改。

④表單彈窗

還有一種是使用模態彈窗來實現，雖然是彈窗，但這種彈窗可以容納大量內容，和頁面沒有太大差異。

⑤文章編輯頁

這是一個比較特殊的表單頁面類型，即用于發布內部公告、新聞，或者系統前端的文章等。在這個頁面中，主要包含標題輸入和圖文編輯區，其它的信息則根據需求安排。

5.詳情頁

詳情頁是用來展示某個數據對象的具體內容、數據、信息的頁面，根據對象類型不同，頁面的做法也有不同，比如用戶 360、商品詳情、文章詳情、工單詳情等，都會形成不同的設計。

①一般詳情頁

一般詳情頁和表單頁類似，需要整理要展示的信息、字段，對它們進行歸類和擺放，主流的詳情頁設計就是把內容根據順序依次排列出來。

②分區詳情頁

一般詳情頁通常是從上到下的排列過程，雖然可以根據分類做模塊的拆分，但大體上也是單列的設計。而一些復雜的場景中，會希望使用更高效、功能化的展示形式，所以就會使用類似表盤頁面的布局形式，對內容模塊分區進行不規則的布局。

③文章詳情頁

文章詳情就是類似一般網站文章頁面的類型，很多 B 端項目內也有發布和直接查看文章的需求，比如企業內部的動態、SaaS 官方的新聞、Wiki 知識庫內容等等。主要包含標題、發布者、時間、圖文內容、評論等字段和模塊。

圖文內容的觀看習慣使得它們沒有響應式調節的必要，可以在內容區域中定寬居中顯示，也可以定一個定寬的內容區域展示。

④詳情抽屜

和表單類似，用抽屜的形式來放詳情內容，但是使用詳情抽屜的頻率會比表單高，多用于表格、列表場景中點擊數據對象后彈出，不用進行頁面跳轉。

⑤詳情彈窗

即把一般詳情頁使用彈窗的形式表現出來，可以進行上下的滾動。

6. 登錄頁面

登錄頁面雖然包含的要素不多，但是是所有系統的門面，是用戶訪問的第一個頁面，所以還是要有一定的重視度不要隨便應付。

對于 B 端來說，登錄頁的框架就固定那幾種，熟記這些套路就可以很快得完成登錄頁面的設計。

①居中模式

即登錄的表單、內容和 LOGO、標語等信息顯示在畫布中央，是最基礎的登錄類型。

②卡片模式

卡片模式是將登錄的表單內容置入到卡片中，這類設計通常包含比較復雜的背景圖，通過卡片懸浮來突出表單內容。通常使用左或右的布局，為另一側的背景預留較為完整的顯示空間。

③左右分區模式

想要表現背景圖的話，除了卡片還可以使用分區的設計，即將頁面拆分成左右兩個區域，一側放圖，一側放登錄信息和對應表單，要選擇哪種根據設計的風格決定。

常規的 B 端項目設計，就是用這些頁面類型去組合成整個項目，作為新手只要熟悉這些頁面的布局模式，并針對每個頁面進行分析、練習，就可以在 B 端視覺上突飛猛進。

其它的頁面類型或者設計，只要在這些基礎上發散即可。

結尾

在我們自己的正式課程中，也是對這些頁面的樣式進行歸納和整理，然后讓學員去做前期的視覺訓練。B 端視覺能力的提升核心是頁面的框架、版式，然后才是色彩、圖標這些次要的東西。

想了解課程 ?? https://pro.uisdc.com

只要你們掌握了正確的設計邏輯，愿意花時間收集案例，保持練習，不用一年就可以達到非常專業的 B 端頁面視覺水平，而不用像很多入行很久的設計師做出來的界面還慘不忍睹。

歡迎關注作者的微信公眾號：「超人的電話亭」