色彩如何影响 UX 和用户行为

本文讲的是色彩如何影响 UX 和用户行为,


色彩:设计得当时你可能从未关注过它 - 但是设计不得当时呢?无论是过亮且灼眼的背景,或者暗灰色背景下的黑色文字,还是以次充好的色彩选择都足以毁掉一款功能强大的 app。如同设计的其他方面,色彩不仅仅是为 app 锦上添花。色彩与用户体验的其他方面一样,也可以是一种工具。

用于设计 app 的图形 设计哲学 - 从元素尺寸,滑动方式,当然也包括色彩 - 都在影响着用户的行为。因此,设计师通常在项目前期用几个月的时间搭配色彩而不是设计布局。

选择颜色搭配的区别就在于,完美的色彩搭配能设计出一个能让用户感到放松并沉浸于此的 app,糟糕的色彩搭配会让用户有拿手机砸墙的冲动。以银行业务的 app 来看,糟糕的颜色搭配会让你每次查余额时都非常紧张,而完美的色彩搭配能够缓解你的焦虑,比如马上要清付下一次账单了。

那怎么才能设计得当 - 即如何在你的设计里掌握色彩呢?

图形设计哲学:色彩理论

在深入图形设计哲学(和心理学!)之前,需要了解一些色彩和设计的基本原则。虽然色彩看起来不是一门非常复杂的学问,但我们仍然有理由让每堂艺术课不光教授如何使用色彩,还要教授如何 创造 色彩。

基本原则 - 拿色盘来说 -很简单:原色(红,黄,蓝)可以结合调出二级颜色(绿,紫,橙)。同样地,不同分量的白色加到颜色里,能调出浅色,不同分量的黑色能调出深色。

实现图形设计哲学的时候,色盘将会是一个不可或缺的重要工具。

对角线上的两个颜色(如红色和绿色,蓝色和橘色)是互补色。这些颜色反差强烈,放在其互补色颜色旁边(或之上)时十分突出。相邻的两个颜色是类似色。这些颜色对比度低,放在一起并不突出。

颜色对比度的高低没有绝对的 ”正确“ 和 ”错误“。有时一个应用需要强对比的亮色组合。有时,又需要温和一些。一般来说,越想要突出的东西,越需要强对比度。

感受色彩组合是否搭配的最好方法就是亲身体验。即便你手头没有项目,快速旋转 Adobe 色盘 也许会让你对色彩有新的认识。

情感色板:色彩心理学

巩固 app 的图形设计哲学史,你不应只考虑外观 - 你必须要思考它们给你的感受。我们说的不是触觉反馈。自从 Johann Wolfgang Goethe 研究 色彩对生理学影响 以来,我们着迷于用颜色产生生理和情感效果。

甚至今天,色彩在许多品牌的设计哲学中都占有主导地位。医疗,商业,和政府都倾向于使用蓝色,因为蓝色给人一种值得信任和专业的感觉。绿色看起来更年轻富有活力 - 当然,还反映了环境主义和亲近自然的感觉。红色是精力充沛和冲动的象征,给人速度,效率和力量的印象。我们看到的每个颜色(当然每个颜色本身都会与特定品牌相联系)都暗示了一些东西,直接或间接地,影响着我们对于独立品牌的看法。

你能认出的品牌和标识都是以颜色为中心的。Apple、Wikipedia、 New York Times,在这些品牌里灰色是主色,灰色象征着沉着可靠。这些品牌被视为和谐可靠的。全部食品品牌,John Deere,和 Starbucks 的标识均以暗绿色为主色,把自然、有益身心健康和他们的品牌产品联系起来。

许多颜色甚至超越了品牌自身,定义了整个行业。例如,想一下有多少快餐或连锁餐厅品牌色是红色或黄色的。这些颜色触发精神开关,让我们从心理上自愿购买一些商品。

当经销商很久以前就摸透个中道理时,科学也证明了我们关于颜色的一些共同感受。比如,红色能够让人 反应更快速 或者对特定的刺激产生强烈的反应。红色也可能会变得危险:研究者发现考试者看到红色的时候,正确率会降低。

更不可思议的是,药片的颜色对药效也有轻微的影响。蓝色药片最合适做镇静剂,黄色最适合做抗抑郁的药,在所有案例中,亮色的药片药效最好。虽然这更像是安慰剂,影响我们增大了对药力的反应,但这影响已足以使制药厂在生产新药时把颜色作为考虑条件之一。

现在,并不是说在记录心情的 app 中使用黄色基调就能有效地消除抑郁,而是你选择的色彩搭配有理由认为能够影响用户心情 - 所以请谨慎选择。

色彩与用法

设计不仅是为了好看 - 还有功能和实用性,这两条原则对任何 UX 设计师来说都可以说是最重要的。如果 UX 不流畅,你选择的色彩搭配再怎么完美,UI 再怎么酷炫都没用。如果用户不能高效地使用,当然也不会想留下来。

那么色彩在其中又能起到什么作用呢?

简单来说:色彩是能帮助引导视线的工具。如果颜色使用得当,能够引导新用户快速学会使用你的 app,不需要长时间的新手教程,一系列复杂的视频,甚至不需要一个字。一个使用简便的 UI 不只能引导用户注意 - 还能引导用户全身心互动。

一幅彩铅围成圈的黑白照片,只有笔尖部分有颜色。

试想一下,你正在为一家餐饮公司开发一款 app,提供方便大型机构订餐的服务。一个潜在客户第一次下载了你的应用并打开它。他们会看到什么?

在这个 app 里,大多数菜单项 - 包括背景和其他信息栏 - 都用柔和暗淡的灰色调配色填色。唯一例外的是一个橘红色的写着 “点单” 的方框。作为设计师,你知道大多数使用这款 app 的用户都希望轻松地设置食物订单。你要把这个标志放到显眼的位置,而不是把这个特点隐藏到 app 深处,或者需要用户滚动到页面底部才能看到。不只是这样,你还需要让用户立即注意到这个按钮。颜色能帮助实现这些目的,还能给新用户准确的引导,知道需要到哪里去。

同样地,我们每天都在生活的方方面面中都在和颜色打交道,在心里构建社会联系。例如,红绿灯:绿灯行,红灯停,黄灯慢行(或者提醒我们前面有情况)。黄色代表重要警告,红色代表强调,你能够有力地传达信息并提醒用户为他们的输入做好准备。

另外,该逻辑不光可以用于警告界面。 改变 app 内购买按钮的颜色显然会显著影响 转化率。HubSpot 发现把绿色按钮变成红色按钮后,转化率轻松上升了 21%。此时,虽然不意味着要把每个 app 内购买按钮调成亮色,但却表明了颜色不仅是设计哲学的一部分:应该是整个 app 开发哲学的核心。

我们甚至在强调色的选择上尝试挖掘软色调。色彩和阴影是优化图形设计哲学的最好的方式。

聪明地使用颜色:设计与可访问性哲学

在 Proto.io,可访问性 一直在我们设计哲学的重点。可访问性是好设计必过的一关。如果可访问性不通过,那么就不是一个好设计。

大约 8% 的男人和 0.5% 的女人有不同形式的 色盲。与常见观点不同的是,没有单色色盲,红绿色盲是最常见的。红绿色盲患者通常分辨不清红色和绿色。红绿色盲程度不同,甚至轻微的红绿色盲在使用一些 app 的时候都有明显的障碍。

除了色盲,近视眼用户有时无法阅读低对比度的文字,除非把屏幕靠近一些 - 这潜在地破坏了一些 app 的可用性。

所有这些问题的解法相当简单:展示文字时避免使用低对比度的背景颜色。当你不能保证每个人都能按照你设计的方式浏览 app 时,如果你使用对比色,至少应用是可用的。类似的,强对比色的文字对任何人来说都便于阅读 - 甚至在有视觉障碍时。

另一个提高可访问性的可选项是在 app 中提供可改变的主题色。虽然不是每个人都会用的,但是这能很好的提升 app 的可用性。你也可以允许用户改变特定功能的颜色。例如,你可以有个开关改变 app 的部分颜色,或者整个 app 的文字颜色。把这些颜色的控制权交给用户,你的 app 会对更多用户来说都具有良好的可用性。

如果你仍然不清楚如何在可访问性与设计哲学的色彩之间寻找一个平衡,建议你看看 Google 的 material design library。

选择完美的色盘:固化你的设计哲学

即使确实有一些颜色选择时必须要遵守的规则,它也不是必要的。色彩通常是抽象的东西,像一种感觉。即使你的 app 不是为了在用户身上表明情绪,也不代表它不会。当发现黑白色并不是完美色盘的时候,我们建议使用不同深度的灰色。

用灰色渐变色构建 app 的平面原型并且作为基本准则。记住它的展示和给你的感受:传达给 QA 团队,关注他们的说法。你的新手培训是否灰暗无色?你是否错误关注到了应用的其他部分?带着这些反馈,再设计更多的原型,这次加上颜色。别依赖单色色盘。并且,从 Google 的 material design 网站获得提示,考虑它提供的色盘。

这个人的图形设计哲学是添加一个醒目的红色元素。

把修订版本也发送给 QA。不要担心对两个版本进行 A/B 测试(然后推翻原始灰度版本)。确保在讨论阶段提出了关于色彩值得探讨的问题。你是否在 app 中使用颜色引导用户注意?你是否为了添加闪光就向屏幕随便扔了个颜色?色彩是否分散了用户的注意力?

别忘了用户哲学和可访问性。如果你在开发一款旅游应用,你真的希望所有内容都是亮红色的吗?如果你在开发一款健康应用,你的背景色必须是绿色吗?文字的色彩对比是否足够了?

好的 UX 设计会把这些问题一并考虑在内 - 毕竟,色彩对用户行为和使用舒适度都有绝对影响。如果你的设计哲学还没把这些问题考虑在内,设计出来的 app 并没有你认为的好用和无障碍。确保按步骤设计你的原型,别拘泥于一个或两个颜色。通过实验选择其他颜色,并重复实验,直到完善你的色盘。

Proto.io 使得构建手机应用原型变得真实。无需编程或者设计技巧基础。得以快速实现想法! 今天 注册 Proto.io 获得 15 天试用 并开始你的下一个手机应用设计。





原文发布时间为:2017年2月12日


本文来自合作伙伴掘金,了解相关信息可以关注掘金网站。

时间: 2024-11-01 15:57:49

色彩如何影响 UX 和用户行为的相关文章

影响企业站用户体验因素之400电话

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 企业站无论是做百度推广还是SEO最终目的都是为了订单,没有订单没有成交量一切就都是无意义的,然而当用户进入你网站或是在百度知道,论坛等其他地方了解到你网站,想要咨询或是了解情况时,就需要一个沟通交流工具,而400电话就是最直接的联系方式,用户没几个人不会使用,现在社会又有几个人不用手机,不拔打电话呢?下面A5站长网SEO诊断团队就和大家简单的

Dropbox密码泄露影响6800万用户

Dropbox确认在2012年的泄露事件里6800万用户的身份信息被泄露,并且它会持续提醒用户更新密码,避免密码被重用,同时启用双因素身份认证. 该云存储供应商一直在淡化该新闻的影响,声称还没有足够证据表明Dropbox密码的泄露导致账户被入侵.Dropbox上周强制那些自从2012年以来就没有变更过密码的用户重置密码.最初Dropbox泄露事件发生在2012年,当时黑客使用从其他网站偷到的密码来获得这些密码的Dropbox账号登录权限,其中包括一个Dropbox员工的账号. "自从我们披露这件

seo优化之影响排名的用户体验

一.网站流量和Alexa排名 这是最直接.误差也最大的因素.尤其是Alexa排名,由于分布不均匀,又容易作弊,与网站真实流量往往相差很大.不过网站总体流量毕竟在一定程度上说明网站的受欢迎程度.即用户体验. 二.点击率 网站页面在搜索结果中被点击的比例.虽然点击率主要是由排名先后决定的,但是由于网站的知名度,用户体验.标题写作等方面的差别,有的网页也可能有排名靠后,却有比较高的点击.所有搜索引擎都记录搜索结果的点击率,发现某些页面有超出所在排名位置应该有的平均点击率,可能认为这些页面对用户更有用,

WinRAR 高危漏洞影响五亿用户

流行解压缩软件WinRAR的最新版本(WinRAR SFX v5.21)被发现存在一个允许远程执行代码的高危漏洞,影响多达五亿用户.问题存在于"自解压窗口显示文本"中的"文本和图标"功能,远程攻击者能生成 带有恶意载荷的压缩文档去执行系统特定的代码,入侵系统不需要特权账号或用户交互.Vulnerability Lab的安全研究人员公布了概念验证攻击代码. 文章转载自 开源中国社区[https://www.oschina.net]

浅谈影响小网站用户体验四大主要因素

中介交易 SEO诊断 淘宝客 云主机 技术大厅 随着种种新技术的产生,从而各种免费的开源技术也诞生了,随之而来的就是搭建一个网站的技术和资金成本越来越低了,现在几乎就是会打字就能自己建一个网站,甚至不用花一分钱都可以搞一个属于自己的网站.为什么这么说?大家可以用人家送你的空间和域名,然后又用开源的程序,就像安装QQ一样,折腾一下一个网站就成了. 当然笔者上面说的那样的网站只是入门学习,一般来讲那种网站是不能正真拿来线上运营的,虽然现在只要会打字的一个人都能建一个网站,但能建好或者说运营好一个网站

汪海兵:对手低价策略影响淘米用户体验

11月29日消息,淘米网CEO汪海兵在分析师电话会议上表示,淘米不是一家游戏公司,愿景是成为中国最受家庭喜爱的儿童娱乐媒体公司,品牌和用户是淘米长期价值的核心.对于来自腾讯等公司的竞争,汪海兵表示,在一年时间内对市场竞争的观察基础上,公司从三季度开始调整了竞争策略."我们注意到竞争对手在儿童游戏业务上采取低价格的竞争策略,这对我们的用户体验造成一定影响.我们从长期的用户和品牌角度对此进行了一些调整,坚持从长期的角度看待公司的价值,淘米长期价值应体现在用户的增长和品牌价值的增长,在此基础上我们会最

色彩如何影响购物

曲建菲 微博weibo.com/qujianfei 对于零售商来说,销售是一门极具说服力的艺术.尽管有很多影响消费者购物的因素,但是一个好的策略是由多种暗示决定的,其中最重要也最有说服力的,就是色彩! 色彩和市场 当出售新产品时,有一点需要 认识到,消费者在购物时,商品的视觉感官和色彩 往往比其他因素决定消费者购买. 85%的消费者在决定为什么购买一件商品时,将色彩作为最主要的原因. &http://www.aliyun.com/zixun/aggregation/37954.html"

MSN昨晚当机影响900万用户登陆

新浪科技讯 9月12日消息,据台湾媒体报道,微软承认昨晚MSN当机超过一小时,使全球900万用户大受影响,目前当机原因仍在调查当中. 台湾微软网络服务事业群行销经理钟婉珍表示,由于美国总部执行服务器维修,台北时间昨晚10时半左右,MSN曾短暂当机1小时,全球3%约900万用户受影响. 她表示,晚上6时开始即接获当机查询电话,并将相关情况向美国总部反应:因当时为美国半夜时间,当机详细原因及影响情况,需待上班后始可查明.据悉当机事件很可能同样出自服务器维修. MSN上一次全球当机情况发生在2005年

苹果公布iPhone 5s召回细节:影响数千用户

新浪科技讯 北京时间11月1日早间消息,据美国科技博客9to5Mac报道,知情人士透露,苹果公司将主动联系受到iPhone 5s电池故障影响的用户,用户也可以与苹果公司取得联系,如果确认的确受到影响,便会通过实体店.经销商和邮寄三种方式为用户更换新机.苹果公司本周证实,部分iPhone 5s因为制造缺陷导致电池续航时间出现问题.该公司称,将与受影响的用户取得联系,并为其更换新机.而知情人士则披露了具体的流程.苹果公司会根据串号确定受影响的iPhone 5s,然后通过电话与机主取得联系.倘若用户感