每次配色都觉得很难,该怎么办?
每当我们在做设计时候,都离不开色彩的搭配。色彩使用的好坏直接影响到界面的美学,也可能会直接让我们产生厌恶感。所以掌握好色彩的基础心理学知识,可以帮助我们完成大部分工作中的配色。至少你做设计时,在配色上使用是准确的。所以作为设计师,对色彩底层认知是非常重要的,今天的内容也是简单易掌握。
1.什么是色彩心理学?
![](http://n4.ikafan.com/assetsj/blank.gif)
颜色心理学是对与人类行为有关的颜色的研究,它旨在确定颜色如何影响我们的日常决策。比如我们购买商品时,会选择我们喜欢的颜色,而凸显高级感的色彩搭配最吸引我们购买。在产品设计中,一些有颜色的按钮或者图标,最吸引我们去触摸它。比如我们都知道红绿灯影响着驾驶员的行驶,我们也熟悉红色在设计中常常用来代表错误行为信息。
总结来说,色彩在生活中或者设计中都影响着我们诸多地方,比如我们决策速度、对危险的感知、对情绪的反馈、对事物的喜好,这就是色彩对人行为的影响。
2.为什么它如此重要?
![](http://n4.ikafan.com/assetsj/blank.gif)
色彩在生活中的重要性这里我们不做细说,下面来谈一下它在设计中的重要作用。色彩作为产品设计语言其中一个关键要素(形、色、字、质、构),时刻影响着产品。比如我们对可口可乐的红色、星巴克的绿色、麦当劳红黄搭配等记忆犹新,这就是通过色彩影响着品牌,传播品牌。
将色彩与品牌进行巧妙的集合,实现色彩在产品设计中的创新与突破。在我记忆中Spotify就是这样一个产品,用色彩去打造封面的品牌DNA,我们只看封面设计,就知道这就是他们家的产品。
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
Spotify
色彩在品牌认知中起着重要作用,因此研究色彩的含义,可以帮助我们轻松定义UI品牌在外界的认知形象,以帮助我们更好的吸引用户群体。
但是色彩的组合上千万种都不止,有些设计师可能就会问,难道我都需要了解吗?其实不然,我们只要熟悉色相环上通用的几个色彩就OK,这几个颜色也是心理学上主要几个基本颜色,红、黄、蓝、绿、白、黑,接下来我们就来具体看看这些色彩在心理学上的主要认知。
3.红色心理学
![](http://n4.ikafan.com/assetsj/blank.gif)
红色在色彩心理学上象征着激动、热情 、兴奋、威望、危险等,它是一个充满着能量的色彩,我们国家的五星红旗就是红色,树立威信与力量。红色在产品设计中,绝大部分意思是表示错误的信息,因此你在设计界面时候,红色需要谨慎的使用。
红色有代表这热情和欲望,所以我们也看到,有些产品的购买按钮使用醒目的红色,就是为了促进购买欲。有些品牌使用的红色为主的色调,可口可乐和麦当劳,红色可以促进食欲,有产生热量的感受。
![](http://n4.ikafan.com/assetsj/blank.gif)
可口可乐官网
在电商产品中,也使用红色作为品牌色,可促进用户购买商品氛围和幸福感,在国内如京东、拼多多、考拉等产品,韩国有11Street。
![](http://n4.ikafan.com/assetsj/blank.gif)
11 street
![](http://n4.ikafan.com/assetsj/blank.gif)
考拉app
4.蓝色心理学
![](http://n4.ikafan.com/assetsj/blank.gif)
蓝色在心理学上象征稳定、和平、冷静的、信任、安全、科技、智慧等含义,所以我们可以看到国内外一些科技公司品牌主色是蓝色,比如百度、腾讯、Facebok等。
蓝色是一个能安全感知强的色彩,我们熟悉的腾讯电脑管家主色就是蓝色,还有支付宝主色调也是科技蓝,给用户传达出一种安全可靠的感知。
![](http://n4.ikafan.com/assetsj/blank.gif)
IBM官网设计中,整体蓝色为主,体现科技的品牌调性。
![](http://n4.ikafan.com/assetsj/blank.gif)
Dapi – Banking API
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)
![](http://n4.ikafan.com/assetsj/blank.gif)