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

往期回顧：

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

“你的這個設(shè)計風(fēng)格未免也太過于夸張”

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

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

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

因此我們今天來說一說，關(guān)于 B 端產(chǎn)品，究竟需要什么樣的設(shè)計風(fēng)格？什么樣的風(fēng)格能夠被大眾所接受。

一、視覺重要性

關(guān)于視覺風(fēng)格對整體設(shè)計的影響

1. 顏值漂亮即正義

關(guān)于 B 端的視覺風(fēng)格，我一直都秉承著這樣一個態(tài)度：業(yè)務(wù)、交互我們先可以不聊，如果你的視覺非常厲害，能夠做出風(fēng)格十分干凈的產(chǎn)品頁面的話，那 業(yè)務(wù)、交互 我們都可以先放一放。

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

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

所以設(shè)計頁面不要你以為好看，要嘗試和市面上大多數(shù) B 端產(chǎn)品進行對比才行~

2. 頁面復(fù)用的程度高

視覺風(fēng)格，在整個 B 端頁面當中一定是高度復(fù)用的。

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

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

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

2. 高密度的信息展示

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

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

二、風(fēng)格類型

常見的視覺風(fēng)格有哪些

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

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

1. 白+灰風(fēng)格

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

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

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

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

2. 深色導(dǎo)航

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

深色導(dǎo)航作為 B 端風(fēng)格最明顯的一種風(fēng)格，其主要的設(shè)計就是將導(dǎo)航菜單部分的設(shè)計為深色，進而去區(qū)分頁面之間的信息關(guān)系。

這種方式無論你是頂部導(dǎo)航、側(cè)邊導(dǎo)航、還是混合導(dǎo)航，它的風(fēng)格都是非常固定，并且設(shè)計起來難度也相對較低。

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

又比如，在一個混合導(dǎo)航當中，我究竟應(yīng)該如何設(shè)計頂部導(dǎo)航、側(cè)邊導(dǎo)航、三級導(dǎo)航之間的關(guān)系，通常就會去考慮深淺變化+投影變化。

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

3. 飛書風(fēng)格

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

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

而關(guān)于飛書風(fēng)格的設(shè)計方案， 現(xiàn)在了解到的產(chǎn)品制作成這樣的風(fēng)格還相對較少，不過在我們 3 群的知名群友 沙丁魚 的花瓣當中，還是能夠?qū)ふ业揭恍┲虢z馬跡，它用這種風(fēng)格落地了一整套的頁面，看上去效果還不錯。我放了一些截圖，感興趣的同學(xué)可以放大過后進行查看。

4. 客戶端風(fēng)格

客戶端的風(fēng)格相對來說還是較為少見，因為想要使用這種風(fēng)格，大概率是要將目前的網(wǎng)頁端的產(chǎn)品進行客戶端化?？蛻舳孙L(fēng)格的特點就是以左側(cè)導(dǎo)航為主，并且將左側(cè)導(dǎo)航的圖標進行夸張的呈現(xiàn)。

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

客戶端的風(fēng)格，大家可以參考：飛書、釘釘?shù)犬a(chǎn)品，它們的風(fēng)格都是以這種頁面為主

5. 政企嚴肅風(fēng)

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

因此 ToG 的風(fēng)格我們沒有辦法總結(jié)，只能說跟著領(lǐng)導(dǎo)喜好走。案例圖片也辦法放，太敏感大家理解一下。

也可以看看這篇：

6. 酷炫后臺風(fēng)格

我也見過很多系統(tǒng)是在大屏設(shè)計之上的，因此很多業(yè)務(wù)系統(tǒng)從大眾設(shè)計師理解的互聯(lián)網(wǎng)、干凈，變?yōu)楝F(xiàn)在的科技、炫酷。

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

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

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

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

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

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

三、顏色差異

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

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

1. 顏色的整體風(fēng)格

首先關(guān)于顏色，我們主要有：藍色、紅色、綠色、橙色。其中大多數(shù)顏色我們都可以通過 白色 + 顏色風(fēng)格 去做設(shè)計

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

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

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

而這里，最復(fù)雜的便是紅色。

2. 紅色

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

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

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

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

比如以百度愛番番為例，在品牌上已經(jīng)確定是一個以紅色為主的視覺形象，作為設(shè)計師，我們能夠去優(yōu)化的就是紅色在整個頁面的出現(xiàn)比例和出現(xiàn)位置。

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

四、常見誤區(qū)

在 B 端頁面設(shè)計時，哪些誤區(qū)容易犯？

當然在我們設(shè)計當中，同樣會存在對應(yīng)誤區(qū)，每一個誤區(qū)大家都要竟可能避免

1. 圓角大小

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

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

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

2. 字體大小

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

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

3. 少看Dribbble

Dribbble 說實話，一定要少看，并不是說追波的內(nèi)容不好，其實你能夠在 Dribbble 當中學(xué)習(xí)到很多，比如一些元素的排版、樣式上的微創(chuàng)新。

但是在 Dribbble 當中，出現(xiàn)的更多還是夸張的視覺風(fēng)格，因此建議同學(xué)們平時在工作當中盡量少看Dribbble，這樣能夠讓你的產(chǎn)出更偏向?qū)嶋H的工作風(fēng)格

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

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

結(jié)尾

B 端產(chǎn)品當中的視覺部分，其實對于我們來說就是一個頁面的信息排版。排版的規(guī)則都已經(jīng)有了固定的安排，比如：表格頁、表單頁、詳情頁、配置頁、工作臺頁，而這些頁面只要你能夠?qū)㈨撁嫘畔⑴帕星宄?，確定一個合理的設(shè)計風(fēng)格，這就是一個非常合格的設(shè)計稿。

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

歡迎關(guān)注作者的微信公眾號： CE青年Youthce