編者按：B端設計常見的風格和配色方案有哪些？本文總結了6種B端設計風格和多個色彩搭配組合。

往期回顧：

“你的這個頁面，一看就不是實際的工作當中的頁面”

“你的這個設計風格未免也太過于夸張”

“為什么你設計的頁面會長這樣？”

這是看到很多設計師私聊發給我作品集過后，我的回答。而這種現象，現在越來越多了。很多設計師都拿著做 C 端產品的方式來去設計 B 端的頁面，也就導致你做出來的頁面始終缺乏 B 端產品的調性。

比如最近改版 薪人薪事，看到很多人在評論區里吐槽做得很丑，雖然確實做得不好看，但嘗試讓吐槽的人去做設計，沒想到給到我的竟然是類似 Dribbble 的這種風格，So...

因此我們今天來說一說，關于 B 端產品，究竟需要什么樣的設計風格？什么樣的風格能夠被大眾所接受。

一、視覺重要性

關于視覺風格對整體設計的影響

1. 顏值漂亮即正義

關于 B 端的視覺風格，我一直都秉承著這樣一個態度：業務、交互我們先可以不聊，如果你的視覺非常厲害，能夠做出風格十分干凈的產品頁面的話，那 業務、交互 我們都可以先放一放。

因為頁面設計的好壞，我們能夠一眼分辨，這其實就決定了你的設計下限。即使你不懂業務、不懂交互，至少頁面畫得好看，那已經超越市面上 80% 的設計師。

那些和我自稱資深的設計師，感覺自己視覺還不錯，結果把自己的設計頁面發出來，我通常都是這個表情

所以設計頁面不要你以為好看，要嘗試和市面上大多數 B 端產品進行對比才行~

2. 頁面復用的程度高

視覺風格，在整個 B 端頁面當中一定是高度復用的。

它與移動端設計不太一樣：移動端確定了風格過后，我們在不同的頁面當中還是會存在風格上的變化。

而在 B 端頁面當中，本身就是一個高度復用的頁面設計，比如你的表格頁、表單頁、詳情頁、配置頁、工作臺頁，它們之間的風格差距非常的小。

因此只要我們能夠確定了視覺風格，并驗證這個風格本身與我們產品設定基本相同時，那你的視覺風格就不會太差。

2. 高密度的信息展示

信息密度，在視覺風格當中同樣非常重要，因為我們在很多網站上看到的視覺風格都是以 「大間距」 的方式來進行展示，但是在實際的工作當中你會發現，這樣的大間距的頁面只會受到來自同事審批時的“霸凌”。

而出現這個現象的原因是我們在實際的工作當中，信息的密度是非常之高（產品經理恨不得在每一個空白的地方都放上 按鈕、文字）因此當我們看到這種風格的頁面你是，首先得感覺就是這是一個概念方案，不具備任何的落地效果。因此視覺風格一定是要滿足高密度的信息展示。

二、風格類型

常見的視覺風格有哪些

說了那么多，我們來分析一下常見的視覺風格有哪些？

首先說明，以下的視覺風格名稱都是 CE 平時溝通時所使用的詞匯，切勿較真。

1. 白+灰風格

純白風格在我們看來就是以：白、灰、分割線 為主的一種視覺風格。

在整個頁面當中，首先會通過固定的灰色，去區分不同模塊之間的關系，進而劃分頁面區域。同時通過 主題色 在頁面當中進行點綴，進而讓整個頁面的視線受到引導，從而形成重要信息的頁面呈現。

白+灰的設計風格是非常難把握的，因為如果顏色的設定稍稍偏差，就很容易形成 頁面發灰、頁面沒區分 的情況，這里其實就會涉及到字體顏色的設定。

而關于 白+灰 的風格，其實目前在很多產品當中都能夠看到它們的身影，比如：氚云、簡道云、Coding、悟空 CRM 等等...

2. 深色導航

如果不想犯錯，那你使用深色導航的方式就一定沒有問題。

深色導航作為 B 端風格最明顯的一種風格，其主要的設計就是將導航菜單部分的設計為深色，進而去區分頁面之間的信息關系。

這種方式無論你是頂部導航、側邊導航、還是混合導航，它的風格都是非常固定，并且設計起來難度也相對較低。

而在深色導航的設計過程中，我們要注意不同層級下的深色使用，比如在一個側邊導航當中，我有兩個層級的深色，這時候顏色的設定一定要有深淺的區分，這樣才能夠讓用戶知道導航的分割。

又比如，在一個混合導航當中，我究竟應該如何設計頂部導航、側邊導航、三級導航之間的關系，通常就會去考慮深淺變化+投影變化。

深色導航能夠在很多產品上看到他的身影，比如：ONES、京東云、微盟、有贊、i 人事、小鵝通，因此深色導航也非常的普遍。

3. 飛書風格

其實最近飛書管理后臺的改版，將原本的深色導航改版為了一種全新的設計風格。因為在網上對于這種風格的描述還相對較少，因此將其成為 飛書風格。

飛書風格的特點是 將頁面當中內容部分的設計突出，其余的導航菜單部分變灰，進而形成一種聚焦于內容的設計形式，它和 白+灰 的風格很像，但是不同的是缺少了分割線與投影等方式進行的大面積分割，這樣能夠讓整體看上去更干凈、更整潔。

而關于飛書風格的設計方案， 現在了解到的產品制作成這樣的風格還相對較少，不過在我們 3 群的知名群友 沙丁魚 的花瓣當中，還是能夠尋找到一些蛛絲馬跡，它用這種風格落地了一整套的頁面，看上去效果還不錯。我放了一些截圖，感興趣的同學可以放大過后進行查看。

4. 客戶端風格

客戶端的風格相對來說還是較為少見，因為想要使用這種風格，大概率是要將目前的網頁端的產品進行客戶端化。客戶端風格的特點就是以左側導航為主，并且將左側導航的圖標進行夸張的呈現。

對于客戶端風格，需要了解的是它通常只有一級導航菜單，因此在設計時，我們需要考慮自己的頁面是否適合。

客戶端的風格，大家可以參考：飛書、釘釘等產品，它們的風格都是以這種頁面為主

5. 政企嚴肅風

政企風格相對來說是一種較難處理的風格，一方面政的要求完全由關鍵決策領導人的喜好來決定，因此我們在去做設計時，往往不要做得太前沿，考慮更多的是嚴肅 同時又要 整潔 炫酷 （是的，你沒有聽錯）

因此 ToG 的風格我們沒有辦法總結，只能說跟著領導喜好走。案例圖片也辦法放，太敏感大家理解一下。

也可以看看這篇：

6. 酷炫后臺風格

我也見過很多系統是在大屏設計之上的，因此很多業務系統從大眾設計師理解的互聯網、干凈，變為現在的科技、炫酷。

這種風格考驗的完完全全就是你是否會用光效、素材

光效：在頁面當中，需要有很多光效來進行頁面的點綴，比如同一個頁面當中，有無光效會存在明顯的差異，這就需要你學會在頁面當中各個地方考慮光效的使用。比如頁面的標題、視覺分割、圖標 這些地方的使用后提升整體的視覺效果。

素材：在很多酷炫的風格當中，我們都需要去考慮炫酷素材的使用。因為這是一種能夠直接提升視覺風格的最有效的辦法。

在整個頁面當中，我們可以把頁面分為 四個層級，分別是：背景層、素材層、組件層、提示層，在這個四個層級里面素材的使用無疑是能夠快速加分的一個選項，比如一個頁面當中兩張完全不同風格的素材，在使用上的效果可以說的天差地別

雖然酷炫的風格我本身在做設計師并不太喜歡，但是 客戶的需求、業務的壓力，才是我們做設計的最大動力，而自己是否喜歡則顯得并不是那么重要。

類似的3D地圖素材生成器：

三、顏色差異

不同主題顏色如何搭配頁面

在整個頁面當中我們會將不同的主題色進行區分，而主題色的不同會影響到我們設計思路，因此這里給大家提供一些設計思路。

1. 顏色的整體風格

首先關于顏色，我們主要有：藍色、紅色、綠色、橙色。其中大多數顏色我們都可以通過 白色 + 顏色風格 去做設計

比如橙色，其實就是 橙色+白色 就能去解決，我們可以看紛享銷客 它的設計頁面

同樣，綠色其實就是 綠色+白色 去解決，我們可以去看 神策數據

大家發現他們的頁面都是 主題色只占其實一小部分，大多數情況都是以白色頁面為主，這樣就不會出現顏色沖突的尷尬。

而這里，最復雜的便是紅色。

2. 紅色

紅色是我被問到次數最多的顏色問題。因為在整個頁面當中，紅色是與我們常使用的 警告、危險 等提示信息，所以這個顏色在我們設計當中是非常難處理的。

無論是頁面當中紅色與其他顏色的搭配，又或者是要將整體頁面呈現出來，都需要你有過處理的經驗才行。這里給大家分享兩個處理紅色主題色的小方法：

① 管理后臺品牌獨立：因為很多時候，我們 管理后臺/B 端業務，可以獨立為一個新的品牌顏色，這樣首先能夠快速傳達給用戶產品線的變化，其次就能夠巧妙化解紅色所帶來的尷尬。比如淘寶與千牛、京東與京麥。

② 紅白搭配：如果第一種方法不能解決，那也就意味著紅色確實沒辦法避免掉，那這時候我們考慮的就是在現有的基礎上進行相應的優化。因此我們能選擇的，可能就是紅白配色，將頁面進行繪制。

比如以百度愛番番為例，在品牌上已經確定是一個以紅色為主的視覺形象，作為設計師，我們能夠去優化的就是紅色在整個頁面的出現比例和出現位置。

而愛番番考慮的是將頁面當中最主要的顏色進行呈現，其他的頁面信息弱化，進行首先讓用戶知道，我們強調的主要操作信息究竟在哪？其次通過藍色的穿插，能夠保證頁面當中除了紅色為主之外，還會有其他的顏色作為補充（比如頁面當中的藍色）

四、常見誤區

在 B 端頁面設計時，哪些誤區容易犯？

當然在我們設計當中，同樣會存在對應誤區，每一個誤區大家都要竟可能避免

1. 圓角大小

圓角大小在我們設計時，千萬不要過大，因為過大的圓角會導致整體的頁面非常的“哇塞”。

因為我們在設計時，通常大小鎖定在 2px-6px 之間，沒有特殊要求一般在 4px 即可，這樣能夠保證 整體的品牌調性，同時也不會有太多直楞楞的卡片分割

當然在去說圓角的時候，并不是我確定了一個圓角過后所有的頁面都要保持一致，你可以在一些需要突出區分的地方，使用不同的圓角大小。

2. 字體大小

之前收到一個同學說，將字體大小設定為：16px、18px、20px，其實我們在實際的工作當中，字體的大小都是有嚴格限制的，通常為 12、13、14、16、18

除非你的承載設備、使用人群（年齡偏大）發生變化，否者這個字體大小不需要任何調整

3. 少看Dribbble

Dribbble 說實話，一定要少看，并不是說追波的內容不好，其實你能夠在 Dribbble 當中學習到很多，比如一些元素的排版、樣式上的微創新。

但是在 Dribbble 當中，出現的更多還是夸張的視覺風格，因此建議同學們平時在工作當中盡量少看Dribbble，這樣能夠讓你的產出更偏向實際的工作風格

我平常使用Dribbble都是以了解最新趨勢，然后 emmmm，（攤牌了，其實做了 B 端過后，很少再去看 Dribbble 的設計稿了 頻率應該是一個月看一次，僅此而已）

其實有時候 Behance 的頁面真的要比 Dribbble 好很多，至少能落地一些。

結尾

B 端產品當中的視覺部分，其實對于我們來說就是一個頁面的信息排版。排版的規則都已經有了固定的安排，比如：表格頁、表單頁、詳情頁、配置頁、工作臺頁，而這些頁面只要你能夠將頁面信息排列清楚，確定一個合理的設計風格，這就是一個非常合格的設計稿。

我們在設計時盡可能控制你的設計欲望，圓角、字體、風格 上進行合理的控制，相信你能做出更好的設計頁面。

歡迎關注作者的微信公眾號： CE青年Youthce