本文将介绍在 Sketch 中使用有用的“色彩理论”以及“工具和资源”进行工作。同时还将“专注于实际示例”，帮助你更加自信地进行设计创作，以及通过 Sketch 中的功能示例以帮助你更高效地进行设计。
为什么要注重在UI中使用正确的颜色
颜色不仅能够使UI更具吸引力，还能为用户和企业带来诸多好处。
- 颜色增强了用户体验：正确的调色板可以使内容阅读起来可能更舒适。特定的区域和对象将具有更多的意义，并且更易于引起关注。
- 颜色增强了品牌个性：颜色的使用可以让公司或产品品牌建立更好的联系，从而使UI获得信任感，并让用户感到自己找对了地方。
- 颜色有助于实现目标：颜色可以帮助创作者和用户以正确的方式进行交流。如果你想警告正在使用应用程序中的某人，则可通过使用正确的颜色（通常为红色）来实现。为此，用户将立即了解到这是一条值得阅读的消息。另一方面，按钮的绿色可能会鼓励用户购买特定产品，因为这表明这将是一个安全的操作过程。
数位设计中的色彩模型
让我们在学习更多实用技巧之前先了解一些色彩理论。
这些是用于数位设计的最受欢迎的颜色模型：
- RGB
- HSL
- HSV/HSB
RGB：（红色，绿色，蓝色）是加色模型。这意味着将红色、绿色和蓝光以各种方式相加，以产生多种多样的颜色。
HSL：（色相，饱和度，亮度）RGB模型的替代表示。在HSL中，每种色调的颜色围绕中性色的中心轴以放射状切片放置，中性色的范围从底部的黑色到顶部的白色。
HSV/HSB：（色相，饱和度，值或亮度）这种颜色方案经常被误认为HSL，但这是RGB模型的另一种替代表示形式。和HSL一样，每个色调的 HSV 颜色都放置在径向切片中，围绕中性颜色的中轴，从底部的0%到顶部的100%不等。
image
Sketch中的颜色模型
Sketch支持上述所有模型，因此你能在工作中使用到它们。接下来，你将发现一些有用的提示，了解如何使用 HSB 模型来创建更好的色调。
image
配色方案
正确使用调色板对于使应用程序更具吸引力至关重要。
有些颜色与另一种颜色搭配使用会看起来更好。这就是创建配色方案的原因。它们帮助设计师为其余色调找到合适的搭配。以下是几种配色方案：
- 单色 Monochromatic
- 近似色 Analogous
- 互补色（对比色） Complementary
- 三等分配色 Triadic
- 补色分割配色法 Split Complementary
- 方形配色 Square
- 矩形配色 Rectangle
下面将介绍最流行的4种配色方案。
单色 Monochromatic：根据同一色调中的不同色调（tone），明色调（tint）和阴影（shade）创建的配色方案。如果要在应用程序中使用它们，请当心UI可能看起来不太有趣。
单色配色 Monochromatic color
近似色 Analogous：彼此相邻的3种颜色创建相似的配色方案。它很容易创建，并且比单色方案更具吸引力。
近似色配色法 Analogous colors
互补(对比) Complementary：当你从色轮的相反两侧组合2种颜色时，该方案将被创建出来。它们可能还包括这些颜色的色调和阴影。
互补(对比)配色
三等分 Triadic：由3种色调组成的配色方案，这些色调在色轮周围均匀分布。这种配色方案很难获取到好的方案，但是它们可以使设计更具吸引力。
三等分配色法 Triadic colors
在Sketch中创建配色方案
有一些Sketch工具和插件可帮助你快速创建自己的调色板。
- Alembic：一个从 Sketch 图纸中的照片上提取颜色的插件。
- Sketch Palettes：一个可以让你在Sketch中保存和加载调色板的有用插件。
- Import Colors：此插件使你可以从不同格式导入各种颜色样本。
- Automate：它具有多种功能，包括可以使用它创建色彩样式指南。
神奇的60–30–10规则：最佳色彩平衡
60-30-10规则是室内设计行业中众所周知的永恒装饰原则。它非常简单和有效。该规则用于在配色方案中找到合适的平衡。
60％ + 30％ + 10％是所用颜色之间的比例：
- 60％ - 应该属于主颜色的数量
- 30％ - 次要颜色区域
- 10％ - 其余部分属于强调色
image
如何在UI设计中使用60-30-10规则?
尽管该原理已在室内设计领域产生，但你也可以成功地将其应用于数字化设计中。将应用程序或页面视为内容的空间，并应用规则以使设计更加平衡。
image
灰色不应为纯灰色
虽然灰色是不明显的颜色，但在用户眼中会获胜。如果你像我一样，你会在很多地方寻求灵感。看看建筑，当今我们使用很多灰色调，但是它非常适合现代建筑。我还注意到，越来越多的汽车是灰色的，但它们看起来非常吸引人。
这些中性色调如何为物体增添更多生命？这个秘密很微妙，但非常重要......
好的灰色不是纯灰色，如果你在中性色调上添加一些颜色，则会发生神奇的效果。
灰度 Grayscale - 如何在UI设计中使用它？
当你考虑在应用中使用灰色时，纯灰色可能不会那么吸引人。为了使你的UI看起来更好，尝试为中性色调添加一些色相和饱和度。这样会使用户感觉到中性色调更自然。
image
使用非100％的灰色对于我们的眼睛至关重要。它使一切看起来更加自然。甚至苹果公司也开始使用“Truetone”，因此iPhone，iPad和MacBook的显示屏会根据照明温度进行调整，以感觉更自然。
Sketch中的灰度
尽管你必须记住以自己正确的方式设置中性色调，但是你也可以使用简单的插件Convert to Grayscale 使你的画板呈灰色（纯灰色色调）。
色调（Tones） —— 使UI更具吸引力的技巧
在本节中，将向你展示如何使UI的色调变得更加生动和吸引人。
首先，让我们了解如何构建不同的颜色变体。
如果观察现实世界中的颜色如何相互作用，你会发现阴影和色调不仅仅是亮度的变化， 许多阴影还具有比主色更多的饱和色调。另一方面，启蒙区域更亮但饱和度更低。如果你想让你的设计感觉更自然，你也应该遵循这个发现。
在Sketch中创建较深的颜色变体
- 选择一种品牌色。
- 将Sketch应用程序颜色选择器切换到HSB模式。
- 将B（HSB的亮度）降低到适合较暗变体的水平。
- 添加S（HSB的饱和度）的值，以使其更具吸引力。
- 完工！
暗色调的制作
image
在Sketch中创建较浅的颜色变体
- 选择一种品牌颜色。
- 将Sketch应用程序颜色选择器切换到HSB模式。
- 将B（HSB的亮度）的值增加到适合较浅色调的水平。
- 降低S的值（HSB的饱和度）。
- 完工！
制作浅色调
image
通过这种简单的操作，你的颜色变体在调色板中看起来会很好。
颜色可访问性 —— 适合所有用户的设计
记住那些以不同于我们大多数人的方式感知色彩的人非常重要。颜色在我们的感知中起着重要作用。
为了使你的 Web 或移动解决方案完全可访问，你应使用WCAG 2.0准则来确认你的解决方案是否符合标准。
如果你为特定平台（例如iOS或Android）设计UI，则应遵循其有关视觉设计可访问性的准则：
Sketch的色彩可访问性
为确保所有颜色均符合Web辅助功能指南，我建议使用Stark plugin。它允许你检查对比度和模拟色盲。
颜色含义与文化背景
颜色对我们如何感知解决方案产生了巨大影响。正确的语调在每种文化中都有其意义。他们也与我们的情绪有关。
以下是基本颜色及其与情感和含义的关系：
- 白色：新鲜，干净，现代，纯洁
- 灰色：中性，有些微妙
- 黑色：神秘，力量，奢华，邪恶
- 红色：力量，行动，自信，爱
- 蓝色：安全，镇定，舒适，值得信赖
- 绿色：新鲜，自然
- 黄色：警告，冒险，快乐
- 橙色：能量，幸福
颜色的含义可能会因你所居住的文化环境而异。如果你想研究差异，请随时阅读这篇文章。
在针对特定市场进行设计时，必须了解其含义。这将帮助你的UI获得更多更多的意义并避免错误。
Sketch中颜色操作的其他提示
获取常用颜色：要检查Sketch中常用的颜色，请单击“颜色选取器”标签右侧的图标。它显示了文档中最常用的颜色列表。
查找和替换颜色：当你必须快速切换文档中的调色板时，在Sketch中可以做到这一点。要更改颜色，请从菜单中选择“编辑 > 查找（Edit > Find）并替换颜色(Replace Color)”（也可以按Option+Command+F键）。
还有一些其他选项允许你配置颜色修改是否还会影响具有不同不透明度的颜色。
其他有用的工具
这些工具可以帮助你为UI设计构建正确的调色板：
调色板灵感
要构建良好的UI调色板，找到灵感很重要。以下这些站点将为你提供几乎所有调色板的帮助：
总结
颜色在我们的设计中起着重要作用。 大多数时候，我们会直观地使用它们。但是，更加有意识的方法会得到更好的结果，并且会让用户会感受到与众不同。
（编译完）
英文原文：https://medium.com/sketch-app-sources/sketch-colors-7682c1eedc78
原文作者：Thalion
编译作者：@iris0327
以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。
image
网友评论