淘宝网店页面设计布局配色装修一本通第3版教案第6章-页面色彩搭配基础知识.pptx

1、淘宝网店页面设计、布局、配色、装修第淘宝网店页面设计、布局、配色、装修第3 3版版2开店指导开店指导：页面中的色彩是浏览者对网店最直观的了解，也是网店统一风格设计的主要组成部分。一个网店设计成功与否，在很大程度上取决于页面色彩的运用和搭配，页面色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩是树立网店形象的关键之一，因此，在设计页面时，必须要高度重视页面色彩的搭配。第第6 6章章 页面色彩搭配基础知识页面色彩搭配基础知识6.1 色彩的原理3 自然界中有许多种色彩，如香蕉是黄色的，橘子是橙色的自然界中有许多种色彩，如香蕉是黄色的，橘子是橙色的我们日常见的我们日常见的太阳光，实际由红、绿、蓝三

2、种波长的光组成，物体经光源照射，吸收和反射太阳光，实际由红、绿、蓝三种波长的光组成，物体经光源照射，吸收和反射不同波长的红、绿、蓝光，经由人的眼睛，传到大脑形成了我们看到的各种颜不同波长的红、绿、蓝光，经由人的眼睛，传到大脑形成了我们看到的各种颜色。色。6.2 色彩的分类4 我们生活在五彩缤纷的世界里，天空、草地、海洋都有它们各自的色彩。你、我们生活在五彩缤纷的世界里，天空、草地、海洋都有它们各自的色彩。你、我、他也有自己的色彩，代表个人特色的衣着、家装、装饰物的色彩，可以充分我、他也有自己的色彩，代表个人特色的衣着、家装、装饰物的色彩，可以充分反映人的性格、爱好、品位。色彩一般分为无彩色和有

3、彩色两大类反映人的性格、爱好、品位。色彩一般分为无彩色和有彩色两大类。6.2.1 无彩色5 无彩色是黑色、白色及二者按不同比例混合所得到的深浅各异的灰色系列。在光的色谱上见不到这3个色，不包括在可见光谱中，所以称为无彩色。6.2.2 有彩色6 有彩色是指可见光谱中的红、橙、黄、绿、青、蓝、紫7种基本色及其混合色，即视觉能够感受到的某种单色光特征。我们所看到的就是有彩色系列，这些色彩往往给人以相对的、易变的、抽象的心理感受。有彩色是由光的波长和振幅决定的，波长决定色相，振幅决定色调。6.3 色彩的三要素7 明度、色相、纯度是色彩最基本的三要素，也是人正常视觉感知色彩的明度、色相、纯度是色彩最基本

4、的三要素，也是人正常视觉感知色彩的3 3个重要个重要因素因素。6.3.1 明度8 明度表示色彩的明暗程度。色彩的明度包括无彩色的明度和有彩色的明度。在无彩色中，白色明度最高，黑色明度最低，白色和黑色之间是一个从亮到暗的灰色系列；在有彩色中，任何一种纯度色都有自己的明度特征，如黄色明度最高，紫色明度最低。6.3.2 色相9 色相是指色彩的名称，是不同波长的光给人的不同的色彩感受，红、橙、黄、绿、蓝、紫等都各自代表一类具体的色相，它们之间的差别属于色相差别。色相是色彩最基本的特征，是一种色彩区别于另一种色彩最主要的因素。6.3.3 纯度10 纯度表示色彩的鲜浊或纯净程度，纯度是表明一种颜色中是否含

5、有白或黑的成分。假如某色不含有白或黑的成分，便是纯色，其纯度最高；如果含有白或黑的成分越多，其纯度亦会逐渐下降。在一定条件下，不同色彩之间的对比会有不同的效果。在不同的环境下，多色彩给人一种印象，单一色彩给人另一种印象。116.4 6.4 色彩对比色彩对比每一种颜色都有自己的明度特征，因明度之间的差别形成的对比即为明度对比。明度对比在视觉上对色彩层次和空间关系影响较大。126.4.1 6.4.1 明度对比明度对比 色相对比是指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。136.4.2 6.4.2 色相对比色相对比

6、纯度对比是指较鲜艳的颜色与含有各种比例的黑、白、灰的色彩对比，即模糊的浊色对比。146.4.3 6.4.3 纯度对比纯度对比 色彩的面积对比是指页面中各种色彩在面积上多与少、大与小的差别，影响到页面主次关系。156.4.4 6.4.4 色彩的面积对比色彩的面积对比 用冷热差别而形成的色彩对比称为冷暖对比。冷暖本来是人体皮肤对外界温度高低的触觉。冷色与暖色是依据人的心理错觉对色彩的物理性分类，是人对颜色的物质性印象，大致由冷暖两个色系产生。166.4.5 6.4.5 色彩的冷暖对比色彩的冷暖对比在页面设计中，色彩搭配是树立网店形象的关键，色彩处理得好可以使页面锦上添花，达到事半功倍的效果。色彩搭

7、配一定要合理，给人一种和谐、愉快的感觉，避免采用容易造成视觉疲劳的纯度很高的单一色彩。在设计页面色彩时应该了解一些搭配技巧，以便更好地使用色彩。176.5 6.5 网店页面色彩搭配方法网店页面色彩搭配方法 就像小说和电影中有主角和配角一样，在色彩设计中也就像小说和电影中有主角和配角一样，在色彩设计中也有不同的职责分别。在色彩设计中，有主色、辅助色和点缀有不同的职责分别。在色彩设计中，有主色、辅助色和点缀色不同的功能色不同的功能。186.66.6主色、辅助色、点缀色主色、辅助色、点缀色 在舞台上，主角站在聚光灯下，配角退后一步来衬托他。配色上的主色也是一样，其配色要比辅助色更清楚、更强烈。在一个页面中，占用面积大，受瞩目的色彩一般就是主色。196.6.1 6.6.1 主色可以决定整个店铺风格主色可以决定整个店铺风格辅助色使页面丰富多彩，使主色更漂亮，辅助色可以是一种颜色，也可以是几种颜色。辅助色的功能在于帮助主色建立完整的形象，判断辅助色用得好不好的标准是：去掉它，页面不完整，有了它，主色更显优势。206.6.2 6.6.2 辅助色对页面有决定性效果辅助色对页面有决定性效果点缀色是指在色彩组合中占据面积较小，视觉效果比较醒目的颜色。主色调和点缀色形成对比，主次分明，富有变化，产生一种韵律美。216.6.3 6.6.3 点缀色可营造独特的页面风格点缀色可营造独特的页面风格