關(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)品進(jìn)行對比才行~
2. 頁面復(fù)用的程度高
視覺風(fēng)格，在整個 B 端頁面當(dāng)中一定是高度復(fù)用的。
它與移動端設(shè)計不太一樣：移動端確定了風(fēng)格過后，我們在不同的頁面當(dāng)中還是會存在風(fēng)格上的變化。
而在 B 端頁面當(dāng)中，本身就是一個高度復(fù)用的頁面設(shè)計，比如你的表格頁、表單頁、詳情頁、配置頁、工作臺頁，它們之間的風(fēng)格差距非常的小。
因此只要我們能夠確定了視覺風(fēng)格，并驗證這個風(fēng)格本身與我們產(chǎn)品設(shè)定基本相同時，那你的視覺風(fēng)格就不會太差。
2. 高密度的信息展示
信息密度，在視覺風(fēng)格當(dāng)中同樣非常重要，因為我們在很多網(wǎng)站上看到的視覺風(fēng)格都是以 「大間距」 的方式來進(jìn)行展示，但是在實際的工作當(dāng)中你會發(fā)現(xiàn)，這樣的大間距的頁面只會受到來自同事審批時的“霸凌”。
而出現(xiàn)這個現(xiàn)象的原因是我們在實際的工作當(dāng)中，信息的密度是非常之高（產(chǎn)品經(jīng)理恨不得在每一個空白的地方都放上 按鈕、文字）因此當(dāng)我們看到這種風(fēng)格的頁面你是，首先得感覺就是這是一個概念方案，不具備任何的落地效果。因此視覺風(fēng)格一定是要滿足高密度的信息展示。
常見的視覺風(fēng)格有哪些
說了那么多，我們來分析一下常見的視覺風(fēng)格有哪些？
首先說明，以下的視覺風(fēng)格名稱都是 CE 平時溝通時所使用的詞匯，切勿較真。
1. 白+灰風(fēng)格
純白風(fēng)格在我們看來就是以：白、灰、分割線 為主的一種視覺風(fēng)格。
在整個頁面當(dāng)中，首先會通過固定的灰色，去區(qū)分不同模塊之間的關(guān)系，進(jìn)而劃分頁面區(qū)域。同時通過 主題色 在頁面當(dāng)中進(jìn)行點綴，進(jìn)而讓整個頁面的視線受到引導(dǎo)，從而形成重要信息的頁面呈現(xiàn)。
白+灰的設(shè)計風(fēng)格是非常難把握的，因為如果顏色的設(shè)定稍稍偏差，就很容易形成 頁面發(fā)灰、頁面沒區(qū)分 的情況，這里其實就會涉及到字體顏色的設(shè)定。
而關(guān)于 白+灰 的風(fēng)格，其實目前在很多產(chǎn)品當(dāng)中都能夠看到它們的身影，比如：氚云、簡道云、Coding、悟空 CRM 等等...
2. 深色導(dǎo)航
如果不想犯錯，那你使用深色導(dǎo)航的方式就一定沒有問題。
深色導(dǎo)航作為 B 端風(fēng)格最明顯的一種風(fēng)格，其主要的設(shè)計就是將導(dǎo)航菜單部分的設(shè)計為深色，進(jìn)而去區(qū)分頁面之間的信息關(guān)系。
這種方式無論你是頂部導(dǎo)航、側(cè)邊導(dǎo)航、還是混合導(dǎo)航，它的風(fēng)格都是非常固定，并且設(shè)計起來難度也相對較低。
而在深色導(dǎo)航的設(shè)計過程中，我們要注意不同層級下的深色使用，比如在一個側(cè)邊導(dǎo)航當(dāng)中，我有兩個層級的深色，這時候顏色的設(shè)定一定要有深淺的區(qū)分，這樣才能夠讓用戶知道導(dǎo)航的分割。
又比如，在一個混合導(dǎo)航當(dāng)中，我究竟應(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)格的特點是 將頁面當(dāng)中內(nèi)容部分的設(shè)計突出，其余的導(dǎo)航菜單部分變灰，進(jìn)而形成一種聚焦于內(nèi)容的設(shè)計形式，它和 白+灰 的風(fēng)格很像，但是不同的是缺少了分割線與投影等方式進(jìn)行的大面積分割，這樣能夠讓整體看上去更干凈、更整潔。
而關(guān)于飛書風(fēng)格的設(shè)計方案， 現(xiàn)在了解到的產(chǎn)品制作成這樣的風(fēng)格還相對較少，不過在我們 3 群的知名群友 沙丁魚 的花瓣當(dāng)中，還是能夠?qū)ふ业揭恍┲虢z馬跡，它用這種風(fēng)格落地了一整套的頁面，看上去效果還不錯。我放了一些截圖，感興趣的同學(xué)可以放大過后進(jìn)行查看。
4. 客戶端風(fēng)格
客戶端的風(fēng)格相對來說還是較為少見，因為想要使用這種風(fēng)格，大概率是要將目前的網(wǎng)頁端的產(chǎn)品進(jìn)行客戶端化。客戶端風(fēng)格的特點就是以左側(cè)導(dǎo)航為主，并且將左側(cè)導(dǎo)航的圖標(biāo)進(jìn)行夸張的呈現(xiàn)。
對于客戶端風(fēng)格，需要了解的是它通常只有一級導(dǎo)航菜單，因此在設(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è)計時，往往不要做得太前沿，考慮更多的是嚴(yán)肅 同時又要 整潔 炫酷 （是的，你沒有聽錯）
因此 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)格考驗的完完全全就是你是否會用光效、素材
光效：在頁面當(dāng)中，需要有很多光效來進(jìn)行頁面的點綴，比如同一個頁面當(dāng)中，有無光效會存在明顯的差異，這就需要你學(xué)會在頁面當(dāng)中各個地方考慮光效的使用。比如頁面的標(biāo)題、視覺分割、圖標(biāo) 這些地方的使用后提升整體的視覺效果。
素材：在很多酷炫的風(fēng)格當(dāng)中，我們都需要去考慮炫酷素材的使用。因為這是一種能夠直接提升視覺風(fēng)格的最有效的辦法。
在整個頁面當(dāng)中，我們可以把頁面分為 四個層級，分別是：背景層、素材層、組件層、提示層，在這個四個層級里面素材的使用無疑是能夠快速加分的一個選項，比如一個頁面當(dāng)中兩張完全不同風(fēng)格的素材，在使用上的效果可以說的天差地別
雖然酷炫的風(fēng)格我本身在做設(shè)計師并不太喜歡，但是 客戶的需求、業(yè)務(wù)的壓力，才是我們做設(shè)計的最大動力，而自己是否喜歡則顯得并不是那么重要。
類似的3D地圖素材生成器：
不同主題顏色如何搭配頁面
在整個頁面當(dāng)中我們會將不同的主題色進(jìn)行區(qū)分，而主題色的不同會影響到我們設(shè)計思路，因此這里給大家提供一些設(shè)計思路。
1. 顏色的整體風(fēng)格
首先關(guān)于顏色，我們主要有：藍(lán)色、紅色、綠色、橙色。其中大多數(shù)顏色我們都可以通過 白色 + 顏色風(fēng)格 去做設(shè)計
比如橙色，其實就是 橙色+白色 就能去解決，我們可以看紛享銷客 它的設(shè)計頁面
同樣，綠色其實就是 綠色+白色 去解決，我們可以去看 神策數(shù)據(jù)
大家發(fā)現(xiàn)他們的頁面都是 主題色只占其實一小部分，大多數(shù)情況都是以白色頁面為主，這樣就不會出現(xiàn)顏色沖突的尷尬。
而這里，最復(fù)雜的便是紅色。
2. 紅色
紅色是我被問到次數(shù)最多的顏色問題。因為在整個頁面當(dāng)中，紅色是與我們常使用的 警告、危險 等提示信息，所以這個顏色在我們設(shè)計當(dāng)中是非常難處理的。
無論是頁面當(dāng)中紅色與其他顏色的搭配，又或者是要將整體頁面呈現(xiàn)出來，都需要你有過處理的經(jīng)驗才行。這里給大家分享兩個處理紅色主題色的小方法：
① 管理后臺品牌獨立：因為很多時候，我們 管理后臺/B 端業(yè)務(wù)，可以獨立為一個新的品牌顏色，這樣首先能夠快速傳達(dá)給用戶產(chǎn)品線的變化，其次就能夠巧妙化解紅色所帶來的尷尬。比如淘寶與千牛、京東與京麥。
② 紅白搭配：如果第一種方法不能解決，那也就意味著紅色確實沒辦法避免掉，那這時候我們考慮的就是在現(xiàn)有的基礎(chǔ)上進(jìn)行相應(yīng)的優(yōu)化。因此我們能選擇的，可能就是紅白配色，將頁面進(jìn)行繪制。
比如以百度愛番番為例，在品牌上已經(jīng)確定是一個以紅色為主的視覺形象，作為設(shè)計師，我們能夠去優(yōu)化的就是紅色在整個頁面的出現(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)色）
在 B 端頁面設(shè)計時，哪些誤區(qū)容易犯？
當(dāng)然在我們設(shè)計當(dāng)中，同樣會存在對應(yīng)誤區(qū)，每一個誤區(qū)大家都要竟可能避免
1. 圓角大小
圓角大小在我們設(shè)計時，千萬不要過大，因為過大的圓角會導(dǎo)致整體的頁面非常的“哇塞”。
因為我們在設(shè)計時，通常大小鎖定在 2px-6px 之間，沒有特殊要求一般在 4px 即可，這樣能夠保證 整體的品牌調(diào)性，同時也不會有太多直楞楞的卡片分割
當(dāng)然在去說圓角的時候，并不是我確定了一個圓角過后所有的頁面都要保持一致，你可以在一些需要突出區(qū)分的地方，使用不同的圓角大小。
2. 字體大小
之前收到一個同學(xué)說，將字體大小設(shè)定為：16px、18px、20px，其實我們在實際的工作當(dāng)中，字體的大小都是有嚴(yán)格限制的，通常為 12、13、14、16、18
除非你的承載設(shè)備、使用人群（年齡偏大）發(fā)生變化，否者這個字體大小不需要任何調(diào)整
3. 少看Dribbble
Dribbble 說實話，一定要少看，并不是說追波的內(nèi)容不好，其實你能夠在 Dribbble 當(dāng)中學(xué)習(xí)到很多，比如一些元素的排版、樣式上的微創(chuàng)新。
但是在 Dribbble 當(dāng)中，出現(xiàn)的更多還是夸張的視覺風(fēng)格，因此建議同學(xué)們平時在工作當(dāng)中盡量少看Dribbble，這樣能夠讓你的產(chǎn)出更偏向?qū)嶋H的工作風(fēng)格
我平常使用Dribbble都是以了解最新趨勢，然后 emmmm，（攤牌了，其實做了 B 端過后，很少再去看 Dribbble 的設(shè)計稿了 頻率應(yīng)該是一個月看一次，僅此而已）
其實有時候 Behance 的頁面真的要比 Dribbble 好很多，至少能落地一些。
B 端產(chǎn)品當(dāng)中的視覺部分，其實對于我們來說就是一個頁面的信息排版。排版的規(guī)則都已經(jīng)有了固定的安排，比如：表格頁、表單頁、詳情頁、配置頁、工作臺頁，而這些頁面只要你能夠?qū)㈨撁嫘畔⑴帕星宄?，確定一個合理的設(shè)計風(fēng)格，這就是一個非常合格的設(shè)計稿。
我們在設(shè)計時盡可能控制你的設(shè)計欲望，圓角、字體、風(fēng)格 上進(jìn)行合理的控制，相信你能做出更好的設(shè)計頁面。
本文純屬分享學(xué)習(xí)，如有侵權(quán)，請聯(lián)系南京品豐文化發(fā)展有限公司刪除，謝謝！
蘇ICP備2022033810號-1
