UI中的色彩设计（二）：正确地选择颜色和使用颜色配比！（文末领取实用色彩工具和精美色卡）
TOPIC:
COLOR · UI
—
CHOOSE ＆ MATCH
UI Design UX Design
Article：2022/04/14
Hi~，欢迎来到「交互设计新视觉系」技法专栏的第三期！
颜色是设计师工具包中最强大的工具之一：它不仅可以起到装饰作用，还可以优化用户体验。上一期我们介绍了五种可以帮助设计师提升用户体验的色彩技巧＆UX/UI设计中的色彩指南，
本期将介绍如何在UI设计中正确地选择颜色和使用颜色配比 :
UI设计中有多少种颜色？
尽管在 UI 设计中没有技法限制，但最好将颜色限制为最多两到三种。在寻求更有活力的设计时，要考虑更多的是关于颜色的组合而不是数量。
如何在 UI 设计中选择、
混合和匹配颜色？
您可能天生就有挑选和混合颜色的天赋，当然您也可以使用一些技巧。
使用 RGB 色轮
我们使用一个 RGB 色轮，它有 12 个色段（由所谓的主色、次色和第三色组成）。通常，您会在设计软件中看到带有柔和颜色过渡的轮来选择颜色。Adobe 还有一个很棒的色轮工具（color wheel tool），可以帮助您设置颜色。（文末领取）
1.单色
选择你的颜色，然后在轮子的中心以获得阴影。这种颜色组合营造出非常微妙和精致的外观。
2.近似色
使用这种方法，我们选择彼此相邻的颜色。您可以在色轮中任意移动。近似色需要在90度角内，这种方法在整体设计不失优雅的情况下增加了一点动感。
3.互补色
如果您正在寻找充满活力的设计效果，可以尝试使用互补色。从底色开始，然后从轮子的另一侧添加互补色。
4.拆分互补
你也可以进一步推动并添加类似的颜色以增加活力。这称为拆分互补方法。
色相，色彩，色度和色调
色相（hue）→ 色相是纯色，没有任何色彩色度或色调。（饱和度和亮度都为100%）
色彩（tint）→ 添加了白色的色相。（色相颜色在亮度100%的情况下，调整饱和度而得到的所有颜色）
色度（shade）→ 添加了黑色的色相。（色相颜色在饱和度100%的情况下，调整亮度而得到的所有颜色）
色调（tone）→添加了灰色的色相。（色相颜色通过同时调整饱和度和亮度而得到的所有颜色）
使用颜色变体
您真正应该更深入地使用的颜色是所谓的变体。您可以手动更改色调或使用材料设计调色板（material design color palettes）等工具。（文末领取）
Figma 的颜色阴影插件
在Figma中有一个名为Color Shades for Figma 的神奇插件，它可以在你的文件中创建所有颜色阴影。（文末领取）
60, 30, 10 颜色分布规则
除了你使用什么颜色之外，一个重要的部分是你如何使用它们。
60,30,10 规则是一个很好的经验法则。这意味着您将基色用于多达60%的设计，然后是30%的主要颜色，为了突出显示，您将辅助颜色用于10%，例如，号召性动作（CTA，如按钮 )。
60% 用于基本色，30% 辅助色和 10% 用于 CTA 的主要高亮色
这显然是对颜色分布的“感觉”，而不是精确的测量。颜色在此可以解释为一种颜色或一种颜色及其变体。您可以使用它，但是，请确保您的 CTA 始终统一并且脱颖而出。
最后为大家准备了实用色彩工具（文中提及和小编整理的色彩工具）＆ 精美色卡（32组漂亮的调色板及其对应的渐变调色板）福利礼包，文末领取~
如您所见，您获得了坚实的基础
并真正关注您的CTA。
参考来源：https://medium.com/ux-planet/ultimate-guide-to-color-in-ux-ui-design-de8eb104b5d3
（部分图文来自网络，若有侵权，请联系删除。）
福利时刻
扫码添加小助手微信
领取 实用色彩工具 ＆ 精美色卡 ~
帮助大家做出更好的设计~
加入社群，解锁更多惊喜！
往期推荐 | READ MORE
UI设计中的色彩学（一）：如何使用色彩提升用户体验？（文末领取精选配色）
一篇文章搞懂用户体验设计中的竞品分析！（文末领取竞品分析实用工具哦）
技法干货：渐变这样做才更美！（文末领取绝美矢量渐变礼包~）
文字丨CMU设计学姐
编辑丨Jelly
如果觉得我们做的还不错点个赞和在看吧！：）