「設計教學」Infographics for Dummies (第二課：配色篇)
Prerequisite: 《序》《第一課：排版篇》
--
數月前有網友在粉絲頁詢問配色相關問題，說到配色，不得不提一下我們的老朋友Color Wheel。但Color Wheel的理論實在是又多又枯燥，所以請允許我此次先跳過，直接來討論Infographics的配色。
以下是Q&A時間：
Q: 請問Infographics的配色最好由幾個顏色做組合？
Prerequisite: 《序》《第一課：排版篇》
--
數月前有網友在粉絲頁詢問配色相關問題，說到配色，不得不提一下我們的老朋友Color Wheel。但Color Wheel的理論實在是又多又枯燥，所以請允許我此次先跳過，直接來討論Infographics的配色。
以下是Q&A時間：
Q: 請問Infographics的配色最好由幾個顏色做組合？
雖說這沒有一個固定答案，各人喜好不同。但我個人推薦使用4～6個顏色，因為我們需要這幾個元素色：
Q: 請問挑選背景色時有無任何禁忌？
背景色很有可能是你的Infographics設計作品覆蓋面積最大的一個顏色，請務必慎選：
Q: 請問我選擇的顏色是否應該是同一個色系？
NOOOOO～ 不要啊～！如果所有顏色都是同一個色系會失去作品的“焦點”。如果非使用同一色系不可，例如你真的很想用粉紅色，請不要使用不同深淺的粉紅色。可考慮薰衣草色以及不同深淺的粉紫色當輔助色，以此來襯托主要色粉紅色。
錯誤示範
是否還記得我所說的兩個致命性錯誤？一. 不要選擇太過於鮮豔的顏色作為背景色；二. 盡量避免使用使用同一個色系顏色。以下兩個Infographics作品是我挑選的“反面教材”：
左邊的作品使用的所有顏色（除白色以及只有點綴作用的綠色之外），其它色彩都屬於同一色系。儘管紅色是最搶眼的顏色，但在這幅作品中，由於主要色紅色與背景色並沒有起到反差作用，導致與背景色融為一體。右邊的作品選擇了鮮藍色作為背景色，我看了超過十秒眼睛開始酸痛（揉眼）。選擇鮮豔色當背景色最大的缺點是：
以下各種組合是我在Kuler找到的，推薦給大家：
以上配色組合僅供參考，可自行搭配以及添加其它顏色。
SAMPLES
我收集了幾個我認為配色還算不錯的作品，以橫向為主，因為比較容易編排 XD。我另外製作使用色Swatches，並且可從中知道色彩數量。
咖啡色與綠色的組合給人大自然的感覺，設計師雖只使用了三個顏色，但有利用不同圖形以及stroke的粗細來避免重複感。
這幅作品的設計師使用了較難掌控的背景色，一不小心很容易讓畫面呈現髒亂的感覺。並且與其中一個輔助色的色彩value太過於接近，不推薦類似這種背景色給新手。
這是顏色過多的代表，但慶幸的是設計師有巧妙運用編排上的優勢避免了“it's scattered everywhere”的尷尬。
這是較得我心的配色方式。以讓人感到舒服的橘，藍，綠來突出重點，再搭配上對比性強烈的黑色與暖beige色。
另一個很安全的配色法，橘 + 黑 + 灰 + 米白是個很難失手的組合。
這也是一個難度較高的配色法，由於背景色使用的是難掌控的mutual灰，很難襯托出其它顏色，尤其是文字色的選擇上要更加小心挑選。
這是對比色的代表，水綠色屬於冷色系，橘色則是暖色系。這兩個對比色在此作品中還起到了輔助layout編排的作用。
小妹最後的叮嚀
Infographics的配色選擇還與“主題”有著極大的關聯。例如環保類Infographics習慣使用大地色以及綠色；粉紅色和粉紫色則是女性與嬰兒主題Infographics的專屬色；科技類相關主題則以灰色調為主。色彩上的使用規則不是不可打破，但我們設計Infographics時必須考慮到色彩學以及觀眾群先入為主的觀念。
為Infographics作品做配色一直讓我樂於其中，祝願大家也有相同的感受！Have fun :)
喜歡我的文章的朋友們，拜託幫我按個讚！謝謝 ^_^
下一課：《第三課：字型篇》
- 背景色（1）6個顏色以上的配色會太過於複雜，不適合新手（除非是需要使用彩色插圖）。4個顏色以下又太過於單調，並且極度容易和其他人的作品“撞色”。
- 主要色（2）
- 文字色（1）
- (optional) 輔助色（2）
Q: 請問挑選背景色時有無任何禁忌？
背景色很有可能是你的Infographics設計作品覆蓋面積最大的一個顏色，請務必慎選：
- 不要使用純黑或純白色根據各大Infographics網站的無數件作品，最熱門的背景色分別是：
- 不要使用鮮豔的顏色（會喧賓奪主）
- 不要使用和主要色，文字色以及輔助色過於相近的顏色
- 鵝黃色淺色背景較容易與其它顏色做搭配，深色背景比較有挑戰性。
- 米白色
- 深灰色
- 淡橘色
- 淺藍色
Q: 請問我選擇的顏色是否應該是同一個色系？
NOOOOO～ 不要啊～！如果所有顏色都是同一個色系會失去作品的“焦點”。如果非使用同一色系不可，例如你真的很想用粉紅色，請不要使用不同深淺的粉紅色。可考慮薰衣草色以及不同深淺的粉紫色當輔助色，以此來襯托主要色粉紅色。
錯誤示範
是否還記得我所說的兩個致命性錯誤？一. 不要選擇太過於鮮豔的顏色作為背景色；二. 盡量避免使用使用同一個色系顏色。以下兩個Infographics作品是我挑選的“反面教材”：
左邊的作品使用的所有顏色（除白色以及只有點綴作用的綠色之外），其它色彩都屬於同一色系。儘管紅色是最搶眼的顏色，但在這幅作品中，由於主要色紅色與背景色並沒有起到反差作用，導致與背景色融為一體。右邊的作品選擇了鮮藍色作為背景色，我看了超過十秒眼睛開始酸痛（揉眼）。選擇鮮豔色當背景色最大的缺點是：
- 閱讀起來很痛苦小妹推薦配色組合
- 選擇文字色時會有很大難度
- 背景色無故成為了焦點所在
以下各種組合是我在Kuler找到的，推薦給大家：
以上配色組合僅供參考，可自行搭配以及添加其它顏色。SAMPLES
我收集了幾個我認為配色還算不錯的作品，以橫向為主，因為比較容易編排 XD。我另外製作使用色Swatches，並且可從中知道色彩數量。
咖啡色與綠色的組合給人大自然的感覺，設計師雖只使用了三個顏色，但有利用不同圖形以及stroke的粗細來避免重複感。
這幅作品的設計師使用了較難掌控的背景色，一不小心很容易讓畫面呈現髒亂的感覺。並且與其中一個輔助色的色彩value太過於接近，不推薦類似這種背景色給新手。
這是顏色過多的代表，但慶幸的是設計師有巧妙運用編排上的優勢避免了“it's scattered everywhere”的尷尬。
這是較得我心的配色方式。以讓人感到舒服的橘，藍，綠來突出重點，再搭配上對比性強烈的黑色與暖beige色。
另一個很安全的配色法，橘 + 黑 + 灰 + 米白是個很難失手的組合。
這也是一個難度較高的配色法，由於背景色使用的是難掌控的mutual灰，很難襯托出其它顏色，尤其是文字色的選擇上要更加小心挑選。
這是對比色的代表，水綠色屬於冷色系，橘色則是暖色系。這兩個對比色在此作品中還起到了輔助layout編排的作用。
小妹最後的叮嚀
Infographics的配色選擇還與“主題”有著極大的關聯。例如環保類Infographics習慣使用大地色以及綠色；粉紅色和粉紫色則是女性與嬰兒主題Infographics的專屬色；科技類相關主題則以灰色調為主。色彩上的使用規則不是不可打破，但我們設計Infographics時必須考慮到色彩學以及觀眾群先入為主的觀念。
為Infographics作品做配色一直讓我樂於其中，祝願大家也有相同的感受！Have fun :)
喜歡我的文章的朋友們，拜託幫我按個讚！謝謝 ^_^
下一課：《第三課：字型篇》
0 意見:
張貼留言