《电子商务视觉设计》教学教案

《电子商务视觉设计》-教学教案

《电子商务视觉设计（第2版）》教案

第1章初识电商视觉设计

教学内容

一、什么是视觉设计

二、电商视觉设计前的准备

三、电商视觉设计的黄金构图法

【知识目标】

1.了解视觉设计的定义。

2.了解电商视觉设计前的准备工作。

教学要求

3.掌握电商视觉设计黄金构图法。

【技能目标】

学会电商视觉设计的常用构图方法。

1.网店的视觉定位

教学重点

2.电商视觉设计黄金构图法

1.网店的视觉定位

教学难点

2.电商视觉设计黄金构图法

教学方法讲授法、案例法

课时数2课时

教学内容

第一节什么是视觉设计

视觉设计是针对眼睛功能的表现手段，通俗地说就是通过

一些设计让产品的视觉效果更加出彩。

一、视觉识别设计

企业视觉识别系统是企业理念的视觉化，通过企业形象广

告、标识、商标、品牌、产品包装、企业内部环境布局和厂容

厂貌等媒体及其他方式向大众表现、传达企业理念，使消费者

对企业产生一致的认同感与价值观。企业视觉识别系统既可以

形成独特的企业形象，又是企业无形资产的重要组成部分。

1

《电子商务视觉设计（第2版）》教案

二、视觉传达设计

视觉传达设计是以视觉媒介为载体，以文字、图形和色彩

作为创作要素，利用视觉形象传达特定的信息给受众，从而对

被传达对象产生影响的过程。视觉传达的作用是让人与人之间

利用“看''的形式进行交流。

第二节电商视觉设计前的准备

一、网店的视觉定位

不同的消费群体有着不同的视觉偏好，关键是要将产品的

定位和消费群体的视觉偏好进行整合，使店铺在风格上能够呈

现出一种整体效果。

营销型网店的视觉定位原则在于营造促销氛围，主要体现

在通过对比强烈的颜色突出显示打折、包邮、半价等优惠活动

的字眼。

品牌型网店的视觉定位原则是突出品牌优势，整体设计风

格偏向于简洁、干净，重点突出品牌Logo等形象代言等元素。

服务关系型网店的视觉定位原则是包装服务形象。

二、明确视觉规范的作用

(1)统一识别

视觉规范可以确保网店在整体风格、售前售后服务和产品

包装形象等方面都保持整体风格的一贯性，既有利于消费者识

别和区分店铺，也可以避免消费者在浏览时出现理解困难，甚

至是理解错误的现象。

（2）节约资源

除了活动海报等个性模块之外，其他的页面和模块也参照

规范进行设计可以极大地减少设计时间，从而达到节约资源的

目的

（3）重复利用

设计相同属性的模块或页面时，执行视觉规范有利于减少

无关的信息，方便消费者的阅读和信息传递。同时，视觉规范

也有利于美工人员之间的协调工作。标准化的视觉规范不仅可

以节约设计时间，还可以避免出错。

第三节电商视觉设计的黄金构图法

一、对称切割构图法

对称切割构图法的前提一般是将内容分为对立的两部分，

（将整个页面一分为二），划分明确。这种设计具有视觉冲击

力，可以使画面具有平衡不失重的效果。

二、组合切割构图法

组合切割构图法是通过集中而有规律的排列从整体上抓住

人们的视觉，让整个页面设计更具有立体感。这种构图方式适

合每个区块中的内容属于平级关系产品的展示，能够保持各种

内容的并列关系，让布局更具创意。

三、整体场景构图法

整体场景构图法专题内容不多，适用于促销、节日、活动

等页面。整体场景构图法可以将目标客户快速带入页面氛围中,

使商品信息更加精准、流畅。

2

《电子商务视觉设计（第2版）》教案

四、多重切割构图法

多重切割构图法的构图不规则，稳定而锐利，可以让单一

的页面变得生动、复杂的页面变得时尚，避免画面出现生硬感,

不宜产生审美疲劳。

五、简单切割构图法

简单切割构图法使用简单的线条或图案整齐地分割整个页

面，使页面变得有趣、生动，使内容区域得到有效划分。

六、流程构图法

如果设计创意需要按照循序渐进的方式展现产品，那么不

妨采用流程构图法。流程构图法能够将步骤、关系、各个节点

及整体流向展示清楚，让枯燥的流程瞬间变得简洁明了、个性

十足，并充满趣味性。

七、放射构图法

放射构图法能展示出由一个中心点向四周扩散的效果，起

到导向的作用，让整体页面呈现出立体与空间感，画面冲击力

强，富有动感。

八、物体轮廓构图法

物体轮廓构图法主要适用于活动、节日或新品创意等专题。

我们可以根据专题的主要内容从整体上构建一个边界或外形线,

形成一个大的轮廓，将内容巧妙地填充进去。物体轮廓构图法

能让整体页面更加生动、形象、有趣。

通过本章的学习，我们了解了视觉设计的定义，电商视觉

设计前的准备工

作，并掌握了电商视觉设计黄金构图法。

电商平台上的商品数以亿计，消费者在浏览商品时只会注

重第一眼的感

觉。说到如何让消费者第一眼就感兴趣，就不得不提电商

视觉设计。电商视觉

设计近年来受到了国内各大企业和知名品牌的高度重视，

特别是在以淘宝天猫

为代表的电商平台中，电商视觉设计理念运用得非常广泛,

效果也很明显。归纳与

提高

3

《电子商务视觉设计（第2版）》教案

第2章电商网站视觉配色设计

教学内容

一、网店页面的配色方案

二、网店页面的配色误区

三、网店的整体配色案例

【知识目标】

1.了解色搭原则七要素。

2.掌握色彩联觉现象的定义。

教学要求3.了解网店风格的几大形成要素。

4.了解网店页面常见的配色误区。

【技能目标】

学会网店的整体配色方法。

1.网店页面的配色方案

教学重点2.网店页面的配色误区

3.网店的整体配色案例

1.网店页面的配色方案

教学难点

2.网店的整体配色案例

教学方法讲授法、案例法

课时数4课时

教学内容

第一节网店页面的配色方案

4

《电子商务视觉设计（第2版）》教案

一、色搭原则七要素

1.渐进配色

2.对比配色

3.色调配色

4.近似配色

5.单重点配色

6.分隔式配色

7.夜配色

二、色彩的联觉聚焦图片

色彩的联觉现象是人们感知色彩的一种经验，在消费过程

中人们也会自觉或不自觉地运用这种感知习惯。同时，由于人

们的视觉对于色彩的感知最为敏感，因此当他们在浏览购物网

站时很可能会首先通过色彩去识别商品。

要想聚焦消费者的目光，就需要根据消费者的认知习惯寻

找出通常情况下能够表现商品的最具代表性的色彩，并将其运

用到与商品相关的视觉设计之中，这样才能避免消费者因为色

彩而造成误会，从而放弃对商品的进一步关注。

三、网店风格的形成要素

店铺风格的形成要素主要包括店铺的主要风格、产品的情

绪、活动的主题气氛、店铺的包装色彩和VI配色。

1.店铺的主要风格

(1)简约清爽型

(2)商业型

(3)炫酷型

(4)可爱型

(5)特色型

2.产品的情绪

(1)女装风格

•韩式风格

•淑女风格

•嬉皮风格

•波西米亚风格

•田园风格

•民族风格

(2)男装风格

・传统风格

•商务休闲风格

•运动风格

•英伦风格

•时尚休闲风格

3.活动的主题气氛

4.店铺的包装色彩

5.VI配色

(1)单色VI

5

《电子商务视觉设计(第2版)》教案

(2)双色VI

(3)多色VI

第二节网店页面的配色误区

一、色彩过多

合理地运用色彩会使店铺页面变得鲜艳、生动且富有活力,

但色彩数量的增加并不能与页面的表现力成正比。在设计配色

时，要有一种主色贯穿其中。主色不一定是面积最大的颜色，

也可以是最重要、最能揭示和反映主题的颜色。

二、背景和文字对比不强烈

背景与文字对比不强烈，则文字内容没法突出，且昏暗的

背景令人沮丧，用花纹繁复的图案作背景更容易让人眼花缭乱。

有的背景和文字颜色对比不强烈，容易让人看不清楚，使商品

的辨识度降低。

三、过分强调色彩的刺激度

在页面配色时要尽量少用容易引起视觉疲劳的色调。一般

来说，高明度、高纯度的颜色刺激度高，疲劳度也高。在无彩

色系中，白色的明度最高，黑色的明度最低；在有彩色系中，

最明亮的是黄色，最暗的是紫色。

第三节网店的整体配色案例

一、店铺页面主色设计

二、店铺页面文案配色设计

三、店铺页面辅色设计

通过本章的学习，我们了解了色搭原则七要素，掌握了色

彩联觉现象的定

义，还了解了网店风格的几大形成要素，以及网店页面常

见的配色误区。

在电商广告作品中，和谐、对比鲜明的色彩搭配更能吸引

消费者注意。因

此，广告能否抓住消费者的眼球，关键的一步是色彩的运

用。大多数人对色彩

画面的敏感度强于文字，同时色彩是通过人的印象或者联

想来产生心理上的影

响的，而配色设计的作用就是通过改变空间的舒适程度和

环境气氛来满足人们

各方面的要求。如何正确地进行视觉配色设计是电商视觉

设计者必备的技能。归纳与

提高

6

《电子商务视觉设计（第2版）》教案

第3章店铺标志视觉设计

教学内容

一、徽标的设计

二、店标的设计

【知识目标】

1.了解店标的几种设计形态。

2.掌握店标设计的七大技巧。

教学要求

3.熟练掌握店标的设计流程。

【技能目标】

能够熟练设计店标。

1.店标设计的七大技巧

教学重点

2.店标的设计流程

1.店标设计的七大技巧

教学难点

2.店标的设计流程

教学方法讲授法、案例法

7

《电子商务视觉设计（第2版）》教案

课时数2课时

教学内容

第一节店标的设计形态

从设计的表达形态来看，店标可以分为以下几种。

1.中文文字型店标

中文文字型店标主要以文字单独构成，适用于多种传播方

式，最大的优点是一目了然，消费者对中文文字的接受度最高,

好辨识也好记忆。

2.非中文型店标

对于非中文的标识来说，英文和字母会给人一种很酷的感

觉，能给人留下深刻的印象，但其内容是什么意思并不会第一

时间让消费者理解清楚，所以我们可以把它看作是一个符号。

3.组合型店标

组合型店标让消赛者有一种中西结合、和国际接轨的大牌

感觉。在表达形式上，非中文的部分设计感比较强，视觉冲击

力比较大，所以形式多种多样，给人的视觉感受不错。

4.图形型店标

图形型店标就是直接用图形作为店标。这类店标上没有什

么字符，所以给人的印象不是很深刻，不配合店名一起来看就

不会记得是什么店铺。因此，不建议使用单纯的图形型店标。

5.图文结合型店标

图文结合型店标就是图形与文字相结合的店标形式。这种

店标既具有图形化的视觉冲击力，又能清楚地表达店铺品牌信

息。

第二节店标的设计技巧

1.设计要有造型

2.设计要有领导性

3.标志设计的统一性

4.标志的识别性

5.标志的时代性

6.标志的系统性

7.标志的延伸性

第三节不同行业的店标设计

1.表现柔美型

针对女性的行业和类目，多数要表现出女性的柔美与娇媚。

2.表现阳刚型

针对男性的行业和类目，要重点表现男性的阳刚之美。

3.表现可爱型

针对年轻女孩和婴幼儿的行业和类目，要突出可爱、萌萌

的感觉

第四节店标的设计流程

8

《电子商务视觉设计（第2版）》教案

在设计店标前，首先要和客户或领导进行沟通，对店标设

计来说沟通是极为重要的，因为这样可以大大提高工作效率。

本案例中的店铺名称是“鲜果”，主营项目是水果，所以在

店标设计上要体现出水果店铺的风格。经过分析和构思，首先

想到的是用水果的图形来表现，所以第一步就是去素材库找一

些卡通水果的素材图形，然后抠出水果图像，添加文字，并对

店铺名称做一些变形处理，最后添加修饰图形、修饰图案和修

饰文字等。

通过本章的学习，我们了解了店标的几种设计形态，掌握

了店标设计的七

大技巧，以及店标的设计流程。

大到国际连锁品牌，小到零售网店都需要属于自己的独特

店铺标志。店铺

标志包括徽标和店标。企业与品牌的视觉符号称为徽标，

网店的标志称为店标。

这两种标志都是店铺的形象代表，主要起到识别和推广的

作用。优秀的店铺标

志设计不仅能对网店起到美化作用，还可以强化消费者对

网店的记忆。同时，

高大上的徽标和店标也是网店品牌和实力的一种体现。

归纳与

提高

第4章店铺首页视觉设计

一、首页视觉水平的四大指标

二、店招视觉设计

三、首焦轮播区视觉设计

四、商品陈列区视觉设计

五、茶叶店铺首页视觉设计案例

【知识目标】

1.了解首页视觉水平的四大指标。

2.掌握店招视觉设计规范及技巧。

教学内容

教学要求

3.掌握首焦轮播区视觉设计技巧。

4.了解商品陈列区的布局设计。

【技能目标】

9

《电子商务视觉设计（第2版）》教案

能够熟练设计店铺首页。

1.店招视觉设计

教学重点2.首焦轮播区视觉设计

3.商品陈列区的布局设计

1.店招视觉设计

教学难点2.首焦轮播区视觉设计

3.商品陈列区的布局设计

教学方法讲授法、案例法

课时数4课时

教学内容

第一节首页视觉水平的四大指标

一、首页跳失率

首页跳失率是指消费者通过某种渠道进入店铺，只访问了

一个首页就离开的访问次数占该入口总访问次数的比例。电商

运营者需要随时观测店铺的各项数据，并根据数据变化情况对

页面进行优化与调整。

二、首页点击率

首页点击率是商品在首页展现后的被点击比率，即首页点

击率:首页点击量♦首页展现量。通过首页点击率可以看出店

铺推广的商品是否吸引人。首页点击率越高，说明商品越吸引

消费者；首页点击率越低，表示商品对于消费者的吸引力越低,

这时就需要优化店铺中的商品、优化商品图片和推广标题或者

优化商品详情页面中的信息，让商品的展现尽可能多地带来点

击量。

三、首页人均点击次数

首页人均点击次数是指在一段时间内人均点击了多少次。

首页人均点击次数可以用来测试访客黏度，如果首页的客户体

验做得很差，让访客进入首页后不知所措，找不到自己想要的

产品，那么访客自然会离开。运营者要根据首页人均点击次数

来优化整体的导航，美化产品图片，这对访客的引导非常重要。

四、首页平均停留时间

10

《电子商务视觉设计（第2版）》教案

首页平均停留时间为访问店铺首页的所有访客总的停留时

长除以访客数（单位：秒），多天的平均停留时间为各天人均

停留时长的日均值。和首页人均点击次数一样，首页平均停留

时间也可以用来判断一个店铺首页是否能留住访客。

第二节店招视觉设计

一、店招视觉设计规范

不同的电商平台对店招的图片尺寸有不同的要求，下面以

淘宝网为例来介绍店招的视觉设计规范。

淘宝后台的店招高度为120像素，建议设计时设定店招尺

寸为950像素X120像素，加上导航条高度30像素，共150像

素，可避免发布后导航不显示的问题。

在店招上可以添加品牌宣传语、近期的打折促销信息、收

藏按钮、移动端二维码等元素，但这些元素最好不要超过3个,

因为足够的留白空间有利于打造视觉重点，让设计元素发挥出

最大的效能。

在设计店招时要注意和导航条的风格进行统一，利用色彩、

修饰元素与风格的相似性来营造视觉上的一致性，打造出独特

的店铺装修风格。

二、店铺名称的艺术化处理

1.用不同字体和字号的组合营造艺术感

2.添加特效，突出特殊性和醒目度

3.使用修饰元素提升观赏性

三、图层样式的应用

图层样式是图像处理与网页制作中的常用功能之一，其作

用就是对设计元素进行修饰和美化，实现色彩、质感与光泽上

的变化。

添加图层样式不仅可以将原本单一的色彩变得绚丽，为设

计元素添加内阴影、外发光等特殊的光泽效果，还可以营造立

体浮雕、图案纹理等特殊效果。需要注意的是，导航条的设计

风格应当和店招乃至整个店铺首页的装修风格一致，不能一味

地追求华丽而让导航条显得突兀、不协调。

第三节首焦轮播区视觉设计

一、设计聚焦消费者视线

首焦位置是消费者进入店铺后第一时间看到的内容，如果

这部分内容能够首先抓住消费者的眼球，就会大大提高其继续

浏览店铺页面的可能性。相较于在首焦位置使用大量文字说明

的布局安排，图片结合文案的设计形式更符合消费者追求轻阅

读与轻松购物体验的心理。同时，放置消费者最渴望看到的信

息内容也是这个板块设计的重点。

二、构建设计图三要素

店铺首页中的首焦轮播区基本上都是由三个要素组成的，

即完整、精致的商品形象，唯美、绚丽的背景，以及精心编排

的广告文字。

首焦轮播图的背景图形要与商品的形象保持一致的风格或

者能够烘托出某种特定的气氛。首焦轮播图中的商品图要经过

色调和光影处理，能够真实再现商品的色彩和品质，或者根据

背景和文字的风格和影调做过适当修饰。艺术化的文字编排在

首焦轮播区中显得尤

11

《电子商务视觉设计（第2版）》教案

为重要，文字的字体与字号、色彩的变化等都是设计中较

为关键的环节。

三、溶图的应用规范

溶图是用两张或两张以上的图片拼合起来的一张图片，构

图严谨，细节处理得当。

在选择溶图时要注意，要么溶图的色调与商品相似，要么

溶图的影调与商品和谐搭配，只有满足了其中的一个要求，才

能保证首焦轮播图具备较理想的视觉冲击力和浑然天成的视觉

效果。

第四节商品陈列区视觉设计

一、营造视觉动线

在进行商品展示图片的排列设计时，要首先使用整洁的排

列让消费者获得轻松感，并且还要注意图片不宜过多，横排图

片最好不超过五张，因为过多的图片容易让消费者感到浏览压

力并产生疲倦感。

除此之外，通过灵活多变的排列方式形成图片组合的视觉

动线，也能减少过于死板的排列组合带来的枯燥与乏味感。

二、商品布局艺术化

商品照片的布局是影响商品陈列区整个版式的关键，也是

确立整个首页风格的关键。为了吸引消费者的眼球，可以根据

商品的功能、外形特点、设计风格来对商品陈列区布局进行精

心的规划与设计，将店铺中的商品艺术化地展现出来。

常见的商品陈列区布局方式有以下三种。

1.方块式布局

2.折线型布局

3.随意型布局

第五节茶叶店铺首页视觉设计案例

本案例为某茶叶店铺设计首页装修图，具体操作步骤略。

通过本章的学习，我们了解了首页视觉水平的四大指标，

店招视觉设计规

范及技巧，掌握了首焦轮播区视觉设计技巧，还了解了商

品陈列区的布局设计

方法。

店铺首页在电商店铺中所起到的作用就好像实体店的店面,

作为品牌的门

脸，它的主要作用是向消费者做展示，通过视觉、氛围、

商品和服务的综合感受

让消费者对品牌有初步的了解和接触。首页设计得是否有

新意直接关系到商品信

息的转化率，因此在进行店铺首页视觉设计时要尽可能地

让设计能够聚集消费者

的注意力，提高商品信息的转化率，这才是首页视觉设计

要达到的重要目的。归纳与

提高

第5章商品详情页视觉设计

教学内容

一、商品主图设计

二、商品细节展示区设计

三、商品功效简介区设计

12

《电子商务视觉设计（第2版）》教案

四、女鞋商品详情页视觉设计案例

【知识目标】

1.了解商品主图的设计规范。

2.掌握商品主图的设计形式。

3.掌握商品细节展示区的设计技巧。

教学要求

4.了解修饰元素在设计中的重要性。

5.熟练掌握商品详情页各元素的设计方法。

【技能目标】

能够熟练设计商品详情页。

1.商品主图设计

教学重点2.商品细节展示区设计

3.商品功效简介区设计

1.商品主图设计

教学难点

2.商品细节展示区设计

教学方法讲授法、案例法

课时数4课时

教学内容

第一节商品主图设计

一、商品主图的设计规范

淘宝网对商品主图的尺寸和设计都提出了具体的要求和规

范：显示在搜索结果页面中的商品主图尺寸为220像素x220

像素，而显示在商品详情页左上角的商品主图尺寸为400像素

x400像素。商品主图的文件大小要小于3MB,图片格式可以

为JPG、PNG格式。当上传的商品主图尺寸大于700像素

x700像素时，商品详情页会自动提供放大镜功能。

天猫商城的商品主图设计规范与淘宝网不同，其规定商品

主图尺寸为800像素x800像

13

《电子商务视觉设计（第2版）》教案

素以上，自动拥有放大镜功能。主图不许出现图片留白、

拼接、水印，不得包含促销、夸大描述等文字说明，该文字说

明包括但不限于“秒杀”“限时折扣"“包邮''等，而且不同行业店

铺的商品主图要求也有所不同。

二、商品主图的设计形式

商品主图的基本要求是能够展示商品的全貌，图片清晰，

并且不能有杂乱的背景。商品主图的设计形式主要有以下几种

类型。

1.展不商品的全貌

2.场景化的设计

3.拼接式设计

4.突出商品卖点

三、添加文案提高主图点击率

添加了文案的商品主图可以传递更多的商品信息，让消费

者通过一张图片就能对商品有更多的了解，更容易激发消费者

的点击兴趣和购买欲望。

在添加主图文案时，需要注意以下两点。

（1）文案说明信息的表达形式要简洁明了，要有引发消

费者产生点击冲动的诱惑力。

(2)文案说明信息不能遮挡商品主体。

第二节商品细节展示区设计

一、商品细节展示区的表现形式

考虑到不同商品在材质、功能和外观等方面的差异，在设

计商品细节展示区时可以采用不同的表现形式。常见的表现形

式有以下两种。

1.指示型表现形式

2.局部图解型表现形式

二、商品细节展示区的通用设计方式

商品细节展示区通用的一种设计方式就是添加必要的文字

和素材。

1.利用文字对细节进行说明

2.素材让细节展示更直观

第三节商品功效简介区设计

一、商品功效简介区的设计规范

商品功效简介区是商品详情页的一部分，其设计宽度受到

商品详情页宽度的限制，高度上则不受限制。表1所示为淘宝、

天猫和京东的商品详情页设计尺寸规范。

表1淘宝、天猫和京东的商品详情页设计尺寸规范

电商平台商品详情页设计尺寸规范

详情页左侧边栏宽190像素，中间空10像素，右侧宽

750像素，加

淘宝网起来总宽度为950像素。如果关闭左侧边栏，就可

以显示950像素宽，

否则只显示750像素宽

天猫商城详情页布局与淘宝类似，不同之处在于天猫商城

新版页面的宽度由

14

《电子商务视觉设计（第2版）》教案

750像素变为790像素

京东京东对详情页布局有统一要求，整体宽度不超过740

像素

商品功效简介区的设计重点就是对商品的功效进行总结与

归纳，通过文字、色彩和修饰元素的完美搭配来提升文字的可

读性。

二、修饰元素在设计中的重要性

在设计商品功效简介区时，为了将商品功效表述得更加直

观、形象，店主可以使用多种修饰元素来丰富画面的内容，例

如用图片来代替某些文字或者使用素材来突出某些文字。修饰

元素的巧妙应用能够提升商品信息的可读性，让枯燥的文字变

得更具象化，在给消费者带来美好的视觉享受的同时有助于消

费者深入了解商品的功效。

第四节女鞋商品详情页视觉设计案例

本节将结合前面所讲的内容为一款女鞋设计商品详情页，

设计内容包括商品主图、商品介绍等，要求设计的页面要能清

晰、准确地展示与说明女鞋的特点，具体操作过程略。

通过本章的学习，我们了解了商品主图的设计规范和设计

形式，掌握了商

品细节展示区的设计技巧，以及商品详情页各元素的设计

方法。

商品详情页是所有营销的落地点。消费者通过搜索进入店

铺后，首先进入

的便是详情页；所有页面上有且仅有详情页承担着下单购

买的职责；消费者在

购买前要对详情页仔细看、反复看，甚至对比看，才能决

定是否咨询卖家、是

否下单。如果详情页不能满足消费者的需求，不能解决消

费者的实际问题，那

么前面的工作做得再好，都会功亏一簧。所以，无论是什

么店铺，都要对商品

详情页进行重点设计。

归纳与

提高

15

《电子商务视觉设计（第2版）》教案

第6章高点击率推广图片视觉设计

一、推广图片构图法则

二、直通车图片设计

三、钻展图设计

四、直播封面图设计

五、聚划算主图设计

【知识目标】

1.掌握推广图片的构图法则。

2.掌握直通车图片设计的要点。

3.掌握钻展图设计的关键点。

教学内容

教学要求

4.掌握直播封面图的设计原则。

5.掌握聚划算主图的设计思路与方法。

【技能目标】

能够熟练设计直通车图片、钻展图、聚划算主图、直

播封面图和聚划算主图。

1.推广图片构图法则

2.直通车图片设计

教学重点3.钻展图设计

4.直播封面图设计

5.聚划算主图设计

教学难点1.直通车图片设计

16

《电子商务视觉设计（第2版）》教案

2.钻展图设计

3.直播封面图设计

4.聚划算主图设计

教学方法讲授法、案例法

课时数6课时

教学内容

第一节推广图片构图法则

一、变化式构图

变化式构图又称留白式构图。设计者将商品图安排在某一

角落或某一边，同时留出大部分空白。留白在画面上的作用是

帮助设计者展示感情色彩，给消费者以思考和想象的空间。

二、对角线构图

对角线构图就是把商品图安排在对角线上，利用画面对角

线来整体统一画面元素，同时也能使陪体与主体区分明显。这

种构图的特点是富有动感，活泼生动，容易产生线条的汇聚趋

势，吸引消费者的视线，从而达到突出商品图的效果。

三、对称式构图

对称式构图给人一种画面平衡、稳定、商品突出的感觉，

缺点是画面比较呆板、缺少变化。

四、平衡式构图

平衡式构图给人一种祥和、平静的感觉，缺点是缺乏创新,

没有新意。平衡式构图不像对称式构图那样老气、呆板，所以

很多电商设计者都会选择这种构图方法。

五、紧凑式构图

紧凑式构图就是将商品以特写的形式加以放大，布满画面,

具有紧凑、细腻、微观等特点。

六、X形构图

X形构图是对角线构图的升级版，也称放射式构图。它是

将视觉焦点放置在画面的中央位置，让每一条放射线的中点都

位于视觉焦点之上。采用X形构图能够获得严谨的美感，尽

情释放商品拥有的自然、纯美，在安静的氛围中就能让消费者

感受到活力与激情。

第二节直通车图片设计

一、图片整体风格设计

17

《电子商务视觉设计（第2版）》教案

在制作促销图片之前，第一步要做的就是根据文案或商品

等因素来进行风格定位。设计时，要确定推广的商品所针对的

消费群体，同时分析他们的喜好，以确定设计风格及颜色；分

析他们的消费能力，以确定什么样的促销方式是其最容易接受

的；分析他们的生活习惯，合理调整投放时间和策略，与竞争

对手形成差异，以提高投放效率。

在制作直通车图时，可以参考以下技巧。

1.运用适当的背景

2.保证图片清晰度

3.精简文字，去除“牛皮癣”

4.巧用素材搭配

二、突出商品卖点的设计

在店铺推广直通车主图中添加店铺品牌更多的说明信息，

能让消费者从更多方面认识品牌，进一步增强消费者对品牌的

认同感、提升图片的可信度。同时，店铺利益点信息的添加也

能促使消费者进行点击。

第三节钻展图设计

一、博取眼球的创意设计

创意需要灵感和积累，并不是在短期内就能随随便便产生

的，但其有针对的对象，所以也不难抓住。例如，拍摄商品时

转换相机的位置，用不同的角度进行表现，便可以为钻展图带

来不一样的表现形式与视觉冲击力。

除了改变商品的拍摄角度外，对商品进行富有造型感的摆

设也能体现创意与吸引力。二、统一图片设计风格

主题是图片的重点，对于钻展图而言，主题是激发消费者

潜在需求的重要武器，明确的主题能够促使消费者点击图片。

同时，图片的设计也需要拥有统一的风格。

通过图片背景的设计可以烘托出图片的整体氛围与设计风

格。钻展图背景的设计主要有两种方式：一种是通过拍摄道具

构建出背景，从而营造图片的气氛；另一种是合成背景。三、

确定重点表现元素

只有统一的图片风格是不够的，钻展图更重要的意义在于

通过图片的设计对店铺或商品进行推广，从而带来流量。搭配

适当的色彩、控制好相关元素的尺寸也是让钻展图具有足够吸

引力的关键。

在设计钻展图时，需要确定图片的重点表现元素。

第四节直播封面图设计

一、直播封面图尺寸要求

直播封面图不宜过大也不能太小，做到清晰、美观很重要。

以淘宝直播封面图为例，它没有固定的尺寸，只要是正方形即

可，一般为750像素x750像素，最小不能低于500像素x500

像素。

二、直播封面图设计原则

要想打造优质的直播封面图，主播在设计封面图时要遵循

以下原则。

1.符合直播主题

18

《电子商务视觉设计（第2版）》教案

2.封面图要美观、清晰

3.色彩要适当

4.不要妨碍重要内容的展现

5.禁用合成图

6.拒绝不当信息

7.封面图不要雷同

第五节聚划算主图设计

一、聚划算主图设计思路

聚划算主图的设计主要包括商品拍摄、商品背景、商品构

图和详情页主图四部分。

1.商品拍摄

拍摄角度不限，建议选用商品最大展示面积的角度进行拍

摄，以保证主题商品明确，商品在画面中能够完整显示。

2.商品背景

建议图片背景只选择真实拍摄的实景，或者单色背景中的

一种（包括同一色调的渐变）。不建议使用多色或者多个实拍

背景，也不建议出现水印。背景的选择应该是为了衬托主题商

品，建议运用虚化背景、突出主题的方式，或者使用同一色系

或渐变色背景。

3.商品构图

多色商品展示尽量使用实拍图，没有实拍图时也可以使用

色卡。尽量在主图展示上不出现细节图，否则只会喧宾夺主。

如果选用模特，那么同一画面中的模特不要多于两位，要把商

品和模特放在统一场景中进行拍摄，尽量不出现拼图现象。

二、聚划算主图设计案例

本案例结合前面所讲的内容为一款化妆品设计聚划算主图。

在制作过程中使用渐变的背景进行修饰，添加“全国包邮”“送”

促销方案，以及简单的广告词来突出产品优势，具体操作过程

略。

通过本章的学习，我们掌握了推广图片的构图法则，直通

车图片设计的要

点，钻展图设计的关键点，直播封面图的设计原则，以及

聚划算主图的设计思

路与方法。

图片是电商营销的基础与灵魂，尤其是推广图片，其设计

的重要性不言而

喻。可以说优质的推广图片是吸引流量、促进点击、提高

转化率的必需品，也

是视觉设计的关键点。

归纳与

提高

19

《电子商务视觉设计（第2版）》教案

第7章网店促销活动页视觉设计

教学内容

一、促销广告的黄金设计要素

二、不同发展阶段的促销广告设计

【知识目标】

1.掌握如何营造促销广告的氛围。

2.掌握促销广告的三大设计总则。

教学要求

3.掌握不同发展阶段的促销广告设计方法。

【技能目标】

能够熟练设计网店促销广告。

1.保证设计的基本美感

教学重点

2.营造促销氛围

20

《电子商务视觉设计（第2版）》教案

3.促销广告图片的设计原则

4.不同发展阶段的促销广告设计

1.保证设计的基本美感

教学难点

2.不同发展阶段的促销广告设计

教学方法讲授法、案例法

课时数3课时

教学内容

第一节促销广告的黄金设计要素

一、保证设计的基本美感

具有视觉营销力的促销广告需要具备基本的设计美感与清

晰度。如果想使促销广告图片更富吸引力与协调感，就要特别

注意以下四个方面。

1.平衡

2.势能

3.集群

4.标签分割

二、营造促销氛围

在设计促销广告时，除了促销活动的本身内容以外，还可

以添加引导标签、限制提示等元素，营造出更为浓郁的促销氛

围，进一步引导与促使消费者点击促销广告图片。

1.添加引导标签

2.添加限制提示

三、促销广告图片的设计原则

除了具有基本的设计美感和促销氛围之外，促销广告图片

的设计还要遵循主题突出、风格统一与目标明确的设计原则。

1.主题突出

2.风格统一

3.目标明确

第二节不同发展阶段的促销广告设计

一、发展初期——为打造爆款而促销

对于刚起步的小店而言，店铺几乎没有自然流量，此时便

需要通过推广来进行流量的引入，而促销就是引流最为见效的

手段。新店或许并没有足够的经济实力去开展大规模的促销活

动，此时可以选择单品进行促销，并投放一定比例的单品促销

广告，打造爆款成为

21

《电子商务视觉设计（第2版）》教案

为店铺引流的法宝。

为打造爆款而设计的促销广告主要需要表现单品的卖点以

及单品优惠的幅度，以此来吸引消费者对促销图片的点击，同

时也可以添加“掌柜热推”等说明文案，告知消费者这件单品为

重点推荐商品，以此来营造更为浓厚的单品促销氛围。

二、发展中期——为品牌而促销

在店铺发展的中期阶段，品牌的树立起到了稳固店铺发展

的作用。在这一基础上，促销活动应更具品牌宣传的效应，相

应地促销广告也可以为品牌服务。

在为打造品牌店铺设计促销广告图片时，图片展示标准的

建立能够很好地展示店铺中不同的商品，而且统一的表现形式

也能让消费者形成对品牌的联想。展示标准包括商品摄影、构

图与字体使用等。

三、发展成熟期——为客户而促销

当店铺发展到成熟阶段以后，维系客户已经成为这个阶段

的首要任务，此时卖家可以增加更倾向于为老客户而展开的促

销活动。老客户对品牌已经有了一定的认知与信任度，抓住他

们其实也相当于在树立口碑，能让营销活动变得更为轻松。

在设计促销活动页时，可以专门设计一个促销页面，说明

会员享有的一系列优惠政策，增强会员的归属感，帮助卖家维

系老客户，增强消费者的凝聚力。需要注意的是，促销页面的

设计需要顾及消费者的感官体验，否则也是无法获取消费者好

感的。

通过本章的学习，我们掌握了如何营造促销广告的氛围，

促销广告的三大

设计总则，以及不同发展阶段的促销广告设计方法。

促销活动几乎是网店运营中最常见、最重要的内容，可以

说一个成功的店

铺是离不开各种各样的促销活动的。能让促销活动得到直

接体现的手段就是视

觉，促销活动的内容也只有通过视觉的表现才能更好地传

递给消费者。归纳与

提高

第8章移动端网店用户体验设计

教学内容

一、移动端网店的设计标准

二、移动端网店视觉设计

【知识目标】

教学要求

1.了解移动端网店的店标设计方法。

22

《电子商务视觉设计（第2版）》教案

2.掌握移动端网店的图片尺寸标准和框架结构安排。

3.掌握移动端网店进行视觉设计的方法与技巧。

【技能目标】

1.学会设计移动端网店店标和图片。

2.学会手机移动端店铺装修的视觉设计。

1.移动端网店的设计标准

教学重点

2.移动端网店视觉设计

1.移动端网店的设计标准

教学难点

2.移动端网店视觉设计

教学方法讲授法、案例法

课时数3课时

教学内容

第一节移动端网店的设计标准

一、移动端网店店标设计

手机淘宝的店标适合采用图形或字母组合的形式，一方面

是因为符号化的店标更容易加深消费者对店铺的印象，另一方

面是店铺头上已经明确地标注了店铺名称，图文结合和中英文

混合形式的店标不仅让店标的构图变得拥挤，还会让人产生画

蛇添足的感觉。

利用朋友圈进行小范围营销的店铺或销售母婴用品等特定

商品的店铺，也可以使用头像作为店标，这样有助于拉近店铺

与特定类型消费者的心理距离，但是不要使用公众人物的头像。

移动端网店还可以使用商品的实物照片作为店标，让人一眼就

能明白店铺销售的主营商品。

二、移动端网店图片尺寸标准

为了规范设计，手机淘宝对图片的发布尺寸做出了要求：

需在图片上添加文字时，中文字号N30磅，英文和阿拉伯数字

字号N20磅；图片高度3960像素（建议高度不超过600像素），

图片格式支持JPG、GIF、PNG；首页和详情页图片宽度为

480像素〜620像素（建议不超过608像素）；每个详情页可以

增加一个音频，时长不超过30秒，大小不超过200KB,格式

为MP3。每个图片、音频的大小不得超过1.5MB。

23

《电子商务视觉设计（第2版）》教案

三、移动端网店框架结构安排

移动端网店和PC端网店一样，也存在着页面间的跳转以

及页面结构层级关系的安排与布置。这里所说的页面不再是指

店铺的各级网页页面，而是指存在于淘宝App客户端中的店

铺各级界面。

卖家虽然可以不考虑图标、按钮等用户界面（UI）设计,

也不必过多地考虑店铺的结构组成，但需要注意在已有的框架

结构中添加能够促进消费者购买的内容。此外，根据框架结构

层面给所添加的内容设置相应的商品或活动链接也尤为重要，

否则混乱的链接会导致店铺框架结构变得很混乱，不被消费者

所理解，阻碍消费者的购买进程。

第二节移动端网店视觉设计

一、信息内容简洁，便于快速传播

手机移动端受手机载体的限制，其显示尺寸有限，店铺信

息的呈现也会受限，如果信息量过多且不做取舍，只会导致信

息无法清晰、明确地加载与显示，消费者也很难读懂精华信息,

不能快速找到自己想要看到的界面，就很有可能会选择离开。

因此，对信息进行必要的精简化处理是让消费者快速浏览与接

收信息的关键。

此外，控制文字信息的篇幅及文字尺寸的大小也是让信息

在手机移动端清晰展示的方法之一。

二、简单方便的操作与交互

无须进行缩放操作，只需伸出手指执行单一操作便可以进

行信息的浏览，简单且易于操作的方式更容易被消费者所接受。

因此，在进行手机移动端的店铺视觉设计时，要简化一切不必

要的设计，让消费者不必因为多余的操作而忘记了购买的初衷,

这也是促进手机移动端店铺销量增加的有效手段之一。

三、整体设计风格首尾呼应

店铺整体的装修与设计风格需要做到首尾呼应，否则就不

利于店铺完整设计风格的塑造。不同于PC端店铺，手机移动

端店铺属于狭窄视觉展示，如果不依据店铺品牌基调保持设计

风格的一致性，店铺形象的不鲜明感就会带来视觉的混乱体验,

也无法让消费者对店铺形成视觉记忆。

四、保持色彩与文字的鲜明感

在进行手机移动端店铺的视觉设计时，最好采用较为鲜亮

的色彩，因为这样既能给消费者带来较好的浏览体验，同时也

能与淘宝平台所提供的背景相融合，让店铺的整体设计风格更

加统一与完整。

对于利用碎片化时间来进行商品购买的手机移动端消费者

而言，他们希望从中获取轻松与自在感，而深色系容易带来一

种沉重感；相反，较为鲜明与惹眼的色彩则能让消费者获得轻

阅读的感受与体验。

五、保持常换常新

手机移动端的视觉设计保持常换常新的状态，不仅能够满

足这部分消费群体对新奇事物的追求，也不会让店铺看起来像

是一个无人看管的空店。当然，这一切也是需要建立在店铺品

牌设计风格不变的基础之上的。

24

《电子商务视觉设计（第2版）》教案

归纳与

提高

通过本章的学习，我们掌握了移动端网店的店标设计方法,

了解了移动端

网店的图片尺寸标准和框架结构安排，还掌握了移动端网

店进行视觉设计的方

法与技巧。

移动端网店可以看作PC端的延续，在设计时更需要把握

“用户体验”这

一关键点。手机移动端网店是依附于智能手机这一平台的,

而智能手机又让人

与机器之间有了更加亲密的接触与互动，因此与手机移动

端中其他应用软件或

App一样，在设计手机移动端店铺页面时要结合智能手机

平台的特色设计出更

加注重交互体验与友好度的页面，只有这样才能博得消费

者的欢心。

25

《电子商务视觉设计（第2版）》教案

第9章手机移动端淘宝店铺视觉设计

一、手机移动端淘宝店铺首页优化设计

二、电子数码类商品店铺首页案例解析

三、手机淘宝店铺详情页优化设计

四、家纺视觉设计案例实操

【知识目标】

1.掌握店招的优化设计方法。

2.掌握轮播图片的优化设计方法。

3.掌握优惠券的优化设计方法。

教学内容

教学要求4.掌握商品分类导航及商品分类展示的优化方

法。

5.了解店铺详情页设计的FABE原则。

6.熟练掌握手机淘宝店铺详情页的设计方法。

【技能目标】

能够熟练地对手机移动端淘宝店铺首页和详情页优化

设计。

1.手机移动端淘宝店铺首页优化设计

教学重点

2.手机淘宝店铺详情页优化设计

1.手机移动端淘宝店铺首页优化设计

教学难点

2.手机淘宝店铺详情页优化设计

教学方法讲授法、案例法

课时数4课时

教学内容

第一节手机移动端淘宝店铺首页优化设计

一、轮播图片优化设计

通常情况下，轮播图片会包含店铺上新活动通知、促销活

动展示等内容。轮播图内

26

《电子商务视觉设计（第2版）》教案

容要尽量简洁，文字表现清晰，主次分明且能达到快速传

播的目的，这是轮播图片设计的要点。

此外，卖家在设计时也要注意控制好轮播图片的数量，以

及展示的先后顺序。在设计时卖家可以根据店铺活动的重要程

度或先后顺序对轮播图片的位置进行相应的调整。二、优惠券

的优化设计

在进行视觉设计时，一般都将优惠券放在店招或轮播图片

的下方，并留出足够的空间，使用较为鲜明的色彩，让消费者

能够注意到优惠券，只有这样才能真正发挥其引流与促进转化

的作用。

过于花哨的设计有时反而会让优惠券淹没在各种视觉元素

的冲击之中。店铺中的某些优惠活动也可以被设计成优惠券的

形式。有的优惠活动还设计了优惠券按钮，让消费者更有互动

参与感。

在优惠券上添加“立即领取”之类的视觉元素，可以在一定

程度上左右消费者的点击行为，相对于没有明显按钮引导的优

惠券板块而言，有按钮引导更富操作的提示感。三、商品分类

导航优化设计

通常情况下，在手机移动端店铺首页中，展示完轮播图片

或是优惠券板块后便会出现分类导航板块。在设计这个板块时,

要注意控制好显示尺寸与比例，使其能够清晰与完整地展示在

消费者面前，起到快速导航的作用。

四、商品分类展示优化设计

与PC端有足够的空间去装饰与美化商品分类展示板块不

同，在手机移动端为了迎合目标群体求快、求便的心理，应当

尽量简洁，并在第一时间展示商品图片。

通常情况下，手机移动端店铺首页商品分类展示会以爆款

或促销的商品图片形式呈献，将全店最受欢迎或最优惠的商品

放在第一区，以促进手机移动端店铺购买力的转化。手机移动

端消费者较为关注店铺新品与应季产品的发布，因此在商品分

类展示的第二区中可以对新品与应季产品进行展示。在在第三

区、第四区等区域中可以根据店铺需求放置不同的商品。

商品分类展示区的分区不宜过多，商品分类展示的每一区

中的商品图片也不宜过多，因为手机显示屏幕较窄，图片横向

组合时要想让消费者看清商品图片，那么每一行放2张图片最

为合适。简洁、整齐的图片排列组合能让手机移动端的消费者

获得更好的浏览与购物体验。

第二节电子数码类商品店铺首页案例解析

在对手机移动端店铺进行视觉设计时，卖家应注意保持色

彩与文字的鲜明感，因为消费者在碎片化的时间里利用手机进

行购物，更多的是希望获得放松感，而店铺过于沉闷的色彩搭

配则无法达到这一目的。

这并不意味着手机移动端店铺的视觉设计只能是明亮的色

调，其实也可以使用一些较为暗沉的色彩。例如，对于一些经

营手机配件类商品的店铺而言，其所销售的商品具有较为浓郁

的科技感与炫酷感，而这也很可能成为店铺品牌的定位方向。

为了迎合这一特性，店铺可以采用象征深沉与神秘的黑色作为

店铺首页的主要色彩，从而突出商品与品牌具备的科技特性。

第三节手机淘宝店铺详情页优化设计

27

《电子商务视觉设计(第2版)》教案

一、详情页设计的FABE原则

FABE是一种通过四个关键环节来解答消费者诉求，且巧

妙地处理好消费者关心的问题，从而顺利实现商品销售诉求的

销售模式，具体表现为四个方面。

F——特征(Features)：介绍商品的特质、特性等基本功

能，以及它是如何满足消费者需要的。

A----优点(Advantages)：就是商品的卖点与优势，向

消费者证明商品的卖点，其实就是给消费者提供了更多购买该

商品的理由。

B——利益(Benefits)：以消费者利益为中心，告知并强

调消费者购买商品后会得到的利益，能够激发消赛者的购买欲

望。

E----证据(Evidence)：指第三方认知、新闻舆论或技

术报告等信息，它们需要有足够的权威性、客观性、可靠性与

可见证性，这样才能获得消费者的信任。

在FABE原则的指引下，还需要做到以下六点具体内容,

让商品描述变得更加符合网络的销售环境，从而增加消费者的

购买动力。

1.真实感

2.逻辑感

3.亲切感

4.对话感

5.氛围感

6.正规感

二、商品详情页的设计误区

在设计商品详情页时，要注意避免以下几个误区，把握好

描述设计的尺度是促成消费者购买的重要前提。

1.切忌密不透风的文字说明

2.海报宣传需凸显商品的真实性

3.注意控制商品与关联销售商品图片的数量

三、根据消费者的页面平均停留时间设计

手机浏览的连贯性不如PC端，并且消费者在页面中的平

均停留时间很短，所以在设计手机移动端的详情页面时，必须

做到简单、直截了当。

在PC端商品详情页的开端可能会出现“新品推荐”“搭配

套餐''等信息，这些在手机移动端显得不那么实用。手机移动

端必须在前三屏中对商品的卖点和重要信息进行清晰的描述，

因为过于烦琐的其他关联信息可能需要占用好几屏的空间，每

占用一屏的空间便会使消费者多一次滑动操作，并且还有可能

看不到与商品相关的信息，让其失去对商品的购买兴趣，造成

流量跳失。

第四节家纺视觉设计案例实操

本案例结合前面所讲的内容为一款空调被设计商品详情页,

设计内容包括商品首图、商品介绍等，要求设计的页面要能清

晰、准确地展示与说明空调被的特点。具体操作过程略。

归纳与

提高

通过本章的学习，我们掌握了店招、轮播图片、优惠券的

优化设计方法，

商品分类导航及商品分类展示的优化方法，了解了店铺详

情页设计的FABE

原则，还掌握了手机淘宝店铺详情页的设计方法等。

28

《电子商务视觉设计（第2版）》教案

越来越多的消费者选择通过手机移动端淘宝店铺进行购物,

是因为手机移

动端店铺所具备的特点给予了他们很好的用户体验，但是

这些特点并不足以让

消费者决定购买，所以还需要对店铺进行个性化且更为具

体的设计，对店铺的

各个细节进行优化，营造出良好的销售氛围，让消费者最

终被店铺所吸引并产

生购买行为。

第10章手机移动端微店视觉设计

一、微店首页优化设计

二、商品详情页优化设计

三、母婴微店视觉设计案例构思

四、母婴微店视觉设计案例实操

【知识目标】

1.掌握微店首页的优化设计方法。

2.掌握商品详情页的优化设计方法。

教学内容

教学要求

3.根据母婴微店视觉设计案例进行实战练习。

【技能目标】

能够熟练地进行手机移动端微店视觉设计。

1.微店首页的优化设计

教学重点

2.商品详情页优化设计

1.微店首页的优化设计

教学难点

2.商品详情页优化设计

教学方法讲授法、案例法

课时数4课时

教学内容

29

《电子商务视觉设计（第2版）》教案

第一节微店首页优化设计

一、首页的框架设计

微店首页主要由店铺招牌、微店公告、焦点大图、商品分

类与商品展示五部分构成。

1.店铺招牌

首先，店主需要考虑的是店铺招牌要给消费者传达什么样

的信息；其次，店主需要对店铺风格进行定位，并使店铺招牌

与其保持一致；再次，设计要简洁明了，字数不要过多；最后,

店铺招牌要突出主体，千万不可喧宾夺主。

2.微店公告

微店公告常以文字来说明店铺优势、商品卖点、促销信息

及服务内容等。只要是能增加消费者对店铺的信任度且便于消

费者浏览的相关信息，店主就可以将其展示在微店公告中。不

过文字必须要简洁、清晰，要让消费者一看就懂，且不会消磨

其耐心。

3.焦点大图

无图不成焦点，焦点必须有图片。可以说，焦点大图也是

图片内容的一种展现形式。具体来说，焦点大图设计就是由一

张图片或多张图片自动轮流播放展示在首页上。因为轮播图片

是动态的，所以具有一定的视觉吸引力，容易引起消费者的注

,?O

4.商品分类

在微店首页中，店主可以根据商品的特点将商品划分为几

大类，并根据类别对商品进行排列。

一般来说，如果消费者有需求，进入微店后他们首先会点

开首页中的“商品分类”模块，然后根据商品类型选择符合自己

需求的区域，从中寻找所需的商品。商品分类的布局很重要，

店主要按照消费者的浏览和购买习惯对商品进行分类，以便消

费者能够快速找到所需的商品，提高其购物体验度。

5.商品展不

商品展示一般可以分为“热卖商品”“店长推荐”和“全部商

品”三个模块。

(1)热卖商品

(2)店长推荐

(3)全部商品

二、清晰而准确的设计思路

消费者在看手机的时候会比较放松，如果微店页面在短时

间内不能将其吸引住，那么他们会无情地离开，因此拥有一个

清晰而准确的设计思路是非常重要的。微店首页的核心是模块

化，官方对页面板块的数量也是有限制的，因此卖家要利用有

限的板块创造更多的价值。

一般微店首页是由店招、海报、分类入口、优惠券和单品

展示等部分组成的。三、遵守设计学的“七秒定律”

在设计学中有一条“七秒定律”，据专业机构研究发现，人

关注一个商品的时间通常为七秒，而这七秒内影响70%的人

购买的第一要素是色彩。

首先，同一板块内不要超过3种颜色，这3种颜色可以看

作是主色、辅助色与点缀色。另外，卖家在设计首页时可以多

使用万能搭配色，如黑、白、灰等颜色。因为这些颜色比较百

搭，跟任何颜色搭配起来都会比较和谐，容易表现出高端的感

觉。背景色尽量以浅色调为主，因为在移动端上观看，浅色的

背景色更能突出商品本身，使消费者的注意力集中

30

《电子商务视觉设计（第2版）》教案

在商品上。

四、注重细节设计

卖家在设计微店首页时，还要注重细节上的设计，比如在

首页上可以选取半身图或局部特写图。因为微店首页大多是以

“豆腐块”的形式展现的，范围确实有限，所以卖家在选择图片

时要尽量使用半身图或局部特写图，以避免视觉上的不清晰。

如果全部都使用半身图或特写图，那么微店页面会显得单调、

乏味，所以可以适当穿插一些全景图，有意识地调整页面的节

奏，使整个页面更加和谐、活泼。

此外，在页面面积较小的情况下，图文搭配的巧妙排列能

让页面看起来更大，还能避免因为“乱''和"杂”而产生的廉价感。

第二节商品详情页优化设计

一、商品主图的设计

在商品详情页中，商品主图的设计尤为重要。因为消费者

在浏览商品时最先看到的图片就是商品主图，其基本尺寸要求

是640像素x640像素。在设计商品主图时，图片要清晰，主

题与背景要主次分明，图片中的文字大小要适中、简洁明了、

突出卖点，这样商品主图才会更加美观、更能吸引消费者。

二、商品描述图的设计

商品描述图包括商品图片和商品描述。在商品描述图中，

适当的文字描述能够起到吸引消费者、提高商品成交率的作用。

商品描述图应与商品主图、商品标题相契合，能够真实地介绍

商品的属性。

在进行商品描述时，文字内容要尽量简短，突出商品的优

点、特点和卖点。商品描述页面在重新排列、展示商品细节的

过程中只能利用文字和图片这种静态信息类的沟通方式。这就

要求店主在整个商品详情页面的布局中要注意一个关键点，那

就是阐述逻辑。

店主在设计图文详情时，要多图少文。图要美观，文字描

述要与图片相契合。文字最好是中文，字体不可过大，也不可

过小，可根据目标客户来定。字体颜色尽量不要太亮，以免使

人产生一种视觉上的不舒适感。

第三节母婴微店视觉设计案例构思

一、首页设计布局规划

①微店店招：在店招模块中使用母婴图片进行展示，通过

渐隐效果来让文字更加突出，让店铺主题更加明确。

②首页导航：该区域导航设置清晰，设计简洁明快。

③促销广告：该区域通过使用商品图片与文字结合的方式

进行展示，能够完整地表现出商品的特点和形象。

④特价专区：使用商品图片搭配色调和外形和谐的标题文

字，并加入相应的链接按钮，让消费者能够随时进入其页面了

解详情。

二、主色调：高纯度暖色调

1.页面背景及设计元素配色：高纯度色彩

31

《电子商务视觉设计（第2版）》教案

2.商品及辅助配色：类似色调

三、案例配色扩展

1.扩展配色：互补色系

2.扩展配色：同类色系

四、案例设计流程

①制作微店店招和导航

②制作微店促销广告

③制作微店特价专区

第四节母婴微店视觉设计案例实操

母婴微店视觉设计主要分为制作微店店招、首页导航、促

销广告、特价专区四部分。一、制作微店店招

二、制作首页导航

三、制作促销广告

四、制作特价专区

通过本章的学习，我们掌握了微店首页、商品详情页的优

化设计方法，并

根据母婴微店视觉设计案例进行了实战练习。

无论是淘宝还是微店，店铺视觉设计是否能够吸引消费者

的眼球、是否能

够突出自己商品的特色都是至关重要的。在微店中，页面

位置有限，要想让