顏色是所有設計系統中的一個關鍵要素。在網站或應用程序中，可以通過多種方式使用顏色。有時通過對比或將顏色限制在選定范圍，可以利用顏色創建焦點；顏色還有助于建立層次結構，并影響用戶的視角。

在本文中，我們將討論如何策略性地使用顏色。

1. 通過配比創建焦點

顏色配比的一個典范是Viporte的設計。向下滾動其主頁時，你會發現每個部分的中心部位都有一個大字母。在該部分加入動畫前，該字母就涂滿漂亮的顏色。不同動畫圖像的顏色與字母的顏色有關。焦點是各部分的中心最毋庸置疑的內容，這在某種程度上要歸功于顏色的集中使用。配比變化——有時只有幾種顏色，有時有很多種顏色。無論采用哪種方式，配比都是用于吸引注意力并形成焦點。如果每個部分都充斥著比較明顯的顏色，焦點就不會那么清晰了。

2. 通過對比引起注意

此外，通過顏色可以巧妙地進行對比。如果整體設計的顏色趨于平靜或柔和，添加對比色會讓圖像更引人關注。

Thinx的設計便是如此。在其主頁上，界面的整體配色方案實際上采用的是黑白色。然而，該設計在很大程度上依賴于數量龐大的照片。尤其是在主頁頂部，內衣圖片以暗紅色為背景。與頁面上的其它內容相比，這相當大膽。

毫無疑問，這里凸顯的是暗紅色。紅色與黑白配色方案形成高度對比。我喜歡列舉Thinx的例子，因為這行之有效，這表明明亮的霓虹色不是通過對比而引人注目的唯一顏色。這的確是協調兩種顏色的一種舉措，能夠切實凸顯其中的一種顏色。

3. 使用顏色來創建UX設計模式

?

創建視覺模式的最佳方法是通過連貫性。反過來，模式創建了用戶習以為常的聯系。同理，用戶習慣于將某些圖標與某些行為聯系起來，比如垃圾桶意味著刪除。顏色更是因人而異，因為每個網站或應用程序都可以從其自身角度賦予顏色意義。

讓我們來探討下Underbelly產品網站上藍色的運用。這個簡單的例子能充分支持我的觀點。Underbelly網站上所有可以點擊打開的地方都是藍色的。登陸該網址幾秒鐘后，你很快會發現其鏈接都是藍色的。這便是通過顏色創建模式的方法。模式行之有效，因為模式能夠讓用戶和訪問者輕易地悟出某些含義。然而，越容易悟徹，啟發人們進行的思考就越少；現在我們都知道這讓Steve Krug有多開心。

4. 通過顏色搭建層次結構

?

顏色還擅長搭建層次結構。在Skore的產品頁面，幾乎所有部分都含有綠色元素。綠色的重復使用創建了可以識別的模式，還有助于區分給定部分的重要內容。通常，很容易通過大小（例如字體大小）來說明層次結構。但利用顏色的強度，以及添加使用的顏色，都可以很好地搭建出層次結構。

在Skore的例子中，綠色與灰色文本和白色背景形成了很好的對比，因而引人注目。此外，其配色方案并不是依賴其它重點色將綠色凸顯出來。所有這些都有助于各部分顯示層次結構。因此，綠色有助于引導用戶關注重要內容，前提是各部分都有很好的層次結構。綠色元素告知用戶首先要看向哪里。

5. 利用顏色的相似性

設計人員利用顏色實現不同的目標，但大多是利用和重復利用顏色保持設計內容的連貫性。我們來看看InVision年底的登錄頁面。頁面頂部是粉色和紫色漸變背景圖像。頁面下方，按鈕的顏色也采用了紅色和紫色。

此外，登錄頁面再次使用了粉色和紫色作為背景，背景之上使用了白色。頁面還再次使用了黑色和灰色文本，背景為白色。如果每次都使用不同的顏色，頁面看上去就不會那么棒了。

我們來看看Co-motion。在其主頁上，創意團隊使用了幾種不同的顏色。這幾種顏色在色調上非常相似，看上去協調而流暢，但并不凸顯任何內容，這也是個不錯的設計。在這種情況下，對顏色的強調是通過頁面良好的協調性和流暢性實現的，你想讓用戶對頁面感興趣并滾動頁面讀取內容。

結論

顏色是非常棒的工具，它能幫助你實現各種設計目標。顏色有助于明確和搭建層次結構并明晰焦點。顏色強調形式多種多樣。無論哪種方式，設計時使用顏色將其樂無窮。在策略性配色方案的幫助下，將可輕松影響訪問者或用戶的視角。

------------------------------------------------------------

非特殊說明，本文版權歸原作者所有，轉載請注明出處

本文圖片未注明來源均來自網絡，版權歸作者所有

微信公眾號：qduckcn ，趣達愛設計

原文出處：www.webdesignerdepot.com

原文作者：?Paula Borowska