給你的配色做減法

研究表明：人類在回憶所看到過的場景和事物時，對色彩的記憶度要高於形態。也就是說，從視覺角度來看，一款產品給用戶留下最深的印象往往是界面的配色。由此我們也能夠看出配色可以說是設計師最重要的武器，很可能沒有之一，但是這個武器有使用的「限制」。

UI設計的一個基本原則就是避免頁面中出現過多的顏色，這個道理大家都懂，但是在真正自己設計的時候總是會下意識的引入過多的顏色，導致整個界面看起來非常的雜亂。所以對於設計師來說，學會給界面的配色做減法是很重要的一項技能。

配色體系的作用

給一款產品建立配色體系之前，設計師首先要弄明白的是：我為什麼要建立配色體系？這個問題聽起來十分多餘而且稍顯無厘頭。但是在我看來，每次做東西之前常問自己為什麼可以很好的提高工作效率。只有真正理解了配色的意義，我們才可以做到有的放矢，進行有選擇性的刪減。

通常來說，配色體系的建立主要有以下三個目標：

1 視覺區分

2 調整界面風格

3 吸引用戶注意力

1

視覺區分

一個app或網站可能會有好幾個主要且同級別的功能和分區。這時，設計師需要對產品的信息內容和功能模塊進行整體規劃，建立界面的基本格局來幫助用戶在視覺上進行更好的區分。配色可以很好的幫助設計師實現這一目標。

配色可以完成視覺區分，但是視覺區分不是只能通過配色來實現。文字，圖像（圖標），布局都可以完成視覺區分。

例如，一款理財類應用中有不同種類的理財產品（普通型，隨借隨還型和可轉讓型）和不同的狀態（投資確認中，投資成功已起息，清算中等合計11種狀態）。

在這種情況下（3種產品類型，11種產品狀態），配色就要很小心了。首先我們要對狀態進行整合，相似的狀態整合成一種，這樣可以減少顏色的數量。當然會有人感覺六種顏色還是多，因為書本上告訴我們同一頁面中配色不要超過三種。但是我們得從實際情況出發，對於理財產品來說，用戶不太可能在同一屏中看到全部的六種狀態，也就是說用戶同時看到六種顏色的概率很小。

另外我們放棄了對產品類型使用配色，因為狀態已經使用了六種配色。在這種情況下，如果我們還對產品類型使用顏色來區分（一個類型一個顏色），那麼整個頁面就會顯得很亂。所以在這裡，對於產品類型我們選擇使用文字（標籤）的形式來區分。

文字相對於色彩來說，給用戶的視覺體驗還是稍弱一點。所以我們要對要頁面中的內容做一個優先順序的排序，重要的內容優先使用配色。在這裡我們認為相對於產品類型，用戶更關注自己產品的當前狀態。

2

視覺風格

產品的視覺風格是根據其自身定位和用戶需求所決定的，有的產品要求界面具有活力，能讓用戶產生興奮感（購買慾望），我們可以使用光波較長紅色和橙色來作為產品的主色調。

有的產品講究沉穩舒適內斂，那麼我們使用藍色，灰色可能會更加適合點。

配色可以很好的幫助我們建立一個產品的視覺風格。但是我們也要知道一款產品的視覺風格是由文字，圖像和色彩一起構成的。也就是說，文字和圖像同樣可以影響一款產品的視覺風格。

文字的跳躍率是指同一界面中不同文字之間的大小比率。不同功能的文字在排版設計的時候會有字型大小和字重的區別，例如主標題，副標題和正文的字型大小通常是依次減小的，這種字型大小的差異會帶來不同的文字跳躍率。一般來說，文字跳躍率高的界面會顯得比較活潑，文字跳躍率低的界面會顯得平靜沉著。

在配色的時候，如果我們減少色彩的使用數目，大面積使用白，灰，黑或者其他同色相配色（藍色與淺藍色，紅色與粉紅色等），這樣的界面會顯得莊重高雅且富有現代感，但是會顯得單調。那麼我們就應該適度的提升文字跳躍率給界面提升一些活力。

當然，不只文字有跳躍率，圖片也有跳躍率。設計師可以通過對圖片和文字跳躍率的控制來削減界面視覺風格對於配色的依賴。

3

吸引用戶注意力

我們經常喜歡使用配色來吸引用戶注意力，以下圖中行為召喚按鈕(call to action)為例，配以與背景色差距較大的顏色使其可以從背景中凸顯出來。

GIF/1623K

其實我們即使不使用配色也可以很好的吸引用戶注意力。

谷歌搜索的主頁出現了大面積的留白，用戶的目光自然就會被吸引到搜索框。這和谷歌的初衷相契合，他們希望用戶在這個頁面完成搜索操作，所以不用展示過多其他的信息來分散用戶的注意力。

陰影效果也可以用來吸引用戶注意力，陰影效果可以提升目標元素的「海拔」，進而使其從背景中凸顯出來。

GIF/258K

當然我們還可以使用模糊效果來吸引用戶注意力。用戶總是會不由自主的被那些對焦準確的部分吸引而忽視掉被虛化的部分。眼球的對焦機制好像一個調節器一樣捕捉那些離你忽遠忽近的物體，這樣才能讓你感受到周圍一切事物的深度和距離。這就是我們人眼的工作機制。設計師可以根據這個理論將界面中一些不重要的內容進行模糊處理來凸顯那些重要的內容。

總結

好的設計應該讓用戶短時間內就可以找到他們感興趣的內容，過多的給予對用戶來說其實是一種負擔。少即是多，這是當前互聯網時代的信條也是設計師需要恪守的準則。希望這篇文章可以給你帶來幫助。

交互設計學堂已經開設了新的欄目-行知書院，旨在幫助小夥伴們來高效的學習現在市面上優秀的用戶體驗書籍比如《交互設計精髓》等等，同時結合老D的工作經驗來幫助你們從不同的高度和角度來解讀書中的內容。每天一課，積少成多。已有134位小夥伴加入。詳細了解行知書院

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

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 交互設計學堂 的精彩文章: