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

04/06/2020 ・ 設計

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

為什麼色彩這件事很重要?
接續上一篇 如何著手設計你的第一個網站? 我們談到該如何想像你的客戶、蒐集靈感等,這一篇將會更近一步的談『色彩』這件事。 如果你是非設計本科或是正在轉職成設計師的新人,應該很難想像設計或藝術相關科系為什麼會將『色彩原理』獨立成一門課,甚至有專門研究色彩的公司。 打開你最常使用的 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

 


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