大家好,我是Clippp。今天為大家帶來的文章是「調色板」。顏色的搭配和選擇影響著產品最后呈現出來的視覺效果,合理的顏色配比能加深用戶對品牌的印象。色彩無處不在。因此對于設計師來說,選擇和使用合理的顏色來實現業務目標是一項挑戰。顏色的選擇會影響產品的視覺樣式,也會影響用戶對產品的感覺。下面是創建一套UI配色方案的實用技巧,一起來看看吧~
一、定義基本的顏色
- 突出顯示重要的界面狀態或信息;
- 驗證文本字段或控件,如切換、復選框;
-
提供快速的視覺反饋,如新的應用消息。
二、60-30-10配色規則
- 60%的空間用于主色調;
- 30%是空間輔助/次要顏色;
-
10%是強調色或指導色。
三、了解受眾
- 誰是你的目標受眾?
- 他們的年齡?
- 產品的專業化是什么?
-
你想讓產品喚起什么樣的情感?
這些問題應該會影響到顏色的選擇,所以在選擇UI調色板或與團隊討論選擇時,請始終關注這些問題。
四、使用配色工具
- Coolors.co/image-picker(Web app)
- Alembic(Sketch插件)
- Image-Palette(Figma插件)

五、使用對比
六、簡單的命名方式

總結
- 一致:在整個UI界面中顏色的應用應該一致,并與它所代表的品牌兼容;
- 對比:顏色應該在元素之間產生區別,有足夠的對比;
-
意識:色彩的運用應該有目的,以多種方式傳達意義。
原文地址:prototypr.io
作者:Buninux
譯者:Clippp
轉載請注明:學UI網 » 如何創建更好用的UI調色板?
登錄收藏