最新消息

678*329

善用配色,讓你的商品更臻出色!

 色彩,是設計師們最強而有力的工具之一;它能瞬間攫住目光,誘發你的情感騷動,甚至還能傳遞你所要表達的訊息。
 為了告訴你「色彩學」對行銷經營到底有多重要,引用《The Impact of Color on Marketing》裡的一句話:「經研究人員發現,高達 90% 的消費者在選購當下,單看顏色就草率地購買了。」
 然而每個色彩配搭不盡相同,各個顏色都有其象徵意義。因此,如何產生新的顏色組合、創造出無限可能,色彩的應用設計就相當重要。
 這篇文章,將提供7種配色指南,介紹如何讓色彩與設計相輔相成,讓你的商品更臻出色!

選對配搭的色票

 色票可能是一個瞬發帶來的靈感,但大多時候,係採取系統化、計劃性的方式。

01、確立目標
 開始設計之前,我們的第一要件是找出設計目的與理念;一個好的設計元素,伴隨著是具有意義的色票。
 不知道怎麼做,可以對自己問些問題:
 - 你想透過設計幫忙傳遞什麼訊息?
 - 設計目的是什麼?想要傳遞資訊?還是想引導使用者?
 - 這樣的設計能夠勾起什麼樣的情感?

02、找出目標受眾客群

 人們對顏色的認知,根據心理經歷、喜好個性、文化背景等因素影響,每個色彩產生的效果各有所不同。有鑑於此,必須先去理解你的設計會對使用者帶來什麼樣的影響,找出目標受眾。
 當然,色彩有其放諸四海通用的意涵,也有反差很大的。綠色一般被視為植物、大自然的顏色;紅色則在東西方存在著不同意思。西洋文化裡,紅色讓人聯想到火(Fire)、暴力(Violence)、鬥爭(Warfare),也有象徵著愛(Love)與熱情(Passion);不過在中國,卻是代表著興旺(Prosperity)與幸福(Happiness)。

 由於色彩代表的意涵太廣泛,在產生新的色票時,了解你的目標客群係相當重要的。如果想要知道更多詳細不同國家對色彩的意義,推薦兩篇文章《The Psychology of Color in Marketing and Branding》、《The Meaning of Color》。

03、溫習基礎配色理論
 如果懂得運用一點色彩理論,在選擇色票時多少能提供些幫助。基本的配色理論指南,在色彩組合與邏輯結構上,都具有它的實用性;從如何使用色環,到每個顏色的用意。
 提供幾篇文章作參考:《Color Theory》、《Why Is Facebook Blue? The Science Behind Colors In Marketing

04、找尋靈感
 總有些時候,找不到合適的色票應用在你的設計上。沒關係,就從其他設計師作品中尋覓一點靈感吧。
 提供幾個幫助找尋色票靈感的網站,像是:「Dribbble」「Behance」;如果你想找的是為素材特別設計的色彩,歡迎利用「MaterialUI」;扁平化設計需要的色票,則推薦「FlatUIColors」這個網站。
 前面提到的幾個網站都相當方便,不過,儘量打開你的眼界;即便不同於你的設計領域,但也許它能帶給你意料之外、更不同凡響的有趣色票。舉例而言,室內設計就是很好的參考方向。

 若想來點更不一樣的,也許能從其他文化找尋色彩靈感。譬如說,韓國流行音樂的MV,以搭配色彩繽紛的造景設計聞名。每一個場景,都提供了很棒的靈感來源。

 你不必去一趟韓國,日常生活當中就有非常多的靈感來源,它無所不在。有機會出去的話,留點時間細細地去品味周遭的色彩吧。

 一旦發現你所要的,迫不及待想為它建立色票時,你可以透過滴管工具(Eye Dropper Tool)汲取顏色,並應用到你喜歡的設計裡頭;必要時,記得為色票作適當地調整。

05、建立專屬的設計系統
 設計系統(Design System)抑或稱作「風格規範(Style Guide)」,它從按鈕乃至文字排版,所有設計元素都必須遵從統一地設計規範。當你需要按鈕或者導覽列時,可能用到哪些種類和樣式的呈現都得考量進去。
 舉個風格規範的例子,Salesforce 公司就有完整地設計系統。或者,也能參考看看這篇文章:《50 Meticulous Style Guides Every Startup Should See Before Launching》。

 先打個粗略的規範草圖也好,它會在你之後決定色票時帶來幫助;無論要設計什麼元素、選用什麼顏色,都能快速地依照它做出決定。
 在為設計選擇色票的時候,儘可能保持 K-I-S-S 的原則,也就是「愈單純愈好(Keep it simple, stupid)」。更多的設計規範,可參考下述幾點:
 - 背景顏色(Background)
 - 主要色彩(Primary Accent)
 - 輔助色彩(Secondary Accent)
 - 警告色彩(Error Color)
 - 成功色彩(Success Color)

 主要色彩是你最常使用於強調或行動呼籲(Call to Action)的重要色彩,通常這也會是公司 LOGO 的顏色。

 輔助色彩是區別於行為是首要或次要用的顏色,例如:主要按鈕及輔助按鈕。警告與成功色彩一般來說是設計成紅色及綠色,呈現的狀態就像下方的實例;成功與錯誤的訊息通知。

06、選定色票
 有了靈感、風格規範以及草圖也都準備就緒,那麼該選定色票了。
 一些基本色票的整理,我通常會將它們並排,就像是藝術家們的調色盤一樣。

 這個時候就把所有靈感乍現的顏色,有建立的色票通通列出來,別害怕嘗試,愈多顏色愈能試出哪個顏色最適合
 色票選項開始慢慢剃除時,別忘記之前提過的目標和受眾這兩個核心要素,再試著多問自己幾個問題:
 - 這些顏色是不是通俗易懂(Accessible)?
 - 哪些顏色是具有影響力且引人注目的?
 - 你需不需要再淺一點,或是深一點?什麼時候用戶會使用它?
 - 你的設計想透過視覺傳達什麼?這個色票與其他人相比,優異之處是?
 誠如上一節提到的,色彩在你的設計規範當中佔有不同角色;更確切的說,每個顏色的分量權重是不一樣的。打個比方,你使用主要色彩就會比背景顏色要來得頻繁。

 實際的頁面當中,可以將色彩依照權重比例的不同,分別給予不同的形狀表現。關於這方面你可以多做些練習,這裡提供參考的是 Invision 的色票。

 用幾何來表示的效果如下圖。

07、色票實作
 應該怎麼實地運用色票,先來帶你看看 Airbnb 是怎麼實作呈現的;主要色彩是 Rausch 紅,顏色命名是該公司取自一條街道的名字。輔助色彩是 Kazan 綠,另外兩個不同深淺的灰色是背景顏色。

 Airbnb 多半的頁面採用 Foggy 灰作為背景顏色。如下圖所見,頁面裡扮演重要地位的預約訂房按鈕,就是使用主色 Rausch 紅當作襯底。

 Kazan 綠,一種松石綠,它扮演吸引目光的角色;像下圖的使用就是很好地示範,與主要色彩成了互補。

 至於警告訊息的部分,Airbnb 將主色的 Rausch 紅調淺了一些。這樣的紅加上驚嘆號 icon 成為一個組合,立刻鎖住使用者目光並了解當前狀況,以及系統給予的資訊。

 起初,你不需要為設計添加顏色,先專注於元件和整體的布局。調整到定位後,再慢慢開始將色票運用到你的設計裡。

 你的設計也要考慮到視覺層次(Visual Hierachy),想想要強調什麼、元件作用情境又和你的設計搭不搭配。還有,滑鼠移入及作用狀態的情形,你也可以考慮使用不同深淺的色彩。

結語
 如何才能有完美的配色,唯一解就是不斷試驗,別無他法。顏色就像添加物,當經驗累積足夠便擁有一套專屬的設計規範,自然你也有愈來愈多色票可選擇,只要你願意嘗試。
 擁有強大底蘊,好比在開始設計之前,只要透過視覺即可挑選合適色票的能力。領略如何運用色彩完成設計的設計師,無價。

--

翻譯自原文:https://medium.freecodecamp.com/designing-in-color-abd358660a7b#.4qtt8lxf4

分享這篇文章:

您可能會有興趣: