可能性範圍：首選 UI 顏色指南

沒有辦法：顏色是視覺設計中最具影響力的創意元素。 從佈景設計的迷人風景背景到像素藝術的錯綜複雜的構圖，對色彩的深刻理解是引人注目的交流的萬能鑰匙。 需要證明嗎？

在最近一項以品牌為重點的研究中，當參與者被要求繪製 10 家標誌性公司的徽標時，只有 16% 的人能夠回憶起準確的形狀和設計特徵。 然而，當被要求識別品牌的調色板時，正確回复的數量高達 80%。

顏色在用戶界面設計領域也扮演著重要的角色。 我們每天與之交互的數字產品依賴於策略性地使用顏色來傳達重要信息，因此 UX 和 UI 設計師了解如何明智地使用顏色至關重要。

在本指南中，我們將：

• 揭開色彩理論的基礎，
• 為在數字界面中處理顏色提供堅如磐石的原則，
• 分享有助於建立色彩意識的資源，以及
• 使 UI 設計師能夠創建自己卓越的配色方案。

本指南的目標是色彩能力，其次是色彩信心，所有這些都是為了在我們每天遇到的用戶界面中實現驚人的色彩執行。

速成課程：UI 設計師的色彩理論

色彩理論是一個廣闊的研究領域，擁有自己的術語、方法和科學基礎。 它可能很複雜，但這不是我們想要的。 我們想要的是理解可以以閃電般快速的精度應用的顏色。 我們希望以使用形狀的方式使用顏色——毫不費力、大膽而有效地。

要以這種方式使用顏色，UI 設計師必須對以下核心顏色理論概念有深刻的理解：

• 顏色是相對的。
• 飽和度過載會破壞色彩活力。
• 同時對比有利有弊。
• 基本配色方案是最好的。
• 色調總是影響價值。

讓我們深入挖掘。

顏色是相對的

顏色永遠不會孤立。 當人眼和大腦共同觀察顏色時，它們總是受到以下因素的影響：

• 燈光照耀在顏色上
• 顏色周圍的其他顏色

看看大自然的這個例子：

答：大腦和眼睛協同工作，幫助我們了解整個花實際上是鮮紅色的。

B＆C：花朵陰影（B）的深棕色使花瓣脊（C）上的高光看起來比實際的暗栗色要亮得多。 從本質上講，照射在花瓣脊上的光線和陰影的顏色協同工作，以欺騙眼睛並增強亮點。

這是另一個示例，顯示了顏色的欺騙性：

在 UI 設計中，顏色相關性並不總是那麼明顯，因此方案中的顏色應該相互測試。 為什麼？ 因為樣式指南中排列精美的顏色選擇在應用於界面時可能會出現問題。

大外賣？ 不要溺愛你的色彩概念。 如果在 Sketch 中被空白包圍時，強調黃色的樣本看起來很茂盛，但與 UI 的主要配色方案發生衝突，請找到不同的解決方案。

飽和度過載會扼殺色彩活力

色彩飽和度是色彩活力不可或缺的一部分。 然而，僅圍繞高度飽和的顏色組合的方案會壓倒眼睛，並且減少活力。 有了顏色，少即是多。 當與飽和度較低的顏色一起使用時，高度飽和的顏色會變得充滿活力。

同時對比有利有弊

當完全相同值的顏色補色彼此相鄰放置時，會發生同時對比。 效果如此強烈，以至於兩種顏色相遇的點振動或脈動。

對於 UI 設計師來說，同時對比可以產生正面和負面的結果，因此了解如何控制這種視覺現象的效力非常重要。

例如，在圍繞各種藍色設計的界面中，使用與藍色錨顏色具有相同值的互補橙色將是吸引人們注意通知圖標的好方法。

但是，如果用於下拉菜單的文本和背景，同樣的橙色和藍色組合會引起偏頭痛。

基本配色方案是最好的

彩虹是美麗的——在大自然中。 在 UI 設計中，必須更有選擇性地使用顏色，否則它會壓倒體驗。 即使品牌擁有具有多種選擇的高影響力調色板，最好還是表現出克制並圍繞簡單的配色方案構建用戶界面。

以下是構建基本 UI 配色方案的兩個萬無一失的計劃：

1. 類似的 UI 配色方案

• 這些令人賞心悅目的方案由在色輪上緊密分組的顏色組成。
• 在自然環境的照片中很容易找到類似的配色方案，尤其是植物生命，它們往往在視覺上平靜。
• 類似方案的多樣性來自飽和度和亮度的變化，而不是主要的色調變化。
• 使用類似方案時，嘗試直接從色輪中添加一種高度飽和的顏色，以在界面中創建重點。

2. 互補的 UI 配色方案

• 互補色方案基於在色輪上相互補充的冷色和暖色的相互作用。
• 通過在互補的極端之間改變飽和度和亮度來實現顏色多樣性。
• 使用太多明亮、高度飽和的顏色會破壞互補方案的影響。

色調總是影響價值

這聽起來可能很奇怪，但顏色有相應的灰度值。 這是證據：

在上圖中，我們有一系列亮度和飽和度為 100% 的色調，但看看當這些顏色轉換為灰度時會發生什麼：

繁榮！ 顯示了整個灰度值範圍。 為什麼這對 UI 設計師很重要？ 一個字：對比。

暫時將您的想法切換到灰度。 如果你想創造對比度，你會在 50% 的基礎上使用 40% 的灰度值嗎？ 當然不是，但這正是當色調被排除在顏色對比度方程之外時所面臨的風險。

請記住，色調總是會影響價值。

數字接口的 4 個基本色彩原則

既然我們已經簡化了色彩理論並將其核心概念與 UI 設計相關聯，是時候更專注於色彩在數字界面中所扮演的角色了。 這些是從每個 UI 設計項目的最初努力中必須考慮的四個顏色原則。

1. 文字和顏色之間的關係至關重要。
2. 顏色可訪問性不容忽視。
3. 對比是必不可少的，但它不是萬能的設計。
4. 顏色在按比例應用時效果最佳。

文本和顏色之間的關係至關重要

顏色會影響可讀性。 大多數 UI 設計師原則上都理解這一點，這就是為什麼我們看不到很多帶有紅色背景上的綠色正文的界面的原因。 取而代之的是，文本和顏色之間的張力微妙地出現，通過常見的 UI 組件（如表單、按鈕、標題和圖標）蔓延開來。

遵循以下簡單指南，保持健康的文本/顏色關係：

• 始終避免文本和背景之間的低對比度。
• 不要對文本和背景使用互補色，尤其是當顏色具有相似的亮度和飽和度時（例如，紫色背景上的黃色文本）。
• 即使在白色背景上，也不要將正文設置為明亮的顏色。 黑色和深灰色是最容易閱讀的。

不可忽視的顏色可訪問性

顏色是可以交流的，但它不能是用於在 UI 中傳達信息的唯一設計元素。 為什麼不？ 因為一些網絡用戶對顏色的感知與大多數人不同（或根本沒有）。

例如，如果圖標中的唯一區別是顏色變化，則經歷色盲的人可能無法判斷產品圖標何時處於“按下”狀態。

此外，有些人很難看到與界面背景顏色對比度較低的重要 UI 組件。 諸如 Colorable 和 Contrast Ratio 之類的網站允許設計師快速測試一系列顏色配對的對比度可訪問性。

對比度是必不可少的，但它不是萬能的設計

是的，UI 設計中的顏色對比很重要。 計劃，實施，從中受益。 但不要指望像魔杖一樣揮動它並修復糟糕的設計。

形狀、空間、大小和其他設計元素不容忽視。 顏色對比可以使糟糕的用戶界面看起來很吸引人，但它不會解決糟糕的用戶體驗。

顏色在按比例應用時效果最佳

想像一個新聞應用程序，其中每個文本實例都設置在標題大小寫中，或者一個電子商務網站設計在 9x9 圖像網格上。 兩者都會很糟糕！

精明的 UI 設計師按比例使用排版和重複等設計元素來增強設計層次結構。 顏色值得同樣深思熟慮。 在 UI 設計中，使用過多的顏色會混淆信息的感知方式。

持續進步的色彩資源

這是一個不便的事實：用顏色設計是一種技能，必須培養技能。 大多數 UI 設計師天生就知道什麼顏色搭配起來很好看（也就是顏色品味），但這並不總是轉化為應用程序。

要真正掌握色彩並看到它對 UI 設計的全部影響，設計師必須實踐。 幸運的是，有大量資源可以幫助您繼續學習色彩和培養技能。

Ctrl+繪畫

如果您是一名希望立即獲得色彩信心的 UI 設計師，請從 ctrlpaint.com 開始，這是一個致力於數字繪畫教學的網站。 數字繪畫？ 真的嗎？

絕對地。 專業概念藝術家 Matt Kohr 通過快速視頻教程和動手練習教授數字色彩的使用。 課程非常簡單，以“畫你所見”為中心，無論是在現實世界還是想像中。

先從免費的視頻庫（第 11 節）開始，然後再轉到Color Starter Kit中更密集的練習。

Josef Albers 和 Color App 的交互

藝術家/教育家約瑟夫·阿爾伯斯（Josef Albers）的先實踐後理論方法對當代色彩相對論的理解進行了大量探索和推進。

阿爾伯斯提出單一顏色可以有“多張面孔”，並鼓勵他的學生進行廣泛的遊戲和實驗，希望“睜大眼睛”看到顏色在現實世界中的真實表現（與我們設想的象徵性顏色相反）在我們的腦海中）。

1963 年，阿爾伯斯撰寫了《色彩的互動》 ，這本教科書在世界藝術和設計教育中繼續具有高度影響力。 為慶祝該書出版 50 週年，耶魯大學發布了一款交互式 iPad 應用程序，該應用程序包含全文，還允許用戶玩和試驗阿爾伯斯的色板。

對於 UI 設計師，顏色交互應用程序提供了在數字環境中體驗模擬顏色練習的機會，並親眼目睹顏色相對性如何影響用戶界面。

安德魯·盧米斯

在 20 世紀上半葉，安德魯·盧米斯 (Andrew Loomis) 是芝加哥美國藝術學院的傑出插畫家和講師，但他不朽的遺產是作家的遺產。 盧米斯寫了六本關於商業藝術和設計的書，涵蓋了從人物繪畫到產品放置的一系列主題。

在他的著作《創意插圖》和《畫家之眼》 （均可在 archive.org 上找到）中，Loomis 刪除了許多與現代 UI 設計領域相關的經久不衰的內容：

顏色上最大的錯誤，也是導致缺乏統一和和諧的錯誤，就是調色板上的顏色太多了。

當一種或兩種顏色都包含另一種顏色時，任何兩種顏色都會是和諧的。

顏色比其他任何美的元素都更適合實驗。

其他設計師的界面

一旦達到基本的色彩能力水平，配色方案的創作就會變成一種迷人的追求。 遇到的每個界面都成為學習和批評的機會，並且觀察比比皆是。

當參考其他設計師的工作變得授權時，這是 UI 設計師的發展階段。 為何如此？ 因為參考從目的地轉移到旅程，從終點轉移到靈感。

所有技能水平的 UI 設計師都可以從持續記錄找到的 UI 配色方案中受益。 截取屏幕截圖、保留物理色彩日誌、啟動情緒板——無論需要什麼來為未來的實施留下色彩照明時刻。

顏色太重要了，不容忽視

在設計數字界面時，顏色不是可選的考慮因素。 即使在使用最少顏色的 UI（或完全是黑白的 UI）中，UI 設計人員也必須了解為什麼使用或不使用顏色以及它如何影響用戶體驗。

UI 設計師能夠生成和實施原始配色方案也很重要。 參考其他設計師和數字產品的作品是一種有價值的做法，但當它是設計過程中進行色彩探索的唯一方法時，這就變得有限了。 能夠捕捉現實世界或頭腦中看到的顏色配對具有巨大的價值。

如果您是一位難以巧妙地使用顏色的設計師，或者您曾經想過“我對顏色真的沒有訣竅”，請不要灰心。 用顏色進行設計不是某種形式的創意魔法或特殊的禮物。 這是一門實用的學科，建立在可以重複和改進的簡單技術之上。

請記住，顏色是清晰和引人注目的設計交流的萬能鑰匙。 無論是謹慎實施還是魯莽放棄，它都會影響轉化率、品牌知名度和用戶體驗。 對於 UI 設計師來說，顏色是一個不容忽視的強大工具。

• • •

進一步閱讀 Toptal 設計博客：

1. 顏色在用戶體驗中的作用
2. 為更好的用戶體驗創建 UI 樣式指南
3. 用戶體驗和 Web 可訪問性的重要性
4. 藝術與設計——一場永恆的辯論
5. 交互環境和智能空間設計