《电商视觉营销设计》教案第8课店铺首页视觉营销设计（二）.docx

《《电商视觉营销设计》教案第8课店铺首页视觉营销设计（二）.docx》由会员分享，可在线阅读，更多相关《《电商视觉营销设计》教案第8课店铺首页视觉营销设计（二）.docx（5页珍藏版）》请在优知文库上搜索。

1、课题店铺首页视觉营销设计(二)课时2课时(90min)教学目标知识技能目标：(1)理解女装店铺首页的设计思路(2)掌握女装店铺首页的制作方法素质目标：(1)了解学习本门课程，提高学习能力(2)认真完成课堂练习，提高独立思考能力，增强创新意识教学重难点教学重点：店铺首页的设计思路和制作方法教学难点：能够对具体店铺的首页进行视觉营销设计教学方法案例分析法、问答法、讨论法、i并授法教学用具电脑、投影仪、多媒体课件、教材教学过程主要教学内容及步骤课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，预习本节课要讲的知识【学生】完成课前任务考勤【教师】使用APP进行签

2、到【学生】按照老师要求签到问题导入【教师】提出问题：你见过哪些优秀的店铺首页？你能分析出这些店铺首页的设计思路吗？【学生】聆听、思考、讨论、举手回答传授新知【教师】通过学生的发言，引入新的知识点，讲解女装店铺首页的设计思路，并演示制作过程一、设计并制作女装店铺首页【教师】通过多媒体展示“女装店铺首页效果”图片(详见教材)，并讲解其设计思路本节将以女装店铺首页的设计与制作为例，介绍店铺首页的设计技巧与制作方法。(一)设计思路该女装店铺当前主推春夏上市新品，且目标消费者为2540岁职业女性.这类女性偏好精致、优雅的极简风，因此店铺风格确定为干净、大气的简约风。接下来根据店铺营销策略和目标消费者的特

3、点，对该女装店铺首页进行视觉营销设计。1 .页面规划女装店铺首页从上到下依次为店铺招牌、导航、轮播区、优惠券、商品展示区、交互区、页尾.下面对这些区域进行规划和说明。(1)店铺招牌：选择品牌型店铺招牌，且加入店铺标志，并将其居中摆放，使其更加突显，方便消费者快速识别店铺信息。在店铺招牌靠右位置添加搜索框和收藏店铺按钮，方便消费者搜索商品、收藏店铺。另外，这样安排还可以让店铺招牌显得简洁大气，与店铺风格定位相符。(2)导航：设置通栏导航,将商品按服装类型进行分类，即导航基础内容为连衣裙、衬衫、毛衣、外套、半身裙、短裤、长裤。考虑到新品上市的营销策略，在导航靠左位置加入上市新品导航项一新品推荐,并

4、在该导航项的右上角添加NEW作为装饰，使该导航项更加突显，以引导消费者进入相应的推广页面中.由于该女装店铺商品种类不多，因此不需要设置二级导航.导航中也无须添加任何其他元素，白底黑字的搭配可使导航文字更加突出，方便消费者快速识别信息，也与店铺招牌的风格相呼应。(3)轮播区：鉴于店铺当前主推春夏上市新品，选择主题活动型海报，并将主题设置为“春夏上新，借此提醒消费者春夏来临，该换新了。在海报中加入春夏首推新品图片，以引起消费者关注；加入全场商品2件8折”活动时间”等活动信息，引导消费者参与活动、购买商品；加入一些装饰元素，如绿植,丰富画面的同时辅助主题阐述。(4)优惠券：在轮播海报下方安排多张风格

5、统一的优惠券，用于吸引消费者注意，促进商品销售。优惠券中安排面额、使用条件等内容，方便消费者有看和领取。(5)商品展示区：将店铺中的部分商品按照新品热卖、爆款热卖两类进行分区展示。内容方面，新品热卖区展示重点推广的商品春夏上市新品，并以商品自身优势作为信息传达点，以吸引消费者目光；爆款热卖区相当于商品陈列区”，展示以往销量较高的商品，为消费者推荐优质商品，以获得消费者的好感。设计方面，新品热卖区采用折线型陈列方式，这种排列方式符合消费者的视觉浏览路线，能给消费者带来良好的视觉感受；而爆款热卖区则采用两行三列的规范陈列方式，且在单个商品展示图中加入购物车图标，引导消费者将商品加入购物车的同时丰富

6、商品展示图的表现。(6)交互区:添加店铺标志、收藏店铺按钮、客服联系方式、返回顶部按钮，方便消费者操作的同时，加深其对品牌的记忆。(7)页尾：添加底部导航、店铺声明等，方便消费者选购商品，提高消费者对店铺的信任度。2.配色方案确定(1)考虑到店铺风格定位为简约风，所以店铺首页的大部分文字使用黑色，背景以白色为主，这也方便消费者查看店铺和商品信息。(2)考虑到店铺当前主推春夏上市新品，将海报背景、优惠券背景、页尾背景等设置为蓝色，能够给消费者以清凉之感。其中优惠券背景的蓝色比海报背景的蓝色更深，可使优惠券更加醒目，从而吸引消费者目光。(3)对购买按钮这类重点强调的内容使用红色，使其非常显眼，以引

7、导消费者点击。(4)页面中的一些装饰元素使用粉色、紫色等，以丰富画面色彩。3.构图选择店铺首页的商品图片主要采用垂直线构图，能为画面增加延伸感；而海报一侧展示主推商品，另一侧添加文案，这种平衡式构图方式可以使画面形成视觉上的稳定.这种既具动感、又具稳定感的画面能给消费者带来良好的视觉体验。另外，页面中的按钮使用点元素，使其成为焦点，从而吸引消费者注意；优惠券和部分图片边框等使用线元素，使画面效果更加丰富；每一幅图片都可以视为一个面元素，这些面元素面积、形状各不相同，可以形成一定的对比，使画面更具表现力。(二)制作过程【教师】讲解并演示制作“女装店铺首页”的步骤，要求学生边听边做1 .制作页头步

8、骤1启动Photoshop(本书使用的软件版本为Photoshop2020),单击其欢迎界面中的新建按钮，打开新建文档”对话框，在其中设置参数后单击“创建按钮新建一个文档.步骤2选择视图一新建参考线菜单项，打开新建参考线”对话框，在其中设置参数后单击确定按钮新建一条参考线。采用同样的方法再新建两条参考线，参考线的参数及效果如图所示。此时，店铺招牌的设计区域就利用参考线划分出来了。步骤3单击工具箱中的设置前景色”按钮，打开”拾色器（前景色r对话框，在符号右侧的编辑框中输入000000后单击确定按钮，将前景色设置为黑色。步骤4单击工具箱中的“横排文字工具，然后在店铺招牌的设计区域单击，当出现闪烁的

9、I时输入YUEJIFUSHI,接着按Esc键确认,最后在工具属性栏设置文本属性。（详见教材）2 .制作海报步骤1在水平505像素处新建一条参考线，然后选择“矩形工具，并在水平150像素处的参考线与新建参考线及两条垂直参考线之间绘制矩形，最后在工具属性栏设置矩形属性，以绘制海报背景。步骤2置入素材绿植l.png文件，然后将置入的素材移至海报背景的左下角。步骤3置入素材绿植2.png,f文件并将其移至海报背景的右下角。（详见教材）3 .制作优惠券步骤1在海报下方添加优惠券标题文本，并添加装饰线（由字符组成步骤2使用圆角矩形工具在优惠券标题左下方绘制一个宽度为306像素、高度为96像素、半径为10像

10、素的圆角矩形，然后在工具属性栏设置其填充色为白色（）,描边为无，接着双击其所在图层的空白处，在打开的“图层样式”对话框中单击并勾选“外发光复选框，并在该对话框右侧设置参数，最后单击确定按钮，为圆角矩形添加外发光。步骤3按Qrl+J组合键复制圆角矩形，然后按Ctrl+T组合键调出变换框,将光标移至变换框四角中的任意一角，按住“Alt键的同时按住鼠标左键并向内拖动，缩小变换框至合适大小后按Enter”键确认，接着将缩小后的圆角矩形的填充色改为深蓝色（#016591）,最后将光标移至该图层右侧的图标上，按住鼠标左键并将其拖至删除图层按钮上释放，以删除复制图层的图层样式。（详见教材）4 .制作新品热卖

11、区步骤1置入素材新品png文件并将其移至优惠券下方合适位置，然后在其右侧添加新品热卖区标题文本。步骤2新建一个图层，然后选择“多边形套索工具，在新品热卖区标题右下方绘制一个图形并为其填充黑色（#000000）步骤3置入素材服装2.jpg文件，然后将其移至步骤2绘制的图形上方。步骤4置入素材花Lpng”文件，然后将其移至步骤3添加的素材的左上角作为装饰。步骤5砧艮装素材左侧添加文本和装饰图形。（详见教材）5 .制作爆款热卖区步骤I复制新品热卖区标题并通过移动位置、修改内容制作爆款热卖区标题。步骤2新建一个图层，使用矩形选框工具”在爆款热卖区标题左下方绘制一个宽度为308像素、高度为461像素的矩

12、形选区，并为其填充浅灰色（然后按wCtrl+Dw组合键取消选区，最后置入素材”服装5.jpg”文件，并将其移至矩形上.步骤3田叵形下方添加文本。（详见教材）6 .制作交互区步骤I新建一个图层，然后在爆款热卖区下方绘制一个宽度为680像素、高度为2像素的矩形选区，接着为其填充灰色（#CndIdI）作为分割线，最后按Qrl+D组合键取消选区。步骤2复制店铺标志并将其移至矩形左下方。步骤3在店铺标志下方绘制一个宽度为106像素、高度为22像素、半径为10像素的圆角矩形，然后设置其填充色为红色（#e60012）,描边为无，接着在其上添加文本“收藏店铺，并设置其字体为方正大黑简体，字体大小为18点，字体

13、颜色为白色（I至此，收藏店铺按钮制作完成。步骤4新建一个图层，然后在店铺标志右侧绘制一个宽度为2像素、高度为90像素的矩形选区，接着为其填充灰色（#CeCeCe）,最后按Cirl+D”组合键取消选区，以绘制装饰线。（详见教材）7 .制作程步骤1新建一个图层，然后在交互区下方绘制一个宽度为1920像素、高度为360像素的矩形选区,并为其填充浅蓝色（#c7dde7步骤2在矩形上添加文本和装饰图形，页尾效果如图所示。其中，五角星、奖杯、对号、爱心形状可利用自定义形状工具绘制。（详见教材）【学生】两看、聆听、理解亍操作课堂实践【教师】通过多媒体展示“零食店铺首页效果”图片，介绍其设计思路，然后简单介绍制作步骤，并组织学生设计、制作“零食店铺首页”效果图【设计思路】页面规划、配色方案确定、构图选择【制作步骤】制作页头、制作海报、制作当季上新味区、制作精选实力派区、制作页中的横向导航、制作页尾俘4】嘘、聆配设计、制作,将制做那“零食JiS脑页“糠图造教师【教师】对学生的作品进行评价，并展示两幅制作得最好的效果图课堂小结【教师】简要总结本节课的要点女装店铺首页的设计思路女装店铺首页的制作方法设计并制作零食店铺首页效果图【学生】总结回顾知识点作业布置【教师】布置课后作业（1）总结本节课课堂内容，形成思维导图（2）利用所学知识，设计、制作更多的店铺首页效果图【学生】完成课后任务教学反思