电子商务视觉设计（PhotoshopCC+AIGC）-教案.docVIP

《电子商务视觉设计（PhotoshopCC+AIGC）》教案

PAGE

PAGE32

项目一初识电商视觉设计

教学内容

一、什么是视觉设计

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

三、电子商务视觉设计的构图方法

教学要求

【知识目标】

1．初步了解视觉设计。

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

3．掌握电子商务视觉设计的构图方法。

【能力目标】

1．能够对网店进行视觉定位。

2．能够识别电子商务视觉设计的构图方法。

【素养目标】

1．培养和提高审美能力，用美感塑造品牌形象。

2．培养创造性思维，用创意激发创作活力。

教学重点

1．网店的视觉定位

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

教学难点

1．网店的视觉定位

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

教学方法

讲授法、案例法、实践法

课时数

2课时

教学内容

任务一什么是视觉设计

一、视觉识别设计

视觉识别设计来源于企业形象识别系统。企业形象识别系统一般分为3个方面，即企业的理念识别（MI）、行为识别（BI）和视觉识别（VI）。

企业视觉识别系统是企业理念的视觉化，企业通过形象广告、标志、商标、品牌、产品包装、企业内部环境布局等向消费者传达企业理念，使消费者对企业产生一致的认同感。

二、视觉传达设计

视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素，利用视觉符号传达特定的信息给消费者，从而对消费者产生影响的设计。视觉传达的作用是让人与人之间利用“看”的形式进行交流。

任务二电商视觉设计前的准备工作

一、网店的视觉定位

视觉定位就像人的风格定位，不同的产品应该对应不同的视觉定位，不同的消费群体有着不同的视觉偏好，因此，关键是要将产品的视觉定位和消费群体的视觉偏好相结合，使网店在风格上呈现出一种整体效果。

营销型网店的视觉定位原则为营造促销氛围，主要措施包括通过对比强烈的颜色突出显示打折、包邮、半价等优惠活动的信息。

品牌型网店的视觉定位原则是突出品牌优势，整体设计风格偏向于简洁、干净，重点突出品牌Logo、形象代言人等元素。

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

二、制定视觉规范

任何一个优秀的设计作品都会有自己的视觉规范。电子商务视觉设计前的准备工作主要是围绕制定视觉规范和搜索整理素材来展开的，因此，首先要把抽象的风格定位具体化为图形、颜色和字体等元素，然后为这些元素制定视觉规范，并以手册的形式落实在纸面上。

制定视觉规范的意义如下。

（1）统一识别

（2）节约资源

（3）重复利用

任务三电子商务视觉设计的构图方法

一、对称切割构图法

对称切割构图法一般是指将页面分为对称的几部分（如将整个页面一分为二）的构图法。这种构图具有较强的视觉冲击力，可以使页面呈现平衡且不失重的效果。

二、组合切割构图法

组合切割构图法是指通过集中而有规律的排列从整体上抓住人们的视觉注意力，让整个页面更具立体感的构图法。这种构图方法适用于每个区块中的内容属于平级关系的情况，能够让页面布局更具创意。

三、整体场景构图法

整体场景构图法一般适用于促销、节日庆典等活动。整体场景构图法可以使消费者快速融入活动氛围，并使产品信息的表达更加精准、流畅。

四、简单切割构图法

简单切割构图法是指使用简单的线条或图案整齐地分割整个页面，使页面变得生动、有趣，内容区域得到有效划分。这类构图方法对内容没有过多的要求，设计人员可以随意安排内容，具体排版方式可根据内容确定。

五、流程构图法

如果设计人员需要按照循序渐进的方式展现产品，那么不妨采用流程构图法。流程构图法能够将步骤、关系、各个节点及整体流向展示清楚，让枯燥的流程变得简洁明了、个性十足，并且充满趣味性。

六、放射构图法

放射构图法能够展示出由一个中心点向四周扩散的效果，使整体页面呈现出立体感与空间感，且页面视觉冲击力强，富有动感。

七、物体轮廓构图法

物体轮廓构图法主要适用于活动、节日或新品宣传等专题。设计人员可以根据专题的主要内容先从整体上构建一个边界或外形线，形成一个大的轮廓，然后将内容巧妙地填充进去。物体轮廓构图法能让整个页面更加生动、形象、有趣。

归纳与

提高

通过本项目的学习，我们初步了解了视觉设计，还了解了电子商务视觉设计前的准备工作，并掌握了电子商务视觉设计的构图方法。

电子商务平台上的商品数以亿计，消费者在浏览商品时一般会更注重第一眼的感觉。说到如何让消费者第一眼就对商品感兴趣，就不得不提电子商务视觉设计。电子商务视觉设计近年来受到了我国各大企业和知名品牌的高度重视，特别是在以淘宝、天猫为代表的电子商务平台中，电子商务视觉设计理念运用得非常广泛，效果也很明显。

项目二店铺视觉配色设计

教学内容

一、店铺页面的配色方案

二、店铺页面的配色误区

三、店铺页面的整体配色案例

教学要求

【知识目标】

1．了解店铺页面的配色方案。