电商页面设计只需懂六个字

这篇文章主要讲和配色有关的常见的几种搭配方式，比较偏理论。其实我刚做美工的时候对这些内容是从来不看的，感觉非常枯燥。但做了一段时间之后，再回头看看这些内容，又是另外一种感觉。这篇文章，希望可以尽可能缩短无用枯燥的理论，简短精干的总结几个方面，给大家带来一点启示。

一、学配色，必须先了解配色比例

日本的设计师提出过一个配色黄金比例，是70：25：5，其中的70%为大面积使用的主色，25%为辅助色，5%为点缀色。一般情况下建议画面色彩不超过3种，3种是指的3种色相，比如深红和暗红可以视为一种色相。

一般来说颜色用的越少越好，颜色越少画面越简洁，作品会显得更加成熟，颜色越少我们越容易控制画面。除非有特殊情况，比如一些节日类的海报等，要求画面有一种热闹，活力的氛围的，多些颜色可以画面显得很活跃，但是颜色越多越要严格按照配色比例来分配颜色，不然会使得画面非常混乱，难以控制。

二、了解色彩的关系

色彩搭配就是不同色相之间相互呼应相互调和的过程，色彩之间的关系取决于在色相环上的位置，色相和色相之间距离的角度越近，则对比越弱，离得越远则对比越强烈。

背下这六种色相之后，那你的配色之旅已经起步了，因为所有的颜色都可以根据这六种基础色相来调配。这就是六字真言。下面我们来说下3种最最常见的色彩配色方式。

①相邻色搭配

在色轮中挨着比较近的就是邻近色，根据红橙黄绿蓝紫这六字顺序，相邻色搭配就是红+橙，橙+黄, 黄+绿，绿+蓝……以此类推。

相邻色因为比较邻近，有很强的关联性，非常协调柔和，画面非常和谐统一，可以制造出一种柔和温馨的感觉，因为在色轮中位置较近所以这种搭配视觉冲击力较弱。

几个例子：

这两张基本都是采用相邻色的搭配方式，第一张还加了一笔橙色起到点缀的作用，整体画面非常柔和协调，因此这类配色常用家居，棉织品，小清新淡雅的服装，中国风等能给人以宁静，柔和，传统感觉的产品。

相近色搭配中还有一种单色系的搭配方式，采用同一色相，仅仅调整该色的明度/饱和度，得到另外一种颜色。如上图所示，文字颜色就是用背景色降低饱和度/明度后的结果。本身背景色明度很高，又采用单色搭配手法所以会给人高雅，淡雅，宁静的感觉。主标题的字体也配合整个画面采用了一些变形，使得整体非常统一和谐。

七夕这张图片使用的蓝与紫搭配，画面宁静和谐。旁边这张图片使用的单色搭配，深蓝+浅蓝，画面统一带有一点传统的感觉。

这张海报用的红+橙的搭配方式，以橙色为主色调，背景中采用不同橙色增加了画面的空间感，并且让画面看起来不是那么的单调。海报中邓超惊讶的表情，以及背景倾斜的线条和几何方块的点缀，漂浮的产品使得原本稳定的画面变得活泼轻快富有冲击力，可见海报做成什么格调也与画面每个组成部分都有密切的关系。

②间隔色搭配

根据红橙黄绿蓝紫这六字顺序，红+黄，橙+绿，黄+蓝，绿+紫，蓝+红，因为这种搭配方式中间都隔了一个颜色，因此称为间隔色。

间隔色相比较相邻色，2色之间在色轮上相隔远一些，因此视觉冲击力会强于相邻色，而且间隔色使用非常广泛，既没有180互补色冲击力那么具有刺激性，又比相邻色多了一些明快丶活泼丶对比鲜明的感觉。特别是红黄蓝三原色之间的相互搭配，应用非常广泛，也非常流行。

几个例子：

这张基本是很典型的蓝黄间隔色搭配，画面非常明快时尚，文字还采用了白色作为调和。蓝色本身就具有一种科技的格调。这里用蓝黄白搭配再合适不过了。

这张是典型的三原色红黄蓝组合，画面比例控制的非常好，以蓝色为点缀，也采用了白色作为调和缓冲，使得画面有一定的空间感。

紫绿搭配，很明快，略带一丝传统，算是一种中性的搭配方式。

红黄百搭色，有非常抢眼的促销感。

大家可以看上方这几个图片的背景都不是单一颜色，比如最后这张海报，红色背景上又加了一个深红色的放射性背景。第三张海报，紫色背景后面还加了一些深紫色的几何方块做点缀。虽然是两个颜色，但是都属于一种色相，这样可以使得画面摆脱单调的感觉，增加画面的空间感，给人以活泼时尚的感觉。

配色一定要控制好画面的色彩比例！

重点说下红蓝搭配：红蓝搭配应用非常广泛，因为这2个颜色是典型的冷暖结合的颜色，有很强的对比性，会给人留下很深刻的印象。比如百度的logo, 百事可乐的logo，公安局的警车，超人丶蜘蛛侠的动漫形象，很多国家的国旗等。这2种色彩对比很容易让人产生视觉疲劳和心理亢进，所以不适用家居等静物。由于红蓝搭配冲击过于强烈，因此最常见是采用白色作为调和色，最典型的就是百事可乐的Logo。

再看几个例子：

这些海报基本都无一例外的在图片中添加了白色作为调和，白色和黑色都是万能的调和色，红蓝搭配还要注意的是不能让色彩过于均衡，一定要控制好两色的比例，其中一个要为主色在画面中要占大比例，使之产生主次关系，或者降低其中一个颜色的明度/饱和度，产生一种明暗对比。

还需要说明一点的是：冷色在画面中总是趋于后退，暖色是趋近，暖色很容易就可以进入人的眼帘。这点就需要大家根据画面中重点信息的层级自己把握了。

③互补色搭配

在色轮中相隔180的2个颜色互为补色，是色彩搭配中，对比最为强烈的颜色，没有之一…根据红橙黄绿蓝紫这六字顺序，互补色就是中间间隔2个颜色，红+绿，橙+蓝，黄+紫…

互补色搭配可以表现出一种力量，气势与活力，有非常强烈的视觉冲击力，而且也是非常现代时尚的搭配。若控制的不好往往产生不协调，不含蓄，不安定的效果。

几个例子：

互补色搭配要注意三个方面：①一定要控制好画面的色彩比例，因为这个2个颜色放一起对抗非常激烈，所以一定要选出一个老大当主色调，另外一方作为点缀或者辅助色。②可以降低其中一方的明度/饱和度，这样可以产生一种明暗对比，缓冲其对抗性。③在画面中加入黑/白作为调和色进一步缓冲其对抗的特性。

总结下本文配色方法，其实也就是记住六个字：红橙黄绿蓝紫，色相相隔越远对比越强烈，离得越近搭配越柔和。最后是控制好画面的色彩比例。是不是非常简单呢？记住这6个字可以搭配出万千种的颜色。

关于颜色搭配方法有很多，这里只是列举最为常见的3种。关于配色的一些名词性的东西，大家没有必要去纠结，引用梁景红老师的一句话，配色是应用学科，没必要让理论成为学习的负担。

原文链接

http://web.toutiao.com/a4061287853/?tt_from=weixin_moments&utm_campaign=client_share&from=timeline&app=news_article&utm_source=weixin_moments&isappinstalled=0&iid=2576230778&utm_medium=toutiao_android

电商页面设计只需懂六个字相关推荐

PSD分层模板|解析垂直化内容电商页面设计
从首页第一视觉停留开始首屏是第一视觉第一块信息展示区域,适合设计成时尚和引领当下热点潮流或者产品摄影图等视觉冲击力较强的图片,和符合用户知觉的文案,吸引用户的注意力. 时尚美女夏季护肤产品促销电商页 ...
优秀PSD电商促销BANNER模板|垂直化内容电商页面设计，需要注意哪些问题？
电商产品设计历经集市时代的比拼价格,到脑部内容意见领袖引导阶段,再到个性推荐! 垂直化内容移动端设计不需要迎合所有人口味,但是一定要给针对性的用户一个明确的暗示,"嘿,Girl,我是不同的 ...
电商页面设计需要的素材模板|好的模板就是好的参考
其实对于新手或是一直从事淘宝页面设计的美工的页面搭建思路基本就是像模板展示的这样, 你也可以点击预览链接,贴合产品属性的页面下载,简单几步就能做好一个页面啦. 举例,一般淘宝页面都那些设计部分? 首焦 ...
电商页面设计吸睛大法|C4D背景素材模板，视觉之旅开启！
近两年来,越来越多知名国际品牌利用C4D制作特效大片,电影海报字体.品牌活动设计.效果图制作,处处都有它的身影. 说道电商总是能联想到C4D,果不其然,今年各家设计当中,C4D依旧占据了半壁江山. ...
电商页面设计排版没有思路？可临摹PSD分层模板，诠释基础版式大招帮你轻松搞定！
规则: 1.对齐不管在哪整整齐齐的东西怎么也看着舒服不是?设计上也是如此! 看看优图 (uppsd)带来的例子:齐不仅给页面带来美感,也会让人觉得你仅仅有条,方面消费者们快速的浏览页面. 没有对齐 ...
淘宝电商页面和产品海报设计PSD分层素材模板
电商影响越来越大,已经渗透的我们日常生活的各个方面,很多以前不懂也不关心电商的客户也激动的做电商,以为电商就是把产品拍照片上传到淘宝上,就开始了电商生意.我只想说理想很丰满,现实很骨感.若只想打开淘宝 ...
HTML5响应式手机模板：电商网站设计——房地产移动端网页模板(15个页面)
HTML5响应式手机模板:电商网站设计--房地产移动端网页模板(15个页面) HTML+CSS+JavaScript 手机模板wap 手机网站模板手机网页模板手机网站模板手机模板响应式手机网站 ...
HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板...
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 ht ...
HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 ht ...

电商页面设计只需懂六个字

电商页面设计只需懂六个字相关推荐

最新文章

热门文章

电商页面设计 只需懂六个字

电商页面设计 只需懂六个字相关推荐

最新文章

热门文章

电商页面设计只需懂六个字

电商页面设计只需懂六个字相关推荐