UI设计中的色彩学（一）：如何使用色彩提升用户体验？（文末领取精选配色）

原创交互设计小助手美国交互设计资讯

TOPIC:

COLOR ＆

USER EXPERIENCE

UI Design UX Design

Article：2022/04/08

Hi~，欢迎来到「交互设计新视觉系」技法专栏的第二期！

颜色是设计师工具包中最强大的工具之一：它不仅可以起到装饰作用，还可以优化用户体验。在本文中，我们将介绍五种可以帮助设计师提升用户体验的色彩技巧＆UX/UI设计中的色彩指南。

文末还为大家准备了Wolvus Technology团队分享的调色板使用及来源示例＆37款精选Color Lab分享的超美灵感配色福利礼包哦~

提升用户体验的色彩技巧

1.表达内容或元素的层次结构

颜色可以帮助设计师将注意力吸引到特定元素上，并在页面/屏幕上创建元素层次结构。当一个元素的颜色与其周围环境形成对比时，该元素就会脱颖而出并立即吸引用户的注意力。

如果要将一个元素放置于另一个元素之上，则应在元素之间使用更强的颜色对比。这种方法适用于单个元素，例如对动作按钮和界面的调用：

颜色还可以帮助您提供视觉连续性。当有意使用颜色时，它可以为用户提供几个焦点，以便用户的视线自然地从一个元素移动到另一个元素。在下面的示例中，用户的注意力将集中在动作按钮“Analytics（分析）”上，然后向下移动到标签栏中 AI 助手的图表和圆圈元素。

要创建可靠的视觉层次结构，建议限制 UI 中使用的颜色总数。通常，您在 UI 中使用的颜色越少，对比元素就会受到越多的关注。

2.指示交互元素的当前状态

当用户问“这个按钮是启用还是禁用？” 这个问题时，这意味着设计者未能指示元素状态。设计师可以通过使用颜色和空白来指示交互性。当用户看到一个明亮的、对比鲜明的方形元素时，他们会立即认为这是一个处于活动状态的按钮。

理想情况下，您应该选择一种特定的颜色来指示整个应用程序的交互性。如果您需要显示一些具有不同优先级的按钮（例如，主要 CTA 和一些次要 CTA），您可以使用交互式颜色的色调并为次要按钮创建此颜色的变体，就像在下面的示例中一样。

3.强化状态变化

颜色可以为用户提供反馈以响应操作。通过结合使用形状和颜色，可以增强认同感。例如，一旦用户点击号召性动作按钮，按钮的颜色和形状就会发生变化，以指示操作成功。

4.强调品牌形象

在产品中使用品牌颜色是一种相当典型的设计策略，可以充分利用这种技巧。例如，可以在特定时刻使用品牌颜色，比如支付确认屏幕上的号召性动作按钮的颜色。通过这样做，您将为用户创建将这些颜色与特定操作和信息相关联的条件。

这里有几点注意事项：

尽量避免在加载等状态下使用品牌颜色，尤其是在加载时间超过几秒钟的情况下。当您使用主要品牌颜色为进度指示器着色时，您的用户会下意识地将这种颜色与缓慢加载联系起来。

小心红色和绿色。红色和绿色通常与失败和成功相关联，因此当您的品牌调色板有绿色或红色时，您应避免使用完全相同的颜色来传达错误状态或成功状态。

5.传达含义

人们会将颜色与特定事物联系起来是一个众所周知的事实，虽然其含义可能取决于上下文和文化，但仍然可以为颜色找到一些普遍的含义。例如，当涉及到城市交通时，红色通常与“停止”相关联，而绿色与“走”相关联。如果您设计导航应用程序，您可以使用这种方法并将繁忙的道路着色为红色。

同时，不要仅仅依靠颜色来传达重要信息。使用文本标签或图标等其他元素来帮助视觉传达给用户以理解信息。

UX/UI设计中的色彩指南

颜色可以用不同的方式记录下来，最常见的可能是 Pantone、CMYK、HEX 和 RGB。我们仅在界面设计中使用 HEX 和 RGB，但了解它们的区别仍然很重要。

Pantone → 用于打印

您无法在家用打印机上打印 Pantone，但您可以查看官方的 Pantone 色彩书作为参考。专业打印机会为您获取特定的 Pantone，并将其添加到他们的机器中进行打印。因此，打印 Pantone 颜色通常更昂贵，这就是为什么它主要用于需要在不同媒体上匹配的徽标或品牌元素，其余的保留在 CMYK。

CMYK → 用于打印