《网店视觉营销设计》 课件 模块3任务4 设计与制作首页焦点轮播图.pdf

•（一）任务工单

•任务目的：利用图形图像处理软件，设计和制作首页焦点轮播图，实现风格统一，色彩

协调的页面效果。

•任务描述：利用网店商品素材图片，借助Photoshop的自定义形状工具，多边形工具，

文字工具等实现“爱尚服饰”网店首页焦点轮播图的设计制作。

•知识目标：了解自定义形状工具，多边形工具，文字工具的使用。知道首页焦点轮播图

的作用，分类和设计技巧。

•能力目标：能利用图形图像处理软件，选择使用合适素材，熟练制作主题焦点轮播图。

•思政元素：根据活动主题挖掘传统节日独特的文化内涵，体现优秀的中华传统文化。

•（二）任务情境

爱尚服饰网店新开，正逢春夏商品上新，店内到了一批新款风衣、T恤等春夏新品服

饰，商家准备做一次新品上新，满减促销活动，目的在于通过促销活动，介绍新品的同

时达到引流的效果，运营团队和美工团队商量后，决定本次促销活动展示内容较多，决

定首页焦点图以轮播的形式展现，第一张定位为促销主题活动介绍，主要展示本店活动

的主题，内容，时间等起到广而告之的作用，第二张焦点图突出宣传新品。

•（三）任务解析

本任务以春夏新品上新为主题设计营销活动，以多张焦点图轮播的形式在首页呈现。

第一张轮播图主要是活动预告，活动主题为“春夏新品速递”，以弹出窗口，快递，箭头等为装

饰元素，突出“速递”的概念，整体焦点图片背景以网格方向的延伸感来突出“速”的聚焦和紧

迫感，背景颜色以淡蓝色为主，跟店招色彩统一，使得店铺首页风格和谐；其次，用黄色作为主

题文字颜色，使得“春夏新品速递”在整体画面中形成视觉焦点。页面中紫色为辅助色，作为优

惠活动底纹，所有文案加粗显示，在画面中一目了然，信息传递清晰。模特儿的加入，更好的来

衬托活动主题。

•（三）任务解析

第二张轮播图主要是新品预告，旨在宣传新品，图片背景也是以蓝色为主色调，这样两张色调接近的

图片形成轮播效果，在视觉上减少了跳跃感，整体色调和谐统一，辅助黄色和粉色搭配整体画面，突

出春夏的清新俏皮感，文案中突出“新品”和“优惠活动”，吸引顾客购买欲，“立即抢购”按钮效

果也能起到很好的引导消费作用。模特儿的穿搭能更加全面的展示产品本身的特点和穿着效果，最终

效果如下图所示。

•（四）知识准备

知识准备一了解首页焦点轮播图

在实体店铺中，每逢节日搞活动，商家一般会通过商场户外电子屏预告活动广告或

者通过在店铺内张贴海报的形式告知活动内容。而在网店中，一般都会通过首页焦点图

推广店铺促销活动信息给客户，如果一张首页焦点图不够显示活动信息，商家通常会做

两到三张同尺寸的首页焦点图组成轮播图，将所需要传达给顾客的信息充分传达。

在店铺首页设计中，首页焦点图是重点内容，更是页面的亮点。设计要有创意和趣

味，足够吸引顾客的视线。而首页轮播图通常是由两幅或两幅以上的首页焦点图进行滚

动轮播，两幅图片的尺寸保持一致，常用来放置店铺促销海报图，上新宝贝和爆款宝贝

推荐等。如下图所示，是淘宝某网店首页两张首焦图组成了轮播图，两张图片主题明确，

展示了2023年春季上新主题，通过模特儿全方位的展示产品特点，两张图片不仅尺寸保

持一致，配色和页面版式也基本保持一致，这样两张图片轮播视觉上整体性比较强，不

会产生强烈的跳跃感。

•（四）知识准备

知识准备一了解首页焦点轮播图

•（四）知识准备

知识准备二首页轮播图的分类

首页焦点图在网店中处于第一屏的位置，进入网店后，第一眼看到的就是店招、导

航和首页焦点图，为了让买家能够看到整个广告图，设计首页焦点图尺寸是关键，一般

焦点图尺寸为950像素*400像素，由于现在计算机显示器大多是宽屏，因此大多数图片

尺寸设计为1920像素*600像素或1920像素*900像素。首页焦点轮播图的主要作用就是

告知买家店铺在某一特定时间段的一些动态，帮助买家及时掌握店铺的活动或者商品信

息，轮播图根据设计的内容可以分为活动预告、爆款推荐、新品上架等，不同的内容设

计的重点也不同。

•（四）知识准备

知识准备二首页轮播图的分类

1.活动预告焦点图。这类焦点图主要用于推广店铺活动，比如618，双11等，页面内容主要包括活动