哈喽，大家好。北京5PLUS UI设计学校为了帮助更多的小伙伴提高设计ui水平和设计意识，会整理一些比较细致且有实际案例的设计知识分享给大家。5PLUS是一所专业ui设计学校、ui设计 培训机构，有很多出色的ui设计师学习在这里学有所成。如果觉得好，就分享给更多人吧。

颜色术语

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

色相是颜色的专业术语。色相指的是父色——一种没有添加白色或黑色的饱和色。

当白色加入色相时，就产生了浅色。

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

当将浅色（白色）和阴影（黑色）都添加到色相时，会创建一个色调。

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

 层次结构

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

通过使用色彩，我们可以为元素分配不同的重要性。

如果一个元素比另一个元素更重要，则它应该具有更高的视觉重量。这使用户易于快速浏览页面并区分重要和次要信息。

更突出，更粗体的信息是用户的眼睛会首先被吸引，然后他们将继续浏览其下方的支持信息。

富有表现力

在值得纪念的时刻展示品牌的颜色，强化你的品牌独特的风格。

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

包容性

设计一个产品类似于建造一个公共建筑，比如图书馆或学校——它需要包容所有人。问问Domino，他们被一个盲人起诉，盲人无法访问他们的网站，因为无法访问。不要像Domino那样设计可访问性。

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

为确保您符合这些标准，请下载Stark，它将检查您的设计是否可访问。您还可以模拟色盲并根据需要使用其插件进行调整。

我们常常试图设计出好看的东西，却忽略了不同的用户会和我们的产品互动。

随着我逐渐成为一名设计师，我已经接受了所有会破坏我的完美设计理念的各种限制。ADA合规性就是这样的限制之一。

当我们试图获得“Dribbble”的喜爱时，我们可以使用这种方法，但当为真正的人开发产品时，这不是一个好的做法。

意义

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

您会注意到，在许多应用程序中，有很多五颜六色的帖子和无法预测的内容，例如Instagram或Twitter，它们的界面往往非常简洁。这是微妙的，但它使焦点从界面移开，并关注在内容上。

状态

颜色可以提供有关应用程序状态，其组件和元素的信息。

颜色是我们可以在界面中显示状态变化的一种方式。通过禁用按钮的颜色，它可以表示按钮被禁用，或者通过将按钮高亮显示为红色，它表示错误。我们还应该在错误颜色旁边附加错误消息和图标，以确保清晰度并吸引色盲用户。

一致性和上下文

界面中的颜色使用应保持一致，所以即使环境发生了变化，颜色也总是意味着相同的东西。

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

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

 调色板

现在最重要的问题是，我怎样才能得到完美的调色板?

它从对颜色理论和基本工具的简单理解开始。

第1步-原色和系统颜色

我喜欢从一种基本颜色开始，我会根据喜好、研究或我在上面第5条中分享的颜色含义来决定它。

我选择的主要颜色是我的品牌颜色。

一旦我有了基本色，我就需要文本、背景、容器等的颜色。

通常，我会选择用于文本的深色和用于背景的浅灰色。

第2步-创建调色板

步骤3 放在一起

规则

60％是主色，30％是辅色，10％是点缀色。

我首先从WojciechZieliński的文章，如何在UI设计中使用颜色了解了这一概念：

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

与我之前提到的技巧类似，例如节制地使用颜色来增加强调和加强品牌烙印，60–30–10是确保我们不超越颜色的粗略工具。

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

原文链接：

https://uxdesign.cc/10-principles-for-color-usage-in-ui-design-65174b213004

作者：Danny Sapio