大家好卫枝，我是Clip鼎天。今天為大家?guī)?lái)的文章是「調(diào)色板」断盛。顏色的搭配和選擇影響著產(chǎn)品最后呈現(xiàn)出來(lái)的視覺(jué)效果为居，合理的顏色配比能加深用戶對(duì)品牌的印象矾克。
色彩無(wú)處不在教寂。因此對(duì)于設(shè)計(jì)師來(lái)說(shuō)捏鱼，選擇和使用合理的顏色來(lái)實(shí)現(xiàn)業(yè)務(wù)目標(biāo)是一項(xiàng)挑戰(zhàn)。
顏色的選擇會(huì)影響產(chǎn)品的視覺(jué)樣式酪耕，也會(huì)影響用戶對(duì)產(chǎn)品的感覺(jué)导梆。下面是創(chuàng)建一套UI配色方案的實(shí)用技巧，一起來(lái)看看吧～
一迂烁、定義基本的顏色
首先要定義基本色看尼。理想情況下應(yīng)該有1-3個(gè)基本色與產(chǎn)品相關(guān)聯(lián)。
另外需要注意的是不要使用純白或純黑色盟步。白色(#FFFFFF)的顏色亮度為100%藏斩，黑色(#000000)的亮度為0%，這種強(qiáng)烈的對(duì)比在閱讀或操作時(shí)會(huì)使眼睛疲勞却盘。
最好的辦法是確定灰度色狰域，灰度色適用于大多數(shù)界面設(shè)計(jì)窜觉。由于灰色度的H值和S值沒(méi)有變化，所以只要改變B的數(shù)值就能形成一套色板北专。
語(yǔ)義色是用來(lái)向用戶傳達(dá)成功禀挫、錯(cuò)誤和警告信息的顏色。以下場(chǎng)景中可以考慮使用：
突出顯示重要的界面狀態(tài)或信息拓颓；
驗(yàn)證文本字段或控件语婴，如切換、復(fù)選框驶睦；
提供快速的視覺(jué)反饋砰左，如新的應(yīng)用消息。
二场航、60-30-10配色規(guī)則
60%+30%+10%規(guī)則之所以有效是因?yàn)樗鼛?lái)了平衡感缠导，引導(dǎo)用戶的視線從一個(gè)CTA區(qū)域平滑移動(dòng)到另一個(gè)區(qū)域。
配色規(guī)則非常簡(jiǎn)單溉痢，如下所示：
60%的空間用于主色調(diào)僻造；
30%是空間輔助/次要顏色；
10%是強(qiáng)調(diào)色或指導(dǎo)色孩饼。
為了可視化表現(xiàn)髓削，來(lái)看一個(gè)“60-30-10”示例：
當(dāng)然也可以按其他順序搭配，它仍然有效镀娶。
三立膛、了解受眾
好的用戶體驗(yàn)的關(guān)鍵是理解受眾。顏色在這里起著重要的作用梯码，因?yàn)轭伾倪x擇會(huì)影響用戶與產(chǎn)品交互時(shí)的感受和情緒宝泵。
因此選擇顏色時(shí)，必須要問(wèn)自己以下問(wèn)題：
誰(shuí)是你的目標(biāo)受眾轩娶？
他們的年齡儿奶？
產(chǎn)品的專業(yè)化是什么？
你想讓產(chǎn)品喚起什么樣的情感罢坝？
這些問(wèn)題應(yīng)該會(huì)影響到顏色的選擇廓握，所以在選擇UI調(diào)色板或與團(tuán)隊(duì)討論選擇時(shí)，請(qǐng)始終關(guān)注這些問(wèn)題嘁酿。
四、使用配色工具
有時(shí)候可能會(huì)苦于沒(méi)有靈感男应，很棒的技巧是利用自然或建筑來(lái)激發(fā)獨(dú)特的配色方案闹司。
網(wǎng)絡(luò)上有很多工具可以將圖像生成調(diào)色板。以下是一些實(shí)用的工具：
Coolors.co/image-picker（Web app）
Alembic(Sketch插件)
Image-Palette(Figma插件)
五沐飘、使用對(duì)比
如果你想把用戶的注意力集中在特定的操作上游桩，最好使用強(qiáng)對(duì)比度的顏色來(lái)幫助用戶找到焦點(diǎn)牲迫。
對(duì)比度幫助用戶區(qū)分各種文本和非文本元素。更高的對(duì)比度使圖像看起來(lái)更舒服借卧，通過(guò)對(duì)比檢查可以有效地評(píng)估顏色的搭配盹憎。
這里教大家一個(gè)快速檢查顏色飽和度是否統(tǒng)一的方法：
畫(huà)一個(gè)顏色為純黑(#000000)的矩形,填充模式選擇“飽和度”，覆蓋在色板上铐刘，色板上的顏色會(huì)出現(xiàn)飽和度的變化陪每，以此來(lái)檢查配色的飽和度是否相同。
通過(guò)這種小技巧檢查顏色的飽和度镰吵，能看到別人看不見(jiàn)的東西檩禾。
六、簡(jiǎn)單的命名方式
在系統(tǒng)中使用顏色時(shí)疤祭，請(qǐng)始終為每種顏色提供確切的名稱盼产。保證團(tuán)隊(duì)中的每個(gè)成員都能理解該名稱，很容易就能引用特定的顏色勺馆。
最好使用功能性詞語(yǔ)來(lái)描述UI中的顏色戏售，例如積極、警告草穆、主動(dòng)等蜈项。
總結(jié)
關(guān)于UI顏色的內(nèi)容可以總結(jié)為三個(gè)原則：
一致：在整個(gè)UI界面中顏色的應(yīng)用應(yīng)該一致，并與它所代表的品牌兼容续挟；
對(duì)比：顏色應(yīng)該在元素之間產(chǎn)生區(qū)別紧卒，有足夠的對(duì)比；
意識(shí)：色彩的運(yùn)用應(yīng)該有目的诗祸，以多種方式傳達(dá)意義跑芳。
最后為大家整理了常用的漸變色工具，后臺(tái)回復(fù)：?漸變色?即可獲戎甭博个！
精彩推薦：
2功偿、案例分析：柵格系統(tǒng)的布局設(shè)計(jì)
