网站专题BANNER

网站设计中的色彩学,网站设计中如何更好地运用色彩搭配

发表日期:2022-03-14 11:07:06 文章编辑:洛壹网络 文章来源:网站设计观点

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


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


浅谈互联网设计的色彩心理学心得,PS教程,


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


无心插柳也好,有意栽培也好,色彩往往能够体现互联网品牌的创始人的审美和喜好,而设计师对于色彩的挑选和取舍,也是完成作品中的必备环节。


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


浅谈互联网设计的色彩心理学心得,PS教程,


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


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的“注册”按钮则是明亮的黄色。


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


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


浅谈互联网设计的色彩心理学心得,PS教程,


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


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


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


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


红色:象征血气、年轻;(可口可乐、乐高、肯德基……)


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


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


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


浅谈互联网设计的色彩心理学心得,PS教程,


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


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


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


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


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


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


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


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


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


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


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


女性讨厌的色彩:橙色、棕色和灰色;


浅谈互联网设计的色彩心理学心得,PS教程,


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


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


浅谈互联网设计的色彩心理学心得,PS教程,


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


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


浅谈互联网设计的色彩心理学心得,PS教程,


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


而在测试之前,大部分的研究员都猜测绿色方案会获得更高的点击,因为就直觉而言,绿色代表着通行、准许通过的意思,而红色则更倾向于警告、阻止意味。


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


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


浅谈互联网设计的色彩心理学心得,PS教程,


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


相关内容
设计网站中有哪些关键技巧?

设计网站中有哪些关键技巧?有哪些陷阱?在这里,世界上一流的网站设计专家,让你共享他们的秘密,告诉你:使网站赋予情趣的诀窍、应该避免做什么、应使用什么工具软件以及他们喜爱和厌恶的网站。

深圳网站设计,什么样的网站导航设计会吸引你?

今年,许多网站都将这个小元素纳入界面,成为页面导航的重要组成部分。除了导航设计趋势,还有各种设计方法,如全屏导航,底部导航等,所有这些都有利于网页设计师。

好的网页设计应该具备什么条件?

  网页设计必须简约,任何无用的特质都必须移除;与此同时,网页设计必须能够满足用户需求。

做网站设计时,我们应该考虑哪些因素?

做网站设计时,我们应该考虑哪些因素?在做的过程中设计师应该思考哪些问题,怎么样才能做好网站设计?

网站设计中设计师到底要实现什么价值?

用户体验好的方案,用户感受到的体验真的好吗,真的在意吗?用户愿意为这个体验更多的使用?还是愿意付更多钱? 如果设计希望被认可价值,那么就必须清晰表明:设计到底实现了什么价值,以及设计是如何稳定实现这些价值的。 网站设计中设计师到底要实现什么价值?

什么是玻璃拟态?玻璃拟态风格赏析

玻璃拟态(Glassmorphism),更直观的说就是玻璃拟物化。它是在2020年末开始在各大设计平台流行起来的设计趋势。当时苹果新发布的Mac OS Big Sur操作系统中也使用了这种风格

如何设计玻璃拟态效果,玻璃拟态呈现方式

网页设计师想出了一些非常聪明的技巧,让他们的作品有一种实体感。玻璃拟态(Glassmorphism)就是这样一种技术。当您将模糊效果与透明度相结合时,像素会呈现出磨砂玻璃的略微不透明的品质——为设计增添一丝质感和维度。

如何设计出视觉冲击力强的海报?这16种海报设计思路一定要知道

我们做海报设计的时候,经常会在图文排版上花上很长的时间来构思,要让主题突出、要画面有活力、视觉冲击力要强、要给观者留下深刻的印象......那么今天洛壹就来分享16种海报设计的思路,让你在设计中思路清晰,努力不白费。

我们
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器