網站當中的色彩學|如何選擇網站的顏色定調?

Cover

圖片來源:Steve Johnson


前言

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


為什麼色彩這件事很重要?

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

無色彩與彩色稿

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



第一步 | 色彩意象,顏色也是有感覺的?

色彩意象,就像是深藍色想到的是憂鬱、沈穩、經典的,而黃色則是活潑、年輕的、充滿活力的這樣的描述;但這些描述不是絕對,有時也會因為配色或環境、時間而有所不同,像是紫色在過去是象徵帝王的顏色,因為過去紫色較難採集和生產的顏色,所以只在貴族或帝王的服飾才能使用;但在現代紫色卻有不同的意象,像是前衛、流行、大膽的。 [註1]

抑或是電影『藍色是最溫暖的顏色 』跳脫了一般人認為藍色是冷的、憂鬱、沈靜的意象,對女主角來說藍色是最溫暖的顏色。

這些都說明了顏色在不同的情境、時間、文化脈絡下,會有截然不同的意象。所以千萬不要和設計師說:我要一個憂鬱的紅色或藍色

設計師只能盡力營造出憂鬱的氛圍,但不一定會使用藍色,也許是黑色也不一定,再者沒有一個色彩意象是絕對,意思是上述對於色彩意象的描述如:藍色是憂鬱、黃色是活潑等,是一個大部分的人同樣擁有的感受,你可以透過不同顏色配色、情境等方式,營造出完全不同的意象。

藍色與黃色的色彩意象



第二步 | 如何選擇適合的顏色?

當你已經知道顏色是具有畫面、感覺的,那麼究竟我們要怎麼選色呢?或配色呢? 你將要設計的網站或 APP 他是哪類的產品?他的目標族群是誰?有他的企業品牌色嗎?

一般來說,如果是設計企業的官網、APP 或延伸產品,通常會沿用企業的品牌色去加深使用者對品牌的形象,讓使用者在不同的情境下,接觸到產品都能連結到品牌,常見的例子有 foodpanda ( APP 主色到司機的外送袋)、Starbucks 的深綠色、LINE 的亮綠色等等;這些品牌只單純描述文字,你的腦中或多或少都會有品牌的 Logo 形象,這些都是品牌顏色使用的成功案例。 但你應該也會想到某些品牌,很難描述他的品牌色,像是 Google / Microsoft 這樣多色系的品牌,通常象徵著多元、創造、豐富的,無法用單一顏色涵蓋品牌的特性。

因此,如果你在設計時已經有品牌的產品,請先確認品牌的主色、輔色的使用規範,然後在設計時加入,以維持品牌一制性,至於這些顏色應該怎麼使用,將在下一個步驟介紹。

如果,你是一個 Side Project 或是你將創造一個新的品牌,可以嘗試以下這幾個步驟:

1. 定義你的網站或假設你的 Side Project 是給哪些使用者?

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

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

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

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

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

The_Grand_Budapest_Hotel_Colors

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


Ready_Player_One

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


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

Color_Palette



第三步|主色、輔助色,是什麼呀?我該如何配色?

當你確立好你想要的顏色,接下來就是配色! 配色在色彩學當中是相當重要的一環,生活上也經常會使用到,像是衣服的配色、室內裝潢的配色等。

首先決定主色!

主色顧名思義就是「主要的顏色」他是代表品牌的顏色,可能是單一個顏色、雙主色或漸層色,如果你沒有品牌色彩的話,翻翻前一步你蒐集到最多的顏色是什麼?這個顏色符合你所想要表現的感覺嗎? 有的話將它找出來吧!決定他是主色。

還有輔色!

輔色又作「輔助色」,輔助色的存在是為在讓主色與品牌更完整的顏色,是屬於次要的、一般性的。單色、多色、灰階色、彩色都有可能。

輔助色可以引導使用者區分出主要和次要的資訊,除了讓品牌形象完整外,也讓使用者瀏覽時具有層級性。

Starbucks expression guide

關於品牌色彩應用,可以參考 Starbucks 提供的品牌視覺規範 ,這邊可以看到 Starbucks 如何將品牌色運用在網站、店面、產品上。

更詳盡的色彩意象、色彩專有術語,可以參考:設計配色完整攻略:色彩意義、色彩理論、色彩心理學讓您一次擁有!



第四步|先別急著上色!使用灰階稿引導你。

當你已經決定了主色和輔色時,這時你可能會有超過 3 個以上的顏色,那麼你該怎麼決定哪些顏色應該大量使用?哪些顏色又應該減量使用?


1. 使用灰階稿區分資訊、視覺重心。

Step.1 製作灰階稿

你可以先將網站的其中一頁或 App 其中一頁,先製作灰階稿,依據資料的重要性,重要到一般資訊,區分出三至五個層級,分別先用不同深淺的灰色排版。


2. 加入顏色與圖片

Step.2 加上主色的設計稿

這時你可能會意識到,有些區塊加上主色可能反而不好閱讀,抑或是反而太多主色導致無法區分主要或次要性;接著我們再適時的拿掉主色換成深灰色或黑色呢?


3. 重複試驗到完成

完成稿

經由這樣一步一步的嘗試、修改,你將會多種的配色可能;盡可能的想像這樣的配色主要和次要的資訊是可以區分出來的嗎?是否符合這個品牌、是否符合你想要營造的氛圍?


會不會有例外的規範顏色?

屬於例外的規範,可能是需要考慮像是 狀態性 的顏色,像是表示警告、禁用等狀態顏色呢?

這邊可以參考 Bootstrap / Tailwind 的按鈕或狀態顏色設定,這是一般常用的顏色設定,你可以依據你的品牌做調整,讓這些顏色出現在你的網站或 APP 時不至於突兀。

Bootstrap_alert_color

仔細想想我們常見的 狀態結果顯示 代表顏色,是不是也在生活中也有相同象徵?



第五步|多練習、嘗試,配色沒有絕對的公式和規範。

在你嘗試第一次配色,可能會花很多時間都覺得哪邊怪怪的,這是很正常的,因為配色沒有一套絕對的公式、答案。 你可以先從一個畫面或是一張卡片進行小範圍的配色,再嘗試多個畫面;過程中你可能會想要所有顏色都使用,也有可能使用太少顏色導致畫面留白太多或過於呆板,但只要多嘗試、多蒐集靈感、多看,就能對配色越來越上手。

這邊分享我常用的選色或配色工具:

  1. Color Hunt :很多美麗的配色。
  2. WebGradients : 將漸層色建立成色票,可複製 CSS 並有 Sketch / Photoshop 外掛。
  3. Gradient Backgrounds : 漸層色工具集。
  4. Nippon Colors - 日本の伝統色 : 日本傳統色。
  5. HTML color codes : 可線上選色產生色碼。
  6. Adobe Color : 可在探索連結內看到網友建立的配色外,也可以在趨勢看到色彩的流行趨勢。
  7. Awsmcolor | Instagram :配色分享。
  8. colours.cafe | Instagram :配色分享。

最後,謝謝你/妳的閱讀,如果對於上述配色有任何問題或是你有自己的配色流程、蒐集顏色的方式,都歡迎在以下留言! :)


相關連結:

註 1 : 【色彩,原來如此】魔幻神秘又奢華!皇室御用色—紫色的故事