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

鉴于在之前的一篇文章“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

相关推荐

  • 交互设计丛书分享:《瞬间之美:Web界面设计如何让用户心动》

    作者简介: (美国)Robert Hoekman.Jr Robert Hoekman,Jr.著名的交互设计师。Miskeeto公司创始人,曾任职于Adobe、美联航等知名公司。除本书外。他还著有Desiging the Obvious以及FlashUser Experience Best Practi…

    2015-07-26
  • “空状态的设计“值得更多关注

    空状态,或称零数据状态,很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微不足道。 不要被空状态的…

    2015-08-17
  • 明年的,网页设计趋势!

    是时候展望一下未来了。2014年涌现了许多令人印象深刻的网页设计趋势 ,幽灵按钮越来越多,视差滚动也已经成熟,单页设计也成为了诸多设计手法的重要载体,而逐渐多起来的免Coding网页设计平台也开始造福于设计师了!

    2014-12-27
  • 两个交互设计鸿沟:评估与执行

    通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑,确保它们都已打开,并且翻查了耳机评论以确认耳机与我的电脑兼容,甚至通过将耳机同...

    2018-03-13
  • All You Need To Know About Customer Journey Mapping

    “Stories have defined our world. They have been with us since the dawn of communication, from cave walls to the tall tales recounted around fires. They have continued to evolve, with their purpose re…

    2015-01-16
  • 用户研究:中国人网购的7个真相-信息图

    在需求和消费之间,永远存在着不对称性。 电商已经改变了中国人生活的方面,而且还将继续扩大自己的影响力。 中国已连续三年成为全球规模最大的电商消费市场。国家统计局公布数据显示,2015年中国人在消费品零售中…

    2016-05-26
  • 「以司机为中心」的用户体验设计

    Uber 如何将他们的设计哲学应用在司机端的 App 上面 ?这一次,饿了么商家端产品经理为大家翻译了「以司机为中心」的用户体验设计—— 细看如何从零开始重制 Uber 司机端 App。

    2017-05-20
  • 【交互设计-UX/UE】数据加载

    数据加载是设计中比较容易忽略并且又比较重要的环节,以一种合适的方式告诉用户正在发生什么,将会发生什么,让用户对于加载后的内容有明确的时间预期,减少用户的等待感,尽可能消除焦躁情绪。 一、6种常见数据加…

    2016-08-03
  • 【用户体验】健康家居生活就选择稚爱儿童水漆

    我心目中的家不需要非常大,只要整洁温馨就好。快过年了,身边很多邻居都在忙着给房子装修,白天楼上楼下总是叮叮咚咚地响个不停;我想到自己家里潮湿斑驳的墙面,心里总是有个疙瘩。不止一次想给自己家翻翻新——二十几年的老房子,墙面容易潮湿发霉,自打上次我结婚家里刷了一次墙,到现在有2年多时间了,墙面很多地方起了小泡泡:有的地方开始掉灰:严重的地方还长出了黑色的霉菌,真的是惨不忍睹:不但有碍美观,而且我宝宝刚刚学会走路老是扶着墙,一不小心就摸到发霉...

    2018-02-07
  • 从Smartisan OS 3.1的产品设计谈:交互设计的核心是什么?

    老罗的Smartisan M1发布了,同时推出了Smartisan OS 3.1,作为友商的产品经理,对于手机和系统不做评价。不过Smartisan OS 3.1的几个功能设计还是给我留下了很深的印象,也借助分析Smartisan OS 3.1的几个产品设计…

    交互设计 2016-10-24