视觉冲击 | 颜色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

相关推荐

  • 交互案例分享-Spring音乐播放器

    在设计流程的过程中,我们往往会把流程设计的越短越好,最好一步完成,这样用户在流程中停留的时间越短,流程的转化率越高。 最近在试用一款叫「Spring」的音乐播放 App,它根据要你要进行的运动类型,节奏频率,偏…

    2014-09-16
  • 交互设计丛书分享:《从零开始做交互》告诉入门交互师具体操作的的一本书籍。

    内容简介   遇到很多的人来咨询我什么是用户体验设计师,什么是交互设计师,UI与UE设计师有什么区别?为什么一个新生派的交互设计师职位一上来就在IT界有8000起的薪资待遇? 那么说了那么多,怎么才能成为一个…

    2015-07-15
  • UI设计入门必会:Axure及Adobe系列软件如何安装

    UI设计最最基础的-软件如何正确安装且永久免费试用1、Axure 8.0正确安装、汉化、破解2、UI设计之通过CreativeCloud安装Adobe软件

    微信热点 2018-05-07
  • 微信黑科技”红包照片“今日仅限一天体验速去!!

    就在刚才,微信偷偷发布了黑科技,说不清是照片红包还是红包照片,反正平日里的发朋友圈的照相机图标已经变成了香槟金,点击后会出现发照片红包的选项,发布之后朋友需要支付红包才可以打开。   快去试试?

    2016-01-26
  • 设计中的交互设计——什么是交互设计

    上一篇我们探讨了设计的本质,结论是设计的本质是解决问题,满足人们的需要。有的朋友可能会问:工程学也是解决问题,比如造一座桥,就解决了一条河两岸的交通问题。那么设计和工程学有什么区别呢?这里我想补充一点:设计是漂亮得解决问题,即设计除了需要考虑如何为人们服务,还需要考虑以一种美观的、令人赏心悦目的方式来服务。因此,“漂亮”这个因素,也很必要。既然交互设计是设计学科里的一个分类,那么交互设计一定首先满足设计的本质:漂亮得解决问题。下面我们来...

    2018-03-13
  • 用户体验说:那些减少用户操作的交互细节

    本文总结了一些可以让用户少操作的交互细节,与大家分享,希望可以给大家带来一些启发。

    2017-05-03
  • 用户体验设计的5大目标

    我们常说产品的用户体验设计很重要,但究竟怎样才算好的用户体验呢?以下5大UX设计目标层层递进,帮你在最短的时间内明确用户体验设计方向,成为一名合格的UX设计师。“我能否以最简单,快捷,直接的方式得到我想要的东西?”最好是“别让我思考”。“我是否享受使用该产品的过程?”“该产品是否有足够的吸引力让我愿意长期使用”,甚至“成为我生活的一部分,让我戒不掉?”“该产品是否能调动我的力量,让我主动加入产品宣传推广的队伍。”

    2017-04-30
  • 探讨F式布局在网页中的运用

    虽然网页排版 方式千变万化,但是布局方式通常都遵循着几种常见的规则。在诸多布局方式当中,F式布局是可用性较强,且适用范围较广的一种。今天的文章同你来探讨F式布局在网页中的运用。

    2017-05-04
  • 别逗了,真正的“用户体验”并不如你们所想

    什么是用户体验?如何评价用户体验的好坏? 在知乎上,俞军说:“我理解的用户体验,是让用户付出最小成本满足需求”。这其实仅仅是在讲“易用性”(usability)。另有位叫做Allen Zhang的大牛说:“个人对用户体验的目标…

    2015-10-10
  • 大数据应用的用户体验分析

    版权所有©德塔精要,转载请注明出处用户对产品或服务的认同是由用户体验的过程所决定的,一个具备良好用户体验的IT系统对内可以提高员工工作效率,对外可以提高客户满意度和忠诚度,最终为企业带来不菲的经济效益或社会效益。因此,组织的IT战略必须实现IT与业务的融合,面向客户和关注用户体验管理。但目前用户体验管理是当前IT业务运营的弱项,也许我们能够了解IT资源的每个细节,但却不知道用户感受怎么样,不利于IT系统的优化和完善。缺乏用户体验管理以及...

    2018-03-12