米乐网址(中国)官方网站IOS/安卓通用版/手机APP

本文将先容在 Sketch 中使用有用的“色彩理论”以及“工具和资源”举行事情。同时还将“专注于实际示例”，资助你越发自信地举行设计创作，以及通过 Sketch 中的功效示例以资助你更高效地举行设计。

为什么要注重在UI中使用正确的颜色颜色不仅能够使UI更具吸引力，还能为用户和企业带来诸多利益。颜色增强了用户体验：正确的调色板可以使内容阅读起来可能更舒适。

特定的区域和工具将具有更多的意义，而且更易于引起关注。颜色增强了品牌个性：颜色的使用可以让公司或产物品牌建设更好的联系，从而使UI获得信任感，并让用户感应自己找对了地方。颜色有助于实现目的：颜色可以资助创作者和用户以正确的方式举行交流。如果你想警告正在使用应用法式中的某人，则可通过使用正确的颜色（通常为红色）来实现。

为此，用户将立刻相识到这是一条值得阅读的消息。另一方面，按钮的绿色可能会勉励用户购置特定产物，因为这讲明这将是一个宁静的操作历程。

数位设计中的色彩模型让我们在学习更多实用技巧之前先相识一些色彩理论。这些是用于数位设计的最受接待的颜色模型：RGBHSLHSV/HSBRGB：（红色，绿色，蓝色）是加色模型。

这意味着将红色、绿色和蓝光以种种方式相加，以发生多种多样的颜色。HSL：（色相，饱和度，亮度）RGB模型的替代表现。在HSL中，每种色调的颜色围绕中性色的中心轴以放射状切片放置，中性色的规模从底部的玄色到顶部的白色。HSV/HSB：（色相，饱和度，值或亮度）这种颜色方案经常被误认为HSL，但这是RGB模型的另一种替代表现形式。

和HSL一样，每个色调的 HSV 颜色都放置在径向切片中，围绕中性颜色的中轴，从底部的0%到顶部的100%不等。Sketch中的颜色模型Sketch支持上述所有模型，因此你能在事情中使用到它们。

接下来，你将发现一些有用的提示，相识如何使用 HSB 模型来建立更好的色调。配色方案正确使用调色板对于使应用法式更具吸引力至关重要。

有些颜色与另一种颜色搭配使用会看起来更好。这就是建立配色方案的原因。

它们资助设计师为其余色调找到合适的搭配。以下是几种配色方案：单色 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％ - 其余部门属于强调色如何在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 — AccessiblitySketch的色彩可会见性为确保所有颜色均切合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总结颜色在我们的设计中起着重要作用。

大多数时候，我们会直观地使用它们。可是，越发有意识的方法会获得更好的效果，而且会让用户会感受到与众差别。

本文来源：米乐网址-www.mucailasiji.com