赞助商
立即赞助

这些更细致的色彩知识,能让你的设计体验更好

平面设计3年前 (2021)发布 流光
4.8K 0 0

当我们讨论色彩的时候,聊的更多的是色彩的搭配。虽然有些设计师认为有些色彩是一些纯粹的美上的择,但是实际上,色彩对于户的心和行为的影响相对更深,最终会反映在户体验和行为反馈上。

经深思熟虑的最终从「不错」提升到「优」,平庸的最终降低用户验,甚至影响网站身的用。

当然,色彩理论是一个相对复杂的主题。从用户体验的角度上来说,色彩所涉及的远不是配色方案一个度。通常,我们聊得最的是不同彩所产生的心理效应,以及彩搭的时,相互之间的影响和访问上的问题。

从掌握色彩的基础征,了解色彩背后的用户心理征,下来就可以逐步过渡最有价值的部:通过想不的搭配营造对比,使用协调的组让人愉悦,以及让定色彩最大化地发挥价值,达成计目的。

虽然 蓝/白/灰 三色搭配有过度使用,是这三颜色确实是常实用搭配,在融业应用常普遍,为其蓝色常和「忠诚、信任」有紧密关联。

这些更细致的色彩知识,能让你的设计体验更好

1、色彩心理学和用户体验紧密关联

其实没少讨论色彩心理学上的问题,不过这本身并不是一个浅显的问题,色彩的心理响是一个主观且复杂的话题。不过,能够利用好色彩心理学的知识,能够解决更普遍的计问题。

常,配色案会将色数量控制在3到4,颜色单独特征和隐喻都常容易理解,是搭配起来则没那么简单。设计师过学习基础色心理学,将部分色本身属性发挥出来,是想要控制更加细致,则需要了解更多细节和更加深入知识。

这些更细致的色彩知识,能让你的设计体验更好

色本身含义很容易学习和记忆,其更加微妙含义样可以很好运用于数设计。(Vandelay Design)

虽然黑白灰这样的色彩作辅色广泛存于不同的配色方案当中,但它们本身占据面积或者用作主色的时候,用户同样可以感知到。

这些更细致的色彩知识,能让你的设计体验更好

这些更细致的色彩知识,能让你的设计体验更好

色配比样会影响体验。以蓝色为例,在简约布局,大积使用蓝色作为主色调,和在大积白底上使用很小抹蓝色用来强调 CTA按钮,所带来体验是截然不。

另外,网站中细节的处理也会影响整体体验,比如Zutano  P&N Bank 同样使用色白色作主的色调,但它们的网站所的体验截然不同的。

2、对于不同用户,配色的影响也不相同

虽然不愿意承认,但设师们常忽略一些色彩不同文化当中存的差异,这一不能忽略的。

2.1、文化差异对配色的影响

比如白色,方世界当中被视之纯洁纯真,希望关。但亚洲区,白色丧事时候会产关联,以白色主的设常常会被视之过于「素」,认不够吉利。

这些更细致的色彩知识,能让你的设计体验更好

▲不同家的用色倾向

另外一方面,随着现代义的普及,白色拥有了更现代的特征,在日本白色甚至和当地结合,延伸更细腻独特的精神特质,随着日本战后设计领域的发展和崛起,白色在这一地区的含义则更丰厚。原研哉在《白》一书当中,针对白色的含义和特征进行了非深入的探讨,之后的《Subtle》一书当中,虽是围绕纸来探讨微妙的体验,但是没及白色本身的特征。

这些更细致的色彩知识,能让你的设计体验更好

▲《白》和《Subtle》

绿在通常意义当中被视为和财富、自、生命力有关的彩,但是在某宗教当中被视为神圣的彩,它的内涵和外延也是不一样的。

2.2、历史对配色的影响

时间变化对所带来的影响不仅仅此。比中两国在彩使用上,还存在一个非常典型的差异,历史上在一个很长的周期内是为中国的属国所存在的,也使得中国自古以来崇尚饱和度高的正,而则大使用饱和度偏低的间,一特征以从两国的传统上现出来:

这些更细致的色彩知识,能让你的设计体验更好

▲ 中国传统

这些更细致的色彩知识,能让你的设计体验更好

▲ 传统

更多的色彩可以查优的色彩导航

2.3、性别与配色

不过,有些颜色所包含的含义,在不同的文化体系当中差异并不大,比如橙色。不过说道橙色,值得一提的是,色彩的认知还存在性别上的差异,有调研指出,男性更偏好橙色,而性对于橙色的喜好则没有男性那烈。

这些更细致的色彩知识,能让你的设计体验更好

同的,间对于色彩的响最终还会响色彩的性别效应。色在二战以前其实性别味并没有那烈,但是二战以后现在,含义发生了巨大的变化,在《黑历史!红色背后的文化现象和心理博弈》这篇文章当中,有过详细的记述和探讨。

2.4、流行趋势对色彩的影响

不过这是更长维度上的变化,在短间以内,流行色的趋势变化,对于用色也也同存在响。这种响是非常直的,在尚行业有着非常直的体现,而在网页和UI计行业,同存在存在。

比如2017年潘年度流色是草绿,戳这里了解下:《玩转草绿!在这里了解2017年度潘流色》。而2018年潘年度流色则是紫色,这篇文章也有相关介绍:《这款独特紫色,是为你指引2018年设计年度潘色》

色的流行UI设则体得非常明显:

这些更细致的色彩知识,能让你的设计体验更好

当然,我们也会好奇,否存一种色彩,不分性别文化,家都会喜欢的呢?确实人通过规模的调研探索找到了一种「世界受欢迎的色彩」,马尔斯绿:《世界受欢迎的色彩出炉了,她的字叫马尔斯绿!》

这些更细致的色彩知识,能让你的设计体验更好

所以,当设的时候,如果的目标用户群体清晰的域或者性别偏向,可以目的利用这些知识规避设陷阱,好发挥色彩本身的功能优势。如果受众广泛,则可以尽使用通用性强的色彩行设。

3、色彩的情绪与气质

配色品牌视觉中所发挥的作用不言喻的,但,色彩本身的内涵绪特质并不全部。比如一行业当中,很多企业都使用了蓝色,那么的公司继续使用蓝色,可以让用户「识别出」所属的领域,但本身也存让人混淆的风险。如果视觉脱颖出,可以试使用不同的色彩。

这些更细致的色彩知识,能让你的设计体验更好

色的含义很丰富,它既表危险,也表激亢奋,色则奢华感。维珍航空使用略偏的色,作网页的设用色,营造出富奢华富激的氛围,面富高级感。

在进行牌设计的时候,择配色的第一步,始终是了解各种颜色或者色相的气质和情感属性。然后,在具体设计的时候,在进一步根据牌的气质和需求,再在色相的基础上调整明暗和饱和。

下面附上各种彩的基情感属和气质特征:

红色:危险,激情,兴奋。它是最激烈的颜色,能够引起更烈的反应,甚至引起生理反应。更为亮的红色会带有性化和浪漫的征,而偏暗的栗色则显得柔和、高而传统。

这些更细致的色彩知识,能让你的设计体验更好

橙色:创、冒险、青春。橙色有活力,同橙色和70年代的代气息系最为紧密,也最能唤起复古的觉。

这些更细致的色彩知识,能让你的设计体验更好

黄色:快、愉悦、警告。无论是在儿童还是在成年人的计当中,黄色都非常的受欢迎。柔和的黄色给人觉更加中性,给婴儿用也非常适,亮的黄色在计中非常受欢迎。色调较深的黄色近金色,这和财和成功上有关。黄色有候还会用作警告。

这些更细致的色彩知识,能让你的设计体验更好

绿色:财,生命,康。绿色所产生的想更为丰。一方面,较暗的绿色和传统的财的概念有关(美纸币?),另一方面它海河环、然概念紧密,柠檬绿则和更新、生长的概念非常贴近。

这些更细致的色彩知识,能让你的设计体验更好

蓝色:任、沟通、忧伤。蓝色是受欢迎程度最高的色彩,亮的蓝色忠诚度和任有较深的关,较暗的蓝色则和悲伤、抑郁的情绪氛围关系紧密。正是因为蓝色受欢迎,所以使得大量的品牌选择蓝色色调作为基础色。

这些更细致的色彩知识,能让你的设计体验更好

紫色:高贵、灵性、神秘。紫色古一来就是和皇室、财系在一起,因为紫色燃料在古代文当中难以获取,难获取。另外,它本身有显的神秘,因此还和灵性有关。紫色还能唤醒创造力,因此也是一种独的色彩。

这些更细致的色彩知识,能让你的设计体验更好

黑色:致,奢,压抑。黑色本身能够给计带来高,但是也有悲伤和压抑的一面。黑色作为中性色经常和其的色彩一起使用,不同的使用方法,能创造不同的体验,现代或者传统,正式或者休闲,无论哪种。

这些更细致的色彩知识,能让你的设计体验更好

色:纯洁,纯真,简洁。色大多情况下呈现出来的是一种积极的情绪,在极简主义计当中被广泛地运用,就像黑色一,它可以凸显或者放大其色彩的一些征。

这些更细致的色彩知识,能让你的设计体验更好

灰色:灰色本身可以有多不同的含义,但是体的含义取决于不同的情况。它可以显得复杂,可以显得暗淡无光,可以呈现出高,也能显得无情,同也可以喜怒无常。它在一定程度上会呈现出来负面或者悲伤的情绪,这也主要取决于如何使用,深浅如何。

这些更细致的色彩知识,能让你的设计体验更好

棕色:棕色实际上是度更低的橙色,它是泥土的色彩,所以也带有然的气质属性,容易让人想起大地。它可以让人觉得舒适或者复古,也能凸显肮脏的一面,同的,取决于如何使用。

这些更细致的色彩知识,能让你的设计体验更好

了解这些色彩的性格和含义,只是为计提供一个计基础,在此基础上为产品和品牌来创造配色方案是比较理的。

然,单纯「用哪些色」也不是全部影响素。像前案例样,即使使用了类似或者相色,是在处理法上有所异,也能带来截然不体验。

比如色黄色的搭配,调研表明,这两种色彩搭配一起的时候能够唤醒人类的食欲(这种视觉的影响性的),所以很多餐饮巨会使用这两种色彩作配色的基础。

麦当劳和 Wendy’s 均是美国饮巨头,两在牌设计上同样使了红色和色为的配色,但是你看看两的LOGO配色,Wendy 中采了大面积的红色,而麦当劳简约的形体之,只使了色(他地方没红色)。同样的,在包,店面修和印刷的处上,两在两种色调的框架,进行了截然同的设计,全做到了差异和区分。

这些更细致的色彩知识,能让你的设计体验更好

这些更细致的色彩知识,能让你的设计体验更好

必须明确的,色彩理论一只脚站科学领域当中,另一只脚则踏的区域里面。就我们之所的,色彩的含义只能作参考,非依据,色彩之间的搭配所的也绝非气质体验的 1 + 1 = 2,不同色彩之间的「化学反应」所的变化往往无法精准预测,需通过测试调整达设目标。

这些更细致的色彩知识,能让你的设计体验更好

这款给植浇水的概念应用,使用了色调独特的绿色作主色调,搭配了低饱度的蓝色、黄色色,这种色彩的微调让整应用显得不单调但足够沉稳优。

4、打破常规的UX配色方法

打破常规的配色方案让品牌与众不同的好办法。虽然创造出这样的配色方案,比起传统的配色方式需技巧,但设师学会这样的配色方法并不困难。

4.1、从强调色入手

让配色方案加突出,设中添加强调色可能易入手的方。举例子,一律师事务所的网站可能会使用传统的灰色海军蓝作基础配色,但,如果能够加入柠檬绿作强调色,会显得独特很多,能够其他的同类网站区别出。或者可以看看 Hogan Lovells 这案例,作一法律行业的网站,它采用了白色、灰色浅绿色作配色方案,它比其他的同类网站看起加轻也加。

这些更细致的色彩知识,能让你的设计体验更好

▲Hogan Lovells 采用了非常清新的色调营造设。

Berdan Real Estate 是另外一个值得习的案例。作为一个房地产,它的配色方案是色和桃红色为的,这两种色彩在同类中并见,他的同类大多数还是蓝色、红色和大面积的绿色为要配色的。色和桃红的配色 Berdan Real Estate 显得更富有。

这些更细致的色彩知识,能让你的设计体验更好

▲Berdan Real Estate 规避开了典的企配色,转而使温暖的配色方案。

险业也是一个非常典型、非常传统的行业,它们并没有像其他的现代企业一样随着时代的变化而生根的革命。但是并不意味着企业没法在设计上动心思。Lemonade 个网站就采用灰和白为主的方案,强用的是紫红。在个以冒险而闻名的行业当中,种设计身也得上是出人意表。

这些更细致的色彩知识,能让你的设计体验更好

▲Lemonade

4.2、借助 60–30–10 规则

60–30–10 规则其是一套很简单的规则,套方法据说是室内设计行业中总结出来的。套规则很简单,三个数字分别对比方案中三种颜的比,相对中的占据整个颜比的60%,种颜的对比占据比 30%,而三种颜则为强,占据10%的比。

对于想要尝非常规的配色方案的计而言,更容易上,并且这种配色方法通常也不容易超出行业或者品牌的计规范和计预期。其中用来调的配色,占据的配比仅有10%,能够让计独,不会占据大的面积响主要的配色方案。而这也可以让品牌配色更加备前瞻性,从而可以从同行当中脱颖而出。

这些更细致的色彩知识,能让你的设计体验更好

▲Clarity Stress Management 的网站就好地践行了60-30-10 规则,首屏当中的紫色、色和洋红大体上是按照这的配比和功能来计的。

5、结语

虽然色彩理论是一套相对复杂的学科,但是基础的知识并不是那复杂,计可以结知识来更加高效地使用配色,创造出更加多和复杂的配色方案。

精心设计配色案,尤其是些意想不到配色,不仅贴合美学上需求,而可以用户生心理影响,让品看起来更加独特,带来更加独特用户体验。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

网易UEDC – 徐恺 :相信不少同学都尝试过建立自查表,但最后是否有真正利用起来呢?这一次就和大家分享一下,我们团队所用的...
团队协作
大家在便利店结账的时候,是否有注意到:结账区会放几个货架,货架上面会有口香糖,巧克力,糖果等一些商品,排队的时候我们...
心理学
在设计行业中,提到精彩二字,很难不联想到大海彼岸的日本索尼、松下、三菱,不少日企都曾凭借设计风靡过全世界,可问题是,...
包装设计
编者按:很久没有更新给网页设计师和前端开发者所准备的干货素材了,这是来自 Hongkiat 网站的每月(其实是不定期)新素材合...
干货合集
作为UX从业人员,我们的工作是代表用户发声,挖掘出用户的诉求和真实想法。为了做到这一点,我们不仅必须深入了解我们的用户...
产品设计
微信小程序推出的时间已经很长了,曾经还因为跳一跳这个小游戏火了一把。而针对微信小程序究竟能不能代替 APP,以及替代程度...
产品分析
从16年刚到 ofo 的时候我心中就有一个巨大的疑惑,像 ofo 这样一个简单的出行类产品还能怎么设计呢?纵观周围很多出行类 App...
情感化设计
我们正式走入下一个10年。在设计和开发之间,在体验和功能之间,我们将会使用不同的工具和服务来协调、弥合、融汇。在这次推...
干货合集