任务2
网店美工必备的视觉设计知识

优秀的网店往往具备色彩搭配合理、文字设计美观、页面布局协调、风格定位准确等特点。网店美工在开始设计前，需要了解色彩、文字、页面布局与风格等相关知识，以便设计时得心应手。

1.2.1 色彩搭配

色彩是影响视觉效果的重要因素，网店美工在设计过程中需要合理搭配色彩，以保证网店设计效果和谐、美观。

1.色彩三要素

色彩三要素是构成色彩的基础，包括色相、明度和纯度。色相即色彩的相貌，用于区分各类颜色，如红色、黄色、绿色、蓝色等，不同色相的色彩混合可以得到更加丰富的色彩。明度即色彩的明暗和深浅程度，色彩中白色的量直接影响色彩的明度。纯度即色彩的饱和、鲜艳程度，加入白色和黑色都会降低色彩的纯度。

2.色彩搭配的原则

进行网店色彩搭配时，应结合网店和商品的色彩与特点合理选择主色调，并控制好色彩比例。

合理选择主色调。 针对不同的网店定位、商品类目，网店在色彩运用上有所不同，如食品类网店多以绿色为主色调，而电器、办公类网店则多以蓝色为主色调。因此，网店设计中的主色调应根据其给消费者的视觉感受而定，如洗衣液网店采用蓝色为主色调，可以营造干净的氛围，与商品的清洁功效契合。在选择网店主色调时，还需要系统地分析网店目标消费者的心理特征，找到这部分群体易于接受的色彩，然后应用到网店中，从而有利于网店的经营与管理。

合理控制色彩比例。 网店页面的整个画面最好不要超过3种颜色。画面的色彩可以划分为主色、次色与辅色，通常主色占比60%左右，次色占比30%左右，辅色占比10%左右。在大型活动期间，可以采用多色搭配，使页面视觉效果显得更加活泼。

3.常用的配色方案

网店美工在进行网店页面设计时，可以根据商品和品牌的设计需求，使用一些常见的配色方案，包括同色系色彩搭配、不同色相的色彩搭配，以及不同纯度、明度的色彩搭配等。

（1）同色系色彩搭配

同色系色彩搭配是指使用一种色系中的不同纯度或明度的色彩进行搭配，这样搭配出的效果和谐、平衡性强。图1-1所示为红色系色彩搭配效果，在页面中搭配深浅不一的红色，并使用白色和黑色作为点缀，突出了文案和商品外观。

（2）不同色相的色彩搭配

在12色相环中，色彩分为红、橙、黄、绿、蓝、紫等12个区域，如图1-2所示。离得近的色彩搭配起来，视觉效果更柔和；离得远的色彩搭配起来，视觉效果则会更强烈。在搭配时，网店美工可根据色彩的间隔距离选择不同的搭配方式。

相邻色搭配。 相邻色是指12色相环中相邻近的两种色彩，相邻色在色相环中形成的夹角一般不超过60°，例如，绿色和蓝色、橙色和黄色就互为相邻色。相邻色搭配的视觉效果非常柔和，能给人温馨的感觉。图1-3所示为黄色配绿色、黄色配橙色的色彩效果。

间隔色搭配。 间隔色是指12色相环中形成的夹角一般不超过120°的两种色彩，这样的色彩搭配会更明快、活泼、对比鲜明，如红配黄、蓝配红、橙配绿。图1-4所示为橙色搭配绿色的主图效果。

互补色搭配。 互补色是指在12色相环上形成180°角的颜色，如蓝色和橙色、红色和绿色、黄色和紫色等。互补色的对比非常强烈，在颜色饱和度很高的情况下，可以创造出十分震撼的视觉效果，因此一般需要适当地加入黑色或白色进行调和。图1-5所示为橙色、蓝色搭配，加入白色进行调和的海报。

分散的互补色搭配。 分散的互补色和互补色的区别在于，分散的互补色不选择目标颜色在12色相环中正对面的颜色，如不选择黄色的互补色紫色，而是选择紫色旁边的两个颜色——红紫色和蓝紫色进行搭配。分散的互补色搭配不仅可以得到强烈的对比效果，而且还可以让色彩表现更加丰富。

经验之谈

为了使作品的色彩更加丰富，还可以选择更多的配色方案。如在12色相环上创建一个等边三角形，选择三角形3个角对应的一组颜色；或在12色相环上画一个正方形，选择正方形4个角对应的一组颜色；等等。

（3）不同纯度、明度的色彩搭配

除了色相，纯度、明度也会直接影响色彩搭配效果。色彩纯度分为高纯度、中纯度、低纯度，色彩明度分为低明度、中明度、高明度，如图1-6所示。按照不同纯度、明度，常见的色彩搭配方式有以下几种。

低纯度、低明度色彩搭配可以给人陈旧、复古、高档、成熟、稳重、冷静、压抑、灰暗等感觉，如图1-7所示。

高明度、低纯度的色彩属于柔色调，如马卡龙色调。柔色调的色彩搭配可以给人文艺、清新、柔和、温柔、淡雅、轻盈、宁静、舒缓等感觉，如图1-8所示。

高纯度、高明度的色彩搭配能给人轻松、明快、新鲜、激情、热烈、时尚等感觉，能够有效促使人的生理、心理处于亢奋状态，常用于网店的活动促销设计中，如图1-9所示。

4.不同色系的色彩搭配

不同的色系会带给人不同的心理感受，根据不同色系给人的感受进行色彩搭配可提升整个网店的视觉效果。

红色系。 红色是浓郁、喜庆的色彩，容易激发人的热情和活力。鲜明的红色容易吸引目光，在网店设计中常用于突出表现某些内容。高纯度的红色通过与黑色、白色等搭配使用，可以得到现代前卫的效果，如图1-10所示。低纯度的红色可以让人产生冷静沉着的感觉，常用于营造古典氛围，如图1-11所示。

黄色系。 明亮的黄色给人甜美、幸福、喜庆、富饶的感觉。同时，黄色还可以起到夸大、凸显的作用，所以经常用于促销文案或背景中。在网店设计中，黄色是非常容易搭配的颜色，图1-12所示为黄色搭配橙色、白色等的效果，画面简洁明亮。

白色系。 纯白色会带给人光明、严寒的感觉，在使用白色时，一般会掺一些其他的色彩，得到如象牙白、米白、乳白、苹果白等颜色。在网店设计中，白色与红色、黄色、橙色等搭配可以增加华丽的感觉，与蓝色、紫色、绿色等搭配可以传达清爽、轻快的感觉。图1-13所示为用白色搭配蓝色和绿色的牛奶焦点图，给人一种清新自然的感觉。

橙色系。 橙色可以给人温暖、朝气蓬勃、华丽、健康、兴奋、欢乐、辉煌、有食欲的感觉。在网店设计中，橙色搭配绿色，可以营造春意盎然、绿色健康的形象，如图1-14所示。橙色与灰色、深棕色搭配，则可给人质朴简约、气质非凡的感觉。

绿色系。 绿色是大自然的颜色，浅绿色给人文艺清新的感觉，深绿色给人天然、健康、生命、青春、希望的感觉，常用于有机食物、含有天然植物成分的商品的网店设计中。在网店设计中，绿色常与橙色、黄色、白色搭配，可以显得网店清新、有朝气、有活力。图1-15所示为深绿色背景和浅绿色的商品的搭配效果，大面积的绿色背景营造出春回大地的氛围。

蓝色系。 高纯度的蓝色给人整洁、轻快的感觉，低纯度的蓝色给人都市化的感觉。蓝色系常用于科技商品、电器、办公用品、清洁用品等商品的网店设计，常与白色、黄色、灰色搭配，给人干净、清澈、简洁的感觉。图1-16所示为蓝色搭配白色、金色和红色的海报效果，画面显得清澈、明亮。

紫色系。 紫色给人高贵、优雅、浪漫、温馨的感觉。较暗色调的紫色给人成熟的感觉，适用于以女性为目标消费群体的，或摄影、绘画等艺术类的网店设计。在网店设计中，紫色常与白色、灰色、橙色等搭配。图1-17所示为紫色系海报效果，其用紫色渲染整个背景，形成温馨的氛围。

黑色系。 偏黑的颜色给人高贵、稳重、高科技的感觉，常用于科技商品的网店设计中。黑色背景可以突出高明度的白色、蓝色、黄色、绿色等色彩。图1-18所示为黑色系轮播图片效果，以蓝色文字突出主题，搭配白色，效果自然，使画面科技感十足。

1.2.2 文字应用

文字能直观地向消费者阐述商品的详细信息，引导消费者浏览页面与购买商品。网店美工在设计文字时，可根据不同的画面选择不同的字体类型，并运用一定的文字布局技巧和文案策划方法，让画面更加美观和更具吸引力。

1.字体的类型

网店美工可根据网店和商品的特征来选择字体类型，使字体效果更加符合网店需求。

宋体。 宋体是网店设计中使用最广泛的字体之一，其笔画纤细，较为优雅，具有文艺气息，常用于家装类、服装类网店设计中。图1-19所示为宋体在商品推广图中的应用。

黑体。 黑体笔画横平竖直，字形方正，具有浓烈的商业气息，常用于店招、商品详情页、轮播图片等设计中。图1-20所示的海报通过不同大小的黑体字来区分内容的层级关系。

书法体。 书法体常指具有书法风格的字体，其笔画多变，富有历史性和文化性，常用于书籍类等具有古典气息的网店中。图1-21所示为应用书法体的茶叶海报效果。

美术体。 美术体多指一些笔画和结构有特殊设计的字体，其具有较强的独特性和艺术性，可以提升艺术品位和网店格调，常用于商品名称、品牌名称、活动主题等文字设计。图1-22所示为应用美术体的网店页面效果。

2.字体的运用原则

字体的运用可以参照以下两个原则。

网店页面中的文字应避免纷杂凌乱，尽量让消费者易辨识和易懂，从而充分地表达设计主题。图1-23所示为某网店的商品详情页温馨提示板块，该板块的标题、 正文等采用不同的字体，且正文中的关键信息标红，使消费者一眼能够辨认出重要内容，文字的可读性较强。

文字的排版要美观，这既能向消费者传递视觉上的美感，还可提升网店格调，给消费者留下良好的印象。图1-24所示为某家居网店的首页分区板块，该板块的文字和图像整齐划一，文字采用居中对齐的方式，使整体更加规整，带给消费者视觉享受。

3.网店文案写作

美观的文字能吸引消费者眼球，但若文案不够吸引人、不能打动消费者购买，则无法满足网店需求。因此，优秀的网店美工还需要具备文案写作能力，让文字能够更好地传达设计诉求。

（1）文案写作要点

在网店设计中，不能随意创作文案，网店美工在写作文案时需遵循以下要点。

通过利益诉求吸引消费者。 消费者在购买商品之前，通常想知道这个商品能给自己带来什么样的实际益处，如果文案能给消费者明确的利益承诺，告诉消费者使用该商品的结果及其产生的实际效益，就能吸引消费者的关注。图1-25所示的某垃圾袋海报中，文案“底部牢不漏水”明确告诉了消费者垃圾袋的质量好、不易被扯破，可以打消消费者顾虑，让消费者放心购买。

精准锁定目标人群。 商品文案一般很难满足所有消费者的需求，因此在写作文案时，可以先选出合适的目标消费群体。图1-26所示的某拖把海报中，文案“清洁无死角 直达家具底部”将目标定位于经常打扫卫生的消费者，迎合他们对清洁用具的实用性需求。

信息真实。 商品信息描述必须符合实际情况，特别是商品的细节、材质和规格等基本信息，一定要真实可信，因为消费者会根据商家提供的商品信息来判断商品是否符合自身需求。弄虚作假、与常理相悖的描述不仅糊弄不了消费者，还会对网店口碑产生负面影响，因此，为了提高销量而采用弄虚作假的手段非常不可取。虽然可以对商品的生产背景、商品加工过程等进行适当的美化，让商品更加有内涵，但不能肆意夸大。

强调商品卖点。 在文案中强调商品或品牌的核心卖点，能够给消费者留下深刻的印象，从而引导消费者查看文案的详细内容，并关注该商品或品牌，产生购买欲望。图1-27所示的某乳胶鞋垫海报中，文案“软弹”强调了该商品的卖点，而其他文案“弹de更轻柔，软de有底线”强化了该卖点在消费者心中的印象。

巧用修辞手法。 比喻、引用、双关、设问、对偶、拟人和夸张等修辞手法不仅可以增加商品文案的吸引力和趣味性，还能使文案更有创意。图1-28所示的某小狐狸电饭煲海报中，文案“饭界萌厨出‘狐’意料”用双关和拟人的方式，让消费者在脑海中产生联想，从而产生购买欲望。

（2）文案写作注意事项

文案写作应注意以下问题。

避免重复。 当同质商品较多时，尽量不要都使用一样的文案，应挖掘商品的特点，创作出具有独特个性的文案。

避免语句过长。 应将需要表达的信息关键词放在前面，迅速引起消费者的阅读兴趣。避免语句过长的有效方法是：在保留核心信息的基础上，不断删减字数、调换句式，或用短词语替换长词语等。

避开敏感词。 避免出现《中华人民共和国广告法》中规定的违禁词和敏感词，一旦出现这些词，平台就会将整个标题过滤掉，消费者就无法搜索到相应的商品。另外，标题中还要避免出现如“肥胖”“衰亡”等消费者忌讳或讨厌的词，这些词不仅会惹来争议，还会降低消费者对品牌的好感度。

1.2.3 页面布局与风格

网店中页面的大小是固定的，若想让整个页面具有设计感和吸引力，可通过页面布局和风格定位来完成。页面布局可以让页面效果更具协调感，对网店进行风格定位则可加深消费者印象，提高商品成交率。

1.页面布局

页面布局是将页面中的各元素通过一定的方式达到协调完整的效果。不同的布局方式不仅可以提升整个页面效果的美观度，还可以给消费者带来不同的视觉感受。在对网店进行页面布局的过程中，文案与商品（或商品模特）的排版尤为重要，一般呈现为以下几种模式。

两栏式。 把整个版面分为左右两个部分，根据需求可以文案在左、商品在右，也可以文案在右、商品在左。一般两栏式布局会对文案进行装饰或添加背景，以达到左右均衡。图1-29所示为两栏式布局的效果，右侧为说明性文字，左侧为商品图片，整个画面和谐美观。

三栏式。 把整个版面分为左、中、右3个部分，一般文案在两边，中间放置模特或商品图像。图1-30所示即为三栏式布局的效果，其画面视觉效果稳定，商品和文字信息突出。

上下式。 把整个版面分为上下两个部分，可以文案在上、商品在下，也可以文案在下、商品在上。由于页面的尺寸高度限制，所以上下式布局一般使用较少。图1-31所示为上下式布局的效果。

组合版式。 将装饰素材添加到两侧，中间的文案和商品进行上下排列；或将装饰素材添加到一侧，另一侧的文案和商品进行上下排列。图1-32所示为组合版式布局效果。

中心式。 中心式布局的商品或文案在画面中占比较大，为主要展示对象。一般将商品或模特放置在画面中心，在其上层、下层或周围使用文案或其他元素进行装饰。这种版式直观大气，视觉冲击力强，便于展示商品细节，常用于有模特展示的服装、美妆等页面布局中。图1-33所示为中心式布局效果。

2.网店风格

网店风格在一定程度上可以影响网店流量和商品销量。风格定位准确、精致美观、富有创意的设计可以提升网店的品位，增加消费者的浏览时间，最终提高网店销售额。

极简风。 极简风是近几年比较流行的网店风格，主要特点为采用温和的低饱和度色彩、大面积的留白、整齐简洁的布局和清晰直观的信息，多选择白色或其他纯色作为背景，凸显品牌对简约和独特质感的追求。图1-34所示为小米官方旗舰店首页，其极简风设计很好地突出了商品质感和品牌基调。

可爱风。 可爱风主要以可爱的元素和鲜亮的色彩为基调来进行搭配，将色彩与元素结合起来，营造可爱、温暖的氛围。该风格可以自然地拉近网店商品与消费者的距离，具有得天独厚的亲切感。图1-35所示为某拖鞋详情页，可爱风很好地突出了商品的可爱外观。

立体风。 立体风以其独特的立体视觉效果，成为近几年炙手可热的网店风格，其主要特点为采用交互叠错的三维几何形状，搭配富有创意的卡通形象，再采用梦幻、清新的色彩进行组合，形成富有动感的完整画面。图1-36所示为某玩具详情页，采用立体风设计，通过立体的背景，搭配立体的玩具，让消费者产生身临其境的感觉。

科技风。 科技风具有未来感和智能感，包含机械、人工智能、科研场景，以及强辨识度的发光字体、发光线条等元素，多采用黑色、紫色、蓝色、青色进行搭配。科技风能极大程度地增强网店的视觉冲击力和感染力。图1-37所示为某笔记本电脑详情页，采用蓝色、白色、紫色等，搭配发光字体，营造出智能感。

中国风。 中国风运用源于中国传统文化和历史的色彩、图腾等元素，将中国特有的美学提炼并融入网店设计中，既能使网店具有人文气息，又能发扬中国传统文化。图1-38所示为某玉镯详情页，采用古色古香的色彩搭配以及富有传统文化的装饰元素，营造了浓浓的中国风氛围。

插画风。 插画风明艳的配色和丰富的形状能让网店视觉效果变得丰富多彩，吸引消费者的目光，拉近与消费者的距离，因此一直是网店设计风格中较为常见的类型。图1-39所示为某糕点详情页，插画风的页面设计与商品包装上的插画形成呼应。