如何在UI設計中正確地運用色彩，以及一些色彩運用技巧

顏色和其他東西一樣，最好是適度使用——少了，寡淡無味，多了，過猶不及。如果你能堅持在自己的配色方案中最多不會超過三種主色調，那麼一般來講，你的設計都會獲得比較好的效果。在一個設計項目中，應用的顏色與設計最終呈現出來的平衡感有著莫大的關係，你選擇使用的顏色越多，那麼想要實現平衡感就越難。

「色彩並不能為你的設計作品增添令人愉悅/舒適的質感——它的實際作用是強化了這種質感。」—— Pierre Bonnard

如果在設計過程中，你已經確定好了自己的調色板，但是又需要一些額外的顏色來做補充，可以運用陰影和色調來做一些變化，它們結合起來會呈現出一種和諧的效果。

60-30-10原則

這個室內裝修的配色原則是經時間檢驗的配色技巧，可以幫助你輕鬆地將配色方案組織在一起。60%+30%+10% 的比例是為了實現平衡色彩，這個公式之所以起作用，是因為它創造了一種平衡感，讓眼睛可以舒服地從一個焦點移動到另一個焦點。難得的是它的使用也非常簡單。其中：主色調佔60%，輔助色佔30%，重點突出顏色佔10%；

顏色的意義

科學家研究了幾個世紀以來某些顏色對生理的影響。除了美學，色彩是情感和想像力的創造者。顏色的含義很大程度上取決於文化和環境。這就是你經常看到黑色和白色的時尚商店的原因——他們想要使自己顯得優雅、品質卓越。

創建自己專屬的色彩方案並沒有那麼複雜，我們可以運用一下技巧，不費力氣地搭配色彩。

1. 源於你想要表達的情緒

當我們在進行色彩搭配時，不能只考慮事物的外觀，還必須考慮事物給予人的感覺。眾所周知，顏色會引發情緒，顏色所表現的含義將直接影響到用戶對產品的感知。因此，我們需要明白我們所想表達的情緒。

問問自己：我希望我的用戶和網站相關聯的情緒或者感受是什麼？

· 紅色 – 激情、有力、危險、重要 – 紅色是一種極具刺激性的顏色，它能給人留下速度與力量的印象，傳遞著一種重要性或是危險性。經證明，紅色有著促進血液循環和提高新陳代謝的生理效應。

· 橙色 – 愉悅、生機、魅力、便宜 – 橙色是溫暖而鮮艷的顏色，它給人一種充滿活力的感覺，能讓訪客賓至如歸。

· 黃色 – 興奮、友善、刺激、尋求注意力 – 不同的黃色能表達不一樣的情緒。淡黃色往往與太陽有關，因此傳達一種積極性和溫暖，深黃色往往又給人老舊感和年代感。

· 綠色 – 自然、安全、新鮮 – 綠色能傳遞一種環保和親近自然的情緒，它也意味著生長，所以綠色往往與賺錢的行業聯繫到一起。

· 藍色 – 信任、平靜、可靠- 藍色往往是平靜且放鬆的，往往能激發人們內心的安全感。所以很多銀行和科技公司都喜歡用這種顏色。

· 紫色 – 奢華、神秘、浪漫、信仰 – 紫色往往能表現一種高貴的感覺，在西方，紫色在歷史上與王室相關。

· 粉色 – 女性、純真、青春 – 粉色往往被認為是女性化的意思，很多人認為這是女孩的顏色。但根據Joe Hallock的研究，粉色並不是最受女性歡迎的顏色。不過粉色常用在比較浪漫的主題中。

· 黑色 – 權力、複雜、神秘、鋒利 – 可以說黑色是光譜中最強大的顏色了，它能迅速地抓住人的注意力，甚至在這一點上超過了紅色。這就是為什麼文字和著重點常常都用黑色/當黑色作為背景或是主要組成部分是，就能營造出一種權力感和奢華感。

· 白色 – 純潔、健康、潔凈、天真 – 白色能突出和其搭配的顏色，所以白色很適合作為次要的配色。當作為主角時，白色呈現一種乾淨的感覺，並能讓用戶的注意力更容易集中在重要的元素，比如具有號召性的按鈕上。

· 灰色 – 中性、正式、複雜、禁慾 – 灰色往往表達中立的情緒。以灰色為主調的配色往往都有形式感，所以商業領域很喜歡使用灰色。

顏色數量不要太多

色彩在設計中的運用需要維持一種平衡，使用的顏色越多，就越難達到這種平衡。

設計中使用太多種顏色就想企圖一次傳達一百萬種感受和信息，這隻會混淆用戶的視聽。

如果限制設計中 使用的顏色數量，我們將會得到更好的效果。根據經驗，配色中最多可以使用三種主色。事實證明，大多數用戶更喜歡簡潔的配色方案。根據多倫多大學關於人們如何使用Abode Color CC的研究，大多數人表示他們喜歡簡潔的顏色組合，僅僅依靠兩種或三種顏色。

提示：如果需要使用調色板之外的顏色，請使用不同的色調。

我在dribbble上的作品，只用了簡單的單色，專註於元素的調整

避免使用純粹的灰色或者黑色

我所學的用色技巧中，有一點很重要，那就是避免使用沒有飽和度的灰色。在現實生活中，純粹的灰色基本上是不存在的，同理黑色也是一樣。

張照片中最深的顏色色值不是#000，而是#0A0A10

你要始終記得給自己的顏色添加一點飽和度，這樣潛意識中，用戶看著它會覺得更加自然和親切。

相信自然

最棒的色彩組合來源於大自然，這些色彩組合總會看起來非常舒服自然。從環境中選取適合的顏色組合，但是設計最佳的最終方案還是需要不停地調試你的調色板。

要汲取（配色）靈感，我們只需看看周圍

保持對比度

對比度是兩種顏色之間變化的度量。這是一個有利於抓住注意力的工具。一般來說，高對比度是重要內容或關鍵要素的最佳表現形勢。你想要突出的東西閱讀，就越需要對比度。

從左至右：互補色、相近色、三色系、分散的互補色、方形色系、矩形色系

獲取靈感

當我們說起UI設計參考的時候，dribbble是最好的尋找靈感的地方。它也有搜索顏色的工具，所以當你想對其他設計師「如何使用特殊顏色」進行視覺研究時，請你到這裡來：dribbble.com/colors

視頻、印刷設計、室內設計、時尚……有太多可以獲取靈感的地方。不要太依賴那些固有的調色板樣式，而是要把所有你看起來非常喜歡、覺得有趣、讓你眼前一亮的東西存起來。

我經常從一些韓國視頻里偷顏色，它們非常漂亮

工具

為了提高效率，我2017年收集了一些特別棒的選色工具。它們會節省你大量的時間。

1.Coolors.co

這是我最喜歡的選色工具。你只需簡單地鎖定選定的顏色，然後按空格生成調色板。在Coolors上你可以上傳一張圖片，並從中生成一個調色板。最酷的事情是，你不僅限於一個調色板結果，它會給你提供一個選擇器，允許你隨時修改引用點。

2.Kuler

這個來自於Adobe的工具已經陪伴了我們很久了。它可以在網頁端使用，也有桌面本地版本。如果你使用的是桌面版本，可以把配色方案導入到Photoshop里。

3.Paletton

這個工具跟Kuler很像，不同的是，它生成的調色板里不局限於5種顏色。當你已經確定了主色調，想要找一些填充色的時候，這是個非常棒的工具。

4.Designspiration.net

想想一下，你已經有了一套配色方案，但是你還是想看一下他們組合起來的實際效果。這時候，強烈安利Designspiration給你。你可以選擇5種顏色，然後搜索到使用這5種顏色的設計圖。真的很贊，不是因為你可以查到應用了這些色彩的圖像，而是因為你可以真正看到它們在設計中真實被使用、實現的樣子。

5.Shutterstock Lab Spectrum

你可能會詢問——如果我想根據某特定色彩搜索圖片呢？Shutterstock有個功能，名叫Spectrum，可供你根據特定的顏色來搜索圖片。你甚至不需要訂閱，因為帶水印的小圖預覽足夠生成調色板。

5.利用灰度進行設計

色彩搭配是一件很有趣的事，我們在開始新項目之前往往都要先做色彩的搭配。有時我們會很想從一開始就使用不同的顏色組合，但我強烈建議要忍住，不要被此誘惑，而是先專註於灰度的設計。再添加顏色之前，利用灰度進行設計，會使得我們更加專註於頁面的結構與布局

7.遵循連續性規則

我們在設計中需要考慮到整個網站色彩的連續性。但連續性並不意味著每個頁面都要使用相同的顏色，這也太無聊了！但我們需要注意在從一個頁面跳轉到另一個頁面時，顏色的變化應該平滑些。當用戶在訪問這些網頁時，就會產生一種熟悉感。在大多數情況下，我們使用一種顏色就能達到連接的效果。例如，當用戶從主頁面前往產品詳情頁面時，我們可以將品牌的主打色作為標題，以產生一體的連貫性

8.設計的可用性

可用性是使用顏色進行設計時一個必須考慮的關鍵因素。今天的產品應該儘可能地適用於每一個人。在考慮設計中的可用性和顏色時，請注意以下幾點：

避免使用單獨的一種顏色作為指標

大約8%的男性和0.5%的女性，也就是每12個男人中或每200個女人中就有一人受到某種色盲的影響。雖然有很多種色盲的形式，但在這其中，紅綠色盲是最常見的。還有這種色盲的人，一般無法看到紅色和綠色的變化。

我們所設計的網站中，大部分都會讓紅綠色盲患者變成遇到困難的盲人用戶。比如接下來這個十分常見的案例：當我們在網站上填寫註冊表單時，有時會收到一個信息：標紅的欄位是必填的。這可能也不是一件大事，但對於色覺不足的人來說，這個信息的表現可以說十分令人沮喪了。

我們需要注意，色盲也有不一樣的情況，比如紅綠、黃藍或者是單色，因此使用多種的視覺線索來傳遞重要信息是十分必需的。除了顏色之外，我們還可以用到標誌、指標、圖案、形狀或文字等元素來描述狀態或內容。

避免低對比度的文字

色彩對比是色彩理論對於設計的可用性至關重要的一個領域。如果我們需要在文本中使用顏色時，請注意使用兩種對比度較低的顏色可能會使得副本難以閱讀。

查對比度以保證背景和內容之間有著足夠的對比度，適用於色盲或者是弱視人士。實際上這並不難，只需要檢查一下對比度。

對比度代表一種顏色和另一種顏色的差異，通常寫作1：1或21：1，兩個數字之間的差異越高，顏色之間的相對亮度差異就越大。W3C推薦，正文文本和圖像之間的對比應該是：

· 小文本與背景的對比度至少為4.5：1。

· 大文本（在14pt粗體/18pt正常以上）的背景對比度至少為3：1。

用色彩豐富你的世界！

色彩可以創造或是毀掉你的設計，所以在涉及任何東西，尤其是網站時，我們需要明智地選擇色彩。我希望上面的技巧和工具能夠在你尋找合適地顏色搭配時幫助到你。不過這需要個人的不斷練習，願愉快！

總結

色彩是一個很難掌握的概念，特別是在數字時代。上面提到的技巧可以為查找正確的色彩這項工作提供一些便利。而如果你想創造出讓人驚艷的配色方案，最好的方法歸根到底，還是需要不斷地練習。所以，別光看文章，動起手來，沉浸到色彩的世界中，玩兒起來~

原文地址：《How to use colors in UI Design》

敬

請

關

注

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！