本文將介紹在 Sketch 中使用有用的“色彩理論”以及“工具和資源”進(jìn)行工作膘茎。同時(shí)還將“專注于實(shí)際示例”笙瑟，幫助你更加自信地進(jìn)行設(shè)計(jì)創(chuàng)作，以及通過(guò) Sketch 中的功能示例以幫助你更高效地進(jìn)行設(shè)計(jì)。
為什么要注重在UI中使用正確的顏色
顏色不僅能夠使UI更具吸引力秉馏，還能為用戶和企業(yè)帶來(lái)諸多好處通熄。
- 顏色增強(qiáng)了用戶體驗(yàn)：正確的調(diào)色板可以使內(nèi)容閱讀起來(lái)可能更舒適唆涝。特定的區(qū)域和對(duì)象將具有更多的意義，并且更易于引起關(guān)注棠隐。
- 顏色增強(qiáng)了品牌個(gè)性：顏色的使用可以讓公司或產(chǎn)品品牌建立更好的聯(lián)系石抡，從而使UI獲得信任感，并讓用戶感到自己找對(duì)了地方助泽。
- 顏色有助于實(shí)現(xiàn)目標(biāo)：顏色可以幫助創(chuàng)作者和用戶以正確的方式進(jìn)行交流啰扛。如果你想警告正在使用應(yīng)用程序中的某人嚎京，則可通過(guò)使用正確的顏色（通常為紅色）來(lái)實(shí)現(xiàn)。為此隐解，用戶將立即了解到這是一條值得閱讀的消息鞍帝。另一方面，按鈕的綠色可能會(huì)鼓勵(lì)用戶購(gòu)買特定產(chǎn)品煞茫，因?yàn)檫@表明這將是一個(gè)安全的操作過(guò)程帕涌。
數(shù)位設(shè)計(jì)中的色彩模型
讓我們?cè)趯W(xué)習(xí)更多實(shí)用技巧之前先了解一些色彩理論。
這些是用于數(shù)位設(shè)計(jì)的最受歡迎的顏色模型：
- RGB
- HSL
- HSV/HSB
RGB：（紅色续徽，綠色蚓曼，藍(lán)色）是加色模型。這意味著將紅色钦扭、綠色和藍(lán)光以各種方式相加纫版，以產(chǎn)生多種多樣的顏色。
HSL：（色相客情，飽和度其弊，亮度）RGB模型的替代表示。在HSL中膀斋，每種色調(diào)的顏色圍繞中性色的中心軸以放射狀切片放置梭伐，中性色的范圍從底部的黑色到頂部的白色。
HSV/HSB：（色相仰担，飽和度糊识，值或亮度）這種顏色方案經(jīng)常被誤認(rèn)為HSL，但這是RGB模型的另一種替代表示形式惰匙。和HSL一樣技掏，每個(gè)色調(diào)的 HSV 顏色都放置在徑向切片中，圍繞中性顏色的中軸项鬼，從底部的0%到頂部的100%不等哑梳。
Sketch中的顏色模型
Sketch支持上述所有模型，因此你能在工作中使用到它們绘盟。接下來(lái)鸠真，你將發(fā)現(xiàn)一些有用的提示，了解如何使用 HSB 模型來(lái)創(chuàng)建更好的色調(diào)龄毡。
配色方案
正確使用調(diào)色板對(duì)于使應(yīng)用程序更具吸引力至關(guān)重要吠卷。
有些顏色與另一種顏色搭配使用會(huì)看起來(lái)更好。這就是創(chuàng)建配色方案的原因沦零。它們幫助設(shè)計(jì)師為其余色調(diào)找到合適的搭配祭隔。以下是幾種配色方案：
- 單色 Monochromatic
- 近似色 Analogous
- 互補(bǔ)色（對(duì)比色） Complementary
- 三等分配色 Triadic
- 補(bǔ)色分割配色法 Split Complementary
- 方形配色 Square
- 矩形配色 Rectangle
下面將介紹最流行的4種配色方案。
單色 Monochromatic：根據(jù)同一色調(diào)中的不同色調(diào)（tone）路操，明色調(diào)（tint）和陰影（shade）創(chuàng)建的配色方案疾渴。如果要在應(yīng)用程序中使用它們千贯，請(qǐng)當(dāng)心UI可能看起來(lái)不太有趣。
近似色 Analogous：彼此相鄰的3種顏色創(chuàng)建相似的配色方案搞坝。它很容易創(chuàng)建搔谴，并且比單色方案更具吸引力。
互補(bǔ)(對(duì)比) Complementary：當(dāng)你從色輪的相反兩側(cè)組合2種顏色時(shí)桩撮，該方案將被創(chuàng)建出來(lái)敦第。它們可能還包括這些顏色的色調(diào)和陰影。
三等分 Triadic：由3種色調(diào)組成的配色方案店量，這些色調(diào)在色輪周圍均勻分布芜果。這種配色方案很難獲取到好的方案，但是它們可以使設(shè)計(jì)更具吸引力垫桂。
在Sketch中創(chuàng)建配色方案
有一些Sketch工具和插件可幫助你快速創(chuàng)建自己的調(diào)色板师幕。
- Alembic：一個(gè)從 Sketch 圖紙中的照片上提取顏色的插件粟按。
- Sketch Palettes：一個(gè)可以讓你在Sketch中保存和加載調(diào)色板的有用插件诬滩。
- Import Colors：此插件使你可以從不同格式導(dǎo)入各種顏色樣本。
- Automate：它具有多種功能灭将，包括可以使用它創(chuàng)建色彩樣式指南疼鸟。
神奇的60–30–10規(guī)則：最佳色彩平衡
60-30-10規(guī)則是室內(nèi)設(shè)計(jì)行業(yè)中眾所周知的永恒裝飾原則。它非常簡(jiǎn)單和有效庙曙。該規(guī)則用于在配色方案中找到合適的平衡空镜。
60％ + 30％ + 10％是所用顏色之間的比例：
- 60％ - 應(yīng)該屬于主顏色的數(shù)量
- 30％ - 次要顏色區(qū)域
- 10％ - 其余部分屬于強(qiáng)調(diào)色
如何在UI設(shè)計(jì)中使用60-30-10規(guī)則?
盡管該原理已在室內(nèi)設(shè)計(jì)領(lǐng)域產(chǎn)生，但你也可以成功地將其應(yīng)用于數(shù)字化設(shè)計(jì)中捌朴。將應(yīng)用程序或頁(yè)面視為內(nèi)容的空間吴攒，并應(yīng)用規(guī)則以使設(shè)計(jì)更加平衡。
灰色不應(yīng)為純灰色
雖然灰色是不明顯的顏色砂蔽，但在用戶眼中會(huì)獲勝洼怔。如果你像我一樣，你會(huì)在很多地方尋求靈感左驾×土ィ看看建筑，當(dāng)今我們使用很多灰色調(diào)诡右，但是它非常適合現(xiàn)代建筑安岂。我還注意到，越來(lái)越多的汽車是灰色的帆吻，但它們看起來(lái)非常吸引人域那。
這些中性色調(diào)如何為物體增添更多生命？這個(gè)秘密很微妙猜煮，但非常重要......
好的灰色不是純灰色次员，如果你在中性色調(diào)上添加一些顏色样眠，則會(huì)發(fā)生神奇的效果。
灰度 Grayscale - 如何在UI設(shè)計(jì)中使用它翠肘？
當(dāng)你考慮在應(yīng)用中使用灰色時(shí)檐束，純灰色可能不會(huì)那么吸引人。為了使你的UI看起來(lái)更好束倍，嘗試為中性色調(diào)添加一些色相和飽和度被丧。這樣會(huì)使用戶感覺(jué)到中性色調(diào)更自然。
使用非100％的灰色對(duì)于我們的眼睛至關(guān)重要绪妹。它使一切看起來(lái)更加自然甥桂。甚至蘋(píng)果公司也開(kāi)始使用“Truetone”，因此iPhone邮旷，iPad和MacBook的顯示屏?xí)鶕?jù)照明溫度進(jìn)行調(diào)整黄选，以感覺(jué)更自然。
Sketch中的灰度
盡管你必須記住以自己正確的方式設(shè)置中性色調(diào)婶肩，但是你也可以使用簡(jiǎn)單的插件Convert to Grayscale 使你的畫(huà)板呈灰色（純灰色色調(diào)）办陷。
色調(diào)（Tones） —— 使UI更具吸引力的技巧
在本節(jié)中，將向你展示如何使UI的色調(diào)變得更加生動(dòng)和吸引人律歼。
首先民镜，讓我們了解如何構(gòu)建不同的顏色變體。
如果觀察現(xiàn)實(shí)世界中的顏色如何相互作用险毁，你會(huì)發(fā)現(xiàn)陰影和色調(diào)不僅僅是亮度的變化制圈， 許多陰影還具有比主色更多的飽和色調(diào)。另一方面畔况，啟蒙區(qū)域更亮但飽和度更低鲸鹦。如果你想讓你的設(shè)計(jì)感覺(jué)更自然，你也應(yīng)該遵循這個(gè)發(fā)現(xiàn)跷跪。
在Sketch中創(chuàng)建較深的顏色變體
- 選擇一種品牌色馋嗜。
- 將Sketch應(yīng)用程序顏色選擇器切換到HSB模式。
- 將B（HSB的亮度）降低到適合較暗變體的水平域庇。
- 添加S（HSB的飽和度）的值嵌戈，以使其更具吸引力。
- 完工听皿！
在Sketch中創(chuàng)建較淺的顏色變體
- 選擇一種品牌顏色熟呛。
- 將Sketch應(yīng)用程序顏色選擇器切換到HSB模式。
- 將B（HSB的亮度）的值增加到適合較淺色調(diào)的水平尉姨。
- 降低S的值（HSB的飽和度）庵朝。
- 完工！
通過(guò)這種簡(jiǎn)單的操作，你的顏色變體在調(diào)色板中看起來(lái)會(huì)很好九府。
顏色可訪問(wèn)性 —— 適合所有用戶的設(shè)計(jì)
記住那些以不同于我們大多數(shù)人的方式感知色彩的人非常重要椎瘟。顏色在我們的感知中起著重要作用。
為了使你的 Web 或移動(dòng)解決方案完全可訪問(wèn)侄旬，你應(yīng)使用WCAG 2.0準(zhǔn)則來(lái)確認(rèn)你的解決方案是否符合標(biāo)準(zhǔn)肺蔚。
如果你為特定平臺(tái)（例如iOS或Android）設(shè)計(jì)UI，則應(yīng)遵循其有關(guān)視覺(jué)設(shè)計(jì)可訪問(wèn)性的準(zhǔn)則：
Sketch的色彩可訪問(wèn)性
為確保所有顏色均符合Web輔助功能指南儡羔，我建議使用Stark plugin宣羊。它允許你檢查對(duì)比度和模擬色盲。
顏色含義與文化背景
顏色對(duì)我們?nèi)绾胃兄鉀Q方案產(chǎn)生了巨大影響汰蜘。正確的語(yǔ)調(diào)在每種文化中都有其意義仇冯。他們也與我們的情緒有關(guān)。
以下是基本顏色及其與情感和含義的關(guān)系：
- 白色：新鮮族操，干凈苛坚，現(xiàn)代，純潔
- 灰色：中性色难，有些微妙
- 黑色：神秘泼舱，力量，奢華莱预，邪惡
- 紅色：力量柠掂，行動(dòng)，自信依沮，愛(ài)
- 藍(lán)色：安全，鎮(zhèn)定枪狂，舒適危喉，值得信賴
- 綠色：新鮮，自然
- 黃色：警告州疾，冒險(xiǎn)辜限，快樂(lè)
- 橙色：能量，幸福
顏色的含義可能會(huì)因你所居住的文化環(huán)境而異严蓖。如果你想研究差異薄嫡，請(qǐng)隨時(shí)閱讀這篇文章。
在針對(duì)特定市場(chǎng)進(jìn)行設(shè)計(jì)時(shí)颗胡，必須了解其含義毫深。這將幫助你的UI獲得更多更多的意義并避免錯(cuò)誤。
Sketch中顏色操作的其他提示
獲取常用顏色：要檢查Sketch中常用的顏色毒姨，請(qǐng)單擊“顏色選取器”標(biāo)簽右側(cè)的圖標(biāo)哑蔫。它顯示了文檔中最常用的顏色列表。
查找和替換顏色：當(dāng)你必須快速切換文檔中的調(diào)色板時(shí)，在Sketch中可以做到這一點(diǎn)闸迷。要更改顏色嵌纲，請(qǐng)從菜單中選擇“編輯 > 查找（Edit > Find）并替換顏色(Replace Color)”（也可以按Option+Command+F鍵）。
還有一些其他選項(xiàng)允許你配置顏色修改是否還會(huì)影響具有不同不透明度的顏色腥沽。
其他有用的工具
這些工具可以幫助你為UI設(shè)計(jì)構(gòu)建正確的調(diào)色板：
調(diào)色板靈感
要構(gòu)建良好的UI調(diào)色板逮走，找到靈感很重要。以下這些站點(diǎn)將為你提供幾乎所有調(diào)色板的幫助：
總結(jié)
顏色在我們的設(shè)計(jì)中起著重要作用今阳。 大多數(shù)時(shí)候言沐，我們會(huì)直觀地使用它們。但是酣栈，更加有意識(shí)的方法會(huì)得到更好的結(jié)果险胰，并且會(huì)讓用戶會(huì)感受到與眾不同。
（編譯完）
英文原文：https://medium.com/sketch-app-sources/sketch-colors-7682c1eedc78
原文作者：Thalion
編譯作者：@iris0327
以上譯文僅代表原作者觀點(diǎn)矿筝。如需轉(zhuǎn)載請(qǐng)遵循CC版權(quán)協(xié)議正確標(biāo)明出處起便。
