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

"你的這個(gè)頁面，一看就不是實(shí)際的工作當(dāng)中的頁面"

"你的這個(gè)設(shè)計(jì)風(fēng)格未免也太過于夸張"

"為什么你設(shè)計(jì)的頁面會長這樣？"

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

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

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

一、視覺重要性

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

1. 顏值漂亮即正義

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

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

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

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

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

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

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

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

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

2. 高密度的信息展示

信息密度，在視覺風(fēng)格當(dāng)中同樣非常重要，因?yàn)槲覀冊诤芏嗑W(wǎng)站上看到的視覺風(fēng)格都是以 「大間距」 的方式來進(jìn)行展示，但是在實(shí)際的工作當(dāng)中你會發(fā)現(xiàn)，這樣的大間距的頁面只會受到來自同事審批時(shí)的"霸凌"。

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

二、風(fēng)格類型

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

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

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

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

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

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

白+灰的設(shè)計(jì)風(fēng)格是非常難把握的，因?yàn)槿绻伾脑O(shè)定稍稍偏差，就很容易形成 頁面發(fā)灰、頁面沒區(qū)分 的情況，這里其實(shí)就會涉及到字體顏色的設(shè)定。

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

2. 深色導(dǎo)航

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

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

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

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

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

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

3. 飛書風(fēng)格

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、顏色差異

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

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

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

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

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

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

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

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

2. 紅色

紅色是我被問到次數(shù)最多的顏色問題。因?yàn)樵谡麄€(gè)頁面當(dāng)中，紅色是與我們常使用的 警告、危險(xiǎn) 等提示信息，所以這個(gè)顏色在我們設(shè)計(jì)當(dāng)中是非常難處理的。

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

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

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

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

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

四、常見誤區(qū)

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

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

1. 圓角大小

圓角大小在我們設(shè)計(jì)時(shí)，千萬不要過大，因?yàn)檫^大的圓角會導(dǎo)致整體的頁面非常的"哇塞"。

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

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

2. 字體大小

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

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

3. 少看Dribbble

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

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

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

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

結(jié)尾

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

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

作者：CE青年Youthce