色彩系列|解读“黑色”在电商设计中的运用

鉴于在之前的一篇文章“5招带你玩转电商最常用的色彩搭配!”里我讲到了关于热闹促销型的电商设计最常用的颜色“红色”在电商设计里的运用,那么今天我就讲一下热闹促销型的电商设计最忌讳的颜色“黑色”在电商设计里的运用吧。


鉴于在之前的一篇文章“5招带你玩转电商最常用的色彩搭配!”里我讲到了关于热闹促销型的电商设计最常用的颜色“红色”在电商设计里的运用,那么今天我就讲一下热闹促销型的电商设计最忌讳的颜色“黑色”在电商设计里的运用吧。

色彩系列|解读“黑色”在电商设计中的运用

那么按照惯例,为了便于大家理解,我依旧是先给大家列个文章提纲咯:

  1. 黑色的释义
  2. 黑色占比多少与活动定位之间的关系
  3. 黑色页面的常用色彩搭配技巧
  4. 与黑色有关的节日有哪些?

接下来我们一条一条来看吧,let’s go!~

1、黑色的释义

先来自百度百科的解释:黑色可以定义为没有任何可见光进入视觉范围,和白色正相反,白色是所有可见光光谱内的光都同时进入视觉范围内。颜料如果吸收光谱内的所有可见光,不反射任何颜色的光,人眼的感觉就是黑色的。如果将三原色的颜料以恰当的比例混合,使其反射的色光降到最低,人眼也会感觉为黑色。所以黑色既可以是缺少光造成的(漆黑的夜晚),也可以是所有的色光被吸收造成的(黑色的瞳孔)。

而我自己的理解是:黑色它不仅是一种百搭色,它很特殊的一点就在于,你会发现几乎所有的书本报纸杂志正文部分以及你平时的书写基本都是黑色的而不是其他颜色,中国的水墨画毛笔字也基本都是黑色的,所以黑色会给人一种有文化底蕴的感觉;

同时它在气质上他还给人一种坚硬/神秘/端庄/静寂的感觉,但在文一些化习俗上黑色又常常意味着不吉利,在功能上比如在服装设计里黑色又往往能起到一种视觉上显瘦的效果。

我将以上这些都统称为黑色的属性。

色彩系列|解读“黑色”在电商设计中的运用

(左图显端庄优雅又显瘦,右图水墨画显文化古韵)

2、黑色占比多少与活动定位之间的关系

只要一提到电商页面设计,我相信大多数人在脑海里的闪现的应该是彩色的页面而不是黑色的,除非品类需要或产品本身就是黑色,大部分老板也不会同意你把一个电商页面设计成黑色(一些开明的老板除外),但黑色真的这么招人忌讳吗?黑色就真的不太适合应用于电商设计里吗?其实主要是你没有弄懂黑色占比与活动定位之间的关系罢了。

我们用2张海滩照片做举例:

色彩系列|解读“黑色”在电商设计中的运用

(左边是炎炎烈日的大白天/右边是夜深人静的夜晚:)

大家看完后是什么感觉呢?左边的沙滩是不是感觉很热辣阳光看着就很热?而右边的黑夜感觉很宁静神秘遥不可及?

我们都知道晴朗的白天和静谧的夜晚是对立的,彩色跟黑色是对立的,他们给人传递的感受也是对立的,类比下来,就好比下面这2种页面,他们所传递的定位也是截然对立的:前者活泼热闹促销,后者冷酷高端。

色彩系列|解读“黑色”在电商设计中的运用

这种定位规律在一些产品包装上也适用,比如下图:

色彩系列|解读“黑色”在电商设计中的运用

(左边是几百元的相宜本草套装,右边是上万一套的日本顶级护肤品牌POLA套装)

再取几个折中的案例,多彩色VS黑色与多彩颜色相结合的时候:

色彩系列|解读“黑色”在电商设计中的运用

(虽然同样很时尚,但是左图更年轻清爽活力,右图因为加入了黑色的缘故显得更炫酷大牌)

色彩系列|解读“黑色”在电商设计中的运用

(虽然同样很时尚,但是左图更年轻清爽活力,右图因为加入了黑色的缘故显得更加妩媚大牌)

所以我们不妨可以这么理解:一个页面活泼与否,定位如何,其实关键就在于黑色或暗色在这个页面里的占比有多少

黑色占比越多,那么这个页面的黑色属性也就越多,所以会体现出诸如神秘/刚强/高端/高冷甚至是恐怖等气质,让人产生距离感,常用于一些想要体现高端产品定位印象的页面或产品设计里,任何类目都适用:

色彩系列|解读“黑色”在电商设计中的运用

色彩系列|解读“黑色”在电商设计中的运用

而彩色占比越多,整个画面就越活泼热闹沸腾,仿佛是有什么活动表演或者派对,给人一种有亲和力人人都买得起的感觉,常用于一些要体现活泼年轻定位的产品或页面设计里,同样适用于任何类目:

色彩系列|解读“黑色”在电商设计中的运用

而白色占比越多,整个页面就越干净/圣神/明亮,给人的感觉就会越空旷/宁静/透气(下图案例有点长,请耐心往下滑。。):

色彩系列|解读“黑色”在电商设计中的运用

但为了方便大家理解,所以实际上以上我举的例子都是比较极端的,毕竟非常高端的产品是少数,大多数以及大众目前能接受的都是下面这些色彩占比不那么极端的,适用于大众的的:

色彩系列|解读“黑色”在电商设计中的运用

同时我们也要注意到一点,一个页面会体现出何种定位调性,除了色彩占比有很大的影响外,元素的形状/密度/纹理/创意风格等也会产生一些影响。

比如这三个页面,同样是黄黑搭配,但因为色彩占比不同/形式不同/风格不同,他们的调性明显是不一样的:左一简约时尚,左二搞怪活力,左三酷炫大牌。

色彩系列|解读“黑色”在电商设计中的运用

3、黑色电商页面的常用色彩搭配技巧

前面我们已经说了,虽然元素的形状/密度/纹理/创意风格等会对活动定位产生影响,但是决定页面是热闹促销还是高冷大牌起决定作用的其实还是黑色或暗色的占比是多少:暗色或黑色越多页面月冷酷高端,彩色越多页面就越热闹促销,而白色的占比多少则决定了你的页面透气程度,页面里白色越多越明亮,人就会感觉越空旷透气。

再一个既然是电商页面,它存在的主要目的就是卖货和展示商品用的,而这个货是要卖给不同的人群的,所以我们针对不同的人群要给他们传递的感受就会不一样,或热血沸腾,或性冷淡,或舒心,或故意让你难受,但不管怎么样,最终出来的页面情绪肯定是要传递到位的,那么一般就有下面几个规则可以注意下:

(1)黑色常作为主色或背景色

一些想走高端时尚路线以及科技大牌的页面往往比较喜欢用大面积的黑色来塑造一种距离感,也就是很多人嘴里说的“有逼格”,但这里要注意的就是,这种页面往往就会对产品的品质或光影细节有非常高的要求,因为对比太强烈的缘故,视觉太聚焦了,就像全世界的眼睛都在暗中盯着你看,你稍微有一点瑕疵都会暴露无遗;

色彩系列|解读“黑色”在电商设计中的运用

(2)黑色常跟这些颜色走在一起

而黑色作为一种百搭色,在电商设计里最常搭配的除了白色/金色/大红色以外,还有各种荧光色,比如亮黄/亮绿/亮粉/骚紫以及五颜六色,这些颜色跟黑色搭配会形成强烈的色彩对比效果,从而突出想要表达的信息。

举例:黑白配

色彩系列|解读“黑色”在电商设计中的运用

(来自站酷推荐设计师:清穗)

举例:黑金搭配

色彩系列|解读“黑色”在电商设计中的运用

色彩系列|解读“黑色”在电商设计中的运用

举例:红黑配

色彩系列|解读“黑色”在电商设计中的运用

举例:黄黑配

色彩系列|解读“黑色”在电商设计中的运用

举例:黑色可以包容任意的亮色

色彩系列|解读“黑色”在电商设计中的运用

色彩系列|解读“黑色”在电商设计中的运用

色彩系列|解读“黑色”在电商设计中的运用

(3)有黑色的地方就该有亮色

一张有感染力的照片往往少不了光的运用,而有光的地方就会有阴影,一张打动人心的页面设计也有一样的规律在那里:页面里有暗就会有明,这样子才不会显得过于压抑,画面才更佳耐看。

举例:几乎所有的美国大片或者科技大片的海报都喜欢用这个套路

色彩系列|解读“黑色”在电商设计中的运用

色彩系列|解读“黑色”在电商设计中的运用

色彩系列|解读“黑色”在电商设计中的运用

还有一些打斗类的游戏页面尤其喜欢用黑色或暗色系页面,有一些数码科技类产品的电商页面也可以试试,总之要想体现出很man的感觉,黑色或暗色是必不可少的

色彩系列|解读“黑色”在电商设计中的运用

4、与黑色有关的节日或事件有哪些?

提到电商设计,当然就少不了各种电商节,其他的电商节我就不说啦,那么与“黑色”有关的能作为噱头活动去玩的节日或事件有哪些呢?

目前我所知道的,比如著名的黑色星期五/万圣节/4月14日黑色情人节/暗黑电商等。

黑色星期五,关键词:国际大牌/促销/折扣/黑色等

它是从美国漂洋过海来到中国的一种电商促销活动,几乎每个大一点的电商平台都会掺合一脚,尤其是跨进电商尤为重视(具体黑色星期五是啥大家自己去百度吧):

色彩系列|解读“黑色”在电商设计中的运用

还有很多活动页大家也可以去看看:

色彩系列|解读“黑色”在电商设计中的运用

色彩系列|解读“黑色”在电商设计中的运用

万圣节,关键词:南瓜/糖果/黑橙搭配/蝙蝠/幽灵/骷髅头等

它也是很多人喜爱的一种节日,商家们运营们当然也不会错过咯~

色彩系列|解读“黑色”在电商设计中的运用

色彩系列|解读“黑色”在电商设计中的运用

色彩系列|解读“黑色”在电商设计中的运用

4月14日黑色情人节,关键词:男生/单身狗/促销/情人节等

发现一年貌似各种颜色的情人节一大推,无非就是找噱头做活动让你们买买买咯(我猜商家运营们的逻辑大概就是,反正你是单身狗你的钱也没处花,不如花在我这里买点安慰好了,哈哈哈~~)。

色彩系列|解读“黑色”在电商设计中的运用

暗黑电商

其实就是指网络上的一些很隐秘的非法地下交易市场,我以前好像专门挖过这个,但是我这次就不细说了。。。被和谐了不就完蛋了~

色彩系列|解读“黑色”在电商设计中的运用

好像有点扯远了,我们继续最后一点点内容,马上就要结束了,科科。。

至于什么纹理/构图/节奏韵律什么的,我以前的文章里都有写,你们可以看这篇,我就不在这里赘述了:

六个步骤细说电商banner图设计之色彩的奥秘

写在最后

当别人提到“黑色”的时候,你会想到什么呢?也许你会想到黑夜/黑头发/乌鸦/神秘/阴深/距离/严肃/沉寂等等,总之他跟阳光/活力这些比较明朗的字眼时几乎挂不上钩的,这也就解释了为什么我们极少看到设计师在喜庆节日/双十一/618等页面设计里几乎看不到黑色的运用的原因。

但随着我们的购物选择越来越多样化以及人们越来越有自己的主见了的缘故,我们开始想要寻求自己的个性和高要求,我们也越来越厌倦了千篇一律,这也直接导致商家们之间的竞争开始变得越来越激烈了,也许以前你随便推出什么产品,即便是页面设计做的很丑都可以卖的很好,但现在却可能无人问津,所以商家以及设计师们都迫切的需要找到新的突破点来满足和挖掘不同客户的喜好,而对黑色的合理运用其实就是突破方式之一。

这让我想起了电影《香奈儿》的一个情节,在那个所有人都追求蕾丝/花里胡哨/雍容复杂的服装设计的年代,可可香奈尔却偏要穿简洁裁剪的男装黑色礼服等等带给人一次又一次惊喜,而她在悲痛欲绝的情况下为纪念他的情人鲍勃而设计的一条小黑裙子也成了香奈尔史上最大的成功。

色彩系列|解读“黑色”在电商设计中的运用

色彩系列|解读“黑色”在电商设计中的运用

今天的文章到这里就结束了,这里是《做设计的面条》,我们下期再见!~

相关阅读

5招带你玩转电商最常用的色彩搭配!

六个步骤细说电商banner图设计之色彩的奥秘

#专栏作家#

做设计的面条,公众号:做设计的面条,人人都是产品经理专栏作家。一位擅长将电商及banner设计讲得最透彻易懂的妹子,有趣有料会拍照,欢迎互相交流。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21701/

(0)
CatherineCatherine
上一篇 2017-04-29 03:47
下一篇 2017-04-29 05:43

相关推荐

  • 设计师要懂心理学の眼见非脑见

    我们一般认为,当我们观察周围的一切时,眼睛会将看到的信息传输给大脑,大脑再对信息进行处理,让我们感受到真实的世界。但其实不然,脑见并非眼见,因为大脑总会解析眼睛看到的所有信息。试举一例,请观察下图: …

    2014-11-26
  • 清华美院交互设计考研经验分享:考试要懂得“扬长避短”

    2018年清华美院交互设计-黎娜大家好,我叫黎娜,我本科毕业于广州美术学院工业产品设计系。产品设计主要是偏向于生活家居类的小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2017年6月底就决定报考这个专业。接下来我想与大家分享的是自己的一些备考经验,希望能对你们有一些帮助。第一部分是关于专业一“上机”考试。我认为上机考试最重要的两部分分别是app和ppt。  app的练习方法有很多,这里我想分...

    2018-04-23
  • 使用 Sketch 搭建动态布局

    如果你在设计交互,你可能会经常遇到一些重复性的元素,比如列表中的行,或者网格化元素。尽管Sketch提供了一些方法,通过使用Symbols将一些样式应用到元素中,但如果你想让布局更有适应性或者动态变化,它恐怕就很…

    2017-12-28
  • 车载系统交互设计畅想Part2:为消除焦虑而设计

    在上一章节中,我试图通过重新设计智能车载中控系统来降低驾驶过程中过多的信息导致的注意力分散问题,我的主要解决方案是通过局部的简单操作配合语音导航来完成任务,并避免驾驶员的双手离开方向盘。在本章节中,通过调研和采访一些新手驾驶员,我总结了一些发现,以启发我通过体验设计来消除驾驶过程中的焦虑现象。

    2017-04-30
  • 网易考拉海购APP产品体验报告(可下载)

    干货分享:网易考拉海购APP产品体验报告,33张幻灯片解析产品体验

    2016-08-23
  • 骁龙835助力VR交互新体验,自由就要6DOF!

    今天,Pico 在北京举办新品发布会上,发布了旗下全球首款同时实现头部和手部 6DOF 追踪及交互的量产 VR 一体机 Pico Neo——搭载Qualcomm® 骁龙™835 移动 VR 平台,带来更加自由、沉浸的 VR 交互体验。Pico Neo 是 Pico 旗下最新一代 VR 一体机产品,搭载了Qualcomm骁龙835移动VR平台,采用一体式 ID 设计,更轻更透气的全包布材料,配备 3K 高清显示屏,4GB 高速 RAM,6...

    2018-01-30
  • AxureUX信息化精美简历模板完整版正式发布

    01作品信息作品名称:AxureUX信息化精美简历模板完整版作品类型:模板类发布日期:2018-03-12最新版本:v1.0主要适用:其它软件版本:Axure 8.0文件大小:5.6MB作品编号:OTH002作品售价:¥69.00详细介绍及演示:http://www.axureux.com/home/ResumeTemplatePro.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品是...

    2018-03-12
  • 从中国形式走向中国叙事:RSAA / 庄子玉工作室的2017

    *本文转载自RSAA鼓楼7号院刚刚过去的2017,对我们这个钟鼓楼旁的四合院是很特别的一年。虽然在RSAA北京公司成立后的八年间,我们一直埋头苦干,作品也算颇丰,但好像对大多数人而言,我们一直是一个相对默默无闻的团队,甚至很少有人知道RSAA是个正儿八经的德国独资公司;而在2017,RSAA和庄子玉工作室却因为几个极具当代中国调性的项目而广为人知;但只有我们自己知道,这也许不是偶然 - 以“在当下中国的社会和空间语境中寻找新的叙事性与类...

    2018-02-24
  • 深入研究了4款外卖APP,我做了交互优化

    作者:陈仁杰 题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。 首先,我将分析的逻辑和…

    2017-08-04
  • 各国货币简称及符号

      欧元,英镑,澳元,人民币,马来西亚币,印尼,新加坡币,新西兰,越南,韩币,泰铢,菲律宾,日元,美金等等货币的简称与符号,标准符号。 中国 人民币:元 Renminbi Yuan RMB¥ CNY 1CNY=10 jao (角)1 j…

    交互设计WiKi 2015-09-15