數(shù)據(jù)可視化大屏不得不說的設(shè)計(jì)奧秘——顏色

0 評論 12097 瀏覽 59 收藏 12 分鐘

編輯導(dǎo)語:如今,我們正在擁抱大數(shù)據(jù)時(shí)代,各行各業(yè)都會(huì)產(chǎn)生以及使用數(shù)據(jù),隨著數(shù)據(jù)對人們的重要性不斷提升,數(shù)據(jù)可視化也逐漸被越來越多的人所應(yīng)用。數(shù)據(jù)可視化不僅是一個(gè)展現(xiàn)數(shù)據(jù)的過程,還能以美觀的方式讓人們輕松的觀察數(shù)據(jù)。要讓數(shù)據(jù)“美”起來,可并不簡單,本文作者為我們總結(jié)了數(shù)據(jù)可視化設(shè)計(jì)中的重要因素——顏色。

美國學(xué)者諾阿·伊林斯基在《數(shù)據(jù)可視化之美》中,總結(jié)可視化審美的標(biāo)準(zhǔn)有四大要素——新穎、充實(shí)、高效和美觀。可視化作品要通過設(shè)計(jì),簡化讀者獲取信息的難度,聚焦重要信息,高效表達(dá)。

在可視化設(shè)計(jì)圈中,大家經(jīng)常討論的一個(gè)話題是如何有效地利用顏色,既要確保畫面美觀又要突出重點(diǎn),讓用戶快速清晰的了解到數(shù)據(jù)傳遞出的重要信息,基于這一問題我們需要思考的是:

  • 我們?nèi)绾未_定合適的主色調(diào)?
  • 如何利用視覺配色效果突出數(shù)據(jù),快速傳遞信息?
  • 如何根據(jù)圖表中的數(shù)據(jù)元素,選擇不同的顏色集?
  • 當(dāng)需要使用甲方爸爸的品牌顏色時(shí),如何有效地使用顏色?

一、如何確定合適的主色調(diào)?

挑選合適的主色調(diào)主要還是根據(jù)整個(gè)可視化設(shè)計(jì)的主題、項(xiàng)目所涉及到的行業(yè)、所用的場景以及用戶的喜好等方面。

正如我們所見,目前數(shù)據(jù)可視化大屏的案例中,深色基調(diào)的居多,淺色基調(diào)的較少。

主要是因?yàn)閿?shù)據(jù)可視化大屏是互聯(lián)網(wǎng)科技的產(chǎn)物,同時(shí)具有互聯(lián)網(wǎng)科技感的元素大多都是深色調(diào);其次,深色相較于白、紅等亮色來說,長期觀看更舒服,不會(huì)有視覺疲勞;另外,對于長期使用的大屏來說,深色背景也比較省電。

不過也有特殊情況、場景下,需要用到特定的色調(diào)。

例如:政企、黨政機(jī)關(guān)等項(xiàng)目需要采用紅色基調(diào);涉及到特殊使用場景的;例如:白天、雪天等需要采用白色基調(diào),森林、青山等需要采用綠色基調(diào)……

確定好大屏的主色調(diào)后,選擇大屏的搭配色也很重要,我們需要注意以下幾點(diǎn):

1. 確保配色容易辨識(shí)與區(qū)分

可以采用色調(diào)、明度差異較大的顏色進(jìn)行搭配組合,便于用戶在使用時(shí)對數(shù)據(jù)一目了然。

有層次感的圖表更易讀,用戶能更快地抓住圖表中的重點(diǎn)信息;相反,扁平圖則缺少流動(dòng)感,讀者相對較難理解。建立視覺層次,我們可以用醒目的顏色突出顯示數(shù)據(jù),并淡化其他元素使其作為背景,淡化元素可采用淡色系或虛線。

例如:

對于明度與色調(diào)的搭配來說,跨度越大,就能承載越多的數(shù)據(jù)。但也不可以用太多,不然畫面會(huì)顯得十分雜亂。

2. 仿照自然配色

在色彩搭配上,還可以考慮采用自然界中長期存在的配色,例如日落的天空漸變色(明黃向深紫色漸變)、極光的配色(綠色或紫色與深藍(lán)色的搭配)、夜空與燈火的顏色搭配(黑金配色)等等。

黑金配色

3. 使用漸變色

漸變配色結(jié)合不同色調(diào),對兩者都最好。

無論你需要2種顏色還是10種,漸變中都能提取出這些顏色,讓可視化圖表感覺自然;同時(shí)保有足夠的色調(diào)與明度差異,以下是一些可供參考的漸變方案:

二、如何利用配色突出數(shù)據(jù)?

1. 巧用冷暖色的對比

如紅、橙、黃都是暖色,藍(lán)、青都是冷色,冷暖色同時(shí)出現(xiàn)在一幅畫面中,會(huì)有強(qiáng)烈的對比效果。


比如這個(gè)大屏右側(cè),以青藍(lán)色地球作為背景,亮橙色的中國地圖與之形成強(qiáng)烈的色彩對比。

2. 利用互補(bǔ)色的對比

如紅與青、黃與藍(lán)都是互補(bǔ)的色彩,它們共同構(gòu)成彩色畫面,也有很強(qiáng)的對比效果。

3. 利用明度的對比

可以用深色烘托鮮明的色彩,或者用鮮明的色彩襯托某一塊暗沉的色彩,都能夠收獲到通過對比突出某種色彩的效果。

亮色靠附近的暗色襯托顯得更加鮮明,其色彩特征表現(xiàn)得更加充分;暗色靠亮背景烘托,也能夠顯得突出和醒目。

三、如何利用圖表中的數(shù)據(jù)元素,選擇不同的顏色集?

不同的事物有不一樣的顏色,世界各國和地區(qū)的人們,因?yàn)榈赜?、歷史文化、宗教背景差異,對顏色的心理感知也不相同。

例如同樣是黃色,在中國古代、印度和古希臘,它都是皇室的顏色,代表了高貴;而在基督教國家則是猶大穿的衣服的顏色,在教徒心中黃色代表了背叛、可恥和卑鄙。

在很多可視化作品中,國家、心情等也都會(huì)有常用的顏色編碼。

再說一個(gè)最常見的可視化例子:股票趨勢圖。

按照人們的固有認(rèn)知,紅色代表漲,綠色代表跌。如果是做股票、金融等可視化趨勢圖的選色一般也采用紅綠對比色。

再比如,想要做人口密度的可視化,通常是采用熱力圖的配色。

按照人們的固有顏色認(rèn)知來對特殊含義的數(shù)據(jù)進(jìn)行配色,讓用戶對數(shù)據(jù)傳遞出的信息更清楚、更明白。

四、當(dāng)需要使用甲方爸爸的品牌顏色時(shí),如何有效地使用顏色?

首先,我們要明確的是甲方爸爸的要求我們能滿足就盡量滿足。如何在利用客戶品牌色的同時(shí),保有大屏的美感與科技感呢?我們來看幾個(gè)案例:

最經(jīng)典的電商大屏:天貓雙十一大屏

天貓品牌主色調(diào)是紅色,這種暖亮色調(diào)如果大面積使用,整個(gè)大屏?xí)@得沒有美感和科技感。碰到這樣的客戶色,我們可以采用局部大范圍使用,通常將組件與品牌標(biāo)志物整合一起出現(xiàn)。

比如天貓大屏就將成交額翻牌器和天貓的貓頭組合成一個(gè)模塊,在大屏上方大面積呈現(xiàn),這樣既保留了大屏的美感又凸顯了品牌感。

被央視點(diǎn)贊的數(shù)據(jù)可視化大屏:良渚古城遺址大屏

這個(gè)大屏以深色背景做底,金色做顯色,就是依照了良渚古城遺址的logo色,也符合良渚古城遺址整個(gè)公園的色彩基調(diào)。

大屏整體以地圖呈現(xiàn),以熱力圖的形式展現(xiàn)公園內(nèi)部的人流聚集度,以交通圖的形式展現(xiàn)內(nèi)部道路的人流密度,公園整體的情況都在大屏上顯現(xiàn),方便工作人員實(shí)時(shí)監(jiān)控。

經(jīng)典配色:中國移動(dòng)的數(shù)字大屏

這塊大屏整個(gè)基調(diào)色彩都是采用的中國移動(dòng)logo的藍(lán)綠配色,同樣藍(lán)綠配色也是許多科技感大屏慣用的色彩。

目前許多互聯(lián)網(wǎng)公司、通信技術(shù)公司、科技公司等等,在設(shè)計(jì)logo時(shí)采用的配色也是科技感十足的顏色。為這類公司設(shè)計(jì)大屏通常直接采用logo配色,并進(jìn)行合理的組合,大屏設(shè)計(jì)保準(zhǔn)不會(huì)出錯(cuò)!

簡單總結(jié)一下:

  • 碰到亮色品牌:嘗試與大屏組件進(jìn)行組合,用品牌亮色凸顯重要展示數(shù)據(jù);
  • 碰到暖色品牌:以暗色做背景底色,暖色做數(shù)據(jù)色,兩者形成對比,大屏更有層次;
  • 碰到科技色品牌:直接采用品牌色搭配,與組件進(jìn)行合理組合,讓視覺效果更舒服。

最后,我想說一下,我們的可視化大屏是為了用戶設(shè)計(jì)的,我們應(yīng)多考慮用戶的特點(diǎn)制作他們易于理解的可視化。切勿過分追求新穎,反而使可視化難以理解,降低了信息接收速度。

 

本文由 @可愛的數(shù)據(jù)控 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!