流行色那么多, 究竟该怎么用呢?

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

那么我们如何可以使用色彩来提升用户体验呢？又是怎样的色彩设计可以帮助增强界面视觉呢？

今天，我们就来分享五种色彩设计技术，以此帮助大家可以将色彩灵活运用于UI之中。

Five Techniques

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

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

如果要将一个界面元素显示在另一个元素之上，那我们就需要在元素之间使用更强烈的色彩对比。值得我们注意的是，这种方法适用于单个元素，例如号召性用语按钮。

白色强调了Yelp移动应用程序的底部列表

图源：UI Blogger

此外，好的色彩还可以为用户提供视觉连续性。有些时候，我们有意使用的颜色可以为用户提供一些焦点，以便他们的视线可以自然地从一个元素移动到另一个元素。例如，在下图中，用户的注意力将集中在号召性用语"Analytics"上，随后将向下移动至选项卡栏中AI助手的图标元素上。

如果我们想要创建可靠的视觉层次结构，那么就可以限制UI中使用的颜色数量。一般来说，使用的颜色越少，元素的对比就会受到越多的关注。

绿色元素为用户提供了视觉焦点

图源：Gleb Kuznetsov

▍指出交互元素的当前状态

“这个究竟是启用按钮还是禁用按钮？”

当用户向我们提出这个问题时，这就意味着我们在设计时并没有明确指出元素的状态。因此，为了避免这一情况的发生，我们可以通过使用色彩和空白界面来显示交互性。当用户看到一个明亮且对比鲜明的方形元素时，他们会立即认为这是一个处于活动状态的按钮。

在理想情况下，我们需要选择一种特定的颜色来强调整个应用程序的交互性。此外，我们也应该显示一些具有不同优先级别的按钮（例如，主要CTA和一些次要CTA）。我们也可以如下图的示例一样，使用交互式色调，并为次要按钮创建这类色彩的变体。当用户看到屏幕时，他们会认为"Finish"是禁用按钮，而"Book a flight"则是可用按钮。

图源：Gleb Kuznetsov

▍强化状态的变化意识

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

号召性用语响应用户意图

图源：Colin Garven

▍强调品牌形象

使用品牌颜色是一种相当典型的设计策略。因此，我们也可以在设计中充分利用这种技术。例如，在特定时刻使用品牌色彩。通过这样做，我们就将为用户创建一个条件，并将这些颜色与特定的操作和信息相关联。

例如，下图是某款高级金融应用UI工具包。这款应用程序将其品牌色调设定为了蓝色。因此我们可以看到，其页面上的包括"Insight"、"Overview"等重要信息按钮都使用了相关的蓝色调进行了填充，进而增强了用户的视觉体验，以便他们获得最想知道的信息

Paypay-Mobile App

图源：Barly Vallendito

而在下图所示的某款家具购物软件中，其界面的"like"、"Add to Cort"等按钮都填充了与界面颜色同色系的橙色调。

Furniture Detail Page Mobile App

图源：Hira Riaz

此外，在设计过程中，我们也需要牢记以下两点：

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

▍传达意义

用户通常会将颜色与特定事物联系起来。虽然这其中所涵盖的意义可能会取决当时所处的环境，但我们仍然可以为色彩找到一些普遍的含义。例如，当涉及到城市交通时，红色通常与“堵塞”相关，而绿色则与“畅通”相关。因此，我们在设计导航类应用程序时，就可以使用这类色彩进行填充，来显示道路是否通畅。

与此同时，我们也需要知道，仅仅依靠颜色来传达重要信息是不够的。文本标签或图标等其他元素也可以在视觉上向用户传达信息，并使他们能够理解信息背后的意义。