▲點(diǎn)擊 "TCC翻譯情報(bào)局" 關(guān)注，回復(fù) "社群" 加入我們

本文共 2967 字，預(yù)計(jì)閱讀 8 分鐘

TCC 情報(bào)局的 第 47 篇 干貨分享

2021 年的 第 35 篇

 TCC 推薦：大家好，這里是 TCC 翻譯情報(bào)局，我是張聿彤。在設(shè)計(jì)中，色彩是不可或缺的重要因素。色彩有著獨(dú)特的一套理論知識(shí)，盡管這套理論知識(shí)其實(shí)并不難懂，但很多設(shè)計(jì)師卻并不愿意學(xué)習(xí)和使用它。作者在文章中講解了工作中很常用的幾種色彩搭配方案，并通過(guò)幾個(gè)非常簡(jiǎn)單的作品和案例來(lái)幫助我們理解和學(xué)習(xí)如何使用它們。讓我們一起學(xué)習(xí)并應(yīng)用色彩理論到我們的設(shè)計(jì)中吧！

Steve Johnson 發(fā)表于 Unsplash

藝術(shù)家亨利 · 馬蒂斯曾經(jīng)說(shuō)過(guò)：“顏色賦予人魔法般的能量”。每個(gè)人都知道學(xué)會(huì)魔法最簡(jiǎn)單的方法是犧牲一只山羊，但我們卻不能為了設(shè)計(jì)出好的用戶界面去這樣做。幸運(yùn)的是，在 UI 設(shè)計(jì)領(lǐng)域，我們可以更靈活地運(yùn)用顏色：顏色可以向用戶傳遞一定的信息，影響他們的選擇甚至是感受。并且由于沒(méi)有 “山羊” 必須被犧牲，因此可以 100% 地隨意使用顏色。

顯然，色彩理論并不是一門晦澀難懂的學(xué)科：它幾乎是大多數(shù)藝術(shù)和設(shè)計(jì)課程第一學(xué)期的東西，并且如果你正在閱讀這篇文章，可能你已經(jīng)至少對(duì)它有了一個(gè)基本的了解。然而，我們一定能忽視色彩所具備的潛力。尤其是在 UI 設(shè)計(jì)領(lǐng)域，巧妙地使用顏色可以引導(dǎo)用戶以你希望的方式使用某些東西，或者它是說(shuō)服潛在客戶繼續(xù)向下滾動(dòng)你的登錄頁(yè)面的關(guān)鍵因素 。擁有現(xiàn)有配色方案的品牌可以思考如何使用它們從而受益。新的應(yīng)用程序可以利用色彩脫穎而出，也可以融入到現(xiàn)有的 APP 中。簡(jiǎn)而言之：設(shè)計(jì)時(shí)，顏色應(yīng)該時(shí)刻在你的腦海中。以下的配色方案選擇的案例，講解了我是如何在設(shè)計(jì)中將其付諸實(shí)踐的，以及它是如何幫助每個(gè)項(xiàng)目實(shí)現(xiàn)其目標(biāo)的。

聲明：在這篇文章中，我將以英式的方式拼寫 colour (顏色)，而且 “u” 在整篇文章中隨處可見，所以泡一杯茶，拿一包麥克維蒂消化餅干，然后繼續(xù)閱讀…

單色

One colour to rule them all

先說(shuō)一個(gè)簡(jiǎn)單的配色方案：?jiǎn)紊?nbsp;這是最保險(xiǎn)的，最常用的方案，我以紫色為主色畫了一幅畫當(dāng)作案例，見下圖。在藝術(shù)中，只使用一種顏色通常是為了在繪畫中營(yíng)造一種意境或情緒（也參考畢加索的藍(lán)色時(shí)期）。

你好西雅圖

但我們?nèi)绾卧?UI 設(shè)計(jì)中使用單色配色方案呢？首先，很難找到真正單色的用戶界面，因?yàn)榇蠖鄶?shù)時(shí)候都有灰色陰影，以及區(qū)分用戶交互動(dòng)作成功和錯(cuò)誤的顏色，這些顏色都必不可少。實(shí)際上，對(duì)于簡(jiǎn)單的界面來(lái)說(shuō)，只有一種主色有助于強(qiáng)化你的品牌信息 。我最近設(shè)計(jì)的一款自定義邊框圖像生成器 APP 就運(yùn)用了單色配色方案，以創(chuàng)建最小化且清晰的外觀：

單紫色配色方案

這個(gè)案例中我只在 Logo 設(shè)計(jì)運(yùn)用了主色調(diào)紫色，在 APP 本身的設(shè)計(jì)中用不同色值的紫色作為呼應(yīng)。這是個(gè)簡(jiǎn)單的 APP，因此使用單色創(chuàng)造了一個(gè)簡(jiǎn)約的品牌印象。但是要注意，隨著界面變得復(fù)雜，主色和強(qiáng)調(diào)色對(duì)于區(qū)分靜態(tài)元素和交互元素起到重要作用， 需要更巧妙的配色方案…

互補(bǔ)色

Complementary colours：a world apart

色彩世界中的兩極相吸

互補(bǔ)色是最受歡迎的色彩方案之一，因?yàn)檫@種組合有著充足的原理支撐?；パa(bǔ)色在色輪上相對(duì)而坐彼此吸引，就像千禧一代觀看《老友記》重映一樣。

HyeRyeong Oh 發(fā)表于 Unsplash

上圖中的水母和海水，就是非常有 視覺(jué)沖擊力的色彩對(duì)比 。用苛刻的甲方的話來(lái)說(shuō)，這種配色方案能讓作品變得 “流行”。

在 UI 和品牌設(shè)計(jì)中，互補(bǔ)色很符合現(xiàn)有的設(shè)計(jì)慣例：有一個(gè)主要的品牌色和一個(gè)輔助色 。比如標(biāo)志性的宜家藍(lán)黃，或者喜力的（世界著名的荷蘭啤酒品牌 Heineken ）綠紅。當(dāng)設(shè)計(jì)用戶界面時(shí)，盡量保證在頁(yè)面的主體部分只使用一種顏色，這樣就不會(huì)讓用戶眼花繚亂不知所措。下圖是我最近為一家壽司店設(shè)計(jì)的網(wǎng)站，每個(gè)頁(yè)面都有一個(gè)主色，而互補(bǔ)色恰到好處地突出重點(diǎn)，吸引用戶的注意力。頁(yè)面的顏色變化有助于創(chuàng)造用戶的視覺(jué)焦點(diǎn)，并提供視覺(jué)變化防止用戶對(duì)顏色產(chǎn)生視覺(jué)疲勞。

壽司網(wǎng)站設(shè)計(jì)

當(dāng)然，如果常規(guī)的補(bǔ)色方案不足以體現(xiàn)你的設(shè)計(jì)個(gè)性，還可以選擇補(bǔ)色分割方案。

補(bǔ)色分割 

Split the difference

補(bǔ)色分割是指使用一種基色，輔助色取自其補(bǔ)色的兩側(cè)。

補(bǔ)色分割方案

下圖的阿姆斯特丹街景繪畫中，我運(yùn)用了補(bǔ)色分割的配色方案來(lái)區(qū)分自然河流、樹木和人造街道。

 

阿姆斯特丹街景

建筑本身也用了很多白色，這里有一個(gè)要點(diǎn)：不是所有的東西都需要上色 。事實(shí)上，在你的設(shè)計(jì)中 恰當(dāng)?shù)亓舭灼鸬搅藦?qiáng)調(diào)顏色和內(nèi)容的作用 。下圖將給你展示一個(gè)在 UI 設(shè)計(jì)中運(yùn)用這個(gè)方法的案例：

作者 Phil Cohn 的個(gè)人網(wǎng)站

這個(gè)作品里我不僅大量使用了留白，還使用了和阿姆斯特丹繪畫中相似的補(bǔ)色分割方案。此外，確保一個(gè)頁(yè)面只讓一種顏色主導(dǎo)，因?yàn)樘嗟膶?duì)比色會(huì)讓人產(chǎn)生視覺(jué)負(fù)擔(dān)，對(duì)于每個(gè)部分，也使用一種顏色為主，就像純素壽司的官網(wǎng)一樣。這也讓你可以加入更多顏色細(xì)節(jié)，例如下面背景中的三文魚配色與阿姆斯特丹房子相呼應(yīng)。

阿姆斯特丹系列插畫

對(duì)比色是吸引注意力的好方法，但在這個(gè)信息轟炸的時(shí)代，你想傳遞平靜的情緒呢？看起來(lái)是屬于同類的鄰近色配色方案是最好的選擇。

鄰近色 

Everybody needs good neighbors

我要說(shuō)的最后一個(gè)配色方案是關(guān)于鄰近色的，相似的顏色在色輪上彼此相鄰。

       

相似的顏色聚在一起，就像南極的企鵝一樣

想想我們身邊連成片的樹木，一望無(wú)際的草地，沙如雪的大漠。完全不需要色輪的另一邊來(lái)凸顯他們的存在。 在下圖中我運(yùn)用了鄰近色原理來(lái)創(chuàng)造和諧的感覺(jué)：

鄉(xiāng)村的小路插畫

食品品牌中經(jīng)常使用這種配色方案，尤其是有機(jī)食品 。它們也可以很容易地應(yīng)用 UI 設(shè)計(jì)中，就拿我為一個(gè)餐館做的這個(gè)設(shè)計(jì)來(lái)說(shuō)：

餐館網(wǎng)站設(shè)計(jì)

在這里沒(méi)有突兀的對(duì)比色，取而代之的是自然又不失精致的配色方案和大量的留白。要注意的是，有時(shí)鄰近色配色可能有點(diǎn)平淡，所以要根據(jù)設(shè)計(jì)場(chǎng)合謹(jǐn)慎使用。

你能在畫面中用到 RGB 色彩空間中所有的顏色嗎？

Can you paint with all the colours of the RBG colour space？

當(dāng)然，在色彩理論的世界里，還有很多有待學(xué)習(xí)的東西。不僅有其他配色方案，如三色、方形和雙互補(bǔ)，我甚至沒(méi)有開始加入飽和度、色相和明度的知識(shí)。我鼓勵(lì)大家閱讀更多關(guān)于配色的內(nèi)容，更重要的是動(dòng)手進(jìn)行創(chuàng)作！

原文：https://uxdesign.cc/how-to-apply-colour-theory-in-user-interface-design-4ca48e94e4cd

作者：Phil Cohn

譯者：陳熠璇

審核：吳鵬飛、張聿彤

編輯：孫淑雅

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

---

相關(guān)閱讀：

這些色彩心理學(xué)知識(shí)教你如何傳遞信息

往期精選文章：

英雄聯(lián)盟設(shè)計(jì)師揭秘游戲行業(yè)的用戶體驗(yàn)設(shè)計(jì)師角色

案例研究｜康奈爾大學(xué)副業(yè)社區(qū)網(wǎng)站設(shè)計(jì)

Web Vitals —— 谷歌的新一代 Web 性能體驗(yàn)和質(zhì)量指標(biāo)

網(wǎng)頁(yè)設(shè)計(jì)師能從日式美學(xué)中學(xué)到什么？

案例研究｜一款為你帶來(lái)難忘體驗(yàn)的美食 APP

如何制作打動(dòng)面試官的作品集，這里有一份完整的指導(dǎo)手冊(cè)

如何做好用戶體驗(yàn)項(xiàng)目？從一個(gè)好計(jì)劃開始

如何建立設(shè)計(jì)系統(tǒng)

如何把握不同層級(jí)用戶的需求：回歸本質(zhì)，打磨信息架構(gòu)

TCC 視野｜2021 年用戶體驗(yàn)設(shè)計(jì)趨勢(shì)分析

---

- 設(shè)計(jì)師自習(xí)社區(qū) -

TCC 設(shè)計(jì)情報(bào)局歡迎小伙伴加入，一起交流設(shè)計(jì)知識(shí)，了解全球設(shè)計(jì)資訊，鍛煉英文能力，發(fā)掘更多可能性～

添加小助手微信，備注「社群」，即可加入讀者群。