如何選擇網站的顏色定調？ (上)

色彩可以區分出品牌的獨特性、資訊的層級性，抑或是影響使用者瀏覽的感受。
此篇文章將分享色彩的重要性、如何學習配色。

為什麼色彩這件事很重要？
接續上一篇 如何著手設計你的第一個網站？ 我們談到該如何想像你的客戶、蒐集靈感等，這一篇將會更近一步的談『色彩』這件事。 如果你是非設計本科或是正在轉職成設計師的新人，應該很難想像設計或藝術相關科系為什麼會將『色彩原理』獨立成一門課，甚至有專門研究色彩的公司。 打開你最常使用的 APP ，想像他們的介面只有黑線像 Wireframe 沒有任何顏色，只有黑和白、線和文字，那會是蠻令人崩潰的事。

在沒有色彩之前，這時我們可以留意到線條的粗細、文字的大小、多寡、留白等，但加上色彩後，它就變得有個性、獨特而活潑的。 這也是我們接下來要談的；該如何適當的配色，使得畫面有趣、具有品牌獨特性。

STEP 1 │ 關於色彩意象，顏色也是有感覺的？

色彩意象就像是深藍色想到的是憂鬱、沈穩、經典的，而黃色則是活潑、年輕的、充滿活力的這樣的描述；但這些描述不是絕對，有時也會因為配色或環境、時間而有所不同，像是紫色在過去是象徵帝王的顏色，因為過去紫色較難採集和生產的顏色，所以只在貴族或帝王的服飾才能使用；但在現代紫色卻有不同的意象，像是前衛、流行、大膽的。 [註1]
抑或是電影『藍色是最溫暖的顏色 』跳脫了一般人認為藍色是冷的、憂鬱、沈靜的意象，但對女主角來說藍色是最溫暖的顏色。
這些都說明了顏色在不同的情境、時間、文化脈絡下，會有截然不同的意象。所以千萬不要和設計師說：我要一個憂鬱的紅色或藍色。
設計師只能盡力營造出憂鬱的氛圍，但不一定會使用藍色，也許是黑色也不一定，再者沒有一個色彩意象是絕對，意思是上述對於色彩意象的描述如：藍色是憂鬱、黃色是活潑等，是一個大部分的人同樣擁有的感受，你可以透過不同顏色配色、情境等方式，營造出完全不同的意象。

STEP 2 │ 如何選擇適合的顏色？

當你已經知道顏色是具有畫面、感覺的，那麼究竟我們要怎麼選色或配色呢？ 你將要設計的網站或 APP ，它是哪類的產品？它的目標族群是誰？有它的企業品牌色嗎？
一般來說，如果是設計企業的官網、APP 或延伸產品，通常會沿用企業的品牌色去加深使用者對品牌的形象，讓使用者在不同的情境下接觸到產品都能連結到品牌，常見的例子有 foodpanda ( APP 主色到司機的外送袋)、Starbucks 的深綠色、LINE 的亮綠色等等；這些品牌只單純描述文字，你的腦中或多或少都會有品牌的 Logo 形象和顏色，這些都是品牌顏色使用的成功案例。 但你應該也會想到某些品牌，很難描述他的品牌色，像是 Google / Microsoft 這樣多色系的品牌，通常象徵著多元、創造、豐富的，無法用單一顏色涵蓋品牌的特性。
因此，如果你在設計時已經有品牌的產品，請先確認品牌的主色、輔色的使用規範，然後在設計時加入，以維持品牌一制性，至於這些顏色應該怎麼使用，將在下一個步驟介紹。如果，你是要做 Side Project 或是你將創造一個新的品牌，可以嘗試以下這幾個步驟：

1. 定義你的網站並假設有哪些使用者？

這部分可以回到上一篇文章將想到的形容詞、圖像畫面寫下來。它的使用者是男生？女生？年輕族群？小資族？還是青少年？

2. 你想要給使用者什麼樣的感覺？

依據上面想到的形容詞和畫面，我們可以深入地想像，我想要給這些使用者什麼樣的感覺？是活潑的？專業的？還是熱情的？

3. 蒐集這些感覺讓你聯想到的圖、電影或畫面

這算是我在做品牌設計或網站顏色定調一個很重要流程，如果我不確定畫面的氛圍、形象要怎麼營造，我會想著我看過什麼樣的電影、影集或品牌給我一樣的感覺？他們的顏色氛圍是什麼？

歡迎來到布達佩斯大飯店 (The Grand Budapest Hotel) 中的場景因為和諧的配色和構圖，像是使用粉色系或高飽和色系，以及對稱構圖、 使得每個鏡頭都有一種精緻感。

相較於布達佩斯大飯店 一級玩家 (Ready Player One) 大量使用賽博龐克 (Cyberpunk) 風格的配色，這樣的配色具有科技、前衛、未來感。

除了電影外，也可以透過 Pinteset 或 Google 搜尋你想到的設計作品或藝術作品，為什麼這些作品給你這些感覺呢？試著觀察他們的配色和主色。 或者你也可以瀏覽下面這些設計類部落格，作者將照片歸類出顏色，下次你也可以嘗試將你的照片歸類出配色！

1. Design Seeds
2. Ave Mateiu
3. Pinterest|Color Palette

閱讀下篇：如何選擇網站的顏色定調？ (下)