集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > UID >

色彩心理学对网页设计的影响

发布者: 成都达内     浏览次数:     发布时间:2018-10-22 15:55:17

为什么Facebook的主题色是蓝色的?为什么淘宝的主题色是橙色的?如何在网页设计时,正确地使用色彩?欲知个中缘由和方法,且看本文分解!...

  色彩影响人类心情与思考这件事情是真的,当我们观察一种颜色时,我们的眼睛会向大脑中称为下丘脑的区域发送信息。经由一系列的神经传达,刺激甲状腺分泌贺尔蒙,进而激素的释放会导致我们的情绪,以及我们的行为发生波动。

         

  科学告诉我们,颜色会唤起情绪,引起我们消极的负面感觉。Kissmetrics还表明,对于一个站点来说,网站访问者只需90秒即可形成判断或意见。除此之外,“62-90%的相互作用仅取决于产品的颜色。”所以色彩对于网路上各式各样的网站设计当然也具有一定影响。

  正如免费电子书Web Eye for Human Eye中所描述的那样,色彩在为用户创造强烈的第一印象方面起着不可否认的作用。

  颜色的含义是什么

  关于“颜色的含义”,每种颜色对每个人都意味着什么,尽管这意味着我们的个人喜好和文化背景。比如蓝色,代表智力和理性,但是有压抑食欲的倾向,所以不用再视频广告上。还有说到橘色,是新的红色,温暖不危险,与能力有关(饮料,运动,健身),看看下面的色卡,可以作为一个颜色含义的快速参考。


239c4c272214f234951bb95d4ba4d5eb


  图片来源:UXpin

  设计中的色彩心理学不是一门精准的科学,并且研究表明,色彩心理受个人认知影响。社会因素中如社会性别也对颜色如何被感知有影响。进一步研究表明,不仅是颜色自身含义的影响,也是关于在使用中如何让用户恰当的感知到用在品牌上的颜色含义。


网页设计中的色彩心理学-UI头条


  图片来源: Kissmetrics

  所以,如果你是为女性设计,那么紫色是一个不错的选择,因为它受到普遍女性的喜爱,但是男性却不喜欢(当然通常情况下是这样)。在下图中,对巴黎欧莱雅来说是一个很好的效果 。正如你所看到的,页眉和页脚用的黑色,这表示类和优雅,会让你总体感觉到该产品不便宜,是高端产品的整体感觉。


网页设计中的色彩心理学-UI头条


  图片来源: Kissmetrics

  此外,白色用于文本,表示现代性和平静感,而紫色被选择表示奢华,优雅和女性气质 - 所有这些都明显适合这样的网站。

  在下面的图片中,对于女性健康杂志,顶部的横幅是粉红色的,但是该网站相对缺乏颜色,而是依赖于图像和粗体导航。这是一个有趣的选择,可以对网站起作用。

  首先,粉红色是一种非常刻板的颜色,当一个网站针对女性时使用它,并且它吸引甜食,所以该网站的信息,因为这是关于女性的健康,可能会因此而丢失。


网页设计中的色彩心理学-UI头条


  图片来源:女性健康杂志

  当我们进入到网页的次层级中,标题颜色当然会在每个页面上使用,但快速访问减肥部分将返回以下内容。如下图。


6b16aff33aa5e30b1caeed4a72e2a759


  正如您所看到的,这个页面更是粉红色,这一点可能会给观众带来适得其反的感受。但是,我们碰巧看到的第一个图像位于滑块上,当您保留在页面上时,这确实会发生变化。

  确定配色方案

  创建一个网站,这个网站你不太可能只用一种颜色(除非你纯粹是单色),所以你应该考虑整体配色方案和使用的每个色彩,以及它们的统一性。还要考虑对用户的影响以及如何让你正在使用的主色和辅助色相匹配。

  考虑到这一点,你应该会关心在将颜色混合在一起时应注意的并且能够为你提供帮助,你可以通过三种基本的混色方法来指导。

  1.三角色彩(红黄蓝)

  这是最基本和平衡的方法,原理是使用了色彩的活力和互补特性。使用这个12项色环,你可以选择任意三种颜色,这些颜色彼此相隔120度,依次作为背景,内容和导航的颜色。


网页设计中的色彩心理学-UI头条


  图片来自: Ray Trygstad.维基百科

  2:互补色(对比色互补)

  第二种方法有点困难,你可能为了证明它是恰当合适的颜色不得不去做些试验,但如果做得好就可以非常有效。这个概念使用四种颜色 - 两对对比(靠近色轮)和两对互补对(色环上相邻两个颜色的180度补色)。


网页设计中的色彩心理学-UI头条


  3:相近色

  这个方法仅侧重于互补色,在决定你希望方案对用户说什么时应该注意。它强调了选择颜色的活力,当这些色彩被夸大后就可能太多了。


网页设计中的色彩心理学-UI头条


  因此考虑色彩心理学时,重要的是要将所有颜色作为一个整体考虑,以及它们如何协同工作,而不仅是选择一个颜色,并希望希望颜色要与其它的内容如背景,文本等这些按钮起到作用。

  请查看下面的页面,并且考虑下它向用户传达了什么内容。


网页设计中的色彩心理学-UI头条


  图片来自Codementor

  1背景颜色——黑色的背景展现了网站的优质,精细,正式和统一的企业形象。显然,在考虑提供指导的网站时,您希望传达卓越性。在网站的形式上表明它和学习相关,而“公司”则表明用户可能不会学习编码作为业余爱好,而是作为他们未来职业生涯中的一种技能来学习的。

  2按钮的颜色——该网站使用了红色的按钮作为交易按钮。和黑色的背景形成了鲜明的对比,以鼓励注册。黑色与白色边框一起用于不太重要的按钮,与整体方案保持一致。

  3文本颜色——对于文本,白色规定了所有重要的对比度,同时和整体颜色方案相匹配。白色(和白色幽灵按钮)中的图标放置在折叠处,以鼓励用户向下滚动以获取更多信息(如有必要)。

  总体来说,设计非常有效 - 我们都知道黑白相处得很好,在这种情况下,这个网站感觉优雅和相对正式。红色,如果过度使用,可能会使网站的取意远离整个信息的传达,因此为了脱颖而出并明确表示所需操作是注册服务而非常谨慎地使用它。

  避免一些颜色

  棕色一般在设计中唤起自然的感觉,但是这个颜色是大多数男性最不喜欢的颜色,但它在某些情况下确实有效,因为它表示可靠性。


网页设计中的色彩心理学-UI头条


  图片来自: Color Matters

  因此对ups来说棕褐色作品是当它的公司想要传达它可以依靠的强烈信息时候,棕色也可以使用。但是,作为一个运动套件,它被形容为有史以来最差的大学橄榄球,感谢图中显示的这张示例图片,这属于美国怀俄明大学队的。有趣的是,棕褐色也被认是推动“强度,耐用性”,所以当配上这样的积极运动你会想到它会起到这样的作用,但它不会在这种情况下发生因为正常情况下男性不喜欢棕色。

  当谈到女性的时候,橙似乎是最不喜欢的颜色,所以记住这一点,如果你设计的主要人群是女性用户群,不要用橙色。

  当然,请记住,这些只是指导原则(他们总是依赖于文本内容),其实更重要的是所有的颜色相得益彰,创造和谐。

  一些工具来帮助你选择正确的颜色

  当然,你可以使用现成的调色板,你的选择色彩的时候来帮助你。当涉及到网页UI设计,你不需要重新发明色轮。下面一些颜色色卡资料分享给大家。

  1Adobe Color cc –为所有adobe用户值得信赖的供应商

  2Paletton –简单颜色拾色器,适合初学者

  3Flat UIColor Picker – 用于创建丰富多彩的扁平设计

  4Mudcube Color Sphere – 提供主题选择和十六进制数字

  5Check MyColours –用于检查前景和背景的颜色组合,并且它具有正确的对比度,供人用色盲。

  6Color– 允许你通在屏幕滑动鼠标选色,设置饱和度,然后你可以得到十六位进制代码。

  通过实例学习

  有成千上万的网站使用颜色效果很好,而很多网站都没有。然而,下面的图片赢得了每日网站的颜色区分,很容易理解为什么。


网页设计中的色彩心理学-UI头条


  背景是均匀的浅灰色,与自行车的灰色很好地匹配。简单的设计,大字体非常有效,并立即传达出它是一个你喜欢骑的快速小自行车的感觉。

  使用灰色可以使其他颜色脱颖而出,因为它是一种中性色,随着它变亮,它会照亮页面并使其活跃。格雷也给人一种稳定感(非常适合自行车广告),同时营造出一种平静和镇定的感觉。

  “Go”一词中使用的颜色明亮活泼,为设计增添了活力感和现代感。它主要是蓝色的,因为这是男性和女性都喜欢的颜色,它确保页面不是针对性别的。绿色增加了很少,这表明了一种环境责任感。这本身就非常聪明,因为这种尺寸的自行车当然不会消耗汽油,对于环境而言比汽车更好 - 这当然是我们已经知道的事情,但是加强信息是件好事。

  总的来说,该页面让您了解滑板车如何成为现代城市生活的完美之选。

  最后的考虑因素

  颜色是设计的重要组成部分,但它也是整个品牌的重要方面。所使用的颜色传达的感觉必须与品牌个性相匹配,并增加整体品牌故事和意义。

  通常,设计师可能必须使用现有的艺术品,例如徽标,并且必须基于此选择颜色。虽然这可以看作非常紧凑,但是可以使用调色板来使这个过程变得更加容易。

  转载文章,版权归作者所有,转载请联系作者。作者:达小妹,来源:站酷。 如有侵权,立即删除!

(责任编辑:李老师)
相关文章
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼段35号明宇金融广场19楼1903室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街紫东段35号明宇广场2306

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市成华区建设路10号万科钻石广场B座5楼

联系电话:15023458194

公交路线:建设路中(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56