前言
色彩情緒
一提到藍色就會想到科技、數(shù)據(jù)、智能等關(guān)鍵詞,非常貼合可視化的調(diào)性。這也是為什么在可視化設(shè)計中大多數(shù)會采用藍色作為主色的原因。對色彩情緒有了一定的了解這也為我們做設(shè)計起到事半功倍的效果。
顏色映射原理
飽和度(S):飽和度也稱純度,反應(yīng)含色成分的比重。指色彩的鮮艷程度,飽和度越高,表現(xiàn)越鮮明,飽和度較低,表現(xiàn)則較黯淡。
明度(B):明度指色彩的亮度。顏色有深淺、明暗的變化。比如深黃、中黃、淡黃、檸檬黃等黃色在明度上不一樣,紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等紅顏色在亮度上也不盡相同。這些顏色在明暗、深淺上的不同變化,也就是色彩的又一重要特征——明度變化。
色彩的明度變化有許多種情況:
一、不同色相之間的明度變化。如:白比黃亮、黃比橙亮、橙比紅亮、紅比紫亮、紫比黑亮;
二、在某種顏色中加白色,亮度就會逐漸提高,加黑色亮度就會變暗,但同時它們的純度(顏色的飽和度)就會降低
情緒版的運用
情緒板,簡單來說就是由圖像,視頻和其他視覺元素組成、拼貼在一起的想法和過程,主要目的是講述項目背后的故事,作為設(shè)計方向形式上的參考。同時情緒板也可以在配色方案、視覺風(fēng)格、質(zhì)量材質(zhì),作為設(shè)計指導(dǎo),幫助設(shè)計師提供一些設(shè)計方案和指引。
(圖片源自網(wǎng)絡(luò),如侵刪)
以上是情緒版的一個實操流程方法,情緒版能幫助我們了解各種顏色或者色相的氣質(zhì)和情感屬性,指導(dǎo)我們在設(shè)計中更準確的運用顏色,讓我們的設(shè)計做到有理有據(jù)。也能有效的避免客戶去質(zhì)疑你設(shè)計準確性和專業(yè)度,提高設(shè)計的話語權(quán)。
下面以馬卡龍色舉例,在我們基于關(guān)鍵詞找到參考圖片后如何更快速的去提取顏色。
為了精準的提取顏色,把圖片拖入ps里打開執(zhí)行 濾鏡-像素化-馬賽克(馬賽克值調(diào)整到最大)
基于轉(zhuǎn)換后的顏色進行顏色提取,得到最終的主色的效果。上圖中的顏色雖然多,但搭配起來卻非常的舒服,不管提取幾種顏色搭配,都不會顯得花。
顏色千變?nèi)f化,我們學(xué)色彩的目的不是為了展示色彩,而是表達色彩背后的含義。不同的顏色代表了不同的意義,而這需要在實踐中不斷的積累。
推薦一個色彩神器 Picular
Picular 是幫助使用者找色彩,不同于其他的配色工具,只要在 Picular 輸入任何名詞動詞或想得到的詞,它就會顯示出一堆相關(guān)色彩。
網(wǎng)站鏈接:https://picular.co/
搜索結(jié)果非常干脆,直接給你一堆顏色色塊,每個色塊左下角是色號。色塊右下角的小圖標,將鼠標移動上去會顯示該顏色是從哪張圖片取色,雖然有模糊效果,但 Picular 告訴使用者確實是從搜索關(guān)鍵字去找出圖片,總體Picular 是非常有趣的色彩搜索工具,大家可以有時間去試試。
大屏中的顏色
背景色
可視化設(shè)計中大屏設(shè)備普遍用深色作為背景色,以減少屏幕拖尾,觀眾在視覺上也不會覺得刺眼。另外深色背景更能聚焦視覺,利用色調(diào)與明度的變化,能夠保證可視化圖表的清晰辨識度,便于突出內(nèi)容,最后也方便做出一些流光、粒子等酷炫的效果。
主色
可視化大屏是以數(shù)據(jù)展示為主,是將復(fù)雜的數(shù)據(jù)通過數(shù)據(jù)圖表等設(shè)計的處理方法讓數(shù)據(jù)更加的直觀。所以在選擇主色的時候就會把科技 數(shù)據(jù) 作為關(guān)鍵詞,通過情緒版得出來的結(jié)果也是以藍色為主,同樣藍色也可以在明度、飽和度等方面做區(qū)分。這里可以結(jié)合公司品牌色(品牌色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺元素之一)和產(chǎn)品背景 調(diào)性等方面去做考慮顏色的運用配比。
圖表顏色
圖表的配色一般避免使用過多的顏色雖然不同顏色可以讓用戶輕松區(qū)分數(shù)據(jù)類別,但圖表中用色過多,卻會給用戶造成困擾,不利于用戶理解數(shù)據(jù)。原則上同一圖表最多使用 7 種顏色。若需使用更多顏色,建議考慮其他圖表形式或分組展示。
另外要保持顏色一致性,如果你的整份文件里包含很多圖表,那么在不同的圖表中,同一個類目最好用同一種顏色。
同樣的數(shù)據(jù),映射規(guī)則盡量保持為一種。例如當使用柱形的高度來映射數(shù)據(jù)時,如果想要通過顏色去區(qū)分,那么圖表顏色就會有點多,會增加用戶的認知負擔(dān),頁面也會顯得花、亂。
具體圖表的使用思路可以參照下面這個圖,這里就不一一展開講了。
文字顏色
文字的配色方面因為是深色背景所以淺色文字更顯得突出,通常在淺色背景下的深灰、中灰、淺灰三種文字顏色的層級關(guān)系到了大屏上正好相反 淺灰代表層級比較重要的,中灰次之, 深灰最弱。文字配色中應(yīng)注意的點不建議文字用純白可以稍微帶一點顏色傾向(深色背景下純白色文字會顯得比較生硬,不建議使用)。
總結(jié)
以上講了可視化大屏中顏色的一些運用方法和需要注意的點,其實配色的方法有很多,關(guān)鍵就是在于自己的一個吸收與運用的過程,首先你要學(xué)會一些配色的方法,知道什么樣的色彩搭配可以很好的營造跟表達什么樣的情緒,這里可以根據(jù)自己想要做的風(fēng)格去找一些優(yōu)秀的色彩搭配,分析他們色彩搭配的比例,然后合理的運營到自己的設(shè)計之中。歡迎大家溝通交流。
聯(lián)系客服