当前位置: 首页 > 设计教程 > 平面设计理论 > 色彩心理学对网页设计有多大影响力(3)

色彩心理学对网页设计有多大影响力(3)

3近似色

这个方法仅侧重于互补色,当决定你想要的计划要去传达给用户的时候,你可以考虑这个方法。它强调了选择颜色的活力,当这些色彩被夸大后就可能太多了。

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

因此考虑色彩心理学时,重要的是你应该把所有色彩作为一个整体去考虑,它们在一起怎么工作,而不是只选一个颜色,还有希望颜色要与其它的内容如背景,文本等这些按钮起到作用。

看看下面的这张图片,并且考虑下它向用户传达了什么内容。

图片来自Codementor

1背景颜色——黑色的背景展现了网站的优质,精细,正式和统一的企业形象。显然,当考虑网站提供辅导的时候,你应该会想传达卓越,精益求精这些东西。网站的形式上表明,当和学习相关的这些企业社团表明用户可能不是作为一种爱号学习代码,而是作为他们未来职业生涯中的一种技能来学习的。

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

3文本颜色——对于文本,白色规定了所有重要的对比度,同时和整体颜色方案相匹配。白色的线性图标(白色半透明的按钮)被放在了下面来鼓励用户在必要的时候向下滚动来获取更多内容。

总体来说,设计工作做得很好——我们都知道黑色和白色搭配在一起能够协调,在这种情况下,这个网站感觉优雅和相对正式。红色,如果使用过度,可能会使网站的取意远离整个信息的传达,所以它在使用时非常的谨慎,只是为了突出并让它清楚的表达所需的动作是去注册这个功能的目的就好了。

避免一些颜色

棕色在设计中通常会唤起自然感,但是这个颜色是大多数男性最不喜欢的颜色,但它确实在某些情况下工作使用,因为用它来表示可靠性。

图片来自: Color Matters

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

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

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

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

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

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

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

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

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

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

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

通过实例学习

有成千上万的网站在那里用颜色带来很大的影响,以及大量不这样做的网站。下面的图片awwwards站点靠色彩区分,而且我们很容易明白为什么这么做。

图片来自: AWWWARDS

背景是均匀的浅灰色它与自行车的灰色搭配起来很好看。简单的设计,用大字体是非常有影响力的,并立即传达出这个含义:它是一个快速的小自行车,会让你爱上骑行。利用灰色让其他颜色凸显出来的特质,并且灰色是一个中性色,当它变亮变轻,照亮了页面并让页面活跃了起来。灰色也给我们一种稳定感(对于一个伟大的自行车广告),同时营造安静和沉稳的感觉。

在图片中字“GO”使用的颜色鲜亮活泼,体现了活力和现代的设计感。主要是蓝色调,因为这个颜色男性和女性都会喜欢,它可以确保页面没有性别区分。少量的加入绿色,暗示了环保的含义,这样做法很聪明,因为自行车和汽车比起来更好,不会污染空气。众所周知这一点对于宣传来说是很有力量的。

总体而言,这个页面告诉你踏板车是多么的完美,并且它会是现代都市人的生活方式之一。

最后注意事项

色彩是设计的一个重要组成部分,也是整个品牌重要的一部分。所用的颜色所传达的意义必须喝品牌个性和品牌故事一致。通常情况下,设计师有时不得不用现有的艺术作品,如 logo,并且不得不再此基础上选择颜色。然而这过程似乎是被完全压缩了的,但调色板的实用性也许可以让你在做的过程中比较容易些。要了解更多关于视觉设计如何给用户上最强的第一印象

  • 共3页:
  • 上一页
  • 1
  • 2
  • 3
  • 下一页
  • 上一篇:广告新人,​刚入行的前三年该怎么走?
    下一篇:App annie:应用图标设计五个注意事项

    图集推荐

    • 灵感
    • 美图