您现在的位置:首页 > 资讯中心>网站建设知识 >

在网站设计中,颜色是如何影响用户体验的

发表于:2019-09-30 阅读:5151 关键词: 网站设计 用户体验

  颜色影响着一切,从用户与设计进行交互时的感觉,使用方式到能否完全看到和理解它,无所不包。很简单,颜色不只是装饰工具,颜色对于网站设计的用户体验至关重要。

  让我们从一个常见的例子开始:您刚刚为某人完成了一个网站设计。它的外观和功能与线框完全相同。设计团队中的每个人都对该项目表示赞赏,客户却不喜欢它,但他们无法解释原因。

  罪魁祸首可能是颜色。不同的颜色会唤起强烈的情绪,使人们对其产生敏锐的反应。这部分是个人喜好,部分是心理,甚至部分是社会规范。了解这些趋势和用户偏好会极大地影响用户体验。

  这是您需要知道的。


  用户期望和偏好

  用户体验始于您的网站或应用程序针对的用户类型。用户所居住的基本人口统计信息(例如性别或居住地区)可能会影响他们对基于颜色的设计的感知。(您可以在此处阅读有关颜色和文化注意事项的更多信息。)

  颜色对用户体验的最有趣的影响之一与性别有关。研究表明,男人和女人倾向于喜欢和不喜欢某些类型的颜色。


VLNC Studio设计


  人们倾向于与具有深色设计方案和更饱和色彩的网站进行更多交互,例如上面的VLNC Studio设计。

  女性往往更喜欢与设计方案更浅,调色板更柔和的网站进行交互,例如下面的Tally。

  有些人对使用明显女性化的颜色(例如柔和的粉红色,紫色和黄色)的网站产生了强烈的反应。

  具有严酷配色方案的网站(例如深色背景和完全饱和的红色点缀)倾向于让更多的女性望而却步。

  中间色调调色板最适合所有人。


Tally网站


  颜色关联和含义

  虽然这不是一门精确的科学,但是色彩具有相当不同的情感联想。请注意,某些颜色可能属于极端类别。这些关联倾向于与其他设计元素一起创建整体氛围。

  当用户看到某种颜色或颜色组合时,它会在大脑中立即产生反应。

  ●红色:力量,危险,爱/激情,饥饿

  ●黄色:能量,幸福,光明,温暖

  ●橙色:创造力,决心,刺激,鼓励

  ●绿色:自然,成长,和谐,新鲜

  ●蓝色:信心,信任,宁静,镇定

  ●紫色:魔术,皇室,野心,独立


  建立品牌认知度

  您期望可口可乐的设计元素为红色。颜色与品牌同义,因此被称为“可乐红”。更改颜色会使品牌混乱。您无法立即识别它。用户感到不快,并且没有以预期的方式做出反应。该饮料甚至看起来味道不同。


可乐绿瓶


  所有这些感觉都来自改变颜色。当您看到带有绿色可口可乐品牌的第一张图片时,您可能会觉得自己在说“什么?”。


可乐红瓶


  它影响了品牌向前发展时的用户体验。

  颜色是品牌塑造中的重要元素,因为它可以在用户和设计之间建立独特的联系。颜色告诉用户品牌的含义。它告诉用户他们将要从事的事情。

  更改颜色或使用其他品牌,用户访问体验会受到影响,因为网站访问者突然对他们以为知道的品牌感到困惑或不确定。


  用户图案连接到颜色

  您是否注意到有多少网站使用红色或橙色按钮?

  这是有原因的。

  与网站背景形成鲜明对比的明亮按钮-红色和橙色通常会在浅色或深色背景中脱颖而出。可以帮助用户找到,理解并希望与可单击或可点击元素进行互动,因为他们在视觉上立即知道他们对该元素的期望。

  用户体验的关键部分是为用户提供轻松的互动机会,使他们享受并理解。


Cruise网站


  Cruise使用带有红色文本和红色悬停状态的幻影样式按钮。与传统的纯色按钮不同,但是如何交互却没有什么问题。颜色将用户吸引到该按钮。


Net Bluez网站


  Net Bluez对导航菜单中最重要的元素使用了亮橙色按钮。请注意,该元素如何趋于从屏幕上跳出并被单击。


  提高转化率

  在设计过程中挑战A / B测试按钮的颜色。您可能会发现一种颜色的转换率明显高于另一种颜色。(它可能不是您期望的颜色。)


  当按钮或链接的颜色与设计的其余部分形成鲜明对比时,转换率往往会增加。因此,当您要使用品牌调色板时,选择对比色是产生有助于整体用户体验的转化的关键。

  请看下面的网站一分钟。哪种颜色的按钮最有可能使您单击?(原始颜色为蓝色。)



找出你喜欢的颜色



  为所有用户提供可访问性

  最后,颜色以一种非情感或植根于心理学的方式影响用户体验。比这实际得多。

  颜色会影响用户体验,因为它可以使设计不可访问。

  为了使每个人都能充分理解设计并与内容互动,他们必须能够轻松查看和阅读设计。使用符合“ Web内容可访问性准则”(WCAG 2.1)的调色板和对比度,可以确保每个用户都能理解您的颜色选择。

  使用色盲过滤器(例如下面的比较中的过滤器)可帮助模拟其他用户在您访问网站时可能看到的内容。这如何影响可用性?

色盲过滤器

色盲过滤器


  结论

  将颜色视为一种工具,可以帮助用户更好地进行交互并体验您网站上的内容。它会在情感和可用性级别上影响用户体验。

  找出颜色是否以正确的方式影响用户体验的关键是通过用户测试。