web设计中的色彩与心理学

为什么Facebook是蓝色的——从最初到最新的版本,几经设计更迭,始终不变的主色调都是蓝色?

答案其实很简单,根据《纽约客》的一次采访,Facebook的创始人马克·扎克伯格其实是一个红绿色盲,他只能分辨出蓝色:“蓝色对我来说是色彩最丰富的颜色。”

* Facebook最初始的设计界面,那时候它还叫做thefacebook.com。当时,想要在上面开个账户必须有一个以.edu(哈佛大学)结尾的邮箱才行。

无心插柳也好,有意栽培也好,色彩往往能够体现互联网品牌的创始人的审美和喜好,而设计师对于色彩的挑选和取舍,也是完成作品中的必备环节。可以500%提高开发效率的前端UI框架!

Youtube设计师Marc Hemeon就曾收集了18组流行网站或产品的按钮设计色彩,用来评估和调研色彩对于用户心理的影响:

对应网站或产品的谜底如下:

1、Google

2、Twitter

3、Facebook

4、Microsoft

5、Pinterest

6、Yahoo

7、Instagram

8、Flickr

9、Spotify

10、Rdio

11、Svbtle

12、Medium

13、Basecamp

14、Square

15、Amazon

16、Quora

17、LinkedIn

18、Path

大部分网站或产品的按钮色彩都不会超过3种,指向“动作”的按钮应当统一为同一种颜色,比如Google的“搜索”按钮是蓝色,而Twitter的“注册”按钮则是明亮的黄色。可以500%提高开发效率的前端UI框架!

社交分享工具Buffer的联合创始人Leo Widrich在博客上补充了关于色彩的一些观点,摘录部分内容如下。

色彩能够帮助品牌极为简易的建立用户认知:

灰色:象征冷静、中立;(苹果、维基百科、纽约时报……)

绿色:象征健康、生命;(BP石油、食品超市whole foods、星巴克……)

蓝色:象征可靠、力量;(戴尔、大众汽车、IBM……)

紫色:象征智慧、想象;(雅虎、T-Mobile、科幻主题电视台Syfy……)

红色:象征血气、年轻;(可口可乐、乐高、肯德基……)可以500%提高开发效率的前端UI框架!

橙色:象征欢乐、信任;(芬达、亚马逊、火狐……)

黄色:象征温暖、透明;(百思买、法拉利、麦当劳……)

站在消费者角度,色彩也能够在理解和决策阶段起到一定的影响作用:

黄色:吸引注意力的购物窗口;

红色:刺激心血的紧迫感,常出现在清仓场景;

蓝色:多用于银行和商业机构里,强调安全;

绿色:让人联想到富裕和轻松,缓解压力;(支付宝的信用卡还款按钮选择了绿色作为主色调,能够理解原因了吧)

橙色:呼叫意味浓厚,用于创建下订、购买、出售的行动;

粉色:服务于女性和年轻女孩的浪漫色调;

黑色:奢侈品的最佳匹配;

紫色:给人舒缓&平静的感受,常被美容及抗衰老产品使用;

男性和女性对于色彩的喜好度有所偏差:

企业分析服务公司KISSmetrics的调查报告显示(这份报告主要用于建议App产品的创业者在产品设计上的策略)——

女性喜爱的色彩:蓝色、紫色和绿色;

女性讨厌的色彩:橙色、棕色和灰色;可以500%提高开发效率的前端UI框架!

男性喜爱的色彩:蓝色、绿色和黑色;

男性喜爱的色彩:褐色、橙色和紫色;

色彩能够决定转化率的差距:

美国数字营销公司Hubspot曾经做过一场A/B Testing,用于测试不同颜色对于用户点击转化造成的差异——

左右两个测试颜面在内容上完全一直,唯一不同的是按钮的颜色,在超过2000人次的样本测试中,最终红色方案的点击率超过绿色方案的点击率足足21%。

而在测试之前,大部分的研究员都猜测绿色方案会获得更高的点击,因为就直觉而言,绿色代表着通行、准许通过的意思,而红色则更倾向于警告、阻止意味。可以500%提高开发效率的前端UI框架!

最后,为什么Html语言里超链接的默认颜色是蓝色的?

因为蓝色是从灰色底色中脱颖而出的最佳色调。

这个决定是由Tim Berners-Lee——万维网的发明者做出的。在他那个年代,互联网的第一代浏览器Mosaic显示的网页底色通常都是灰底黑字,为了让超文本链接能够更方便识别,Tim Berners-Lee将超链接定义为蓝色并带有下划线的文字。

时间: 2024-10-25 19:15:12

web设计中的色彩与心理学的相关文章

Web设计中打开新页面或页面跳转的方法 js跳转页面

Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打开本地网页或互联网:Respose.Write("<script language=&apos;javascript&apos;>window.open(&apos;"+ url+"&apos;)

当今Web设计中存在的5大争议 ,你怎么看?

在 Web 空前繁荣的今天,有关 Web 设计中的各种观点很多会成为话题,有的很快达成一致,有的则一直争议下去,本文讲述 Web 设计中的 5 大经典争议,这些争议从它们诞生的那天起,就被正反两方争得不亦乐乎. 争议之一:链接是否应该在新窗口打开 正方: 外部链接应该始终从新窗口打开,当你浏览一个站点的时候,点击了一个链接,却被带到另外一个站点,你在这个站点的会话也因此丢失,这实在令人恼怒. 因此,站点内的链接可以在现有窗口打开,而站点外链接则应该在新窗口打开. 反方: 作为 Web 设计师,我

Web设计中打开新页面或页面跳转的方法

一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打开本地网页或互联网:Respose.Write("<script language=&apos;javascript&apos;>window.open(&apos;"+ url+"&apos;);</script>&quo

web 设计中引入字体

参考:http://blog.csdn.net/goodgirl1991/article/details/50414207?_t_t_t=0.013330932601413936

Web响应式设计中应避免的八大误区

开发一个带有响应式交互设计的网站变得非常有意义,因为其可以在不同的设备运行,因此,你可以节约针对不同平台开发不同网站的成本.但是,要做最大限度相应的网页设计,有些误区你应当避免. 不要优先为桌面版设计 开发者通常会犯的一个常见错误是,但他们设计网站时优先考虑桌面版,因为在这些人严重,将基于桌面版的网站转变为针对其他设备的响应式web设 计 是件很轻松愉快的事情.但是,这个发生在计划规划阶段的错误本身会变成一个非常巨大的问题.甚至会造成返工,当然,大量的错误也会蔓延出来. 然而,基于移动设备开发网

[转]响应式WEB设计学习(2)—视频能够做成响应式吗

原文地址:http://www.jb51.net/web/70361.html 上集回顾: 昨天讲了页面如何根据不同的设备尺寸做出响应.主要是利用了@media命令以及尺寸百分比化这两招. 上集补充: 其中,利用以下CSS设置让图片或视频大小不超过设备屏幕的宽度: 复制代码 代码如下: img, object{max-width:100%;} 这一语句一般加在@media screen and (max-width:481)的判断内,主要是让手机用户在查看网页时图片不至于比手机屏幕还大. 这一招

超越CSS:Web设计艺术精髓 笔记

w3c创建web标准.css和css禅意花园推动css.IE7浏览器存在市场份额的时代,因为IE7对标准还不是很理想,当前网络环境,IE6和windows xp已经被微软官方停止,IE8大体支持web标准的情况下,web开发人员还需要兼容IE7的情况下,该书提供一系列解决思路. 1.在IE不支持web标准消失之前,我们都需要针对浏览器实现分级支持,同时我们不能使用浏览器Hacks2.w3c的web标准和禅意花园的出现推动css标准发展,css2-css33.javascript和DOM补css不

Web浏览器中的JavaScript(二)

客户端Javascript时间线: 1)  Web浏览器创建Document对象,并开始解析Web页面,解析html元素和它们的文本内容后添加Element对象和Text节点到文档中.在这个阶段documen.readystate属性值是"loading" 2)  当HTML解析器遇到没有async和defer属性的<script>元素时,它把这些元素添加到文档中,然后执行行内或外部脚本.这些脚本会同步执行,并且在脚本下载(如果需要)和执行时解析器会暂停.这样脚本就可以用d

图层叠加混合模式在网页设计中的应用

很多飞鱼的声纳的读者常会询问我类似于上图中的按钮的光效是怎么做出来的?其实非常简单,新建图层,笔刷或椭圆画出白色,高斯模糊,再将图层混合模 式更改为图层叠加就可以了.但是这篇文章里我们不讨论具体的技术,而来看看如同上面的按钮通过白色的叠加创建出按钮的高光,我们来了解一下图层叠加模式在 网页设计中的应用,再通过不同的实例来深层次的了解图层叠加混合模式的基本效果,将其更自由的应用于我们的设计中.精心开发5年的UI前端框架! 案例一 图标设计中增加色彩的饱和度和明暗对比度 之所以会引出要讨论图层叠加混