活动3　色彩

一些设计行业的新手在进行网店视觉设计与制作时往往会忽略色彩搭配的问题，只是随意地堆砌色块，这会导致整个页面的色彩杂乱无章，使消费者产生视觉疲劳。因此老李为小艾介绍了色彩之间的关系和色彩搭配的方法，帮助小艾提升色彩搭配能力。

1.色彩的属性与对比

色彩是一种视觉冲击力很强的元素，好的色彩搭配可以给消费者留下深刻的第一印象，因此，色彩在网店视觉设计与制作中尤为重要。

（1）色彩的属性

色相、明度和纯度是色彩最基本的3个属性。色相是指各类色彩呈现出来的不同感观效果，如红色、黄色、绿色、蓝色等；明度是指人眼对物体表面明暗程度的感觉，该明暗程度取决于光线的强弱；纯度也称饱和度，是指色彩的鲜艳程度。

（2）色彩的对比

在搭配网店页面的色彩时，经常需要根据色彩的属性运用色彩的对比。

●色相对比。利用色相之间的差别形成对比。在利用色相对比时需要考虑其他色相与主色相之间的关系。根据对比强弱，色相对比可分为：同类色（色相环上15°夹角内的色彩）对比、类似色（色相环上相距30°的色彩）对比、邻近色（色相环上相距60°的色彩）对比、中差色（色相环上相距90°的色彩）对比、对比色（色相环上相距120°的色彩）对比、互补色（色相环上相距180°的色彩）对比。图1-26所示为应用邻近色对比的网店视觉设计效果。

●明度对比。利用色彩的明暗程度形成对比。恰当的明度对比可以使页面产生光感，看起来明快、清晰。通常情况下，明度对比较强时，对应的清晰度也较高；而明度对比较弱时，配色效果往往不佳，页面会显得柔和、单薄，商品形象也不够明朗。图1-27所示为使用不同明度的绿色进行配色的网店视觉设计效果。

●纯度对比。利用纯度的强弱程度形成对比。纯度对比较弱的画面，其视觉效果也较弱，适合长时间观看；纯度对比适中的画面，其视觉效果和谐、丰富，可以展现画面的主次；纯度对比较强的画面，其视觉效果鲜艳、明朗、富有生机。图1-28所示为使用不同纯度的蓝色进行配色的网店视觉设计效果。

●冷暖色对比。利用色彩给人的不同感觉形成对比，黄色、橙色、红色等能给人带来温暖、热情、奔放的感觉，属于暖色调；蓝色、蓝绿色、紫色等能给人带来凉爽、寒冷、低调的感觉，属于冷色调。在网店视觉设计中，常利用与主体固有色形成对比关系的背景色突出主体，让画面视觉冲击力强烈、富有跳跃性。图1-29所示为使用冷色调的绿色背景与暖色调的橙色商品主体形成的对比效果。

●色彩面积对比。各种色彩在画面中所占面积不同，呈现出来的对比效果就不同。图1-30所示为使用大面积的背景颜色与小面积的商品颜色进行对比，呈现出平衡视觉、强调商品、突出视觉中心的效果。

2.色彩搭配

在色彩搭配中，主色、辅助色与点缀色是3种具有不同功能的颜色，具体介绍如下。

●主色。主色是页面中占用面积最大、最吸引消费者的颜色，它决定了网店的整体风格。但页面中的主色不宜过多，一般控制在1~3种，主色过多容易让消费者产生视觉疲劳。主色不是随意选择的，需要网店美工系统地分析网店目标消费者的心理特征，找到他们易于接受的色彩。例如，水果类网店适合选择绿色、黄色和橙色等比较清新的颜色作为主色。

●辅助色。辅助色在页面中的占用面积小于主色，用于烘托主色。合理应用辅助色能丰富页面的色彩，使页面更加完整、美观。

●点缀色。点缀色是指页面中占用面积小、比较醒目的一种或多种色彩。合理应用点缀色，可以起到画龙点睛的作用，使页面的主次更加分明、富有变化。

在搭配色彩时，不能随意进行搭配，需要遵循一定的比例与步骤。网店视觉设计色彩搭配的黄金比例为“70:25:5”，即主色占页面的70%，辅助色占页面的25%，点缀色占页面的5%。网店视觉设计色彩搭配的步骤为：先根据网店风格、商品类别选择占用大面积的主色，然后根据主色选择辅助色与点缀色，达到突出页面重点、平衡视觉的效果。图1-31所示为主色、辅助色与点缀色的应用示例。