Sketch中的色彩使用技巧

Sponsor

本教程将介绍使用Sketch设计时实用的色彩理论和工具资源。我们会通过实际案例来帮助你更有自信的进行设计，Sketch的功能示例也能帮你更高效地设计。

一、为什么要重视在UI中使用正确的颜色

颜色不仅仅是为了使UI更加吸引人，它们也为用户和企业带来许多好处。

• 颜色增强用户体验——得益于正确的色板，内容更加易读。特定区域和对象更加富有意义，更加容易被注意到。
• 颜色增强品牌个性——颜色的使用能够和企业或品牌建立更好的联系。得益于此，UI取得用户的信任，使得用户感觉到自己在正确的位置上。
• 颜色有助于目标的实现——颜色让设计师和用户通过正确的方式交流。如果你想在app中警告某人，你会使用正确的颜色（通常是红色），用户会立即意识到这是值得阅读的信息。另一方面，绿色按钮会激发用户购买特定产品的欲望，它表明这是安全的过程。

二、设计中的色彩模型

在分享更多实用技巧之前，我们有必要了解一些色彩理论。

以下是数码设计中最常见的色彩模型：

• RGB
• HSL
• HSV / HSB

RGB ——（红，绿，蓝）RGB是附加颜色模型。通过混合红、绿、蓝三种光来重现各种颜色。

HSL ——（色相、饱和度、亮度）HSL是RGB模型的替代模型。HSL中每种颜色的色相围绕中性色的中心轴呈放射状分布，中性色的范围是顶部的白色到底部的黑色。

HSV/HSB ——（色相、饱和度、值或亮度）这种颜色模型经常被误认是HSL，其实它也是RGB模型的一种替代模型。和HSL类似，HSV的每种颜色色相围绕中性色的中心轴呈放射状分布，不同的是，中性色的范围值从顶部的100%到底部的0%。

1. Sketch中的色彩模型

Sketch支持上述所有色彩模型，你可以在设计中尽可能地使用它们。下一章，我会通过一些技巧，教你如何在HSB模型中调出更好看的色调。

2. 配色方案

App更加吸引人的关键在于使用正确的色板。

一些颜色看起来比其他颜色更佳，也是为什么我们要设计配色方案的原因。配色方案帮助设计师找到适合其余颜色的色调。下面是一些配色方案类型：

• 单色
• 类比色
• 互补色
• 分裂互补色
• 三角对比配色
• 正方形配色方案
• 矩形配色

下面我只重点提及4种最常用的配色方案类型，想详细了解请阅读《设计师理论：如何设计你自己的配色方案》
https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/

单色 —— 单色配色方案由同一色相中的不同色调、色彩、和色度构成。请小心用在App中——UI可能比较单调。

类比色 —— 类比配色方案由色轮中相邻的三种颜色构成。这种方案容易创建，比单色配色方案更加吸引人

互补色 —— 互补配色方案通过融合色轮上的2种对立颜色构成。容易通过这些颜色的色彩和色度拓展。

三角对比配色 —— 三角对比配色方案由三种在色轮中具有同等间隔的色相构成。这种配色方案很难调和，但它们能够让设计更具吸引力。

3. 在Sketch中创建配色方案

有一些工具&插件可以帮助你快速创建自己的色板：

Alembic—— 一个从Sketch中的照片提取颜色的插件；
https://alembicforsketch.com

Sketch Palettes —— 一个让你在Sketch中保存和加载色板的实用插件；
https://github.com/andrewfiorillo/sketch-palettes

Import Colors —— 支持导入不同格式色板的插件；
https://github.com/Ashung/import-colors-sketch

Automate —— 功能强大的辅助插件，你可以用它创建色彩样式指南；

三、正确的平衡 —— 神奇的60-30-10原则

60-30-10原则是室内设计行业中的一个著名和永恒的装饰原则。它非常简单和高效。这个原则可以用来找到配色方案中的正确平衡。

60%+30%+10%是所用颜色之间的比例：

60%——属于主要颜色的数量；

30%——次要颜色的范围；

10%——房间剩余的部分属于强调色；

1. 60-30-10原则——如何应用在UI设计中？

尽管这个原则来自室内设计，但你可以将其成功地应用在数码设计中。将App或者页面视作内容的空间，应用该原则使你的设计更加平衡。

四、灰色不灰

灰色不明显，但博得用户眼球。如果你和我一样，就会在各个方面寻求灵感。看看建筑，如今我们惯用灰色调，而且完美适合现代建筑。我也注意到越来越多的汽车是灰色的，但它们看起来非常吸引人。

这些中性色为物体增添多少生机？这个秘密微妙且甚为重要…

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

1. 灰度——如何应用在UI设计中？

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

使用不是100%纯正的灰色对我们的眼睛至关重要。这让一切看上去更加自然。甚至苹果公司也开始使用 “Truetone” ，让iPhones、iPads和Macbooks的屏幕根据光线色温自动调整，以感觉更自然。

2. Sketch中的灰度

虽然你必须牢记通过自己正确的方式设置中性色，但你也可以用简单的 Convert to Grayscale (https://github.com/mheesakkers/sketch-plugin-convert-to-grayscale)插件将画板设置为灰色（纯灰色色调）。

五、色调——让UI更加吸引人的技巧

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

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

如果你观察现实世界中的颜色如何相互作用，你会注意到阴影和色彩不仅仅是亮度的变化。许多阴影具有比主色更高的饱和度。另一方面，亮面虽然更亮但饱和度弱些。如果你想要让设计感觉上更加自然，你应该遵循此观察。

1. 在Sketch中创建深色变体

1. 吸取你项目的一种颜色；
2. 将Sketch的色彩模式转换为HSB模式；
3. 降低B（HSB的亮度）的值，直到合适深色的范围；
4. 增加S（HSB的饱和度）的值；
5. 瞧！

制作深色色调

2.在Sketch中制作浅色变体

1. 吸取你项目的一种颜色；
2. 将Sketch的色彩模式转换为HSB模式；
3. 增加B（HSB的亮度）的值，直到合适浅色的范围；
4. 降低S（HSB的饱和度）的值；
5. 瞧！

制作浅色色调

简单的步骤，你的颜色变体在色板中看起来更好。

为了获得更好的效果，你可以学习这种制作颜色变体的框架：《UI设计中的颜色：实用的框架》。
https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e

六、颜色无障碍——适合所有用户的设计

考虑到那些以不同于我们大多数人的方式感知色彩的人是十分重要的。色彩在我们的感知中起着重要作用。在 《完全用户体验的易用性App设计》(https://uxmisfit.com/2017/05/21/design-apps-that-do-not-sux-accessibility-on-mobile/) 一文中，我介绍了设计无障碍App必不可少的几个方面。

为了让你的网页或移动端解决方案完全无障碍，你应该遵循WCAG 2.0指南(https://www.w3.org/TR/WCAG20/)。大量的要点提醒我们颜色的正确使用。

如果你的UI是为特定平台（iOS或Android）设计的，则应该遵循它们的视觉无障碍设计规范：

Apple iOS HIG —— Color and Contrast；
https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/color-and-contrast/

Material Design —— Accessiblity；
https://material.io/design/usability/accessibility.html#color-contrast

1. Sketch中的颜色无障碍

为了确保所有的颜色都匹配网页无障碍指南，我建议使用 Stark (https://www.getstark.co/)插件。它让你可以检查对比度和模仿色盲的视角。

2. 颜色含义 & 文化环境

颜色对我们如何感知解决方案造成巨大影响。正确的色调在每一种文化中都具备它们的意义，它们也和我们的情绪有关。

下面是基础颜色和情绪以及意义之间的关系：

白色——清新、干净、现代、纯洁；

灰色——中性、中庸；

黑色——神秘、力量、豪华、邪恶；

红色——力量、热情、自信、爱；

蓝色——安全、平静、舒适、可靠；

绿色——清新、自然；

黄色——温暖、危险、开心；

橙色——活力、幸福；

颜色的含义取决于你生活的环境。如果你想了解更多，请阅读 《世界各地的颜色象征和含义》(https://www.shutterstock.com/blog/color-symbolism-and-meanings-around-the-world)。

针对特定市场的设计必须了解当地的颜色含义，这有利于你设计的UI兼容更多的含义和避免误解。

3. Sketch中颜色处理的一些技巧

选择常用的颜色——想要知道Sketch中哪种颜色使用频率高，点击拾色器右边的按钮，它会显示文档中最常用的颜色列表。

查找和替换颜色——你想要快速替换文档中的色板（并且你没有通过 Prime (https://www.primedesignsystem.com/)使UI库中的颜色保持一致），你可以通过菜单中的编辑>查找和替换颜色（或者Option-Command-F快捷键）来替换颜色。

一些额外选项可以让你设置颜色修改是否影响不同透明度的颜色。酷！

七、色板及配色工具资源

在设计导航的配色栏目中，有很多可以帮助你为UI设计创建合适色板以及配色用的工具，比如coolors APP、UI Gradient、Color Hunt等都是很不错工具资源，设计师可以挑选一个喜欢的来使用。

八、总结

颜色在我们的设计中起着重要作用。大多数时候，我们会直观地使用它们。然而，有意识地运用能够获得更好的效果，用户也会感觉到与众不同。

作者：Thalion
原文：https://medium.com/sketch-app-sources/sketch-colors-7682c1eedc78
翻译：Poto (ID:shejidaren888)

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。