颜色是任何设计系统中的关键元素之一。在网站或应用程序中，可以通过多种方式使用颜色：有时可以通过对比或将颜色限制在选定的位置来使用颜色来创建焦点；颜色还可以帮助建立层次结构，从而影响用户的外观。
在本文中，我们将讨论如何策略性地使用颜色。
1.通过比例确定重点
颜色比例的一个很好的例子是Viporte的设计。当您向下滚动他们的主页时，每个部分的中央都装饰着一个大字母。在各节的动画开始播放之前，字母会填充有漂亮的颜色。动画的不同图像的颜色与字母的颜色有关。重点肯定是在部分的中心，这在一定程度上要归功于颜色的集中使用。比例各不相同-有时颜色很少，有时颜色很多。无论哪种方式，都可以使用比例来吸引注意力。如果颜色在每个部分的整个地方都更加明显，那么焦点就不会那么清晰。
2.通过对比吸引注意力
颜色可以操纵的另一件事是对比度。当整体设计的颜色沉稳或柔和时，添加对比色会引起图像的注意。
这正是Thinx设计中正在发生的事情。在主页上，界面的整体配色方案实际上是黑白的。但是，设计很大程度上依赖于大量照片。特别是在主页顶部，内衣的照片具有深红色背景。与页面上的所有其他内容相比，该字体非常大胆。毫无疑问，这里突出的是深红色。红色与黑白配色方案相比具有更高的对比度。我喜欢以Thinx为例，因为它表明，明亮和霓虹色并不是唯一适合通过对比吸引别人注意力的颜色。这实际上只是两种颜色的平衡，这会让其中一种真正脱颖而出。
3.使用颜色创建UX模式
创建视觉模式的最佳方法是保持一致性。反过来，模式会创建用户可以习惯的关系。这与用户习惯于验证与某些动作相关的图标的方式相同，即，垃圾桶意味着删除。颜色更具主观性，因为每个网站或应用程序都可以对颜色做出自己的含义。
让我们与Underbelly的产品组合网站上的蓝色联系起来。这是一个简单的示例，非常适合提出我的观点。Underbelly网站上所有可点击的都是蓝色。使用该网站几秒钟后，很快便知道它们的链接为蓝色。这就是您通过颜色创建图案的方式。模式之所以好，是因为它们可以使用户和访问者轻松识别事物。认识越容易，人们的思考就会越少，到现在，我们都知道让史蒂夫·克鲁格（Steve Krug）感到多么高兴。
4.通过颜色创建层次结构
颜色可能会有益的另一件事是建立层次结构。在Skore的产品页面上，几乎每个部分都有绿色元素。绿色重复项不仅创建了可识别的模式，而且还有助于区分任何给定部分的重要部分。通常，很容易通过字体大小等大小来解释层次结构。但是，在设置层次结构时，颜色的强度以及使用中的颜色设置也可能很棒。
以Skore为例，绿色与灰色文字和白色背景形成了很好的对比。脱颖而出。此外，它们的配色方案不依赖其他强调绿色的主色调。所有这些都有助于显示每个部分的层次结构。因此，绿色有助于引导用户的眼睛看向重要元素，从而在每个部分中提供良好的层次结构。绿色元素告诉用户首先要看的位置。
5.利用颜色的相似性
高端网站设计师，我们对颜色所做的所有不同处理，我们大多使用并重复使用，以保持设计中的一致性。让我们看一下InVision的“年终”登录页面。在页面顶部，有一个粉红色和紫色渐变用作背景图像。在页面的下方，粉红色和紫色也用于按钮颜色。此外，登录页面在粉红色和紫色背景上重用白色。它还在白色背景上重复使用黑色和灰色文本颜色。如果每次的颜色都不相同，那么看起来就不会那么好了。
