• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 配色高手系列!聊聊“黑色”在电商设计里的常用搭配技巧!

配色高手系列!聊聊“黑色”在电商设计里的常用搭配技巧!

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含优秀网页设计,电商专题页,经验分享,黑色等相关知识,希望在学习及工作中可以帮助到您

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

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

1. 黑色的释义。

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

3. 黑色页面的常用色彩搭配技巧。

4. 与黑色有关的节日有哪些?

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

1. 黑色的释义

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

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

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

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

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

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

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

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

△ ?左边是炎炎烈日的大白天/右边是夜深人静的夜晚

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

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

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

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

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

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

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

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

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

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

而白色占比越多,整个页面就越干净、圣神、明亮,给人的感觉就会越空旷、宁静、透气:

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

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

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

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

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

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

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

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

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

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

举例:黑白配

△ ?清穗

举例:黑金搭配

举例:红黑配

举例:黄黑配

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

您可能想查找下面的文章:

  • 弹出框里的设计门道,你是否都知道?
  • 遵循这7个原则,能让你的网页用户体验更优秀
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?
  • 这3个适用性极强的网页设计趋势,在4月非常流行
  • 怎样设计,才能抓住用户稍纵即逝的注意力
  • 吃透这10个网站,你就明白了网页中留白的技巧
  • 设计出优秀的网站着陆页,这10个技巧能帮到你
  • 换了很多家公司还是在打杂,问题究竟出在哪里?
  • 也许你该注意一下影响网页设计的这5个关键指标
  • 这5个丑出新高度的网站,为什么那么多人夸

相关文章

  • 2018-08-23都是好图片,为什么你拿来用就怪怪的?
  • 2017-08-06收集25个知名网站标志中使用的字体
  • 2018-08-23收福利!5个不为人知但干货超多的交互设计公众号
  • 2018-08-23我们观察到,2018年网页文本字体的设计趋势有这7种
  • 2017-08-06960 Grid System 基本原理及使用方法
  • 2018-08-23收藏起来!设计师要经常问自己的100个问题
  • 2018-08-23轻松看懂规范!详解组件控件结构体系之操作类
  • 2017-08-06关于服务器返回的十四种常见HTTP状态码详解
  • 2017-08-06网页制作不得不知道的几个技巧
  • 2017-08-06探讨百度百科UI的发展趋势

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 该有的视觉元素全都有,设计不好到底差在哪里?
    • css技巧收藏——经典中的经典
    • 信息杂乱无章?教你构建合理的视觉层次!
    • 想成为互联网设计师?先来看这篇超全面的介绍!
    • 插图式的网站主页设计 网站设计新的趋势
    • 618前夕,来看京东设计师是如何用场景化让你买买买的
    • 写给设计师的信息架构基础知识指南
    • 那些让你无法自拔的游戏们是怎么做出来的?专访网易游戏设计总监邵堃
    • 方便高效!五分钟看懂微信团队打造的新Sketch 插件WeSketch
    • 从零开始设计APP!快速提升引导页格调的设计方法总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有