視覺設計原則:顏色編碼Color coding

Color can add dimensionality and richness to scientific communications. In figures, color is typically used to differentiate information into classes. The challenge is picking colors that are discriminable. A systematic approach to choosing colors can help us find a lineup effective for color coding.

顏色常用來添加圖表維度和豐富度的工具,如何良好的使用顏色,來區隔資訊,也是一門技巧。其中,最常用的配色方式便是使用“rainbow”方式來表現不同的數值。

在編碼資訊上,顏色較不適合用來編碼量化(quantitative)的資訊,舉例來說,藍色和黃色你有辦法區分誰大誰小嗎?應該很困難吧!反之,顏色很適合用來當作類別(catagorical)資料的編碼,可相對清楚地讓觀察者理解兩種不同的物件。

顏色是一種相對的媒介(relative medium),很容易受到周遭其他顏色的影響,比如隔壁的顏色,或是背景色,都會改變觀看者對顏色的感受。如下圖的a/b,可以看到兩個一樣的墨綠色,在不同背景色時的差異,下圖的c,是常見的熱圖(heatmap),星號註記的是一樣的顏色,但在周圍的顏色襯托下,感覺就不太一樣。

螢幕快照 2018-08-07 下午10.52.06

 

我們所看到的每個顏色由三個屬性所決定:色調(hue)、飽和度(saturation)、亮度(lightness),有一個挑選具有高度差異性顏色的方法,便是用螺旋狀的方式搭配亮度在常見的色彩挑選工具上,可以輕易地挑選出符合目的色彩,如下面的展示圖,可以看到在原形狀的色球上,從中心往外螺旋狀地挑色塊,能達到上面說的目的,實務上,挑出6-8組顏色具有高度分辨率是容易的,而在增加組數,就一定會有相似的顏色出現,需要利用其他的方式來增加分辨能力,如形狀等。

螢幕快照 2018-08-07 下午10.52.11

 

閱讀參考

Bang Wong.(2010) Points of view: Color coding.
Nature Methods.volume 7, page 573

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s