必读！UI设计中颜色使用的10条原则

1.颜色术语

颜色术语构成了我们颜色知识的基础。将诸如色调，色调和阴影之类的颜色术语视为我们可以用来开发独特调色板的工具。

色相（Hue）

色相是色彩的技术术语。色相是指父色-一种饱和色，没有添加白色或黑色。

着色（Tint）

将白色添加到色相（Hue）时，将创建着色效果。

阴影（Shade）

将黑色添加到色相（Hue）时，将创建阴影。

色调（Tone）

将灰色（白色和黑色）添加到着色时，将创建一个色调。

明暗值（Value）

值是指颜色的明暗程度。它指示反射的光量。

饱和度（Saturation）

饱和度是指颜色的亮度和强度。高度饱和的颜色充满活力和光芒，而低饱和度的颜色则暗淡。

2.层级结构

当元素的外观与其周围环境形成对比时，表明该元素具有更高的重要性。我们可以使用颜色和颜色权重在接口内建立层次结构。

通过使用色彩，我们可以为元素分配不同的重要性级别。如果一个元素比另一个元素更重要，则它应该具有更高的视觉重量。这使用户易于快速浏览页面并区分重要和次要信息。更加醒目，大胆的信息是首先要吸引用户的眼睛，然后他们将继续浏览其下方的信息。

3.表现力

在令人难忘的时刻展示品牌色彩，以增强您品牌的独特风格。

考虑一下您的品牌颜色，例如一盘鳄梨吐司上的盐和胡椒粉。盐分过多，会压倒自然风味，而盐分过少，则平淡无奇。

在添加颜色以增强品牌在界面上的效果时，请考虑在何时添加颜色，以及添加颜色的位置。

4.包容性

在设计产品的时候，必须考虑到所有人群（比如残障人士，盲人等）。

Web内容可访问性指南（WCAG）提出了一些建议，以确保运动，听觉和认知障碍人士可以访问我们界面中的颜色。例如，他们的文字标准至少需要4.5：1的对比度。

为了确保您符合这些标准，请下载Stark（https://www.getstark.co/），它将检查您的设计是否可访问。您还可以模拟色盲的使用环境，并根据需要，使用插件对设计进行调整。

5.色彩的意义

颜色会引起不同的感觉或情感，因此，通过了解颜色的心理，我们可以使用与目标受众产生共鸣的品牌颜色。

重要的是，要认识到您的听众是谁，并记住他们。对颜色的感知因文化而异，因地区而异。例如，在西方文化中，白色通常与婚礼相关联，而在东南文化中，白色被视为哀悼的颜色。

公司在其品牌和行销活动中都使用色彩作为一种策略。注意几乎每家快餐店的品牌都使用红色和黄色吗？这是因为红色触发刺激，食欲，饥饿，并引起人们的注意，而黄色则触发幸福和友善的感觉。

6.限制颜色使用数量

通过限制在应用程序中使用颜色，可以使重要的区域受到更多关注，例如文本，图像以及按钮等单个元素。

您会注意到，在如Instagram或Twitter这样包含很多色彩和不可预测内容的应用程序中，它们的界面往往非常简洁。这种设计非常微妙，它将用户的视觉焦点从界面移开，并将其聚焦在内容上。

7.状态

颜色是我们可以在界面中显示状态变化的一种方式。通过把按钮的颜色变灰，表示按钮已禁用，或者通过将其突出显示为红色，来表示错误。我们还应该在错误颜色旁边附加错误消息和图标，以确保清晰度并提示色盲用户注意。

8.一致性和上下文

设计的颜色用法应保持一致，因此即使上下文发生变化，颜色也始终统一。

如果在我们的设计中，主色调使用红色，则应避免使用它来通知错误状态。我们可以使用其他颜色（例如黄色）来避免混淆。

这是一个很容易解决的问题，因此没有理由避免在我们的品牌中使用红色或黄色。

9.调色板

那么问题来了，如何获得完美的调色板和配色呢？首先从颜色理论和基本的工具理解开始。

第一步：主色调和系统颜色

一旦有了主色调，就需要为文本，背景，容器等添加颜色。通常，我会选择用于文本的深色和用于背景的浅灰色。

第二步：创建调色板

为UI选择基本颜色后，将这些颜色放入Google颜色工具https://material.io/design/color/the-color-system.html#tools-for-picking-colors（位于此页面底部附近）中，以获取该颜色的不同阴影和色度。

这并不总是完美的，但是它是生成近乎完美的调色板的一种简单方法，我可以根据需要添加或调整它。

如果我需要互补色或要测试辅助功能，则可以使用Google颜色工具完成所有这些操作。一站式操作~

第三步：将所有颜色放在一起

10.60-30-10原则

60%是氛围色，30%是辅助色，10%是点睛色（主色）

“这种室内设计规则是一种永恒的装饰技术，可以帮助您轻松地将配色方案组合在一起。60％+ 30％+ 10％的比例是为了使颜色平衡。这个公式之所以有效，是因为它创造了一种平衡感，并使眼睛舒适地从一个焦点移动到另一个焦点。”

与我之前提到的技巧类似，例如少量使用颜色来增加强调和加强品牌烙印，60–30–10是确保我们不会在色彩上占上风的粗略工具。

我还想从界面往后退后几步，眯起眼睛。如果我使用的颜色过多，模糊的图像将使我对层次结构有更好的了解。

福利：色彩工具和资源

·Google配色工具

https://material.io/design/color/the-color-system.html#color-theme-creation

这是我所知道的用于生成调色板的最佳工具。它利用一种算法来创建易于访问且美观的调色板。

· https://dribbble.com/colors/

Dribbble是我最喜欢获得UI灵感的地方。通过按颜色搜索功能，可以轻松了解其他设计师如何在设计中使用特定颜色。

· https://coolors.co/palettes/trending

提供了流行的颜色配色方案

· https://prowe214.github.io/color-shader/

Shaderade是一种快速简便的工具，可利用数值精确的色彩和色调生成单色配色方案。

原文：https://uxdesign.cc/10-principles-for-color-usage-in-ui-design

作者：Danny Sapio

翻译：静电