任务二
视觉营销设计要素

确定视觉营销定位后，即可展开视觉营销设计，在设计时色彩能够快速吸引消费者视线，使消费者对商品留下直观的第一印象；文字则能让表达的信息更加明确，能更好地体现商品的促销内容；合理的构图则能使消费者抓住营销重点，使画面更具吸引力。

课堂讨论

一、任务目标

认识视觉营销设计要素是视觉营销设计的关键，本任务将分别介绍视觉营销设计要素中的视觉色彩、视觉文字和视觉构图等知识，让读者充分了解并学会运用这些设计要素。

二、相关知识

（一）视觉色彩

人对色彩的感觉常由光的物理性质决定，此外也会受到周围事物的影响。为了更好地掌握色彩的使用和搭配方法，需要先了解并掌握色彩的构成要素、搭配原理、搭配技巧。

1．色彩的构成要素

在色彩的视觉搭配中，色相、明度、纯度是色彩的3个要素，是人眼能够正常感知色彩的基本条件，熟悉并灵活应用三要素是进行视觉设计的基础。

● 色相 。色彩的不同是由光波长的长短差别所决定的，而色相是指这些不同波长的色彩情况。各种色彩中，红色是波长最长的色彩，紫色是波长最短的色彩，红、橙、黄、绿、蓝、紫和处在它们之间的红橙、黄橙、黄绿、蓝绿、蓝紫、红紫共计12种色彩组成了12色相环，在色相环中的各种色彩中加入白与灰，可以产生细微差别的多种色彩。

● 明度 。明度可以简单理解为色彩的亮度，任何色彩都存在明暗变化。不同的色彩具有不同的明度，其中黄色的明度最高，紫色的明度最低，绿、红、蓝、橙的明度相近，为中间明度。

● 纯度 。纯度（也叫饱和度）是指色彩的鲜艳程度。纯度越高，色彩越鲜艳，视觉冲击力越强。纯度的高低取决于该色彩中含色成分和消色成分（灰色）的比例。含色成分越高，纯度越高；消色成分越高，纯度越低。

图1-7所示的手机海报分别采用了黄色和红色两种色相，在红色色相中加入白与灰，又产生了粉红色和深红色两种色相，每张海报中的商品与同色相的背景相搭配，相互呼应、统一协调。在明度与纯度方面，前两张海报色彩的明度与纯度相近，给人以轻松、清新的感觉，而第3张海报比第2张海报的色彩明度更低、纯度更高，给人更加庄重、冲击力更强的感觉。

2．色彩的搭配原理

在色彩搭配上，如果色彩缺乏对比，画面就会显得平淡无奇、缺乏灵气；如果色彩缺乏调和，则画面将会显得色彩零乱，缺乏统一性。因此，只有先掌握色彩的对比与调和这一搭配原理，才能创作色彩丰富且和谐的视觉效果。

（1）色彩对比

色彩对比就是将两种或两种以上色彩并置，由于相互间存在明确的差别（如色相、明度、纯度等的差别）而形成色彩的对比关系。

● 色相对比 。利用色相之间的差别形成对比，需要考虑其他色相与主色相之间的关系，图1-8所示海报以蓝色为主，运用绿色、橙色形成对比，视觉冲击力较强。

● 明度对比 。利用色彩的明暗程度进行对比。恰当的明度对比可以使画面产生明快感和清晰感。一般情况下，明度对比较强时，画面清晰度较高；明度对比较弱时，画面会显得柔和单薄、简单单调。

● 纯度对比 。利用纯度的强弱形成对比。纯度对比较弱时，视觉效果也较弱，适合长时间观看；纯度对比适中时，视觉效果和谐、丰富，可以凸显画面的主次；纯度对比较强时，视觉效果鲜艳明朗、富有生机。图1-9所示的海报利用了蓝色进行纯度对比，海报顶部和底部的低纯度蓝色有效衬托了中间高纯度的鞋子主体。

● 冷暖对比 。利用色彩冷暖感觉形成对比。利用该对比很容易突出商品主体所在的位置，使视线聚焦于形成对比处或者冷暖交界处。图1-10所示的海报即运用冷色蓝绿突出鞋子中的暖色橙色细节设计。

● 面积对比 。各种色彩在画面中所占面积的大小不同，其呈现出来的对比效果也就不同。当面积大的色彩为画面的主色调，面积较小的色彩则会显得格外醒目，具有识别性，如万绿丛中一点红将显得格外鲜艳夺目。

（2）色彩调和

色彩调和是指两种或两种以上的色彩，有秩序地组织在一起后获得的协调一致的色彩组合效果，包括同一调和、近似调和、秩序调和、对比色调和、面积调和5种。

● 同一调和 。在色相、明度、纯度三要素中有一种要素完全相同，使色彩的组合关系中含有同一要素，而变化其他要素。图1-11所示海报即为在绿色色相上进行明度和纯度的变化。

● 近似调和 。在色相、明度、纯度中有某一种或两种属性近似，通过变换其他属性而达到调和效果的色彩调和方法。近似调和的色彩关系在同一调和的基础上更富有变化。图1-12所示即为近似调和案例，该图中的色彩明度近似，虽然色相不同，但整体效果和谐。

● 秩序调和 。色彩秩序的建构通常是以色彩的基本属性为依据，如色彩由明到暗的渐变，由灰到亮的排列等。秩序调和法就是把不同明度、纯度、色相的色彩组织起来，形成渐变的或有节奏、有韵律的色彩效果。

● 对比色调和 。将两种性质相差较远的色彩，尤其是色环中位置彼此相对的（距离180°）两种色彩，通过某些特定的方法和规律进行配置而取得的协调效果。例如，图1-13所示的海报就运用了绿色和橙色这组对比色，通过渐变融合的方式，使色彩过渡更加自然，减弱了对比色的冲突性，使整体更加协调。

● 面积调和 。通过增大或减小色彩的面积，来达到调和的目的。一般明度或纯度越高的色彩，在画面中所占的面积应越小，这样更容易达到色彩的调和效果。

3．色彩的搭配技巧

色彩搭配是一门技术，不同色彩的视觉感受、应用领域和搭配技巧有所不同，灵活运用以下色彩进行搭配能增加商品图片的视觉美观度。

● 黑色 。在视觉搭配中，黑色给人一种高贵、稳重、科技的感觉，许多科技类商品，如电视、摄影机、音箱大多选择黑色为主色。在日常生活用品和服饰用品设计中，大多利用黑色来塑造高贵的形象。黑色的色彩搭配适应性非常广，大多数色彩与黑色搭配都能得到鲜明、高级、赏心悦目的效果，图1-14所示为黑色系海报的展现效果。

● 红色 。红色给人一种热情、有活力的感觉。高明度的红色与灰色、黑色等色彩搭配使用，可以给人一种现代且激进的感觉。低明度的红色给人一种冷静沉着的感觉，适合营造古典的氛围，与金色搭配还能带来奢华的感觉，如图1-15所示。在商品的视觉营销设计中，红色能起到醒目的作用，能促进商品的销售。

拓展学习

红色很容易引发兴奋、激动和紧张的情绪，还是一种能够唤起食欲的颜色。橙色、黄色也能够刺激食欲，绿色的食物往往被视为健康食品，而黑色的食物则容易被视为变质或对人体健康有害的食品。

● 蓝色 。高饱和度的蓝色会营造一种整洁、轻快的感觉，低饱和度的蓝色会给人一种都市化的时尚感。主色彩选择明亮的蓝色，配以白色的背景和灰色的辅助色，可以使整个画面干净、简洁，常用于与夏季、清凉、补水、自然等相关的主题，如图1-16所示。

● 白色 。白色会营造一种高级和科技的感觉，纯白色会带给人寒冷、严峻、简洁、利落、干净的感觉，所以在使用纯白色时，都会融入一些其他的色彩，从而形成象牙白、米白、乳白、苹果白等。在色彩搭配中，当白色与暖色（红色、黄色等）搭配时，可以带给人舒适华丽的感觉；当白色与冷色（蓝色、紫色、绿色等）搭配时，可以带给人清爽、轻快的感觉。

● 绿色 。绿色会营造出与健康相关的感觉，所以也经常用于与健康主题相关的设计中。当绿色和白色搭配使用时，可以给人自然清新的感觉，如图1-17所示。当绿色和红色搭配时，可以给人鲜明且丰富的感觉。同时，绿色还可以适当缓解眼部疲劳，属于耐看色之一。

（二）视觉文字

视觉色彩能使画面变得生动，视觉文字则能增强视觉营销效果，提高画面的诉求力，直接影响信息的传达。

1．字体的类型

不同的字体类型可以带给人不同的视觉感受，传统的字体类型可分为楷、草、隶、篆、行5种。而从视觉感观与应用的角度来讲，还可以把字体类型分为宋体类、黑体类、书法体类和艺术体类4种。

● 宋体类 。宋体是比较传统的字体，其字形较方正、纤细，结构严谨，笔画横平竖直，末尾有装饰，整体给人一种秀气端庄的感觉，在保持极强笔画韵律性的同时，能够给人一种舒适醒目的感觉。宋体类的字体有很多，如华文系列宋体、方正雅宋系列宋体、汉仪系列宋体等，常用作商品海报中的装饰字体，如图1-18所示。

● 黑体类 。黑体又称方体或等线体，没有衬线装饰，字形端庄，笔画横平竖直，笔迹粗细几乎完全一致。黑体的商业气息浓厚，其“粗”的特点能够满足消费者对于文案“大”的要求，可用于科技、数码、运动等商品海报或商品详情页等大面积使用文字的页面中。常用的黑体有思源黑体、方正黑体简体、方正大黑简体等，如图1-19所示。

● 书法体类 。书法体是指具有书法风格的字体，主要包括隶书、行书、草书、篆书和楷书等类型的字体。书法体能赋予商品较强的文化底蕴，字形自由多变、顿挫有力，力量中掺杂着文化气息，常给人一种古典文化的美好意境，如图1-20所示。

● 艺术体类 。艺术体是指一些非常规的特殊印刷字体，一般是为美化版面而采用的。其笔画和结构大都进行了一些形象化处理，常用于商品海报制作或模板设计的标题部分，可提升艺术品位。常用的艺术体包括方正喵呜体、汉仪丫丫体简、金梅体、汉鼎体、文鼎体等，如图1-21所示。

2．文字的组合

当确定画面中运用的字体后，还需要对文字进行组合排版，让画面的展现效果更加完整、美观，也让商品信息展示得更加清楚直观。

（1）文字的可读性

文字的主要功能是在视觉营销过程中，传递商品信息和商家需要表达的意图，要达到这一目的还需要考虑文字的整体效果。因此，在视觉设计过程中可以采用以下4种增强文字可读性的方法，避免文字的组合繁杂凌乱，让消费者易认、易懂。

●文字表达的内容要清晰明了，让消费者一眼就明白商家表达的主旨。

●除非需要某种模糊的效果，否则要避免使用不清晰的字体。

●不要使用过小的字体。

●注意文字的浏览顺序，一般的浏览顺序为从左至右，因此，需要将重点内容放到左边，方便消费者浏览。

（2）根据风格选择字体

在视觉营销的设计过程中，设计师还需根据商品的风格和类目选择字体，如可爱风格的女装店铺，可选择幼圆体为主要字体，同时选择少女体、童童体和卡通体为辅助字体。时尚、潮流、个性风格的店铺则可选择思源黑体、准黑和细黑等方正字体为主要字体，并且在设计时还可选择大黑、广告体和艺术体为辅助字体。图1-22所示的海报主要体现电动车的潮流和科技感，使用极具个性的艺术体，不同大小的中文文字、英文字母，结合赛博朋克风格的配色，体现出该品牌电动车的潮流、时尚。

（3）字体的搭配

字体的重要性仅次于色彩，在进行视觉设计时也要考虑字体的搭配。一般来说，同一个画面中的字体尽量保持在2～3种，多则会使画面变得复杂，影响消费者对信息的接收。字体在画面中一般可分为标题字体和正文字体，标题字体的文字数量较少，但字形设计比较突出，可快速吸引消费者的注意力。正文字体的文字数量较多，占用面积较大，其字形变化较小，更强调易读性。因此，标题字体一般用于小区域的文本而非正文文本中，其样式比应用于正文的字体更为复杂华丽，这种复杂性决定了它更适合用于小段标题或副标题。图1-23所示的“随时随地 想买就买”为标题字体，字数较少、内容简练，字体字号最大，色彩最明显，用于突出主题。底部的文字较小，内容较多，主要用于说明营销活动，展示了活动类别、活动参与方式及活动时间。

（三）视觉构图

在视觉营销设计中，合理的构图能够规划重点，区分信息表现的先后顺序，更好地展现商品和营销信息，使消费者快速地在画面中找到想要的东西。常用的构图方法有以下几种。

● 平衡式构图法 。在视觉设计中，平衡感是很重要的，一般情况下，为保证视觉平衡，会使用左图右文、左文右图、上文下图、中心构图等构图方式，图1-24所示为左图右文构图，左侧的商品和右侧的文字达到了视觉平衡效果；图1-25为中心构图，将主要内容放在画面中央，在周围用一些装饰元素作为点缀，同样具有视觉平衡感。注意平衡式构图法只需要视觉元素相对平衡，如果视觉元素大小完全一致，画面会显得机械、呆板。

● 切割构图法 。简单的三角形、正方形、长方形和圆形，甚至几根线条就可以组成很多有趣的图形，符合现代人的审美需求。适当的画面切割能够增强页面的动感与节奏感，加入几根线条、几个块面就能使画面产生意想不到的效果。设计时需要注意，素材不宜太过复杂和花哨，一般以纯色或是大块渐变色进行搭配，如图1-26所示。

● 放射构图法 。放射构图法是指以主体物为核心，将核心作为构图的中心点并向四周扩散的一种构图方式。这种构图方式可以让整个画面呈现出一种空间感和立体感，极具视觉冲击力，同时将消费者的注意力快速集中到展现的主体物上，产生强烈的引导作用。采用这种构图方式要注意文字的排版，在文字较多的情况下，不建议采用这种构图方式。图1-27所示为放射构图法的示例。

● 韵律式构图法 。视觉整体的韵律感与音乐中的韵律相似，视觉设计也需要节拍、节奏及各种元素的组合，形成统一、连贯、舒适的视觉效果。电子商务视觉营销中的设计元素，在形态上讲究点、线、面、体的规律性变化，结构形式上讲究疏密、大小、曲直等变化，这就如同音乐中的节奏韵律，赋予了页面活力和生命，也带给消费者更美妙的体验。特别是在进行商品促销页面的设计时，更需要注意节奏感，要使商品排列疏密有序，不过于紧密，如图1-28所示。

● 流程构图法 。流程构图法类似树杈结构，以流程图的方式展示商品。这种构图方式能够将各步骤、各个节点及整体流向展示清楚，配合图片展示，将一个枯燥的流程瞬间变得个性十足，让消费者浏览起来更加轻松，并且充满趣味性。图1-29所示为流程构图法的示例。

三、任务实训——赏析苏州博物馆旗舰店移动端首页

1．实训要求

结合本任务所学知识，赏析苏州博物馆旗舰店移动端首页，如图1-30所示，了解苏州博物馆旗舰店移动端首页中的色彩、构图、文字等内容，学习其色彩搭配和版式布局的方法。

2．实训目标

（1）掌握首页的色彩搭配和布局方法。

（2）掌握文字的表现方式。

3．实训思路

步骤01 打开苏州博物馆旗舰店移动端首页，经观察该店铺首页主要采用明度较高、纯度较低的青色和粉色为主色，属于较明亮、淡雅的色彩，符合博物馆的气质。

步骤02 文字字体以宋体、黑体为主，画面简洁、大方，宋体为页面增添了古典韵味，黑体则有助于清楚、直观地展现信息。文字色彩主要采用黑色、白色和红色，其中红色主要运用在活动、价格等信息上，能有效营造活动氛围，激发消费者的购买欲。

步骤03 页面布局综合运用了韵律式和平衡式构图法，页头为活动信息展示，下方为新品推荐及各类商品展示，每个板块疏密有序。整个页面布局板块清晰，视觉平衡，给人一种简洁、大方的感觉。

四、任务考核

观察图1-31所示的一组商品海报，分析海报中的色彩、文字及构图。