UI 設計中的顏色運用：一個可行的框架

之前也寫過一篇討論UI配色的文章 UI設計之黑白灰 ，同樣是對優秀作品的觀察，但是本文作者的觀點真的很新鮮，希望能給大家帶來一些啟發。

對于UI設計，我一直都是靠自學，在這其中我一直很好奇為什么有如此多的文章和書籍都在討論顏色理論和調色板。以我自己的經驗來看，要做出一個好看的設計，光憑借一個“劃分為互補色的調色板”，是沒什么用處的。

對于這些色彩理論知識，我只有一個詞評價： 無用 。

那么，如果這些色彩理論知識沒用為UI設計中的顏色運用給出一個可靠的根據，那靠什么給出這個根據呢？

我先對此給出一個觀點：顏色的變化。重要的是顏色的變化，而不是根據一堆顏色理論來選擇顏色。

或者換一種說法： 界面設計中用色的最基本技巧是將一個基礎顏色轉變成許多不同的變化的顏色。

我知道這聽起來有點奇怪，別急，下文我會給出一個調節顏色技巧的框架。

這個框架將會：

1. 在你的UI設計中，讓你更加隨心的調整主題色；

2. 幫你預測什么樣的顏色變化，會使界面好看；

3. 選擇顏色更加客觀，有理有據。

更深&更淺的顏色變化

一直以來，我從很多設計精美的界面中注意到他們通常會基于一個特定的主題色變化出更深和更淺的顏色。

現在來看看Swell Grid，一款預測海浪的app。

這個網頁上所有的顏色，都是由第一個藍色演變而來的。

這有個簡單的例子：

甚至眼見的狀態也會隨著顏色的變化而不同。這被稱之為一種藍色的不同變化。

但這又產生了一個問題： 如何修改顏色來得到合適的顏色變化？

我們下文會回答這個問題，首先我想讓你們從根本上理解這個問題。以下列了兩個可靠的顏色來闡明這個問題：

1. 我們將從真實的世界中找線索。盡管我們的界面是”虛擬“的，但我們仍然可以從真實的世界獲得啟發；

2. 我們將會運用HSB顏色系統，因為這是被廣泛使用的顏色系統。

真實世界顏色的變化

那么，請你環顧你的四周。每當你環顧你的房間，關于是什么樣的顏色變化，你總能找到20多個實例？

答案是影子。

你可以認為影子是由一個基礎顏色變得更深的顏色。

現在讓我們用Sketch的顏色吸取功能，去查明當影子露在橘紅色的墻上的時候發生了什么？

就像我在上文提到的，我們將探索它在HSB中的秘密。

顯而易見的是明度會降低，在我們繼續歸納總結之前，再看一個例子。

這個陰影和上例是同樣的原理么？

現在我們可以比較兩者了，注意到規律了么？

當一個顏色變的更深時，會發現明度降低，飽和度升高。這是目前為止，你能得到的肯定的結論。

現在只有色相是最為詭異的——在橘紅色的墻上它的數值是降低的，在墨綠色的墻上它的數值是上升的。對于這個現象有一個解釋，但相對于飽和度或者明度而言，這個解釋顯得次要并且難懂，稍后我們再談色相。

規則

讓我們更進一步分解這個概念。

深顏色的變化=更高的飽和度+更低的明度

如果你回頭看下非死book搜索框的例子，你會發現究竟發生了什么。

飽和度隨著明度的降低而升高。這個搜索框不會是在基礎的藍色上覆蓋一層透明的黑色，原因是增加黑色等同于降低明度，而我們想要的是降低明度的同時增加飽和度，而黑色并不會增加任何飽和度。

為什么在真實的世界中，深色和高飽和度有關？那是因為隨著光（明度）的密度超過顏色（飽和度）的密度，顏色會脫色，反之亦然。

淺色的變化=更低的飽和度+更高的明度

如果我們繼續降低飽和度，并且提高明度，我們會得到什么？

我們會得到白色。

你可以想到通過增加白色使顏色變得更淺。在Sketch中有兩個十分簡單的方式給一個顏色加上白色。

1. 降低一個原色的透明度（如果它有一個白色的背景）；

2. 在這個元素上增加一個半透明的白色。

最重要的事

如果你只能從這篇文章中記住一件事，那么請記住：

深色的變化是通過降低明度，并且增加飽和度得到的；淺色的變化是通過提高明度和降低飽和度得到的。

元素之間顏色的變化，或者相同元素之間狀態的變化，僅僅通過調節顏色就可以得到。

這是一款我十分喜歡使用的記錄時間的軟件。

這個網頁的導航欄上可以看到懸浮狀態是更淺的顏色，選中狀態是更深的顏色。

我們也可以看這個新建按鈕。

懸浮狀態是更深的顏色——高飽和度、低明度。

老實說，不是所有的設計都百分百遵循這個規則。在上面網站的導航欄處，選中狀態是更低的明度（飽和度不變），懸浮狀態是更低的飽和度（明度不變）。

關于色相

首先，每個顏色都有其專屬的“感知明度”，也就是光亮度。

上圖中，盡管黃色和藍色的明度和飽和度都是100%，但你覺得那個顏色看起來亮一些？

當然黃色要亮些。即使保持明度和飽和度不變，僅僅改變色相，你會得到一系列的亮度，或者說是感知的明度。

上圖是色盤上間隔20度的色相，并且都是100%的純度和明度。現在我們來看一個圖表。

我們能從中發現規律。首先注意到這個圖表有3個最大點和3個最小點，最小點是紅、綠藍。最高的點是黃、青、洋紅。

這幾種顏色是不是讓你想到了RGB和CMY?不過我們先忽略這點。

從中得到的重要的點是：如果你不考慮飽和度和明度，將色相顏色紅（0度）、綠（120度）或者藍（240度）方向移動，會降低亮度。如果色相沿著洋紅、青、黃運動，會增加亮度。

其中的訣竅就是：如果你想要一個更深的顏色變化，色相可以朝著紅（0度）、綠120度）或者藍（240度）方向移動（當然已經假定調低明度和增加飽和度了）。

這也就解釋了為什么在橘黃墻上的影子，色相值會降低，因為朝著紅色運動的。

也同樣解釋了為什么在墨綠色的墻上，色相會升高的原因。

用色的方法

因此當談及到顏色的變化時，問自己：我是否需要一個根據已有的顏色來變化深淺？

更深的顏色變化：

1. 降低明度；

2. 提高飽和度；

3. 色相朝著更低的發光度移動（紅、綠、藍）。

更亮顏色的變化：

1. 增加明度；

2. 降低飽和度；

3. 色相朝著更高的發光度移動（洋紅、青、黃）。

上圖舉了個簡單的例子，整個界面由一個單色和顏色的深淺變化構成。

 

 

來自：http://mp.weixin.qq.com/s?__biz=MzA4OTQ2ODg5MA==&mid=2647722522&idx=1&sn=97070c5c790d4bc15e3dc643d1d5d80d&chksm=883fd0afbf4859b9a3d5263d75ca988c29a54f28c123e35aa5ac18e4fb9c29ada816a4b17eae#rd