在過去的分享里，我提過 B 端的頁面看起來復(fù)雜，但是相對 C 端設(shè)計(jì)而言并不難，因?yàn)轫撁嬖O(shè)計(jì)的框架、樣式范圍很小，難的地方在于需求的理解和交互的構(gòu)建。

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

一、B 端頁面類型總結(jié)

B 端管理系統(tǒng)的應(yīng)用價值，說到底就四個字 —— 增刪改查，即針對數(shù)據(jù)進(jìn)行的交互和操作過程。不管業(yè)務(wù)有多復(fù)雜，頁面有多少，字段有多少，目的都圍繞這四者展開。

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

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

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

1. 登錄/注冊頁：進(jìn)入系統(tǒng)前進(jìn)行身份驗(yàn)證的頁面
2. 成功/錯誤頁：完成對應(yīng)操作后用一個獨(dú)立頁面來反饋操作結(jié)果的頁面
3. 異常/空頁面：對系統(tǒng)錯誤、為空的狀態(tài)用特殊的頁面

除了特殊的頁面外，還有一些較為特殊，需要在設(shè)計(jì)軟件內(nèi)使用單獨(dú)畫布呈現(xiàn)的組件，比如：

1. 新手/任務(wù)引導(dǎo)：對用戶進(jìn)行特殊信息解釋、操作引導(dǎo)的頁面
2. 模態(tài)彈窗：包括大量內(nèi)容、信息的模態(tài)彈窗
3. 側(cè)邊抽屜：側(cè)邊展開的包含信息、表單的抽屜

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

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

1. 全局組件

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

①側(cè)邊導(dǎo)航

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

②頂部導(dǎo)航

導(dǎo)航主要放在頂部，只適合導(dǎo)航選項(xiàng)少，需要較多內(nèi)容展示區(qū)域的項(xiàng)目。

③混合導(dǎo)航

頂部和側(cè)邊都有導(dǎo)航的模式，通常是一個系統(tǒng)包含了幾個差異很大的模塊，切換模塊操作比較低頻，這些模塊用在頂部的導(dǎo)航。而模塊內(nèi)的下級導(dǎo)航選項(xiàng)，則在側(cè)邊。

④包含頁簽

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

2.表盤頁

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

①主頁型表盤頁

主要應(yīng)用于主頁的表盤頁面，不是單純的表盤聚合頁，而是會包含大量不同的信息和模塊，對于內(nèi)容的權(quán)重表現(xiàn)和布局比例要求較高。

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

②數(shù)據(jù)型表盤頁

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

3. 列表頁

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

①表格頁

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

②一般列表

一般列表就是字面意思，最基礎(chǔ)的縱向排列一行一條的列表模式。很多人會把列表和表格搞混，因?yàn)楹芏啾砀裨O(shè)計(jì)中并沒有把單元格全部畫出來，所以看起來很像。區(qū)分兩者最簡單的方法，就是看有沒有表頭，有表頭是表格，沒表頭的就是列表。

③卡片列表

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

卡片列表的設(shè)計(jì)首先要根據(jù)響應(yīng)式的斷點(diǎn)決定在不同寬下應(yīng)該放置幾列卡片，然后再對卡片的內(nèi)部信息進(jìn)行設(shè)計(jì)和排版。

④封面列表

本質(zhì)上也是卡片列表，只是使用了較大的封面圖，以圖片作為數(shù)據(jù)對象的主要區(qū)分點(diǎn)。包含了封面圖，以及標(biāo)題和其它次要信息，比如員工列表、設(shè)計(jì)項(xiàng)目列表、設(shè)備列表、商品列表（SPU 商品品類少）等。

4. 表單頁

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

除此以外，表單頁面的展現(xiàn)形式有四種，包含響應(yīng)式、定寬、抽屜、彈窗，需要根據(jù)項(xiàng)目實(shí)際需要選擇，而不是只能用固定的一種。

①響應(yīng)式表單頁

即頁面內(nèi)容區(qū)域?qū)挾葧鶕?jù)畫布放大，但表單元素的尺寸并不會有變化，通常使用左對齊，或者居中對齊。

②定寬表單頁

因?yàn)楸韱卧乇旧聿]有響應(yīng)式的需求，所以推導(dǎo)而來表單頁面本身往往沒有響應(yīng)式，使用起來會更合理、有效。所以定寬表單頁就是內(nèi)容區(qū)域?qū)挾裙潭ǖ捻撁骖愋汀?/p>

③表單抽屜

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

④表單彈窗

還有一種是使用模態(tài)彈窗來實(shí)現(xiàn)，雖然是彈窗，但這種彈窗可以容納大量內(nèi)容，和頁面沒有太大差異。

⑤文章編輯頁

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

5.詳情頁

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

①一般詳情頁

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

②分區(qū)詳情頁

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

③文章詳情頁

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

圖文內(nèi)容的觀看習(xí)慣使得它們沒有響應(yīng)式調(diào)節(jié)的必要，可以在內(nèi)容區(qū)域中定寬居中顯示，也可以定一個定寬的內(nèi)容區(qū)域展示。

④詳情抽屜

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

⑤詳情彈窗

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

6. 登錄頁面

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

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

①居中模式

即登錄的表單、內(nèi)容和 LOGO、標(biāo)語等信息顯示在畫布中央，是最基礎(chǔ)的登錄類型。

②卡片模式

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

③左右分區(qū)模式

想要表現(xiàn)背景圖的話，除了卡片還可以使用分區(qū)的設(shè)計(jì)，即將頁面拆分成左右兩個區(qū)域，一側(cè)放圖，一側(cè)放登錄信息和對應(yīng)表單，要選擇哪種根據(jù)設(shè)計(jì)的風(fēng)格決定。

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

其它的頁面類型或者設(shè)計(jì)，只要在這些基礎(chǔ)上發(fā)散即可。

結(jié)尾

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

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

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

作者：超人的電話亭