电商配色技巧「简述网页配色的基本技巧」

今天给大家普及一下电商配色技巧「简述网页配色的基本技巧」相关知识，最近很多在问电商配色技巧「简述网页配色的基本技巧」，希望能帮助到您。

写在前面的话

从事设计行业将近十年的时间，随着电商互联网的发展，从12年开始进入电商设计行业至今，经历了从传统拟物化设计到 2G、3G 网络时代的像素设计，再到移动电商的动效设计、短视频设计的转变，从拟物化到扁平化；从图文到视频；从2D到3D；从PC电商到移动电商。

移动互联网的崛起让传统设计技术的更新速度越来越快，设计趋势也随着硬件和技术的升级，不断的发生改变。时下流行的C4D、扁平化、卡片式、手绘、扁平描边插画、渐变、轴测图（也叫2.5D）等设计风格让整个电商设计大放异彩。

很多电商设计师在这个设计趋势不断更新时代会茫然无措，“渐变设计是什么？关于版式设计在电商的实际应用、配色在电商设计里面的应用！大促活动页如何设计？短视频新内容营销趋势，视频剪辑要成为必备技能PR和AE的区别等等；

接下来我会基于这些年的一些所做所想，定期分享一些关于电商的心得技巧和实际应用干货。

一件设计作品，一般包含三个元素：色彩、版式、文字。而设计作品的视觉表现，以色彩最为重要，其次是版式，最后才是文字。色彩在设计中占据重要的位置，色彩搭配对于设计师来说是非常重要的。

那么具体到电商工作中该使用什么怎样的色彩，需要怎么做呢？下面我将逐步去分析。

一、色彩是什么

有彩色系的颜色具有三个基本特性：色相、纯度（也称饱和度）、明度。也称为色彩的三大要素/属性。饱和度为0的颜色为无彩色系。

1.色相

色相即每种色彩的相貌、名称，如红、桔红、翠绿、湖蓝、群青等。色相是区分色彩的主要依据，是色彩的最大特征。

2.纯度（饱和度）

色彩的纯度是指色彩的纯净程度，它表示颜色中所含有色成分的比例。

含有色彩成分的比例愈大，则色彩的纯度愈高，含有色成分的比例愈小，则色彩的纯度也愈低。

不同色相所能达到的纯度是不同的，其中红色纯度最高，绿色纯度相对低些，其余色相居中，同时明度也不相同。

3.明度

明度即色彩的明亮程度，即深浅差别。色彩的明度差别包括两个方面：

一是指同一色相的不同明度（深浅变化）

二是指不同色相间存在的明度差别，每一种纯色都有与其相应的明度。

黄色明度最高，蓝紫色明度最低，红、绿色为中间明度。

色彩的明度变化往往会影响到纯度，如红色加入黑色以后明度降低了，同时纯度也降低了；如果红色加白则明度提高了，纯度却降低了。

色彩的色相、纯度（饱和度）和明度三特征是不可分割的，应用时必须同时考虑这三个因素。

二、颜色的模式

颜色模式就是记录颜色的一种方式，分为很多种：RGB 模式、CMYK 模式、HSB 模式、Lab 颜色模式、位图模式、灰度模式、索引颜色模式……

常用的两种模式——RGB 模式、HSB 模式（单色模式）。

1.RGB 模式

RGB 模式，是一种加色模型。

色光三原色就是红（Red）、绿（Green）和蓝（Blue）。首先来了解一下色轮。

色轮，是一个非常有用的东西，可以由此直观地了解到什么是三原色、互补色、类似色。

进行项目设计时可以利用基础色轮，先建立一个色彩体系，保证了颜色使用的准确性及设计效率。

蒙德里安红黄蓝构图

色彩对比强弱程度 取决于色相之间在色相环上的距离（角度），距离（角度）越小对比越弱，反之则对比越强。

同类色：15°以内

邻近色：60°以内

类似色：90°以内

对比色：120°~180°

互补色：180°

2.单色模式的选取

HSB 模式 中的 H 代表色相、S 代表饱和度、B 代表明度。

H（色相）一共 360 个，因为色盘一圈是 360 度，一度一个色相。

而颜色的变化都是由于 S（饱和度）和 B（明度）的不同产生的。

比如说我们随意选三个色相，350、250、40：

而这时，我们只要降低中间颜色的S（饱和度），提高它的 B（明度），就可以使三个颜色和谐很多：

三、配色的实际应用

首先配色并不是依靠纯粹的感觉来搭配出来的，这样做很容易出问题。如果你想设计中协调的配色，色彩运用规律、配色的知识和技巧是必不可少的。

1、关于配色的比例：

主色约70% 、辅助色25%、点缀色5%左右。

2、常见配色方案

单色配色 ：同一色彩色系下不同明暗、饱和度色彩的搭配。类似色配色：色轮上彼此相邻的色彩构成的配色方案。以一个主色搭配在他这种颜色搭配产色了一种令人悦目，低对比度的和谐美感。互补色配色：在色轮直线相对的两种颜色称为补色，例如红色和绿色形成强烈的对比效果，传达出活力、能量、兴奋等意义。三原色配色：色轮上互相处于120度角的三种色彩构成的配色方案。分裂补色配色：以三个类似色为基础，再加上色环对面的一个对比色，这种颜色搭配既具有类似色的低对比度，又有补色的对比感。

类似色、互补色，这些颜色关系构成了我们日常设计的色彩基础，衍变出很多种色彩搭配方法。

四、色彩是有情感的

设计过程中色彩情绪是必须要考虑的一个重要元素。

1. 红色——热情、躁动、危险、警告。

适用于营造氛围，常用于活动促销页面设计；或者表示警告提醒的元素的应用。

2. 黄色——阳光、辉煌、醒目、高贵。

这是一个明度非常高的颜色。黄色和深灰色是一个很好的组合。

3. 蓝色——科技、纯净、深邃、放松、忠诚。

应用是广泛。是科技宇宙领域的专属颜色，是理智、效率的代名词。

4. 绿色——健康、大自然、清新、环保、安全。

健康无污染；代表着春天；有着安全属性的，在支付、安全方面应用很多。

5. 橙色——温暖、活泼、年轻。

非常具有亲和力，用户对其接受程度非常高。

6. 粉色——恋爱、可爱、温馨、浪漫。

通常和爱情、浪漫相关，像是情人节七夕节等，都会使用粉色来设计。

7. 紫色——神秘、富贵、压抑。

紫色是一个非常刺激性的颜色，单独使用容易给用户造成心理上的压力，通常会搭配其他颜色使用，可以试试紫色和蓝色搭配或者紫色和粉色搭配。

一些小Tips：

1、根据场景选择基调：比如大促页面，营造有氛围刺激的色彩搭配往往是更合理有效的选择。

刺激的背景会使得整个屏幕显得热闹又大气，让用户更专注于其中的内容。

另一方面，如果是美妆类日常页面，并且是以高端价格为主，使用浅色背景搭配明亮的色彩，可能是更好的解决方案，因为这样会让产品的调性更加突出。

2、分析你的目标受众：了解潜在用户，了解受众的喜好，以目标受众为中心来设计，可以让设计决策更加明晰。

研究竞争对手，配色方案的选取将会直接影响到你的产品在竞争中看起来是否足够突出。

总结

配色一定要有理论支撑，了解不同颜色的色彩情绪，为进行项目设计时选择合适的颜色提供依据。

建立色彩体系，可以将体系按照不同行业、不同特性、针对的用户等标签分类整理，积累自己的色彩库。

以上就是个人对于配色的一点感悟和经验，不足之处欢迎留言指正，共同进步