UI设计师的五种最方便的技巧

颜色是设计师工具包中最强大的工具之一。 它不仅可以起到装饰作用，还可以加强设计。

在本文中，我们将回顾五种可以帮助设计师的技术。

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

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

如果要指示一个元素位于另一个元素之上，则应在元素之间使用更强的颜色对比。 这种方法适用于单个元素，例如号召性用语按钮和表面：

White color brings emphasis to the bottom list in Yelp mobile app. Image by UI Blogger.

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

Contrast communicates the importance of elements and green elements give users visual focal points. Image credit: Gleb Kuznetsov

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

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

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

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

When users see the screen,they immediately assume that ‘Finish’ is disabled while ‘Book a flight’ is enabled. Image by Gleb Kuznetsov

3. 强化状态变化意识

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

Call to action responds to user intent. Image by Colin Garven

4. 强调品牌形象

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

这里有几件事要记住：

• 尽量避免在加载等状态下使用品牌颜色，尤其是在加载时间超过几秒钟的情况下。当您使用主要品牌颜色为进度指示器着色时，您的用户会下意识地将这种颜色与缓慢加载联系起来。
• 小心红色和绿色。红色和绿色通常与失败和成功相关联，因此当您的品牌调色板为绿色或红色时，您应避免使用完全相同的颜色来传达错误状态或成功状态。

5. 传达意义

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

Google Map uses red to indicate zones with heavy traffic.

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

原文：https://uxplanet.org/how-to-use-color-to-improve-user-experience-5731ba…

本文：https://jiagoushi.pro/node/2011