颜色如何影响用户体验和用户行为

已发表: 2016-12-24

颜色:当一个设计做对了,你可能永远不会注意到它——但是当它做错了呢? 无论是过于明亮、刺眼的背景,还是深灰色背景上的黑色文本,低于标准的颜色选择都可能毁掉功能最强大的应用程序。 就像设计的其他方面一样,颜色不仅仅是为应用程序增添趣味。 颜色可以是一种工具,就像用户体验的任何其他功能一样。

用于设计应用程序的图形设计理念——从每个元素的大小,到它在 UI 上的滑动方式,再到颜色——都会影响用户行为。 毕竟,设计师经常在项目的前几个月花费调色板而不是线框来苦恼,这是有充分理由的。

选择完美的调色板可能是设计一款真正帮助用户放松的冥想应用程序和一款让他们想把手机扔到墙上的应用程序之间的区别。 银行应用程序让您对查看余额感到紧张,而另一个银行应用程序可以缓解您对下一份薪水何时到来的焦虑,这就是区别。

那么你如何做到正确——你可以做些什么来在你的设计中掌握色彩呢?

平面设计哲学:色彩理论

在深入了解平面设计哲学(和心理学!)之前,了解颜色和设计的一些基本原则很重要。 虽然颜色可能看起来不是一个非常复杂的主题,但有一个很好的理由为什么每门艺术课都不仅从如何使用颜色的课程开始,而且从如何制作颜色的课程开始。

基础——正如色轮所解释的——很简单:原色(红色、黄色和蓝色)可以组合成二次色(绿色、紫色和橙色)。 同样,可以将不同比例的白色添加到颜色中以创建色调,并且可以添加黑色以创建阴影。

色轮图像:建立平面设计理念的重要工具。
在实施您的图形设计理念时,色轮可能是一个重要的工具。

彼此相反的颜色(如红色和绿色,或蓝色和橙色)被认为是互补的。 这些颜色对比强烈,使它们在彼此相邻(或重叠)时脱颖而出。

彼此相邻的颜色被认为是相似的。 这些颜色的对比度要低得多,这意味着它们靠在一起时往往不会那么突出。

高对比度或低对比度的颜色本质上没有“正确”或“错误”之分。 有时,应用程序会要求使用鲜明对比的明亮色彩。 其他时候,你会想要一些更温和的东西。 一般来说,你越想突出一些东西,你就越应该依赖对比色。

了解颜色如何搭配(和不搭配)的最佳方式是玩弄它们。 即使您现在没有从事项目,快速旋转 Adob​​e 的色轮也可能会让您以一种新的方式思考颜色。

情感样本:色彩与心理学

当您巩固应用程序背后的图形设计理念时,您不能只考虑事物的外观 - 您必须考虑它们的感受。 我们也不是在谈论触觉反馈。 自从约翰·沃尔夫冈·歌德研究色彩的生理效应以来,我们就一直痴迷于使用色彩来产生身体和情感上的影响。

即使在今天,色彩在许多品牌的设计理念中仍占据中心位置。 医疗保健、企业和政府都倾向于使用蓝色,因为它散发出一种信任感和专业精神。 绿色被视为一种充满活力的年轻色彩——当然,它反映了一种环保主义和亲近自然的感觉。 红色充满活力和冲动,给人以速度、效率和力量的印象。 我们看到的每一种颜色(当然还有我们内在与某些品牌相关的每一种颜色)都直接或间接地暗示着某种有助于推动我们对各个品牌的认知的东西。

想想你认为非常以颜色为中心的品牌和符号。 苹果、维基百科和纽约时报都以灰度颜色为特色,象征着冷静的可信度。 这些品牌被认为是平衡和可靠的。 Whole Foods、John Deere 和 Starbucks 的标志都采用绿色调,将自然和健康与他们的品牌和产品联系起来。

有些颜色甚至超越了他们的品牌,定义了整个行业。 例如,想想有多少快餐或连锁餐厅使用红色或黄色配色方案。 这些颜色有助于在精神上触发我们,将我们置于某个心理位置,促使我们购买某种产品。

虽然这是营销人员很久以前就想到的事情,但科学证明了我们对颜色的许多共同感受。 例如,人们发现红色可以让一些人对某些刺激做出更快、更有力的反应。 它也可能令人生畏:研究人员发现,当考生看到红色时,他们的分数更差。

甚至陌生人? 药丸的颜色对其工作方式有轻微影响。 蓝色药丸作为镇静剂效果最好,黄色药丸作为抗抑郁药效果最好,在所有情况下,鲜艳的颜色效果最好。 虽然这可能只是增强我们对活性药物反应的安慰剂效应,但这种效应足以让公司在生产新药时考虑它。

现在,我们并不是说在您的情绪跟踪应用程序中使用基于黄色的配色方案会使其成为有效的抗抑郁药,但您选择的调色板可能会对用户的情绪产生合理的影响——所以要明智地选择。

为你推荐:

元界将如何改变印度汽车业

元界将如何改变印度汽车业

反暴利条款对印度初创企业意味着什么?

反暴利条款对印度初创企业意味着什么?

Edtech 初创公司如何帮助提高技能并使劳动力为未来做好准备

教育科技初创公司如何帮助印度的劳动力提高技能并为未来做好准备……

本周新时代科技股:Zomato 的麻烦仍在继续,EaseMyTrip 发布强...

印度初创公司走捷径寻求资金

印度初创公司走捷径寻求资金

据报道,数字营销初创公司 Logicserve Digital 从替代资产管理公司 Florintree Advisors 筹集了 80 卢比的资金。

数字营销平台 Logicserve 获得 80 卢比的资金,更名为 LS Dig...

颜色和可用性

设计不仅仅是看起来漂亮 - 它是关于功能和可用性,这两个原则可以说是任何 UX 设计师最重要的。 如果用户体验不流畅,那么你选择的调色板有多漂亮,或者你的用户界面有多漂亮都没有关系。 如果用户不能有效地浏览它,它就不会有任何持久力。

但是颜色与这一切有什么关系呢?

很简单:颜色是一种可以帮助引导眼睛的工具。 如果您可以有效地使用颜色,您可以引导新用户完成您的应用程序,而无需冗长的教程、一系列复杂的视频,甚至一个单词。 直观的 UI 使用颜色不仅可以引导用户的注意力,还可以引导他们与整个体验的交互。

平面设计理念就是引领眼球。
彩色铅笔的黑白图像在一个圆圈中,锐化的点保持彩色。

想象一下,您正在为一家餐饮公司开发一个应用程序,帮助大型组织轻松定制食品订单。 潜在客户首次下载您的应用并将其打开。 他们看到了什么?

在应用程序中,大多数菜单项——包括背景和任何信息框——都以柔和、暗淡的灰度调色板着色。 一个例外是一个橙红色的盒子,上面写着“订单”。 作为设计师,您知道用户在使用您的应用程序时想要做的第一件事就是轻松设置他们的食物订单。 与其将这个功能隐藏在应用程序的深处,或者要求他们一页一页地向下滚动才能找到它,不如把它放在前面和中心。 不仅如此,您还会立即吸引他们的注意力。 颜色有助于它突出,并准确地向新用户显示他们需要去的地方。

同样,我们每天以各种方式与颜色互动,并在我们的脑海中建立某些社会联系。 以红绿灯为例:绿色表示前进,红色表示停止,黄色表示减速(或提醒我们前方有事)。 通过将重要警告标记为黄色,或使用红色突出显示某些内容,您可以有力地传达一条信息,引导用户进行输入。

然而,同样的逻辑不仅可以用于警告屏幕。 更改应用上导致应用内购买的按钮的颜色会显着影响转化率。

虽然它不在应用程序内部,但 HubSpot 发现他们只需将按钮设为红色而不是绿色,就可以将转化率提高 21%。 现在,这并不意味着您应该将每个应用内购买按钮更改为明亮的深红色,但这里有一个论点,即颜色不能只是您设计理念的一部分:它必须是您的整个应用程序开发理念。

成人着色书中部分完成的页面的照片。
我们正在挖掘柔和的色调,即使是她大胆的颜色选择。 色调和阴影是完善您的图形设计理念的简单方法。

明智地使用颜色:设计和可访问性的哲学

在 Proto.io,可访问性始终是我们设计理念的最前沿。 坦率地说,可访问性是必须融入良好设计的东西。 如果它不存在,那么设计根本就不是很好。

大约 8% 的男性和 0.5% 的女性患有某种形式的色盲。 与流行的想法相反,没有单一的色盲,但红/绿色盲往往是最常见的。 患有这种色盲的人通常很难看到红色和绿色的变化。 虽然这种形式的色盲的严重程度差异很大,但即使是轻微的红/绿色盲也会使许多应用程序几乎无法使用。

除了色盲之外,近视用户通常很难阅读对比度较低的文本,除非他们将屏幕靠近他们的脸——这可能会破坏许多应用程序的可用性。

这两个问题的解决方案相当简单:在背景上显示文本时避免使用非对比色。 虽然你不能保证每个人都能以你想要的方式看到你的应用程序,但如果你使用对比色,你至少会给人们一个他们可以使用的应用程序。 同样,使用高对比度的颜色将使每个人都更容易阅读文本——即使他们没有视力问题。

增加可访问性的另一个选择是在您的应用程序中提供可交换的调色板。 虽然这不是每个人的选择,但它可以极大地提高您应用的可访问性。 您还可以允许用户更改特定功能的颜色。 例如,您可以选择更改应用的强调色或整个应用中文本的颜色。 虽然这两个选项可能会让您失去一些控制权,但它们将确保您的应用可供更广泛的受众访问。

如果您仍在努力弄清楚如何以不损害应用程序可访问性的方式将颜色集成到您的设计理念中,我们建议您查看 Google 的材料设计库。

选择完美的调色板:巩固您的设计理念

尽管应该清楚在颜色方面有一些规则可以遵循,但它也不一定是一门科学。 颜色通常与更抽象的事物有关,例如感觉。 即使您的应用程序没有试图在用户中表现出某种情感,但这并不意味着它不会。 虽然找到完美的调色板不是黑白的,但我们建议从灰度开始

以灰度渐变构建应用程序的平面原型,并将其用作基线。 记下它的外观和感觉:将其传递给您的 QA 团队,看看他们要说什么。 您的入职流程是否没有色彩? 您是否将注意力吸引到应用程序的错误部分? 有了这个反馈,设计更多的原型,这一次带来颜色。 不要依赖单一的调色板。 取而代之的是,从 Google 的材料设计网站中获取灵感,并尝试使用他们的一些样本。

一张拿着多个色板的人的照片,展开成扇形。
这个人的平面设计理念是用红色加入了令人震惊的元素。

也将这些修订发送给 QA。 不要害怕对它们进行 A/B 测试(以及对原始灰度版本)。 确保你问了一些关于你要加入战斗的颜色的棘手问题。 您是否在应用程序中使用颜色来引导用户的视线? 你只是为了增加火花而在屏幕上涂上颜色吗? 颜色是否会分散用户到达他们想去的地方的注意力?

不要忘记用户心理或可访问性。 如果您正在创建一个旅行应用程序,您真的希望一切都是鲜红色的吗? 如果您正在创建一个医疗保健应用程序,您的背景真的应该是绿色的吗? 您的颜色对比是否足以使文本清晰易读?

好的用户体验设计会考虑所有这些问题——毕竟,颜色对用户行为和享受有着决定性的影响。 如果您的设计理念没有考虑到这一点,那么您可能正在制作一个不像您想象的那样可访问或可用的应用程序。 确保您在每一步都对您的设计进行原型设计,并且不要过于拘泥于一种或两种颜色。

尝试,选择另一种颜色,然后继续修改,直到找到最适合您的调色板。