UI设计中Sketch和色彩使用本文将介绍在 Sketch 中使用有用的“色彩理论”以及“工具和资源”进行工作。同时还将“专注于实际示例”，帮助你更加自信地进行设计创作，以及通过 Sketch 中的功能示例以帮助你更高效地进行设计。 为什么要注重在UI中使用正确的颜色颜色不仅能够使UI更具吸引力，还能为用户和企业带来诸多好处。
数位设计中的色彩模型让我们在学习更多实用技巧之前先了解一些色彩理论。 这些是用于数位设计的最受欢迎的颜色模型：
RGB：（红色，绿色，蓝色）是加色模型。这意味着将红色、绿色和蓝光以各种方式相加，以产生多种多样的颜色。 HSL：（色相，饱和度，亮度）RGB模型的替代表示。在HSL中，每种色调的颜色围绕中性色的中心轴以放射状切片放置，中性色的范围从底部的黑色到顶部的白色。 HSV/HSB：（色相，饱和度，值或亮度）这种颜色方案经常被误认为HSL，但这是RGB模型的另一种替代表示形式。和HSL一样，每个色调的 HSV 颜色都放置在径向切片中，围绕中性颜色的中轴，从底部的0%到顶部的100%不等。  Sketch中的颜色模型Sketch支持上述所有模型，因此你能在工作中使用到它们。接下来，你将发现一些有用的提示，了解如何使用 HSB 模型来创建更好的色调。  配色方案正确使用调色板对于使应用程序更具吸引力至关重要。 有些颜色与另一种颜色搭配使用会看起来更好。这就是创建配色方案的原因。它们帮助设计师为其余色调找到合适的搭配。以下是几种配色方案：
下面将介绍最流行的4种配色方案。 单色 Monochromatic：根据同一色调中的不同色调（tone），明色调（tint）和阴影（shade）创建的配色方案。如果要在应用程序中使用它们，请当心UI可能看起来不太有趣。  单色配色 Monochromatic color 近似色 Analogous：彼此相邻的3种颜色创建相似的配色方案。它很容易创建，并且比单色方案更具吸引力。  近似色配色法 Analogous colors 互补(对比) Complementary：当你从色轮的相反两侧组合2种颜色时，该方案将被创建出来。它们可能还包括这些颜色的色调和阴影。 
互补(对比)配色 三等分 Triadic：由3种色调组成的配色方案，这些色调在色轮周围均匀分布。这种配色方案很难获取到好的方案，但是它们可以使设计更具吸引力。 
三等分配色法 Triadic colors 在Sketch中创建配色方案
神奇的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中创建较深的颜色变体1.选择一种品牌色。2.将Sketch应用程序颜色选择器切换到HSB模式。3.将B（HSB的亮度）降低到适合较暗变体的水平。4.添加S（HSB的饱和度）的值，以使其更具吸引力。5.完工！
暗色调的制作  在Sketch中创建较浅的颜色变体1.选择一种品牌颜色。2.将Sketch应用程序颜色选择器切换到HSB模式。3.将B（HSB的亮度）的值增加到适合较浅色调的水平。4.降低S的值（HSB的饱和度）。5.完工！
制作浅色调  通过这种简单的操作，你的颜色变体在调色板中看起来会很好。 颜色可访问性 —— 适合所有用户的设计记住那些以不同于我们大多数人的方式感知色彩的人非常重要。颜色在我们的感知中起着重要作用。 为了使你的 Web 或移动解决方案完全可访问，你应使用WCAG 2.0准则来确认你的解决方案是否符合标准。 如果你为特定平台（例如iOS或Android）设计UI，则应遵循其有关视觉设计可访问性的准则：
Sketch的色彩可访问性为确保所有颜色均符合Web辅助功能指南，我建议使用Stark plugin。它允许你检查对比度和模拟色盲。 颜色含义与文化背景颜色对我们如何感知解决方案产生了巨大影响。正确的语调在每种文化中都有其意义。他们也与我们的情绪有关。 以下是基本颜色及其与情感和含义的关系：
颜色的含义可能会因你所居住的文化环境而异。如果你想研究差异，请随时阅读这篇文章。 在针对特定市场进行设计时，必须了解其含义。这将帮助你的UI获得更多更多的意义并避免错误。 Sketch中颜色操作的其他提示获取常用颜色：要检查Sketch中常用的颜色，请单击“颜色选取器”标签右侧的图标。它显示了文档中最常用的颜色列表。 查找和替换颜色：当你必须快速切换文档中的调色板时，在Sketch中可以做到这一点。要更改颜色，请从菜单中选择“编辑 > 查找（Edit > Find）并替换颜色(Replace Color)”（也可以按Option+Command+F键）。 还有一些其他选项允许你配置颜色修改是否还会影响具有不同不透明度的颜色。 其他有用的工具这些工具可以帮助你为UI设计构建正确的调色板：
调色板灵感要构建良好的UI调色板，找到灵感很重要。以下这些站点将为你提供几乎所有调色板的帮助：
总结颜色在我们的设计中起着重要作用。 大多数时候，我们会直观地使用它们。但是，更加有意识的方法会得到更好的结果，并且会让用户会感受到与众不同。 （编译完）
文章分类：
新闻动态
|