今天為大家帶來的文章是「調色板」。顏色的搭配和選擇影響著產品最後呈現出來的視覺效果，合理的顏色配比能加深用戶對品牌的印象。
色彩無處不在。因此對於設計師來說，選擇和使用合理的顏色來實現業務目標是一項挑戰。
顏色的選擇會影響產品的視覺樣式，也會影響用戶對產品的感覺。下面是創建一套UI配色方案的實用技巧，一起來看看吧～
一、定義基本的顏色
首先要定義基本色。理想情況下應該有1-3個基本色與產品相關聯。
另外需要注意的是不要使用純白或純黑色。白色(#FFFFFF)的顏色亮度為100%，黑色(#000000)的亮度為0%，這種強烈的對比在閱讀或操作時會使眼睛疲勞。
最好的辦法是確定灰度色，灰度色適用於大多數界面設計。由於灰色度的H值和S值沒有變化，所以只要改變B的數值就能形成一套色板。
語義色是用來向用戶傳達成功、錯誤和警告信息的顏色。以下場景中可以考慮使用：
突出顯示重要的界面狀態或信息；
驗證文本欄位或控制項，如切換、複選框；
提供快速的視覺反饋，如新的應用消息。
二、60-30-10配色規則
60%+30%+10%規則之所以有效是因為它帶來了平衡感，引導用戶的視線從一個CTA區域平滑移動到另一個區域。
配色規則非常簡單，如下所示：
60%的空間用於主色調；
30%是空間輔助/次要顏色；
10%是強調色或指導色。
為了可視化表現，來看一個「60-30-10」示例：
當然也可以按其他順序搭配，它仍然有效。
三、了解受眾
好的用戶體驗的關鍵是理解受眾。顏色在這裡起著重要的作用，因為顏色的選擇會影響用戶與產品交互時的感受和情緒。
因此選擇顏色時，必須要問自己以下問題：
誰是你的目標受眾？
他們的年齡？
產品的專業化是什麼？
你想讓產品喚起什麼樣的情感？
這些問題應該會影響到顏色的選擇，所以在選擇UI調色板或與團隊討論選擇時，請始終關注這些問題。
四、使用配色工具
有時候可能會苦於沒有靈感，一個很棒的技巧是利用自然或建築來激發獨特的配色方案。
網絡上有很多工具可以將圖像生成調色板。以下是一些實用的工具：
Coolors.co/image-picker（Web app）
Alembic(Sketch插件)
Image-Palette(Figma插件)
五、使用對比
如果你想把用戶的注意力集中在特定的操作上，最好使用強對比度的顏色來幫助用戶找到焦點。
對比度幫助用戶區分各種文本和非文本元素。更高的對比度使圖像看起來更舒服，通過對比檢查可以有效地評估顏色的搭配。
這裡教大家一個快速檢查顏色飽和度是否統一的方法：
畫一個顏色為純黑(#000000)的矩形,填充模式選擇「飽和度」，覆蓋在色板上，色板上的顏色會出現飽和度的變化，以此來檢查配色的飽和度是否相同。
通過這種小技巧檢查顏色的飽和度，能看到別人看不見的東西。
六、簡單的命名方式
在系統中使用顏色時，請始終為每種顏色提供確切的名稱。保證團隊中的每個成員都能理解該名稱，很容易就能引用特定的顏色。
最好使用功能性詞語來描述UI中的顏色，例如積極、警告、主動等。
總結
關於UI顏色的內容可以總結為三個原則：
一致：在整個UI界面中顏色的應用應該一致，並與它所代表的品牌兼容；
對比：顏色應該在元素之間產生區別，有足夠的對比；
意識：色彩的運用應該有目的，以多種方式傳達意義。
可愛的你請把可愛的我設為「星標」。