视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

大多数的人们都熟悉色彩心理学;成百上千的文章、案例研究、甚至是从不同角度进行分析的图表。颜色对我们的影响,将影响我们决策过程中的每一个选择。这点是毫无争议的。但是,我们不应该盲目的遵循某一个原则去辨别。今天,我们就一起来测试对比度在吸引关注中的作用。

大多数的人们都熟悉色彩心理学;成百上千的文章、案例研究、甚至是从不同角度进行分析的图表。颜色对我们的影响,将影响我们决策过程中的每一个选择。这点是毫无争议的。但是,我们不应该盲目的遵循某一个原则去辨别。今天,我们就一起来测试对比度在吸引关注中的作用。

从柔和、平静的绿色转变到激烈、鲜艳的红色可以吸引来更多的关注。当然,这也不一定有效。如果没有铺垫好基础使其突出,那么吸引力将会大大下降。

这种情况下的“基础”就是转变。以下是我们收集的十个经典案例,鲜明的转变能让用户快速地融入到环境中,能快速地吸引人的注意。

颜色vs反差

悄悄的转变:

ESPN Sports Programming

ESPN体育节目官网的首页就是一个很好的例子,充分说明了颜色在转变中是如何发挥作用的。该网站有两个吸引人的地方:第一就是激烈、鲜明的红色;第二就是坚实的背景。这不是要比右边简单的文字更有吸引力吗?

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Moovrs

尽管按钮没有采用大胆的红色基调,但该网站也被认为是个成功的网站。主要是由于采用了强烈的转变,背景和主要的配色方案,CTA能立即吸引眼球,这是一个成功的点所在。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Metaverse Mod Squad

这是另一个设计符合色彩心理学很好的例子。该网站红色基调是很重要的元素,是轻易区分重要细节很好的工具。尽管背景拥有浓烈的艺术气息,但汉堡菜单按钮、以及其他红色基调的元素依旧能吸引人的眼球。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

S-Trip

该网站设计师设计的按钮看起来是那么的独特和引人注目。采用一个明亮的黄色阴影、以及对比度突出的背景,这两点足以彰显出艺术家的气息。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Squad Digital

深红色的基调,使按钮成为焦点。当然,你不应该削弱暗黑色背景的作用。大量的空白区域以及核心组件也没有抢走中间按钮的吸引力。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

El Passion

尽管绿色通常是营造一种宁静、自然的环境,但这个案例中,绿色的按钮足够有吸引力使之成为整个页面的焦点。这主要是背景图像和简短文本信息所凸显的结果。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Icons Responsive

Icons Responsive网站看起来好像很忙碌,因为有太多有趣的东西的缘故吧。有一个动画很值得你关注,那就是有着简短描述、辨识度高的导航栏。尽管内容很饱满,但那两个强烈的绿色按钮却很夺目。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Chatrify

不仅选择明亮、温暖的黄色作为按钮的背景色来设置环境,同时尺寸上也增加了视觉重量和加强了CTA的意义。因此,“Get started now for free”这个按钮看起来是多么醒目。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Teletrack Plus

Teletrack Plus华丽务实的气氛给人信任和可靠性。尽管登陆页面有设备模型和功能列表的元素,但相对较小,高饱和度黄色按钮的放置是多么引人注目。跟往常一样,巧妙地选择避开主要的色彩基调以达到突出某一元素的功效。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Mobirise

哪一个按钮能预先吸引你的注意呢?我相信,很多人都会选择更坚实和可点击的橙色按钮,而不是优雅的幽灵按钮。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

说实话,想找到一些转变和颜色无缝的例子不是很困难,这随处可见。尽管如此,我们也有包括CTA需要一些改善带来更多转变的例子。

100 Thoughtful Acts

100 Thoughtful Acts是一个给人一种无比注重美学印象的网站。然而,细小的CTA是一个由文本和色彩组成。红色的基调显然是最明确的选择,它令按钮融合到环境中,而不是从中脱颖而出。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Lucerne Health

Lucerne Health网站以壮观的风景作为背景图片,这样很难吸引你的注意力。CTA是一个完美融入主题、冷静又平和的蓝色基调按钮。然而,这样的颜色也只能使它成为一个焦点而已。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Convect Air

Convect Air网站是一个设计很棒的例子。CTA迷失在奢华的背景中。缺乏转变和小尺寸的按钮更是无法喧宾夺主,只能充当装饰。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Soundsnap

该网站的两个按钮在外观上是一样的,具有同等的优先级。更重要的一点是它们完全融入了背景当中。此刻唯一能分散你注意力的当属顶部的信息栏了。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Wiser Digital

理想的情况下,“Find out more”这个按钮应该区分于整体的设计,为网站的美学做点贡献。尽管背景有足够优秀的文本和图形基础,但按钮仍然不明确。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Spire

这里的CTA有一个独特的外观,唯一的不足在于它的尺寸。有趣的背景和一些花哨的叠加效应有很大的视觉冲击力,更不用说占据中心位置的大字体标语。所以,网站的按钮看起来没有足够强的吸引力去吸引浏览者。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

The Green Guys

这里以黄色和绿色为主色调。显然,白色无法跟这两种颜色对比,只能充当辅助色调。所以网站的白色按钮无法作为核心脱颖而出,更别说该元素的尺寸。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Martin Wren

Martin Wren网站以明亮的色调赢得浏览者的认可。虽然按钮黑色的色调更适合整体的设计,然而橙色的CTA具有更强的转化率。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Royal Albert Hall

该网站是以郁郁葱葱、风景画为背景,制造了一种美学氛围和向浏览者传递了信息。由于规模尺寸相对较大,使得名牌看起来与众不同。锋利的排版和搜索框、以及提交按钮看起来也是光滑、无缝的。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

Desperados

该网站通过一些装饰性的字体和图形创造了一种创意美学。着重强调了额外增加的图形对象CTA。

视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

结论

色彩的选择在网站的设计中起着巨大的作用。然而,实践表明,保持背景和CTA的对比度是至关重要的。如果你想提高转化率和改善用户的交互体验,那么你应该在设计中多考虑这两个元素。

 

原文:Nataly Birch

本文由 @用户体验咨询机构BESD设计实验室 Andy Leong 原创发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/32136/

(0)
CatherineCatherine
上一篇 2017-06-04 03:59
下一篇 2017-06-04 06:04

相关推荐

  • 好的产品经理是什么样的?

    互联网界自从出了几个大神级的产品之后,产品背后的产品经理被捧红了,一时间产品经理成了诸多行业从业者追求的目标,每个人都期望有一天也能做出一个很牛的产品来,这种影响导致了很多刚毕业的学弟学妹,都认为产…

    2014-11-12
  • 实例解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,姑本文将分为上下两篇来发~一、费茨定律(Fitts’ Law)费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(...

    2018-03-16
  • 从逻辑层、感官层与知觉层,讲述体验设计的表和里

    什么是合格靠谱的体验设计?在逻辑层讲一个通顺的故事。什么是触动人心的体验设计?在感官层唤起人的体感记忆。什么是经典不衰的体验设计?在知觉层建立起认同和反思。你的设计逻辑性和方法运用很强大,很擅长做工具型的产品设计,但在设计的创新性和情感体验上还需要进一步加强。任何游戏化的设计都必须认识到:外在奖励会显著降低玩家的内在动机。游戏化的经验很简单:不要盲目地将外在动机附着在内在动机上。

    2017-05-13
  • 在网页设计中如何引导用户的注意力

    每个界面都应该有一个清晰的起点。用户应该从哪里看起?要设计清楚。△ UX策略1 – 在页面标题部分添加视觉对比

    2017-05-24
  • 为你的App增加WiFi认证检测,让用户体验更加丝滑

    前言前段时间在上海坐地铁时连接了花生地铁WIFI,打开QQ音乐开始听歌,QQ音乐居然给了我一个"WIFI认证提醒"的弹窗,点击认证就跳转到了花生地铁WIFI的认证页,之后顺利联网成功,体验非常爽。作为一名iOS开发,不禁思考这个是怎么做到的呢?忘记WIFI重新连接后,打开手机里各个应用轮番测试一遍,发现QQ音乐、QQ、QQ空间三个应用都做了比较好的WIFI认证提示:成功提示.png而其它的大应用如微信、手淘、支付宝、钉钉、美团、点评、爱...

    2018-02-07
  • 屏幕尺寸越来越多,“首屏为王”还有效么?

    作者:Amy Schade@nngroup,翻译:小球娘   几句话概述:把什么内容放在页面顶部(第一屏的位置)以及把什么内容藏在第一屏位置之后将始终影响用户体验——无论屏幕大小。有平均84%的用户会区别对待页面第一屏内容和…

    交互专题 2017-08-07
  • 从“注意力”的角度,谈交互设计如何避免入坑

    前段时间UIMAX团队在做“新浪新闻客户端用户画像项目”时,用研人员访谈用户的过程中,发现一个这样的问题:多数用户完全没注意到过页面上的“长按可排序或删除”这段文字,反馈“不知道可以对新闻频道进行排序” 设计师…

    2017-06-05
  • 用户体验进一步提升!微信官方将优化小程序授权

    序多多小程序无需开发,轻松上手,小程序极速免费生成!十分完美的事物中在这个世界上是不存在的,每个事物需在近乎完美的道路上苛求自己,不断完善。小程序亦是如此,它是互联网时代进步的产物,被互联网大佬们追逐,被用户用完即走。但它也有被人诟病的地方,即会在用户首次启动时直接要求授权,甚至有的小程序会出现若用户不授权,小程序将会出现异常,或进入死循环的情况。相信很多用户都遇到过不授权便会出现死循环的小程序,最后只能退出微信重新进入,造成用户体验很...

    2018-04-21
  • 译文|一个好故事在用户体验设计中的力量

    “细心的观众/听众会很有可能会与这个故事中的人物的情感产生共鸣,并在故事结束后模仿这些人物的感情和行为。这也就解释了为什么你看了詹姆斯邦德拯救世界之后而产生的支配感觉,看了斯巴达300勇士之后就有了外出工作打算。”
    ——保罗J.扎克,经济学家“故事是激活部分大脑的唯一的方式,使听者把经验变成他们自己的东西
    一个单一的故事可以让我们的整个大脑工作。比较这个层级的参与,只阅读要点或无关的文本只能让我们大脑的某些区域工作。然后我们很快就忘记了这些信息,因为对于这些信息来说,我们没能联系到我们自己的经验,也没有积累任何情绪的连接”“精心设计的东西也不足以单独取得成功。整个生态系统及其相关交互点也必须如同产品本身一般被设计过,这也是可持续设计的要求”
    ——罗伯特布鲁纳,Ammunition Group创始人“许多商家其实已经发现在实际意义上讲故事的力量,他们已经观察到了一个精心构造的叙事是可以多么的令人信服。并且最近的科学研究也很好的阐释故事是如何在某些方面影响我们的态度、信念和行为。”

    2017-05-29
  • 今天的互联网设计师很有“钱途”,如何才能更好地理清自己的发展方向?

    哪种设计师价值更高?如何才能更好地理清自己的发展方向?本文将对交互设计师(或者称UI设计师)发展的三部曲——器、势、人分别进行讲述。全是干货分享,好好吸收吧,因为这三部曲基本会贯穿你的职业生涯。我要不要学XX软件啊?软件要不要报班啊?一个四十岁的土老板,每天最多的事就是接打电话。老板每天可能会打几百个电话,这个频率是你们想象不到的,他可能随时随地都在打电话,而很少用微信、QQ。传统手机接打电话非常方便,按下按钮或翻盖闭眼都能接电话,用智能机反而不方便,所以他希望自己用的还是传统手机。但是传统手机太低端了,老板担心同行和下属嘲笑他,就很纠结——于是我们的手机就诞生了。任何项目第一保证的都是效率。

    2017-05-17