本文将介绍如何使用有用的“色彩理论”和“工具和资源”进行素描工作。同时，我们将“专注于实际例子”来帮助您更自信地进行设计，并通过草图中的功能例子来帮助您更高效地进行设计。

00-1010

色彩不仅能让UI更有吸引力，还能给用户和企业带来很多好处。

颜色增强用户体验：正确的调色板可以使内容读起来更舒服。特定的区域和物体会有更多的意义，吸引更多的注意力。色彩提升品牌个性：色彩的运用可以帮助公司或产品品牌建立更好的联系，从而赋予UI信任感，让用户觉得找对了地方。颜色有助于实现目标：颜色可以帮助创作者和用户以正确的方式交流。如果您想要警告正在使用应用程序的人，您可以通过使用正确的颜色(通常是红色)来实现。因此，用户会立即知道这是一条值得阅读的消息。另一方面，按钮的绿色可能会鼓励用户购买特定的产品，因为它表明这将是一个安全的操作过程。00-1010

为什么要注重在UI中使用正确的颜色

先学习一些色彩理论，再学习更多的实用技巧。

以下是数字设计中最受欢迎的颜色模型：

RGBHSLHSV/HSBRGB:(红、绿、蓝)是加色模型。这意味着以各种方式添加红色、绿色和蓝色光，以产生各种颜色。

HSL:RGB模型的替代表示(色调、饱和度、亮度)。在HSL中，每个色调的颜色被放置在围绕中性色的中心轴的放射状切片中，中性色的范围从底部的黑色到顶部的白色。

HSV/HSB:(色相、饱和度、明度或明度)这种配色经常被误认为HSL，但它是RGB模型的另一种替代表示。与HSL一样，每种色调的HSV颜色都被放置在围绕中性色中心轴的放射状切片中，范围从底部的0%到顶部的100%。

00-1010

Sketch支持以上所有型号，工作中可以使用。接下来，你会发现一些关于如何使用HSB模型创造更好的色调的有用提示。

正确使用调色板是使应用程序更有吸引力的关键。

有些颜色和另一种颜色搭配会更好看。这就是配色方案产生的原因。它们帮助设计师找到其余色调的正确搭配。这里有几种配色方案：

单色近似色模拟补色(对比色)补色三等分配色三等分补色配色法分割补色正方形配色正方形矩形配色矩形

下面将介绍四种最流行的配色方案。

单色：根据同一色调中不同的色调、淡色和浓淡而创造的配色方案。如果您想在您的应用程序中使用它们，请注意UI可能看起来不太有趣。

单色配色

相似的颜色：彼此相邻的3种颜色创建相似的配色方案。它很容易创建，比单色方案更有吸引力。

模拟配色法

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％ – 其余部分属于强调色

如何在UI设计中使用60-30-10规则?

尽管该原理已在室内设计领域产生，但你也可以成功地将其应用于数字化设计中。将应用程序或页面视为内容的空间，并应用规则以使设计更加平衡。

灰色不应为纯灰色

虽然灰色是不明显的颜色，但在用户眼中会获胜。如果你像我一样，你会在很多地方寻求灵感。看看建筑，当今我们使用很多灰色调，但是它非常适合现代建筑。我还注意到，越来越多的汽车是灰色的，但它们看起来非常吸引人。

这些中性色调如何为物体增添更多生命？这个秘密很微妙，但非常重要……

好的灰色不是纯灰色，如果你在中性色调上添加一些颜色，则会发生神奇的效果。

灰度 Grayscale – 如何在UI设计中使用它？

当你考虑在应用中使用灰色时，纯灰色可能不会那么吸引人。为了使你的UI看起来更好，尝试为中性色调添加一些色相和饱和度。这样会使用户感觉到中性色调更自然。

使用非100％的灰色对于我们的眼睛至关重要。它使一切看起来更加自然。甚至苹果公司也开始使用“Truetone”，因此iPhone，iPad和MacBook的显示屏会根据照明温度进行调整，以感觉更自然。

Sketch中的灰度

尽管你必须记住以自己正确的方式设置中性色调，但是你也可以使用简单的插件Convert to Grayscale 使你的画板呈灰色（纯灰色色调）。

色调（Tones） —— 使UI更具吸引力的技巧

在本节中，将向你展示如何使UI的色调变得更加生动和吸引人。

首先，让我们了解如何构建不同的颜色变体。

如果观察现实世界中的颜色如何相互作用，你会发现阴影和色调不仅仅是亮度的变化， 许多阴影还具有比主色更多的饱和色调。另一方面，启蒙区域更亮但饱和度更低。如果你想让你的设计感觉更自然，你也应该遵循这个发现。

在Sketch中创建较深的颜色变体

选择一种品牌色。将Sketch应用程序颜色选择器切换到HSB模式。将B（HSB的亮度）降低到适合较暗变体的水平。添加S（HSB的饱和度）的值，以使其更具吸引力。完工！

暗色调的制作

在Sketch中创建较浅的颜色变体

选择一种品牌颜色。将Sketch应用程序颜色选择器切换到HSB模式。将B（HSB的亮度）的值增加到适合较浅色调的水平。降低S的值（HSB的饱和度）。完工！

制作浅色调

通过这种简单的操作，你的颜色变体在调色板中看起来会很好。

颜色可访问性 —— 适合所有用户的设计

记住那些以不同于我们大多数人的方式感知色彩的人非常重要。颜色在我们的感知中起着重要作用。

为了使你的 Web 或移动解决方案完全可访问，你应使用WCAG 2.0准则来确认你的解决方案是否符合标准。

如果你为特定平台（例如iOS或Android）设计UI，则应遵循其有关视觉设计可访问性的准则：

Apple iOS HIG — Color and ContrastMaterial Design — Accessiblity

Sketch的色彩可访问性

为确保所有颜色均符合Web辅助功能指南，我建议使用Stark plugin。它允许你检查对比度和模拟色盲。

颜色含义与文化背景

颜色对我们如何感知解决方案产生了巨大影响。正确的语调在每种文化中都有其意义。他们也与我们的情绪有关。

以下是基本颜色及其与情感和含义的关系：

白色：新鲜，干净，现代，纯洁灰色：中性，有些微妙黑色：神秘，力量，奢华，邪恶红色：力量，行动，自信，爱蓝色：安全，镇定，舒适，值得信赖绿色：新鲜，自然黄色：警告，冒险，快乐橙色：能量，幸福

颜色的含义可能会因你所居住的文化环境而异。如果你想研究差异，请随时阅读这篇文章。

在针对特定市场进行设计时，必须了解其含义。这将帮助你的UI获得更多更多的意义并避免错误。

Sketch中颜色操作的其他提示

获取常用颜色：要检查Sketch中常用的颜色，请单击“颜色选取器”标签右侧的图标。它显示了文档中最常用的颜色列表。

查找和替换颜色：当你必须快速切换文档中的调色板时，在Sketch中可以做到这一点。要更改颜色，请从菜单中选择“编辑 > 查找（Edit > Find）并替换颜色(Replace Color)”（也可以按Option+Command+F键）。

还有一些其他选项允许你配置颜色修改是否还会影响具有不同不透明度的颜色。

其他有用的工具

这些工具可以帮助你为UI设计构建正确的调色板：

Adobe ColorCoolors.coColor SpaceUI GradientMaterial ColorCanva Color Wheel

调色板灵感

要构建良好的UI调色板，找到灵感很重要。以下这些站点将为你提供几乎所有调色板的帮助：

Dribbble ColorsDesignspriationGrabientColor HuntLOL Colors

总结

颜色在我们的设计中起着重要作用。 大多数时候，我们会直观地使用它们。但是，更加有意识的方法会得到更好的结果，并且会让用户会感受到与众不同。