Tags | RSS | 留言
您所在的位置:首页 > 情侣说说 > 正文

三大技巧,教你如何搭配出好看的红色

作者:Ad 来源: 日期:2019-08-28 1:00:29 人气:76 加入收藏 标签:

当你拿着手机,准备打开购物APP时,你看到的不是这样:

三大技巧,教你如何搭配出好看的红色

电商app

忍不住会好奇,为什么这些电商APP大部分都是红色系?

美国数字营销公司曾做过这样一件事,它做了两个内容、排版完全一样的测试页面,唯一不同的就是引导按钮的颜色,一个是红色,一个是绿色。这用来测试不同颜色对用户点击转化率的影响,结果发现在超过2000人次的样本测试中,红色按钮的点击率比绿色按钮高出了21%,为什么会这样?

在用户的视觉感觉中,红色会更加突出,更容易让他们采取行动,像红色、橙色和黄色这样的暖色调,它们充满活力,令人振奋,让人更有购买欲望,这样的色调符合电商平台想要传递给消费者“买买买”的心里暗示,才能占据消费者心智。

三大技巧,教你如何搭配出好看的红色

红色在电商的运用相当广泛,不仅局限在电商APP的图标上,在一些大型的活动专题页,以及一些产品详情页的设计里,红色都应该算是电商设计里运用得比较广泛的一种颜色了。

很多人对红色该在什么时候用,或者该怎么用依然很缺乏了解,那么,红色什么时候在电商设计的页面中运用比较合适?

1、官方大促

每年电商平台都会有各种大促活动,例如双11、双12、618年中大促等大型的促销活动,这些大促都会采用高饱和,偏暖的色调来营造热闹的大促气氛,红色就成为了平台大促的首选颜色。

三大技巧,教你如何搭配出好看的红色

网络

三大技巧,教你如何搭配出好看的红色

2、喜庆节日

红色代表喜庆热闹,所以红色常用在各种喜庆的节日促销页面里,比如国庆、元旦、春节、圣诞节等重大节日,基本都是以红色作为主色调。

三大技巧,教你如何搭配出好看的红色

网络

三大技巧,教你如何搭配出好看的红色

3、品牌活动促销

例如周年庆、新品发布等情况,这一类的专题页也喜欢用红色来渲染促销气氛。

三大技巧,教你如何搭配出好看的红色

网络

三大技巧,教你如何搭配出好看的红色

网络

三大技巧,教你如何搭配出好看的红色

4、体现个性

当红色并不是主色调时,它往往是为了配合其他颜色,来突出产品,烘托主题氛围。

三大技巧,教你如何搭配出好看的红色

网络

三大技巧,教你如何搭配出好看的红色

5、突出某个重要信息

红色也常用来作为辅助色或点缀色出现,以强调某个重要信息用,突出页面中需要强调的利益点,也可用作购买类指示性按钮,引导消费者进行点击购物。

三大技巧,教你如何搭配出好看的红色

网络

三大技巧,教你如何搭配出好看的红色

6、配合产品调性

品牌中产品的包装色彩为红色,或者品牌的主色调为红色的情况下,大部分页面设计也会用红色为主色调,意在通过色彩来强化产品,加深产品或品牌的调性定位。

三大技巧,教你如何搭配出好看的红色

我们通过上述的不同案例,了解了红色在电商页面设计中的常见出现方式,那么在完成页面设计以后,对页面整体的配色不满意,但又不知道如何分析配色中出现的问题,那该怎么办呢?应该寻求什么方法来完善自己的设计呢?

红色,用的好则是兼大欢喜,用得不好要么显得俗气和不干净,或者显得页面很压抑、很腻,究其原因,是因为他们的明度、饱和度、纯度没有把握好,才会出现画面太刺眼,或者太脏、太暗,让人失去了继续看下去的欲望。

一位大神曾经说过,任何颜色他都能轻松驾驭,是的,那是一个高的层面,大家都在正在努力靠近。

配色并不是数学,没有固定的方程式,没有固定的套用模式。但配色的搭配与运用也需要建立在基础的理论知识上,加上对颜色的一个总体把控与经验掌握。多轮多大学曾经在“关于人们如何使用Adobe Color CC”的研究报告上指出,大多数人更倾向于2-3中色彩的简单色彩组合。

那红色可以怎样搭配其他颜色呢?下面为大家总结了几点小技巧:

三大技巧,教你如何搭配出好看的红色

单色,是比较容易的配色方案,因为每种色彩取自相同的基色,单色的色彩能很好的结合在一起,产生和谐的效果。

通过颜色模式的选取,来把控颜色

在我们常用的软件里,颜色模式为:HSB、RGB、CMYK、Lab、位图、灰度、索引、双色调、多通道…

部分的颜色模式能在颜色的拾色器上直观的体现出来:

三大技巧,教你如何搭配出好看的红色

这是我们熟悉Photoshop的拾色器窗口面板

HSB模式是我常用的颜色选取模式。

H代表:色相 S代表:饱和度 B代表:明度

H共360度,一度为一个色相:

三大技巧,教你如何搭配出好看的红色

S为饱和度,可调节范围为0%-100%,数值越高饱和度越高:

三大技巧,教你如何搭配出好看的红色

B为明度,可调节范围为0%-100%,数值越高明度越高:

三大技巧,教你如何搭配出好看的红色

我们来观察一下数值变化,他们之间有何差异:

三大技巧,教你如何搭配出好看的红色

饱和度降低

三大技巧,教你如何搭配出好看的红色

明度降低

三大技巧,教你如何搭配出好看的红色

饱和度明度同时降低

这里我们可以看到,饱和度越低,颜色就越柔和;明度越低,颜色就越暗,而饱和度与明度同时降低,颜色就越灰。

按照这样的规律,我举个例子:

三大技巧,教你如何搭配出好看的红色

我们观察案例,发现案例所用的红色底色饱和度很高,这种高饱和度的底色,长时间的观看,会刺激眼睛,使眼睛疲劳,那么我们调整一下他的S值/B值:

三大技巧,教你如何搭配出好看的红色

HSB-S值降低

三大技巧,教你如何搭配出好看的红色

HSB-B值降低

调整S值,在S值降低以后的整个画面都更柔和,背景色中加入了更多白色,让整个画面轻快,舒适;B值降低以后,更能突出产品的质感,与产品的整体搭配也更和谐。

三大技巧,教你如何搭配出好看的红色

我们这里说的双色,是指双色渐变,渐变这一视觉趋势,在近几年里可谓如日中天。很多平平淡淡的设计,将平涂改为渐变,立刻就能增加醒目感。

双色是色相层面上的双色,而那些利用不同饱和度、明度来实现的不同颜色,都不在双色范围内。

1、同色渐变

是色相环上小于30度的两个色相产生的渐变。

三大技巧,教你如何搭配出好看的红色

这种渐变色在色相上跨度小,比较保守,易控制,不容易出错,实用率也是相当的高:

三大技巧,教你如何搭配出好看的红色

2、邻近色渐变

是色相环上大于30度小于60度的两个色相产生的渐变。

三大技巧,教你如何搭配出好看的红色

三大技巧,教你如何搭配出好看的红色

3、互补色/对比色渐变

互补色/对比色渐变常常也被称为撞色渐变,它在色相环上一般是大于60度,小于180度而产生的渐变。

三大技巧,教你如何搭配出好看的红色

产品详情页里比较少用,为什么?产品界面的主体是突出产品,背景或者元素采用互补色会喧宾夺主,但于适用做促销页面,大色相的撞色,能给视觉带来强冲击力,促销氛围更浓烈。

三大技巧,教你如何搭配出好看的红色

三大技巧,教你如何搭配出好看的红色

除了掌握单色与双色的配色方法外,大家可以在此基础上尝试更多的配色风格。比如在同色系、对比色系的基础上,有目的地加入更多的色彩元素来丰富色调,使得画面更丰富,从而达到配色目标。

但切忌色不过三!不管是做电商设计也好,还是做APP等设计,都需要遵守这个基本的原则。

在这里很多人都会认为色不过三就是不要超过三种不同的颜色值。其实所谓的色不过三,是指不超过三种色相的搭配,并不是色值,在单个色相中还可以运用颜色饱和度和明度为色彩增加丰富性!

颜色占比:主色与辅色

三大技巧,教你如何搭配出好看的红色

主色

三大技巧,教你如何搭配出好看的红色

辅色

当处于多色设计时,首先要确定选择的红色是主色还是辅色,让主色占据页面的大部分空间,辅色就能在可控的范围内,无论多颜色选取是用互补色还是邻近色,其实重要的是颜色和谐,这样就不会出现太大问题。

最后,给大家再分享一些红色搭配建议:

1、当你的红色需要与对比色或互补色搭配使用时,可以选择渐变或者加入一些调和色彩(比如黑白灰)来缓解颜色冲突。三大技巧,教你如何搭配出好看的红色

2、要懂得运用对比和烘托的手法,控制颜色在整个画面里的占比,来达到强化或者弱化某一个信息的目的;三大技巧,教你如何搭配出好看的红色

3、大面积的暖色里可适当加入一些冷色或无彩色(黑白灰)来作为点缀,反之,都可以缓解视觉疲劳; 三大技巧,教你如何搭配出好看的红色

更多颜色的分析,敬请期待。

(所有图片仅供分析所用,部分图片来源于网络,联系删除)

本文由情侣装商城提供,文章来源于网络,如有侵权,请联系管理员删除。

本文网址:http://www.wozhizaihuni.cn/show_724.html
读完这篇文章后,您心情如何?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
最新评论