首頁 > 繪畫

系列文章:分析師需要知道的色彩知識

作者:由 JaryYuan 發表于 繪畫日期:2022-08-09

當rgb全為1時顏色是什麼

系列文章:分析師需要知道的色彩知識

新書熱銷中,京東、噹噹搜尋作者名

字「袁佳林」

即可購買

作為資料分析師,日常接觸和使用到配色的工作會以

分析報告

圖表配色

為主,目的都是為了讓內容清晰美觀。其中分析報告一般會以Word文件或PPT為主,這時的配色和資料分析之間不是那麼緊密,只要符合通用的設計原則即可。而圖表配色,如何根據資料表現選擇合適的調色盤,以及資料的標註,則與資料分析相關的專業知識結合更緊密。

本文會先從色彩的基礎知識開始,幫助大家瞭解色彩的作用與選擇。以更好的完成通用的分析報告配色,在之後的文章裡,我們會進一步的圍繞圖表配色來給大家做講解。

01.

色彩傳遞了資訊

當在我們走在街道上,周圍的一切都在向我們傳遞資訊。文字、圖片、氣味、光線,和這一切的綜合,告訴了我們周圍是怎樣的環境,在意識或是潛意識中,我們都在透過這些資訊進行判斷。

設計中也是一樣。作為一個非常重要的元素,顏色給觀眾傳遞了資訊。它告訴觀眾:頁面上元素的關係,或是設計師想要表現的價值判斷。設計師,在設計圖表的時候,要意識到顏色也是作為傳遞資訊的一種工具存在,這個工具的意義並不會小於頁面上的文字和圖片。

系列文章:分析師需要知道的色彩知識

下面的一些例子可以說明顏色的一些作用,大家感受這樣的色彩運用帶給你什麼感受。如果沒有這些色彩,是否會影響意義的表達、是否會讓設計難以理解。色彩在裝飾和傳遞資訊兩個方面,各自的表現如何。

示例圖片的文字部分可能會模糊不清,但我們在考慮色彩運用的時候,可以先略過文字的表達,從遠處看這樣的設計會給我們什麼樣的感受。

1) 強調部分資訊

這個設計中運用了灰色和橙色兩種顏色(如果黑白不算一種顏色的話),並且橙色在這個設計中強調了部分資訊。比如,第一個和第二個正方體被塗成了橙色,我們一眼就可以在圖中看到這個正方體。即使在還沒有完全理解這張圖的情況下,我們也可以猜測,它想要強調這個正方體是一個3D的空間。在其他的正方體裡,橙色被當作了一種標註的顏色,把重要的資訊強調了出來。

系列文章:分析師需要知道的色彩知識

Ashari Architects, Daarbast Cafe design。

2) 幫助做視覺上的區分

這個例子,設計師是想把資料用視覺方式呈現。用了黃色、橙色,和中間疊加的紅色,幫助我們做視覺上的區分。在這種設計目標下,我們不用色彩,黑白灰也可以幫助觀眾做視覺上的區分。但使用了這些飽和度和高的顏色後,視覺上的感覺就強烈許多。

系列文章:分析師需要知道的色彩知識

Fuzzco Inc。,

the Charleston Creative Economy, 2008。

3) 說明元素對應關係

在這兩個例子中,色彩說明了一種元素間的對應關係。第一個Stakeholder Map,設計裡用了淺綠色、偏黃的綠色,和偏藍的綠色這三種顏色。在我們沒有仔細閱讀圖表文字的時候,也可以透過顏色大致猜測它想要表達的資訊,它應該是說明了3種類型的資訊。在每一個顏色的背景上,用了近似顏色較深的圓形,做了進一步的解釋。每一種型別的資訊,設計師用近似的顏色表現了元素間的對應關係。

右邊的這個設計,是一個建築物的設計方案。每一個樓層都用了不同的顏色去表示,在旁邊文字的部分,也加上了數字。顏色在這個設計中,可以幫助觀眾做視覺上的區分,同時說明了樓層和文字之間的關係。

系列文章:分析師需要知道的色彩知識

Left: Tianmi Fang,

Stakeholder Map

。 Right: School Planing and Architecture, SPAV。

下面的這兩個例子,都是說明樓層功能的設計圖。左邊的設計用了不同深淺飽和度的藍色來說明問題,右邊用了區分很明顯的顏色。2種配色,是不是會造成不同的理解?

左邊的設計給人的感受是,在說明圖形和說明文字對應關係的同時,也想要強調這棟大樓作為一個整體,每一個區域有什麼樣功能。右邊的設計圖,更加強調每一個樓層作為獨立的個體,有什麼不一樣的功能。顏色幫助了做樓層間的區隔。

系列文章:分析師需要知道的色彩知識

Left: Archimatika,

Slow Living in Manhattan

。 Right: School Planing and Architecture, SPAV。

4) 說明元素之間比較關係

下面的這2張設計圖,運用色彩表達了資訊的類比關係。第一張設計,是想要說明從2015年到2020年訂閱人數的變化。它使用了2種飽和度很高而且視覺上很區分的顏色,來說明2個年份的對比關係。

右邊的圖表是Top 50 Baby Names 1930–2014。在圖表中,設計師用2種顏色去表示嬰兒的性別,女生用了紫紅色,並使用不同透明度和明度的紫紅色來表示姓名的數量。男生用了偏綠的藍色去表示。女生和男生這兩個概念,也是用了區分度很強的2種顏色,去表示兩者的不同。

系列文章:分析師需要知道的色彩知識

Left: TrendWatching,

Connectivity in Latin America will rise by the end of the decade

Right: Juliana,

Top 50 Baby Names。

5) 關於性別顏色的選擇

在有一些設計中,很常見的會用藍色表示男性,粉紅色表示女性。在給孩子玩的玩具中,也是大量的可以看到這種配色,但其實這是一種社會成見。在我讀書階段所參加的一個學校專案裡,我用了藍色和粉色這配色去表現男生和女生,教授看到後便指正了這個方案。那時候我才意識到,這種用特定顏色去表現特定性別是一種刻板印象。作為一個設計師,我們可以避免這種固定思維。

系列文章:分析師需要知道的色彩知識

系列文章:分析師需要知道的色彩知識

相比於不夠成熟的粉色,可以考慮用紫色來替代,以體現女性的優雅氣質。

Design Goal:「 明確想要傳遞的觀點 」

在看了這麼多例子之後,我們可以知道,明確自己的設計目標,明確自己想要傳遞的觀點,色彩作為一個工具有很多作用。你的設計想要傳遞什麼樣的資訊呢?當我們在設計圖表的時候,資料分析師們可能想要儘可能地客觀,但在我們去做設計時,不可避免地會加入自己的觀點。

系列文章:分析師需要知道的色彩知識

保羅蘭德

在《設計的意義》這本書中寫道,“設計的過程也是賦予價值和意義的過程,去闡述,簡化,釐清”。梳理資訊,賦予合適的意義,也是作為設計師的能力之一。

京東滿100減50

02.

色彩的選擇

配色一個很好用的工具是色輪。幾種簡單好用的配色方法有:近似色配色,單色配色和互補色配色。

系列文章:分析師需要知道的色彩知識

近似色

就是在色輪上面這種相鄰的兩種顏色,這兩種顏色放在一起是非常和諧的,可以用來表達相似的概念。

單色

選用在色輪上的一種顏色,透過調節這種顏色的透明度,亮度,飽和度,來創造出一些列的配色。也可以用於表達一些相似的概念。

互補色

在色輪上180度角的顏色,視覺衝擊力很強,可以用來強調某一個資訊,或是用於表達類比的概念。互補色不適合大面積的使用,選用一種單色作為主色,再配上一種互補色,會是一種很不錯的選擇。

下面可以透過這些不同配色的例子,在沒有任何文字的情況下,看看顏色是否會影響資訊的傳遞。

系列文章:分析師需要知道的色彩知識

配色A

運用了互補色和近似色配色的方案,紫色放在其中作為強調,如果我們非常需要強調圖表中的某一個資訊,或是某一個資訊是和其他資訊非常不同的,互補色是非常好的方式。

配色

B

運用了近似色配色,看起來這3種資訊表現了一個很類似的概念,沒有很想要強調的觀點。

配色

C

運用了單色配色,這3個數據也是表現了一種很類似的概念,這種類似會比配色B裡表現出的更加緊合。也許這3個數據是同屬於一個整體。

03.

色彩印象

1) 獲取靈感思路

當我們缺少思路時,透過照片去獲得配色的靈感是一個很好的方式,下面這幾張照片是以黑夜作為背景, 如果想要一些霓虹感的配色,那這些照片會是很好的啟發。一些美術很棒的電影,比如銀翼殺手,也會是很好的配色靈感來源。

系列文章:分析師需要知道的色彩知識

photo by Ludwig Favre (left)

系列文章:分析師需要知道的色彩知識

參照之前的文章內容,也可以從具體照片場景中,提取有代表性的色彩,用於圖表配色中。

2) 色彩感知與印象

色彩對人的影響會有不同的層次,包括:

生理感知:和我們的眼睛的生理構造有關,比如對比的錯覺,色彩的膨脹與收縮。

心理感知:色彩對人的心理活動影響,比如冷暖、輕重、明快與憂鬱。

人文感知:色彩性格與表達,比如 :白色象徵著純潔、神聖、樸素的性格,同時大面積使用白色,也會給人以空虛、單調的感覺。

結合生理與人文感知,我們在可以透過

色彩印象

的積累,來提升對色彩的辨別與應用能力。

系列文章:分析師需要知道的色彩知識

比如綠色給人以:自然,生命力,放鬆,安全,深遠、幽靜的色彩印象,象徵著活力和生機。

系列文章:分析師需要知道的色彩知識

橙色給人以:活力,陽光,溫暖,開朗的色彩印象,象徵美滿,幸福。

系列文章:分析師需要知道的色彩知識

結合到圖表的調色盤,也可以圍繞:藍綠,紅橙 這樣的冷暖色調展開,以表現更豐富的資訊與對比。

04.

訓練自己的眼睛

顏色無所不在,觀察好看的照片,好看的室內設計,好看的商店招牌,雜誌,網站,電影統統都可以成為我們日後設計的積累。還有很重要的是,用自己的方法把這些好看的東西記錄下來。訓練自己眼睛去發現美麗的事物,然後把自己的設計也變成美麗的事物。

系列文章:分析師需要知道的色彩知識

一個實用的配色工具網站:

http://color。adobe。com/

推薦

羅賓威廉姆斯

所著的入門設計書「

寫給大家看的設計書

推薦

伊達千代

「設計入門教室」系列,從排版、字型、色彩入手,更為系統的幫助大家理解設計的方方面面知識。

05.

小結

色彩的選擇會結合感性與理性,既是科學也是藝術。對於分析師來講,如果時間有限只能做一項改進的話,改進圖表的配色會是最有效的,不僅可以更好的傳遞資訊還可以給讀者帶來不同的感受。本篇文章介紹了色彩如何傳遞資訊,色彩的選擇,色彩印象等知識,希望這是一個好的起點,幫助你開始瞭解色彩,感受色彩,產生在工作中改進配色的動力。後邊的文章中,我們會結合常用的配色原則,調色盤知識,圖表配色來給大家做進一步的講解。

系列文章:分析師需要知道的色彩知識

Power BI視覺物件與自定義視覺物件完全指南

系列文章:分析師需要知道的色彩知識

Power Pivot、Power Query與Power BI是什麼?他們有什麼關係?

系列文章:分析師需要知道的色彩知識

PowerBI主題完全指南+12個儀表板例項參考