小蛙同學

2021/03/31

30,245

設計 UI 選色障礙？學會六個快速配色技巧，玩轉色相環

UIUX 設計新手的你也有選色障礙嗎？本文一秒帶你認識色相環，並讓你快速學會精選網頁設計的六種設計師必備的配色技巧！

對文章有興趣來不及看？點選右上角「橘色小書籤」收藏文章，再也不怕錯過就是一輩子！

UX 設計涵蓋了很多流程細節，需要設計師站在使用者的角度思考，才能設計出更符合 TA（目標族群）需求的介面。雖然設計的步驟可能看似沒那麼複雜，但其實每個環節都需要注意微小細節。

其中一個很耗時、但又非常重要的設計環節就是配色。設計師有時候可以花上幾個小時，只為了要選擇最適合的色票。在這篇文章裡，我們會先帶你認識色相環，並介紹六個實用的配色技巧，幫助身為設計師的你可以用簡單、高效的方式，選擇適合產品的強大配色方案。

教你六招快速配色技巧

教你六招快速配色技巧，讓你設計 UI 時不再選擇障礙！

色相環介紹

什麼是色相環

在開始進入配色教學前，我們先來認識「色相環」。色相環是一個由 12 種顏色平均分配，排列成一個圓形的調色盤。透過色相環我們可以了解相似色、對比色的概念，透過相似、對比的原則，便可以快速抓到配色的小技巧唷！

色相環的用途

剛剛提到學習配色可以透過色相環，這邊你可以這樣做：

步驟一：辨識選定的顏色在色相環中屬於冷、暖色調
步驟二：了解選定的顏色在色相環中屬於深淺明暗哪一種階層
步驟三：辨別其搭配不同色彩的和諧度
步驟四：找出相近色、對比色，來打造適合的配色方案

色相環的基本元素

而色相環中，又分為幾種元素：「原色」、「二次色」、「三次色」。

原色

最基本的色彩要素，無法透過其他顏色混合而成，但能彼此混合創造出其他顏色。包含：

紅色
黃色
藍色

二次色

利用原色兩兩混合而成的三種顏色，包含：

紅色＋黃色＝橙色
黃色＋藍色＝綠色
藍色＋紅色＝紫色

三次色

利用原色、二次色兩兩混合而成的六種顏色，包含：

紅色＋紫色＝紅紫色
紅色＋橙色＝紅橙色
黃色＋橙色＝黃橙色
黃色＋綠色＝黃綠色
藍色＋紫色＝藍紫色
藍色＋綠色＝藍綠色

第一招：記住配色黃金比例 — 60-30-10 原則

這個原則其實一開始是從室內設計來的，你可以常看到它被用在空間配色上。概念相當簡單，就是在顏色搭配上使用 60% — 30% — 10% 的組合原則，為整體構圖帶來平衡感。最大比例會是主色，30% 的面積使用次要色，而最後 10% 則是用來點綴的強調色。

這樣的色彩層次被認為可以為視覺帶來愉悅感，它讓人慢慢的感知所有視覺元素。知道了這個配色黃金比例後，設計師就可以簡單地調配顏色，不會一不小心就把整個 UI 設計弄的一團糟。

記住配色黃金比例

第二招：善用對比色

色彩對比是任何視覺構圖的重要關鍵，它強化了 UI 元素間的差異性，讓使用者可以清楚看到每個元件。如果 UI 設計上完全只採用同一種色調的顏色，就很難吸引使用者的注意。同時，文字內容會變得難以閱讀，使用者也不太可能跟產品有任何的互動。

設計師會根據想要達成的目的去調整色彩的對比度高低。例如，當你想要使用者特別注意某個 UI 元素，使用兩個高對比的顏色就會是一個很好的方法，像是藍色跟紅色。這樣的配色常常會運用在 CTA（call-to-action）按鈕的設計上。

但是，以 UI 的整體構圖來看，高對比度的配色方法就沒辦法每次都派上用場了。如果文字內容跟背景顏色的對比過大，就會變得難以閱讀跟快速瀏覽。這就是為什麼我們常會推薦設計師使用較溫和的顏色對比，只有在要特別強調某些元素的時候，才會建議使用對比度較高的顏色搭配。另外，在不同裝置上做使用者測試，也可以讓設計師確認目前選擇的配色方案是否有效。

善用對比色

第三招：努力達到色彩協調

UI 設計想要做到的就是帶給人和諧感。想要讓產品用起來是舒服的，設計師就必須想辦法設計出平衡、和諧的介面。色彩調和（color harmony）是在透過顏色搭配，成功吸引使用者目光、幫助他們有效理解內容。協調的顏色搭配也可以讓使用者對網站、app 先有一個很棒的第一印象。

在多年的摸索後，設計師找到了幾個可以有效達到色彩協調的配色方案，就讓我們來看看有哪些吧！

1. 單色配色法（monochromatic）

只用單一顏色，調整色調（tone）做出變化，像是同個顏色的暗色調、明色調。

單色配色法

2. 相似色配色法（analogous）

用在色相環上位置相近的顏色做組合搭配。
色相環＿相似色配色法

3. 互補配色法（complementary）

使用色相環上相對的兩色來創造高對比。
色相環＿互補配色法

色相環＿互補配色法

4. 補色分割配色法（split-complementary）

跟前面的互補配色法類似，但使用了更多顏色。例如，假設你選了藍色，就要搭配跟他的互補色（橘色）相鄰的兩個顏色。
色相環＿補色分割配色法

5. 三等份配色法（triadic）

用三個顏色搭配，這三種顏色在色相環上的位置會彼此等距。推薦你可以用一個顏色當主顏色，其他的作為強調色。
色相環＿三等份配色法

6. 矩形/雙重互補配色法 (tetradic/double-complementary)

選擇兩組互補色，組成四個顏色的搭配，如果在色相環上把這四個顏色連起來，會形成一個矩形。
色相環＿矩形/雙重互補配色法

第四招：參考看看顏色心理學

很大部分的設計工作流程是奠基在心理學原理之上，而其中一個心理學的分支 — 「色彩心理學」就帶到了顏色是怎麼影響人的情緒跟行為。雖然你不太會察覺，但你的大腦其實會對顏色產生反應。當看到顏色的時候，你的大腦會自動向內分泌系統發出信號，釋放產生對應情緒的荷爾蒙。

每個顏色都會產生不同的影響，而當設計師了解不同顏色刺激會引發的反應，就可以傳遞正確的訊息給使用者，並引導他們按照預期來展開行動。以下簡單整理了各個顏色對應的含義：

紅色：同時象徵好的跟不好的感受，像是愛、自信、熱情、憤怒
橘色：有活力、溫暖的顏色，可以給人帶來興奮的感覺
黃色：象徵快樂、陽光、溫暖的顏色綠色：大自然的顏色，給人平靜、煥然一新的感覺
藍色：常被用來呈現企業形象。但有時會跟距離感或是沮喪聯想在一起。
紫色：長久以來都跟皇室、財富有關，也是一個充滿神秘色彩、給人有魔法感覺的顏色
黑色：跟悲劇、死亡有很大的連結，也帶有神秘感。可以用來營造傳統跟現代感。
白色：給人純粹、天真、完整、清澈的感覺

除此之外，設計師要記得每個人的視覺感受其實都不太一樣，不同的因子像是年齡、性別，都可能會影響一個人對顏色的喜好，所以，了解你的 TA 有著什麼樣的特點也相當重要。

顏色心理學

第五招：不要忘記文化差異

每個文化都有它們自己的傳統跟信仰，所以在你選擇顏色前，需要確保你想傳達的訊息跟用戶的理解一致。在不同的國家，同一個顏色可能會有完全相反的含義。例如，在歐洲，有白色被視為是純淨的象徵，常使用在婚禮，但在很多亞洲國家，白色可能象徵著死亡、沮喪。選擇了錯誤的顏色會讓使用者產生誤解，這對產品來說是非常致命的。設計師要先認知到每個文化對不同顏色的理解有差異，才可以降低判斷錯誤的風險。

第六招：從大自然中找靈感

大自然就是設計師最好的靈感來源！我們在自然環境中可以看到的顏色組合通常都是最接近完美的搭配。人都喜歡看日落、秋天的楓林、冬日的山景，這些景色都充滿了自然的色彩構成。推薦你可以出去外面散散步，或是找找看大自然攝影作品，你一定會找到設計的靈感！
從大自然中找靈感
UI 配色是設計出好產品其中一個相當重要的關鍵。成功的配色方案會帶給使用者很好的產品體驗，設計師也可以藉由選擇適合的顏色搭配，引導使用者採取行動。想成為 UI/UX 設計師的你，一定要學會聰明運用配色技巧！