1.2 网店美工必备的视觉营销知识

在实体店中消费者可以用五官去感知商品的质量，而在网店中消费者就只能通过色彩、图片、文字、视频等进行查看，以了解商品，因此网店的视觉设计将直接影响商品的销量。本节将介绍一些网店美工必备的视觉营销知识，以帮助大家通过色彩搭配、图形、文字等进行网店的视觉营销，最终提高店铺的流量、转化率以及提升品牌形象。

1.2.1 色彩搭配

色彩是一种视觉冲击力很强的元素，可以给消费者留下深刻的第一印象，因此色彩搭配是做好店铺视觉营销的基础。很多商家在装修店铺的时候，并没有考虑色彩搭配的问题，只是随意地堆砌色块，这会让整个页面的色彩变得杂乱无章，给消费者造成视觉疲劳；而好的色彩搭配不仅能够让页面更具亲和力和感染力，快速抓住消费者的视线，而且还能提高店铺的浏览量与商品的购买率。因此，在装修店铺时，色彩搭配尤为重要。

1. 色彩的属性与对比

色相、明度和纯度是色彩最基本的3要素。色相即各类色彩给人的视觉感受，如红、黄、绿、蓝等各种颜色；明度是眼睛对光源和物体表面明暗程度的感觉，该明暗程度取决于光线的强弱；纯度也称饱和度，是指眼睛对色彩鲜艳度与浑浊度的感受。在进行色彩搭配时，经常需要用到色彩的对比，下面我们将对常用的色彩对比进行介绍。

（1）明度对比：即利用色彩的明暗程度进行对比。恰当的明度对比可以使页面产生光感、明快感、清晰感。通常情况下，当明度对比较强时，对比度高，对应的清晰度也较高；而当明度对比较弱时，配色效果往往不佳，页面会显得柔和单薄、形象不够明朗。图1-5所示为不同明度的橙色的对比效果。

（2）纯度对比：即利用纯度的高低形成对比。纯度对比较弱的画面，其视觉效果也较差，适合长时间观看；纯度对比适中的画面，看上去和谐、丰富，可以突显画面的主次；纯度对比越强的画面，越鲜艳明朗、富有生机。图1-6所示为不同纯度的红色的对比效果。

（3）色相对比：即利用色相之间的差别形成对比。网店美工在进行色相对比时需要考虑其他色相与主色相之间的关系，如原色对比、间色对比、补色对比、邻近色对比，以及最后需要表现的效果。其中，原色对比一般指红色、黄色和蓝色的对比；间色对比是指两种原色调配而成的颜色对比，如红+黄=橙，红+蓝=紫；补色对比是指色相环中的一个颜色与180°对角的颜色对比；邻近色对比是指色相环上的色相在15°以内的颜色对比。

（4）冷暖色对比：从颜色给人带来的感官刺激进行考量，黄、橙、红等颜色能给人带来温暖、热情、奔放的感觉，属于暖色调；蓝、蓝绿、紫等颜色能给人带来凉爽、寒冷、低调的感觉，属于冷色调。图1-7所示为冷色调和暖色调的对比效果。

（5）色彩面积对比：各种色彩在画面中所占面积的大小不同，其所呈现的对比效果也就不同。图1-8所示为某女装店铺全屏海报色彩面积的对比效果，在大面积的红色背景中加入小面积的其他颜色，可以起到协调和平衡视觉、强调促销文字、突出视觉中心的作用。

2. 主色、辅助色与点缀色

网店美工在搭配店铺色彩时不能随意搭配，需要遵循一定的比例与程序。网店装修配色的黄金比例为“70:25:5”，其中，主色占总版面的70%，辅助色占25%，而其他点缀色占5%。网店装修的配色程序为：首先根据店铺风格、类目选择占用大面积的主色，然后根据主色来选择搭配的辅助色与点缀色，用于突出页面的重点，平衡视觉效果。图1-9所示为主色、辅助色与点缀色的应用案例。

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

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

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

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

1.2.2 图形元素的应用

网店美工在设计页面时，经常会利用图形元素来进行装饰，这样既丰富了页面的视觉效果，又生动地表现了商品的信息，同时还打破了纯文字页面给人的呆板视觉效果。点、线、面是图形中最基本的三大要素，三者结合使用，能够使页面呈现良好的视觉效果。

1. 点

点是可见的最小的形式单元，具有凝聚视觉的作用，可以使画面布局显得合理舒适、灵动且富有冲击力。点的表现形式丰富多样，既包含圆点、方点、三角点等有规则的点，又包含锯齿点、雨点、泥点、墨点等不规则的点。如图1-10所示，左图为点的表现形式之一，右图点元素在文字周围的应用，这些点元素可以丰富画面，突出主题。

2. 线

线在视觉形态中可以表现长度、宽度、位置、方向和性格，具有优美和简洁的特点，经常用于渲染画面，引导、串联或分割画面元素。线分为水平线、垂直线、曲线、斜线。不同线的形态所表达的情感不同，水平线和垂直线大气、明确、庄严；曲线柔和流畅、优雅灵动；斜线视觉冲击力强，可以展现活力四射的感觉。如图1-11所示，左图为斜线素材，右图为直线在文本串联方面的应用。

3. 面

点的放大即为面，通过线的分割所产生的各种比例的空间也可以称为面。面有长度、宽度、方向、位置、摆放角度等特性。面具有组合信息、分割画面、平衡和丰富空间层次、烘托与深化主题的作用。网店美工利用面来设计、美化页面时需要注意，面与面之间要通过不同的排列来进行灵活对比。图1-12所示为面元素的使用案例，如使用云朵、圆形、矩形等来装饰画面。

1.2.3 文字的应用

合理的色彩搭配可以使画面变得生动，而合理的文字搭配能够增强视觉传达效果，更直观地向消费者阐述商品的详细信息，引导消费者完成商品的浏览与购买。在设计网店图片时，根据不同的版面选择不同的文字，能让图片呈现的效果更加美观。网店美工首先要精练文字内容，以充分体现所要表达的主题，然后根据文字内容选择合适的字体。

1. 字体的性格特征

不同的字体具有不同的性格特征，网店美工在选择字体时需要根据商品的特征来选择对应的字体。下面我们将对淘宝网店常用的字体性格特征进行介绍。

（1）宋体：宋体是店铺页面中应用较广泛的字体，其笔画横细竖粗，起点与结束点有额外的装饰部分，其外形纤细优雅，体现了浓厚的文艺气息，适合用于标题设计。方正大标宋不仅具有宋体的秀美，还具备黑体的醒目性，因此经常被用于女性商品宣传图的设计。此外，书宋、大宋、中宋、仿宋、细仿宋等也属于常用的宋体。图1-13所示为宋体在家装海报中的应用。

（2）黑体：黑体笔画粗细一致，粗壮有力、突出醒目，具有强烈的视觉感，商业气息浓厚，常用于促销广告、导航条，或车、剃须刀、重金属、摇滚、竞技游戏、足球等目标群体为男性的商品宣传图的设计中。常见的黑体样式包括粗黑、大黑、中黑、雅黑等。图1-14所示为应用黑体后的页面效果。

（3）书法体：书法体包括楷体、叶根友毛笔行书、篆书体、隶书体、行书体和燕书体等。书法体具有古朴秀美、历史悠久的特征，常用于古玉、茶叶、笔墨、书籍等古典气息浓厚的店铺设计中，如图1-15所示。

（4）美术体：网店美工在店铺设计中还经常使用美术体类字体，这类字体具有明显的艺术特征，如汉仪娃娃篆简、方正胖娃简体、方正少儿简体、滕祥孔淼卡通简体等字体具有活泼、可爱、肥圆、调皮等艺术特征，多用于零食、玩具、童装、点读机、卡通漫画等以儿童群体为主体的商品宣传图设计中。此外，美术体还指将文本的笔画涂抹变形，或用花瓣、树枝等拼凑成各种图形化的字体，其装饰作用强，主要用于海报的设计，可有效提升店铺的艺术品位，如图1-16所示。

2. 文字的布局技巧

网店美工在确定页面中运用的字体后，还需要对文字进行布局，文字的布局在画面空间、结构、韵律上都是很重要的，可以让画面效果更好。下面我们将对网店视觉营销设计中常用的文字布局技巧进行介绍。

（1）字体的选用与变化：网店美工在排版网店广告文案时，选择2～3种匹配度高的字体能呈现最佳的视觉效果。字体过多会产生零乱而缺乏整体的感觉，容易分散消费者的注意力，使消费者产生视觉疲劳。在选择字体时，网店美工可考虑通过加粗、变细、拉长、压扁或调整行间距等操作来变化字体，使广告文案产生丰富多彩的视觉效果。

（2）文字的统一：网店美工在进行文字的编排时，需要把握文字的统一性，就是使文字的字体、粗细、大小和颜色在搭配组合上给消费者以关联感，这样文字组合才不会显得松散杂乱。

（3）文字的层次布局：在网店视觉营销设计中，文案的显示并非是简单的文字堆砌，而是有层次的。网店美工通常是按重要程度设置文本的显示级别，引导消费者浏览文案的顺序，此情况下首先展示的是该商品所强调的重点。在进行文字的编排时，网店美工可利用字体、粗细、大小与颜色的对比来设计文本的显示级别。图1-17首先通过红色大字号文字与标签突出“周年庆”的主题，然后配合绿色底纹，使用白色粗体文字强调折扣，并用黄色突出具体折扣值，最后使用较小字号的文字说明活动时间。