当前位置:首页 > 观点

彩色微调用户体验的5种技术

2019-12-27

网站设计制作是任何设计系统中的关键元素之一。在网站或应用程序中,可以通过多种方式使用颜色:有时可以通过对比或将颜色限制在选定的位置来使用颜色来创建焦点;颜色还可以帮助建立层次结构,从而影响用户的外观。

在本文中,我们将讨论如何策略性地使用颜色。

 

1.通过比例确定重点

 

颜色比例的一个很好的例子是Viporte的设计当您向下滚动他们的主页时,每个部分的中央都装饰着一个大字母。在各节的动画开始播放之前,字母会填充有漂亮的颜色。动画的不同图像的颜色与字母的颜色有关。重点肯定是在部分的中心,这在一定程度上要归功于颜色的集中使用。比例各不相同-有时颜色很少,有时颜色很多。无论哪种方式,都可以使用比例来吸引注意力。如果颜色在每个部分的整个地方都更加明显,那么焦点就不会那么清晰。


 

2.通过对比吸引注意力

颜色可以操纵的另一件事是对比度。当整体设计的颜色沉稳或柔和时,添加对比色会引起图像的注意。

这正是Thinx设计中正在发生的事情在主页上,界面的整体配色方案实际上是黑白的。但是,设计很大程度上依赖于大量照片。特别是在主页顶部,内衣的照片具有深红色背景。与页面上的所有其他内容相比,该字体非常大胆。毫无疑问,这里突出的是深红色。红色与黑白配色方案相比具有更高的对比度。我喜欢以Thinx为例,因为它表明,明亮和霓虹色并不是唯一适合通过对比吸引别人注意力的颜色。这实际上只是两种颜色的平衡,这会让其中一种真正脱颖而出。


 

3.使用颜色创建UX模式

创建视觉模式的最佳方法是保持一致性。反过来,模式会创建用户可以习惯的关系。这与用户习惯于验证与某些动作相关的图标的方式相同,即,垃圾桶意味着删除。颜色更具主观性,因为每个网站或应用程序都可以对颜色做出自己的含义。

让我们与Underbelly的产品组合网站蓝色联系起来这是一个简单的示例,非常适合提出我的观点。Underbelly网站上所有可点击的都是蓝色。使用该网站几秒钟后,很快便知道它们的链接为蓝色。这就是您通过颜色创建图案的方式。模式之所以好,是因为它们可以使用户和访问者轻松识别事物。认识越容易,人们的思考就会越少,到现在,我们都知道让史蒂夫·克鲁格(Steve Krug)感到多么高兴


 

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

颜色可能会有益的另一件事是建立层次结构。Skore的产品页面上,几乎每个部分都有绿色元素。绿色重复项不仅创建了可识别的模式,而且还有助于区分任何给定部分的重要部分。通常,很容易通过字体大小等大小来解释层次结构。但是,在设置层次结构时,颜色的强度以及使用中的颜色设置也可能很棒。

以Skore为例,绿色与灰色文字和白色背景形成了很好的对比。脱颖而出。此外,它们的配色方案不依赖其他强调绿色的主色调。所有这些都有助于显示每个部分的层次结构。因此,绿色有助于引导用户的眼睛看向重要元素,从而在每个部分中提供良好的层次结构。绿色元素告诉用户首先要看的位置。


 

5.利用颜色的相似性

作为设计师,我们对颜色所做的所有不同处理,我们大多使用并重复使用,以保持设计中的一致性。让我们看一下InVision的“年终”登录页面。在页面顶部,有一个粉红色和紫色渐变用作背景图像。在页面的下方,粉红色和紫色也用于按钮颜色。此外,登录页面在粉红色和紫色背景上重用白色。它还在白色背景上重复使用黑色和灰色文本颜色。如果每次的颜色都不相同,那么看起来就不会那么好了。


让我们看看另一个示例,特别是Co-motion在创意工作室的主页上,使用了几种不同的颜色。但是它们的语调都足够相似,可以提供凝聚力。在这个例子中,没有什么特别突出的,这也是一个很好的目标。在这种情况下,彩色强调的是页面的良好和凝聚力,您试图让用户参与并滚动。


 

结论

颜色可以帮助实现各种设计目标。颜色可以帮助定义和建立层次结构并提供焦点。颜色强调有多种形式。无论哪种方式,使用颜色都可以带来很多乐趣。借助战略色彩方案,可以更轻松地影响访问者或用户的眼睛去向。

免费获取报价

  • 29923329

  • 杭州市丰庆路498号北软智慧科创大厦203

  • 0571-85815193

  • pady@1t2.cn

网站地图 版权所有 © 2008-2021 杭州派迪科技有限公司  Copyright © 2008-2020  www.hzpady.com  All Rights Reserved    浙ICP备14029905号-1     公安备案:33010802008411    软著登字第3457658号