1.2 视觉营销的元素

网店视觉设计营销的主要原则是增加销售。应用好视觉元素，做好视觉传达设计，让顾客感受到店铺的吸引力和感染力，最终使其成功购买并认知该品牌。视觉元素也是影响点击的关键，它包括色彩、文字、主题、布局、风格、图片、品牌、促销。

1.2.1 视觉色彩

色彩是极具视觉冲击力的传播工具，当距离显示屏较远时，人们首先看到的不是优美的版式或者美丽的图片，而是页面的色彩。色彩的应用在网店视觉表现中尤为突出，店铺的整体色调如何、色彩搭配是否符合企业特色，店铺的宣传推广是否能够抓住观众的眼球，都离不开对色彩的应用。

在平面图上，色彩的冲击力是最强的，它很容易让买家留下深刻的印象，因此在页面设计中，要高度重视色彩的搭配。自然界中有许多种色彩，为了能更好地掌握色彩的应用及搭配规律，首先需要了解色彩的一些基本概念。

1．色彩的原理

色彩中不能再分解的基本色称为原色，原色可以合成其他的颜色，而其他颜色却不能还原出本来的色彩。我们通常说的三原色是指美术色彩三原色，即红、黄、蓝三种颜色。三原色可以混合出所有的颜色，如图1-5所示。

● 原色（Y）：红、黄、蓝。

● 间色（R）：由红黄蓝三原色以不同比例混合调配产生的颜色。

● 复色（S）：用间色再调配混合的颜色。

在构成画面的色彩布局时，原色是强烈的，间色较温和，复色在明度和纯度上较弱，各类间色与复色的补充组合，形成丰富多彩的画面效果。有时感觉画面的色彩布局不和谐时，特别是颜色对比强烈、刺激时，使用复色能够起到缓冲与和谐画面色彩的作用。

2．色彩的属性

色相、明度和纯度是色彩最基本的三种性质，这三种属性是界定色彩感官识别的基础，如图1-6所示。

色相

色相指的是能够比较确切地表示某种颜色色别的名称，是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。如以红色为主的色相，可能有粉红、棕红等色相的变化，它们虽然是在红色色相中调入了白与灰，在明度与纯度上产生了微弱的差异，但仍保持红色色相的基本特征，图1-7所示的页面使用了红色色相的不同差异。

基本的色相为红、橙、黄、绿、蓝、紫，在各色中间加插一两个中间色，其头尾色相，按光谱顺序为：红、红橙、橙、黄橙、黄、黄绿、绿、蓝绿、蓝、蓝紫、紫、红紫，可制出十二基本色相，如图1-8所示。色彩的成分越多，色彩的色相越不鲜明。

明度

明度，也叫亮度，指的是色彩的明暗程度。颜色有深浅、明暗的变化，例如，深黄、中黄、淡黄、柠檬黄等黄颜色在明度上就不一样，紫红、深红、玫瑰红、大红、朱红、橘红等红颜色在明度上也不尽相同，图1-9所示为明度由高到低的颜色变化。

没有明度关系的色彩，就会显得苍白无力。只有加入明暗的变化，才能体现色彩的视觉冲击力和丰富的层次感。

明度越低，颜色越暗；明度越大，色彩越亮。在无彩色中，白色明度最高，黑色明度最低，白色和黑色之间是一个从亮到暗的灰色系列。在有彩色中，任何一种纯度色都有自己的明度特征，其中黄色明度最高，紫色明度最低，绿、红、蓝、橙的明度相近，为中间明度。一些女装、儿童用品网店，或者喜庆、节日广告，用的都是一些鲜亮的颜色，让人感到绚丽多姿，生机勃勃。如图1-10所示为蓝色明度对比。

Tips 提示 色彩的明暗是相对而言的，例如，深蓝色和黑色相比，显得明度较高；而深蓝色与黄色相比，就显得明度较低。

纯度

纯度，指的是色彩的纯净程度，即饱和程度，纯度高的色彩非常鲜明，纯度低的色彩则比较暗淡。纯度最高的色彩就是原色，随着纯度的降低，就会变化为暗淡的，没有色相的色彩，纯度降到最低就是失去色相，变为无彩色。如图1-11所示为色彩纯度和明度的渐变。

同一色相的色彩，不掺杂白色或者黑色，则被称为纯色。在纯色中加入不同明度的无彩色，会出现不同的纯度。以蓝色为例，向纯蓝色中加入一点白色，纯度下降而明度上升，变为淡蓝色；继续加入白色的量，颜色会越来越淡，纯度下降，而明度持续上升。

同一色相，即使纯度发生了细微的变化，也会立即带来色彩性格的变化。纯度高的页面显得非常鲜活明快，如图1-12所示；纯度低的页面则显得灰暗朦胧，如图1-13所示。

Tips 提示 把一种高纯度色相的颜色提高明度，其纯度就会降低。无彩色只具有明度属性。

3．色彩的对比

在一定条件下，不同色彩之间的对比会有不同的效果，各种纯色的对比，各种色彩界面构成中的面积、形状、位置以及色相、明度、纯度之间的对比，都可以使页面色彩配合增添许多变化，使页面更加丰富多彩。

黑白对比

黑白两色是无彩色，它们在冷暖性质上属中性色，不像有彩色那样富于感受性特征，容易被刺激，这两个在明度上极端对立的颜色，都拥有一种理智的坚固力量。黑白对比最能够满足视觉的清晰感，当黑白对比出现在强烈的有彩色对比群时，它可以立即使刺目跳跃的色彩显得稳定。有时我们在设计中使用强烈的色彩，为了不让它显得焦躁，可以用加进黑白对比的手法来稳住它，这会获得一种鲜明而清晰的色彩效果，如图1-14所示。

色相对比

色相对比是指因色相之间的差别形成的对比，在度量色相差时，要借助色相环，如图1-15所示。色相对比的强弱，取决于色相在色相环上的距离。

● 原色对比：指的是红、黄、蓝三原色之间的对比，这三种颜色之间的对比属于最强烈的色相对比，会令人感受到极强烈的色彩冲突，如图1-16所示。

● 互补色对比：在色环上位置相对的两种色彩互为补色，如红色与绿色、黄色与紫色、蓝色与橙色等，一对补色在一起，可以使对方的色彩更加鲜明，如图1-17所示。图1-18所示的页面以绿色为背景，但是商品价格、“秒杀”“立即抢购”字样却用红色，形成互补色对比效果，使关键信息更为凸显。

● 相邻色、类似色对比：在色环中相邻的颜色是相邻色，如红和橙、橙和黄、黄和绿、绿和蓝等，如图1-19所示。而在色相环上彼此接近的色彩可以归为类似色，如蓝绿、绿、黄绿，虽然它们在色相上有很大差别，但在视觉上却比较接近。类似色对比具有明显的统一协调性，在统一中又不失对比的变化，如图1-20所示。

● 间隔色对比：间隔色是色环上两个颜色之间隔了一个颜色，如图1-21所示。间隔色比较相邻色，两色之间在色环上相隔远一些，因此视觉冲击力会强于相邻色，而且间隔色使用广泛，即没有互补色冲击力那么具有刺激性，又相比相邻色多了一些明快活泼效果。

明度对比

明度对比是指色彩的明暗程度的对比，色彩的层次与空间关系主要依靠色彩的明度对比来体现。对装饰色彩的应用来说，正确明度的对比，是决定配色的光感、明快感、清晰感以及心理作用的关键。明度对比较强时光感强，页面明朗清晰，给人印象深刻，不容易出现误差；明度对比较弱时，页面则显得朦胧轻柔、形象不易被看清，效果不好。

Tips 提示 色彩明度对比包括同一种色彩之间的明度对比和不同色彩之间的明度对比。

纯度对比

一个鲜艳的红色与一个含灰的红色并置在一起，能比较出它们在鲜浊上的差异，这种色彩性质的比较，称为纯度对比。纯度对比既可以体现在单一色相中不同纯度的对比中，也可以体现在不同色相的对比中。例如，纯红和纯绿相比，红色的鲜艳度更高；纯黄和黄绿相比，黄色的鲜艳度更高。图1-22所示的页面就采用了不同纯度的对比。

纯度弱对比的画面视觉效果比较弱，形象的清晰度较低，适合长时间及近距离观看；纯度中对比是最和谐的，画面效果含蓄丰富，主次分明；纯度强对比会出现鲜的更鲜、浊的更浊的现象，画面对比明朗、富有生气，色彩认知度也较高。

色彩的面积对比

同一视觉范围内，色彩面积的不同，会产生不同的对比效果。图1-23所示的页面使用大面积的浅色调为背景，主商品的图片有醒目作用，再通过加入适当面积的红色就起到了视觉平衡的作用，又能突出视觉中心点。

当一个页面的主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。

● 根据设计主题的需要，在页面上以某一色为主色，其他颜色为次色，可以使页面主次关系更突出，在统一的同时富有变化。

● 当两种颜色以相等的面积比例出现时，这两种颜色就会产生强烈的冲突，色彩对比自然强烈。

● 当一种颜色在整个页面中占据主要位置时，另一种颜色就只能成为陪衬，这时整体的色彩对比就减弱了。

● 同一种色彩，面积越大，明度、纯度越强；面积越小，明度、纯度越低。而且，面积大的时候，亮色显得更轻，暗色显得更重。

色彩的冷暖对比

色彩学上根据心理感受，把颜色分为暖色调（红、橙、黄）、冷色调（青、蓝）和中性色调（紫、绿、黑、灰、白）。图1-24所示为冷暖色图，成分复杂的颜色要根据具体组成和外观来决定色性。

因为冷暖色系本身的对立性很突出，所以在使用冷暖色调对比时，最好使一方为主色，另一方为辅色，通过控制颜色的比例，使之互相陪衬，从而达到色彩协调的效果。图1-25所示的就是典型的冷暖色对比，在这个海报中添加了白色作为调和，白色和黑色是万能的调和色，几乎可以用于所有的对比色彩中。

暖色调给人亲密、温暖的感觉，一般应用于购物类网店、儿童类网店等店铺，用以体现商品的琳琅满目、儿童类网店的温馨活泼。而冷色调则给人以距离、凉爽之感，单纯冷色系搭配的视觉感比暖色系舒适，不易造成视觉疲劳。如蓝色、绿色是冷色系的主要颜色，大自然的颜色给人带来一种清新、祥和安宁的感觉，也是设计中较常用的颜色。冷色一般应用于高科技网店，给人严肃、稳重之感。

Tips 提示 黑白本身在冷暖对比中属于中性色，当它们与暖色相混时，可以使其变冷；和冷色相混时可以使其变暖，例如，灰蓝色与淡蓝色都比蓝色带暖味。

1.2.2 视觉文字

无论在何种视觉媒体中，文字和图片都是其两大构成要素。文字设计是增强视觉传达效果、提高作品的诉求力、赋予版面审美价值的一种重要构成技术，直接影响着传播信息的展现与传达。

1．字体和字形

字体样式繁多，又有各种不同的字号，也如同气味和声音一样，含有不同的情感、意义和相关性，根据设计的需要，有效地应用好字体和文字的组合，能让你的设计与众不同。字体样式库的内容可以分成四个主要类别：无衬线字体、衬线字体、手写体和装饰字体。

无衬线字体

没有衬线的字体称为无衬线字体，衬线指的是字形笔画末端的装饰细节部分。无衬线体往往被用在标题、较短的文字段落或者一些通俗读物中。相比严肃正经的衬线体，无衬线体给人一种悠闲轻松的感觉。随着现代生活和流行趋势的变化，如今的人们越来越喜欢用无衬线体，因为它们看上去“更干净”。在快速简洁、不带感情色彩地向读者传达信息上，无衬线字体表现出众，设计师们常利用无衬线字体的简单特性来创造一种时尚感或简约感。但在为标识或品牌选择字体时，则要谨慎选用无衬线字体，因为无衬线字体缺乏装饰性，在用来做一个公司或视觉识别的品牌标识时无法体现它们所需的特殊性。常见的无衬线字体有黑体、圆体、Arial、Verdana等。

衬线字体

有衬线的字体就称为衬线字体，最基本的形式是在无衬线字体每个字母笔画的开头和收尾有小小的加工，如下表所示。一般来说，人们倾向在长篇文章中使用衬线字体，如书籍、报纸和杂志等，因为它光滑的弧度使得大量的文字阅读变得容易。也由于它所投射出的可信性和专业性，因此在商业、正式信函、营销材料和各类媒体上选用衬线字体也是很不错的选择。常见的衬线字体有宋体、Time New Roman、Georgia等。

Tips 提示 印刷制品更多趋向使用衬线字体以求方便阅读，但是在计算机领域中为方便在显示器上显示倾向使用无衬线字体，它具有在几乎所有字号大小下都清晰可见的特性。

手写字体

手写字体是模仿笔迹而来的，常在向读者表达个人的情感或联系时用到。从孩子般的涂鸦到粉笔字再到精致的书法，手写体能有效地为计算机生产化的领域带来趣味性和复杂性。在个人设计中从邀请函到声明信都是手写体；然而，手写体很少用在企业形象设计中，因为它们不能表现出权威性和可靠性。图1-26所示为方正静蕾简体。

装饰字体

装饰字体，也称作观赏或陈列字体，正如其名，它们有很强的装饰性。它们字母的独特形态能让人耳目一新，引人注目，最适合用来创造或加强大尺寸作品（如标题）的设计感，也可以用来模仿一种特定流派或一个时代的情感和审美。由于装饰体复杂的笔法使得它们在大量文字中或较小字号下运用时，效果并不理想，因此它们不被用作正文字体。要避免装饰字体在新闻或业务报告中运用，因为它们会破坏大多数组织所力求表达的中立性。同时还要避免装饰字体的过度使用，避免为主题选择不恰当的装饰字体。图1-27所示的就是一种装饰字体。

Tips 提示 由于其具有高度的观赏性质，装饰字体也通常被归纳到衬线字体一类。

在淘宝的视觉营销设计中，文字除了能传达信息外，在广告设计中也是一种视觉材料。一般来说，一个广告设计中最多使用两到三种字体，用太多字体容易分散用户注意力，产生视觉疲劳。为了更好地说明和表达你的意思，一种字体可以尝试改变其粗细（常规、中等、粗、加粗）、宽窄（窄、中等、宽）、斜体、描边和颜色等效果，这些属性的变化都能在很大程度上改变字体的视觉效果。

2．文字组合

文字排列组合的好坏，直接影响着广告的视觉传达效果。文字设计也是创意的过程，下面讲讲在平面设计中文字设计和组合应注意的几点。

文字的可读性

文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息，要达到这一目的必须考虑文字的整体诉求效果，给人以清晰的视觉印象。因此，广告设计中的文字应避免繁杂零乱，要使人易认、易懂，切忌为了设计而设计，不要忘记了文字设计的根本目的是为了更有效地传达作者的意图，表达设计的主题和构想意念。

● 让你想表达的内容清晰、醒目，让阅览者一开始就可以明白你的意思。

● 除非你需要这种效果，那么避免使用不清晰的字体，否则容易使阅览者产生反感，如图1-28所示。

● 恰当地选择你所需要的字体，不要使用过小过细的字体，如图1-29所示。

● 注意文字在浏览时的视觉顺序，一般用户都习惯从左至右浏览，所以通常将重点内容放在右边。

文字的位置

文字在画面中的安排要考虑到全局的因素，不能有视觉上的冲突。否则，画面就主次不分，很容易引起视觉顺序的混乱，作品的整个含义和气氛都可能会被破坏。细节的地方也一定要注意，一个像素的差距有时候会改变你整个作品的味道。

安排好文字和图形之间的交叉错合，既不要影响图形的观看，又不能影响文字的阅览。

文字一定不要全部都顶着画面的边角，这样看起来很不专业，如图1-30所示。

● 也不要让文字和边线没有距离，如图1-31所示。

视觉美感

在视觉传达的过程中，文字作为画面的形象要素之一，具有传达感情的功能，因而它必须具有视觉上的美感，能够给人以美的感受。字形设计良好、组合巧妙的文字能使人感到愉快，留下美好的印象，从而获得良好的心理反应。反之，则使人看后心里不愉快，视觉上难以产生美感，甚至会让观众拒而不看，这样势必难以传达出作者想表现出的意图和构想。图1-32所示的两种文字版面，第一种明显过于平淡了，第二种改变一下文字的位置和大小，味道就不一样了。

字距和段落间距也会影响文字排版的美感。

● 如果小字体的字间距小的话，阅读会很困难，但如果是大字体，间距就要紧凑点。

● 随着字体的增大，段落之间的距离也应该随之调整，行距要大于字间距。

● 如果有多个段落，还要注意段落之间的主次和轻重，以及在内容表达等方面的重要程度。

设计的创造性

根据作品主题的要求，突出文字设计的个性色彩，创造与众不同的独具特色的字体，给人以别开生面的视觉感受，有利于作者设计意图的表现。设计时，应从字的形态特征与组合上进行探求，不断修改，反复琢磨，这样才能创造出富有个性的文字，使其外部形态和设计格调都能唤起人们的审美愉悦感受。如图1-33所示，有时候对文字的笔画做特殊的加工处理往往会产生一些意想不到的效果，而这样的处理是带有创造性的，同时人性化的味道也会更浓一些。

Tips 提示 一个广告设计中的各种不同字体的组合，一定要具有一种符合整个作品风格的风格倾向，形成总体的情调和感情倾向，不能各种文字自成一种风格。总的基调应该是整体上的协调和局部的对比，于统一之中又具有灵动的变化，从而具有对比和谐的效果。除了以统一文字个性的方法来达到设计的基调外，也可以从方向性上来形成文字统一的基调，以及色彩方面的心理感觉来达到统一基调的效果等。

3．文字的层次布局

在平面广告中，要传达的信息也是有主次的，视觉营销的一个重要作用就是指引受众阅读广告时的浏览顺序。如图1-34所示的广告图，虽然只采用了一种字体，但却呈现了多姿多彩的感觉。应用字号的大小组合，巨大的数字“558”突出折扣的力度，突出重点又富有层次感，让顾客一目了然广告的核心信息。“马上点”三个字类似按钮，还含有暗示用户点击的意味。

4．文字的区别和统一

在字体编排时，文字的字体、大小、颜色在搭配组合上会让受众有一种关联的感觉，排列在一起的字体间的对比是至关重要的，通常的做法是通过改变字重（如细对粗）、字宽、字体样式（无衬线字对有衬线字或创意体）来形成整体对比。如图1-35所示的广告图，多种字体搭配组合、错落有致，字号大小呼应，同时结合不同文字的颜色，传达视觉重点，让客户第一时间了解海报所要传达的主要信息。

5．字体与风格的搭配

淘宝品牌众多，每个品牌都各有风格，不同风格的产品和广告需要搭配不同的字体。对于时尚潮人，我们多采用无衬线字体，如图1-36所示，如黑体、雅黑、粗黑等，因为黑体简洁流畅，和年轻潮人洒脱自如的生活态度有些相似。

对于有着成熟魅力的成功人士，大标宋体笔画显得沉着稳重，和成熟人士的处事特点相得益彰，如图1-37所示，成熟男装呈现的是稳重、大气、简洁的特点。

对于成熟女性，适当应用英文字体组合，可以有一种雍容华贵的感觉，所以英文字体在需要体现产品品质的广告中非常常见。图1-38所示的海报带有欧式风格的字体和装饰，结合模特的产品展示，体现品质的同时，给人一种欧式古典美。

对于普通的日韩潮流女装，需要表现出活泼、时尚的特点，可以将一些大小不同的宋体类、黑体类字体组合使用，如图1-39所示。

1.2.3 视觉构图

在设计时，根据题材和主题思想的要求，把要表现的形象适当地组织起来，构成一个协调的完整的画面称为构图。

1．中心构图

画面中间位置放置主元素，这样的构图能给人稳定、庄重的感觉，比较适合表现对称式构图，可以产生中心透视效果。为了避免构图的呆板，可以在细节上添加点缀设计，使画面有所变化，如图1-40所示。

2．九宫格构图

九宫格构图也叫井字构图，将整个画面在横、竖方向各用两条直线分割成等份的三部分，形成一个“井”字，将主体放置在任意直线的交点上，或者任意一条直线上，这种构图给人以和谐美感，使画面富有活力，如图1-41所示。

3．对角线构图

对角线构图把主体安排在对角线上，能有效利用画面对角线的长度，同时也能使陪体与主体发生直接关系。这种构图富于动感，显得活泼，容易产生线条的汇聚趋势，吸引人的视线，达到突出主体的效果，如图1-42所示。

4．三角形构图

三角形构图具有均衡、灵活的特点，如图1-43所示。这里的三角可以是正三角形，也可以是斜三角形或倒三角形。

5．黄金分割构图

黄金分割是指将整体一分为二，较大部分与整体部分的比值等于较小部分与较大部分的比值，其比值约为0.618，如图1-44所示。这个比例被公认为是最能引起美感的比例，因此被称为黄金分割。黄金分割具有严格的比例性、艺术性、和谐性，蕴藏着丰富的美学价值。图1-45所示的构图中，主体包包正是处于画面的黄金分割位置上。