怎樣創建UI調色板更好用？

今天為大家帶來的文章是「調色板」。顏色的搭配和選擇影響著產品最後呈現出來的視覺效果，合理的顏色配比能加深用戶對品牌的印象。

色彩無處不在。因此對於設計師來說，選擇和使用合理的顏色來實現業務目標是一項挑戰。

顏色的選擇會影響產品的視覺樣式，也會影響用戶對產品的感覺。下麵是創建一套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界麵中顏色的應用應該一致，並與它所代表的品牌兼容；

對比：顏色應該在元素之間產生區別，有足夠的對比；

意識：色彩的運用應該有目的，以多種方式傳達意義。

（本文作者Buninu，譯者Clippp，文章來源於微信公眾號@Clip設計夾）