一、為什麼要重視在UI中使用正確的顏色
顏色不僅僅是為了使UI更加吸引人，它們也為用戶和企業帶來許多好處。
- 顏色增強用戶體驗——得益於正確的色板，內容更加易讀。特定區域和對象更加富有意義，更加容易被注意到。
- 顏色增強品牌個性——顏色的使用能夠和企業或品牌建立更好的聯繫。得益於此，UI取得用戶的信任，使得用戶感覺到自己在正確的位置上。
- 顏色有助於目標的實現——顏色讓設計師和用戶通過正確的方式交流。如果你想在app中警告某人，你會使用正確的顏色（通常是紅色），用戶會立即意識到這是值得閱讀的信息。另一方面，綠色按鈕會激發用戶購買特定產品的慾望，它表明這是安全的過程。
二、設計中的色彩模型
在分享更多實用技巧之前，我們有必要了解一些色彩理論。
以下是數碼設計中最常見的色彩模型：
- RGB
- HSL
- HSV / HSB
RGB ——（紅，綠，藍）RGB是附加顏色模型。通過混合紅、綠、藍三種光來重現各種顏色。
HSL ——（色相、飽和度、亮度）HSL是RGB模型的替代模型。HSL中每種顏色的色相圍繞中性色的中心軸呈放射狀分佈，中性色的範圍是頂部的白色到底部的黑色。
HSV/HSB ——（色相、飽和度、值或亮度）這種顏色模型經常被誤認是HSL，其實它也是RGB模型的一種替代模型。和HSL類似，HSV的每種顏色色相圍繞中性色的中心軸呈放射狀分佈，不同的是，中性色的範圍值從頂部的100%到底部的0%。
1. Sketch中的色彩模型
Sketch支持上述所有色彩模型，你可以在設計中儘可能地使用它們。下一章，我會通過一些技巧，教你如何在HSB模型中調出更好看的色調。
2. 配色方案
App更加吸引人的關鍵在於使用正確的色板。
一些顏色看起來比其他顏色更佳，也是為什麼我們要設計配色方案的原因。配色方案幫助設計師找到適合其餘顏色的色調。下面是一些配色方案類型：
- 單色
- 類比色
- 互補色
- 分裂互補色
- 三角對比配色
- 正方形配色方案
- 矩形配色
下面我只重點提及4種最常用的配色方案類型，想詳細瞭解請閱讀《設計師理論：如何設計你自己的配色方案》
單色 —— 單色配色方案由同一色相中的不同色調、色彩、和色度構成。請小心用在App中——UI可能比較單調。
類比色 —— 類比配色方案由色輪中相鄰的三種顏色構成。這種方案容易創建，比單色配色方案更加吸引人
互補色 —— 互補配色方案通過融合色輪上的2種對立顏色構成。容易通過這些顏色的色彩和色度拓展。
三角對比配色 —— 三角對比配色方案由三種在色輪中具有同等間隔的色相構成。這種配色方案很難調和，但它們能夠讓設計更具吸引力。
3. 在Sketch中創建配色方案
有一些工具&插件可以幫助你快速創建自己的色板：
Alembic—— 一個從Sketch中的照片提取顏色的插件
Sketch Palettes —— 一個讓你在Sketch中保存和加載色板的實用插件；
Import Colors —— 支持導入不同格式色板的插件；
Automate —— 功能強大的輔助插件，你可以用它創建色彩樣式指南；
三、正確的平衡 —— 神奇的60-30-10原則
60-30-10原則是室內設計行業中的一個著名和永恆的裝飾原則。它非常簡單和高效。這個原則可以用來找到配色方案中的正確平衡。
60%+30%+10%是所用顏色之間的比例：
60%——屬於主要顏色的數量；
30%——次要顏色的範圍；
10%——房間剩餘的部分屬於強調色；
1. 60-30-10原則——如何應用在UI設計中？
儘管這個原則來自室內設計，但你可以將其成功地應用在數碼設計中。將App或者頁面視作內容的空間，應用該原則使你的設計更加平衡。
四、灰色不灰
灰色不明顯，但博得用戶眼球。如果你和我一樣，就會在各個方面尋求靈感。看看建築，如今我們慣用灰色調，而且完美適合現代建築。我也注意到越來越多的汽車是灰色的，但它們看起來非常吸引人。
這些中性色為物體增添多少生機？這個秘密微妙且甚為重要…
好的灰色不是純灰色——如果你在中性色上增加一些顏色，會發生神奇的效果。
1. 灰度——如何應用在UI設計中？
當你考慮在App中使用灰色時，純灰色可能不會那麼吸引人。為了讓你的UI更好看，可以嘗試為中性色增加一些色度和飽和度。這樣做會讓用戶感覺到中性色更加自然。
使用不是100%純正的灰色對我們的眼睛至關重要。這讓一切看上去更加自然。甚至蘋果公司也開始使用 “Truetone” ，讓iPhones、iPads和Macbooks的屏幕根據光線色溫自動調整，以感覺更自然。
2. Sketch中的灰度
雖然你必須牢記通過自己正確的方式設置中性色，但你也可以用簡單的 Convert to Grayscale (https://github.com/mheesakkers/sketch-plugin-convert-to-grayscale)插件將畫板設置為灰色（純灰色色調）。
五、色調——讓UI更加吸引人的技巧
在本節中，我將向你展示如何使UI的色調變得更加生動和吸引人。
首先，讓我們瞭解如何構建不同的顏色變體。
如果你觀察現實世界中的顏色如何相互作用，你會注意到陰影和色彩不僅僅是亮度的變化。許多陰影具有比主色更高的飽和度。另一方面，亮面雖然更亮但飽和度弱些。如果你想要讓設計感覺上更加自然，你應該遵循此觀察。
1. 在Sketch中創建深色變體
- 吸取你項目的一種顏色；
- 將Sketch的色彩模式轉換為HSB模式；
- 降低B（HSB的亮度）的值，直到合適深色的範圍；
- 增加S（HSB的飽和度）的值；
- 瞧！
製作深色色調
2.在Sketch中製作淺色變體
- 吸取你項目的一種顏色；
- 將Sketch的色彩模式轉換為HSB模式；
- 增加B（HSB的亮度）的值，直到合適淺色的範圍；
- 降低S（HSB的飽和度）的值；
- 瞧！
製作淺色色調
簡單的步驟，你的顏色變體在色板中看起來更好。
為了獲得更好的效果，你可以學習這種製作顏色變體的框架：《UI設計中的顏色：實用的框架》。
六、顏色無障礙——適合所有用戶的設計
考慮到那些以不同於我們大多數人的方式感知色彩的人是十分重要的。色彩在我們的感知中起著重要作用。
為了讓你的網頁或移動端解決方案完全無障礙，你應該遵循WCAG 2.0指南
如果你的UI是為特定平臺（iOS或Android）設計的，則應該遵循它們的視覺無障礙設計規範：
Apple iOS HIG —— Color and Contrast；
Material Design —— Accessiblity；
1. Sketch中的顏色無障礙
為了確保所有的顏色都匹配網頁無障礙指南，我建議使用 Stark插件。它讓你可以檢查對比度和模仿色盲的視角。
2. 顏色含義 & 文化環境
顏色對我們如何感知解決方案造成巨大影響。正確的色調在每一種文化中都具備它們的意義，它們也和我們的情緒有關。
下面是基礎顏色和情緒以及意義之間的關係：
白色 ——清新、乾淨、現代、純潔；
灰色——中性、中庸；
黑色——神秘、力量、豪華、邪惡；
紅色——力量、熱情、自信、愛；
藍色——安全、平靜、舒適、可靠；
綠色——清新、自然；
黃色——溫暖、危險、開心；
橙色——活力、幸福；
顏色的含義取決於你生活的環境。
針對特定市場的設計必須瞭解當地的顏色含義，這有利於你設計的UI兼容更多的含義和避免誤解。
3. Sketch中顏色處理的一些技巧
選擇常用的顏色——想要知道Sketch中哪種顏色使用頻率高，點擊拾色器右邊的按鈕，它會顯示文檔中最常用的顏色列表。
查找和替換顏色——你想要快速替換文檔中的色板，你可以通過菜單中的編輯>查找和替換顏色（或者Option-Command-F快捷鍵）來替換顏色。
一些額外選項可以讓你設置顏色修改是否影響不同透明度的顏色。酷！
七、色板及配色工具資源
在設計導航的配色欄目中，有很多可以幫助你為UI設計創建合適色板以及配色用的工具，比如coolors APP、UI Gradient、Color Hunt等都是很不錯工具資源，設計師可以挑選一個喜歡的來使用。
八、總結
顏色在我們的設計中起著重要作用。大多數時候，我們會直觀地使用它們。然而，有意識地運用能夠獲得更好的效果，用戶也會感覺到與眾不同。想要掌握色彩的運用還是結合視頻來學習比較高效，比如騰訊課堂的優時節學院，有很多免費的乾貨，加入社群也是很好的學習方式，讓你的學習不再孤單！
閱讀更多 優時節設計 的文章
