在颜色上对 UX 进行技术上的改善

2017-02-20 23:14:00

在任何设计系统中颜色是一个关键元素。在网站或app，颜色可以用以各种各样的方式：有时可以通过对比或限制颜色来建立一个焦点；颜色也可以帮助建立层次结构，因此影响界面。

本文中，我们将讨论如何有策略得使用颜色。

1.通过颜色比例聚焦

颜色比例的一个很好的例子是 Viporte 的设计。当你向下滚动主页时，每个部分有一个大写的字母在中心。当滚动动画出现之前这些字母都有着漂亮的颜色。焦点肯定是最中心部分，这一部分要归功于它在集中使用的颜色。颜色的比例变化有时是很小部分的颜色，有时是大块儿的颜色。无论哪种方式，比例都是用来关注焦点。如果颜色在每一处都是很显眼的，就不会清楚的表达出焦点在哪里。

2.通过颜色对比吸引注意力

另一个颜色可以操控的是对比。当总体设计的颜色是平静或成熟的，添加一个对比色将吸引更多的注意力。

这正是 Thinx 的设计的关键。它的主页上，整个配色方案是黑色和白色。然而，设计很大程度上依赖于大量的照片。尤其是在顶部，内衣的照片是一个深红色的背景。与页面上的一切相比，这很大胆。毫无疑问，正是因为红色才使它可以很突出。红色比黑色和白色的对比有更高的对比度。我喜欢使用Thinx作为一个例子，因为它证明了明亮的和霓虹灯的颜色并不是唯一适合通过对比来吸引别人的注意力的配色。这只是平衡的两种颜色，让其中一个脱颖而出。

3.使用颜色来丰富用户体验

创建视觉模式的最佳方式是保持一致性。模式，反过来和创建用户可以习惯有关系。就像用户对特定的图标会关联到特定的行为，例如，垃圾桶的图标意味着删除。颜色会更主观，每一个网站或app可以对颜色有自己的意义。

让我们在网站 Underbelly's portfolio website 中的蓝色为例。这是一个简单的例子,可以完美的解释我的观点。网站的任何地方的点击是蓝色的。使用网站的几秒钟后，就清楚的知道他们的链接是蓝色的。这就是通过颜色创建的用户体验模式。这种模式是很好的，因为他们允许用户很容易得就会理解习惯。需要认知学习的越少，用户需要思考的就越少。

4.通过颜色建立层次结构

可以利用颜色的另一件事是设定一个层次结构。 Skore 的页面中，几乎每一个部分都有一个绿色的元素。不仅重复使用相同的绿色，这是创建了一个可识别的模式，有助于区分任何部分的重要元素。通常很容易通过字体大小解释层次结构，但使用颜色也可以很好的设置一个层次结构。

Skore的例子中，绿色与灰色的文本和白色背景有很强的对比度。此外，他们的配色方案中不使用其他颜色，只是绿色。所有部分都以这样的方式显示层次。因此，绿色帮助用户分清在每个部分的重要元素，提供一个层次结构。绿色的元素是用户先会去注意到的。

5.利用相似色

作为设计师我们会使用许多不同的颜色，在设计中主要是需要保持一致性。我们来研究一下 InVision 今年年底的登陆页。页面的顶部一个粉红色和紫色的渐变作为背景图像。粉红色和紫色也用于按钮的颜色。此外，登陆页相比粉红色和紫色的彩色背景更多的使用了白色。相比白色背景更多在文本上使用黑色和灰色。如果每次的颜色都有变化，那样看起来就不好了。