电子商务视觉设计（全彩微课版）-电子教案.docx

《电子商务视觉设计（全彩微课版）-电子教案.docx》由会员分享，可在线阅读，更多相关《电子商务视觉设计（全彩微课版）-电子教案.docx（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、电商视觉设计教案第一章电商视觉设计基础课时内容电商视觉设计基础授课时间 90分钟课时2知识目标0 熟悉电商视觉设计的相关概念。0熟悉电商视觉设计师的工作范畴。0 熟悉电商视觉设计的准备工作。0 熟悉电商视觉设计的工作流程与设计师的岗位职责。技能目标0 掌握电商视觉设计中文字的应用方法。0 掌握电商视觉设计中常用的构图方法。素质目标0 具备较强的视觉设计专业知识。0具备良好的审美素养及设计理念。教学内容对电商企业来说，视觉设计可以在增强网店和商品吸引力的同时，增加网店 流量和成父量，给 消费者创造更好的购物体验，在消费者心目中塑造良好的品牌 形象。通过对本章的学习，读者可以 掌握电商视觉设计的相

2、关概念和电商视觉设 计师的工作范畴、电商视觉设计的准备工作、电商视觉 设计中的文字应用、电商 视觉设计常用构图方法、电商视觉设计的工作流程与设计师岗位职责等知 识。内容大纲：具体可结合本章的PPT课件进行配合讲解。第1章电商视觉设计基础1.1 电商视觉设计概述1.1.1 电商视觉设计的相关概念1.1.2 电商视觉设计的工作范畴1.2 电商视觉设计的准备1.2.1 电商视觉设计应遵循的原则1.2.2 电商视觉设计需要掌握的软件1.2.3 电商视觉设计定位1.2.4 电商文案的策划1.3 电商视觉设计文字应用1.3.1 文字的布局技巧1.3.2 文字的颜色1.3.3 文字的图形化1.4 电商视觉设

3、计的常用构图方法1.4.1 对称式构图1.4.2 简单切割构图1.4.3 对角线构图课时内容店标与店招视觉设计授课时间90分钟课时2知识目标0熟悉店标的定义。0熟悉店标的分类。0熟悉店招视觉设计方案。技能目标0掌握店标的设计制作方法。0 了解店招视觉设计实例。0 掌握将店招应用到网店中的方法。素质目标0 具备设计店招的能力。0具备设计店标的能力。教学内容店标与店招作为非常重要的网店视觉设计元素，有着非常重要的作用。店标与店招代表着网店 的形象，作为固定标志，会长期、反复出现。通过对本章的学习，读者可以掌握店标与店招的视觉 设计技巧。内容大纲：具体可结合本章的PPT课件进行配合讲解。第5章店标与

4、店招视觉设计5.1 店标视觉设计5.1.1 店标的定义5.1.2 店标的分类5.1.3 店标的设计策略技巧5.1.4 店标的设计基本原则5.1.5 店标的设计制作方法5.1.6 设计童装店标5.2 店招视觉设计5.2.1 店招视觉设计方案5.2.2 店招视觉设计规范5.2.3 设计店招实例5.2.4 将店招应用到网店中5.3 应用实例箱包店标设计实例课后练习题课后习题课后绰3品页下面使用提供的素材文件制作店招，本练习需要的素材文件如图5-72所示。图5-72素材文件（1）把素材文件置入背景图层，然后选择工具箱中的横排文字工具，在背景图层上 输入文字“彩油全场免邮”。（2）选择“图层图层样式描边

5、”命令，设置图层描边 颜色。（3）选择工具箱中的横排文字工具，在舞台上单击并输入文字“分装除外 限时限量，（4）单击工具选项栏中的“创建文字变形”按钮，弹出“变形文字”对话框, 在“样式”下拉列表框中选择“旗帜”选项，最终制作的店招效果如图5-73所示。图5-73店招效果课时内容网店首页视觉设计授课时间90分钟课时2知识目标0熟悉首页的作用。0 熟悉PC端首页框架布局。技能目标0 掌握首页分类导航模块的制作方法。0掌握首页轮播图片的制作方法。0掌握首页商品展示区的制作方法。素质目标0具备对首页视觉设计水平的评价素养。0 具备首页设计的基本素养。教学内容网店视觉设计的好坏直接影响消费者对网店的第

6、一印象，好的网店视觉设计 能提升网店形象，赢得消 费者的好感，从而促进网店内商品的销售。网店首页作 为整个网店的形象展示页，相当于实体网店的 门面，其视觉设计至关重要。通过 对本章的学习，读者可以掌握首页视觉设计基础、首页视觉设计水 平的评价指标、分类导航模块的制作、轮播图片的制作、商品展示区的制作等知识。第6章网店首页视觉设计6.1 首页视觉设计基础6.1.1 首页的作用6.1.2 首页设计思路6.1.3 PC端首页框架布局6.2 首页视觉设计水平评价指标6.2.1 首页跳失率6.2.2 首页点击率6.2.3 首页人均点击次数6.2.4 首页平均停留时间6.3 分类导航模块的制作6.3.1

7、常见分类导航表现形式632分类导航视觉设计原则6.3.3 设计制作分类导航模块6.4 轮播图片的制作6.4.1 轮播图片的视觉要点6.4.2 轮播图片的视觉文案设计6.4.3 制作轮播图片6.5 商品展示区的制作6.5.1 商品展示模块类型6.5.2 商品展示陈列优化6.5.3 设计制作商品展示区实例6.6 应用实例切割网店首页课后练习题课后练习题下面使用提供的素材文件制作网店首页。在设计网店首页时，要采用统一的风格和结 构来把各个元素组织在一起。使用的颜色、字体、图形及页面布局应能传达给消费者一个 形象化的主题，并引导他们关注网店的内容。为了醒目，可以把商品导航放在明显的地方, 或用特殊样式

8、的导航按钮标注出商品分类。首页中的图片应既能体现商品品质，又能营造 网店形象。最终制作的首页效果如图6-102所示。课后习题图6102首页效果课时内容商品详情页视觉设计授课时间90分钟课时2知识目标0熟悉商品详情页的作用、设计思路、模块设置。0 熟悉商品主图的设计规范和设计形式。0 熟悉商品细节展示区的表现形式和制作方法。0熟悉商品功效说明区的设计规范、商品卖点的展现角度。技能目标0 掌握设计商品详情页的技能。0 掌握在线设计商品主图的技能。0 掌握在线设计商品细节展示图的技能。0 掌握在线设计商品功效说明图的技能。素质目标0 具备设计商品主图和商品详情页的能力。0具备编写商品详情页文案的能力

9、。教学内容商品详情页除了能告知消费者该商品的基本情况外，还能展示细节，打消消费者的顾虑，促使 其下单购买。可以说，商品详情页直接影响着商品的转化率。一个好的商品详情页，不仅可以提高 商品转化率，还可以降低营销成本。通过对 本章的学习，读者可以掌握商品详情页视觉设计基础、 设计商品主图、设计商品细力展示区、设计商品功效说明区等知识。第7章商品详情页视觉设计7.1 商品详情页设计7.1.1 商品详情页的作用7.1.2 商品详情页设计思路7.1.3 商品详情页的模块设置7.2 商品主图设计7.2.1 商品主图的设计规范7.2.2 商品主图的设计形式7.2.3 添加文案提高商品主图点击率7.2.4 在

10、线设计商品主图7.3 商品细节展示区设计7.3.1 商品细节展示区的表现形式7.3.2 在线设计商品细节展示图7.4 商品功效说明区设计7.4.1 商品功效说明区的设计规范7.4.2 商品卖点的展现角度7.4.3 在线设计商品功效说明图课后练习题课后习题课后，/题下面为一个家居网店制作商品详情页，通过实践练习制作商品详情页。（1）进 入美图王在线设计网站，选择详情页制作，从“家居用品”分类中选 择一个适合的模板，如图7-63所示。行“或到岐I4的收簇修的冷放记昂，入色育祖图7.63选择一个适合的模块（2）在详情页模板编辑区设置各个板块的文字和图片信息，商品详情页最终 效果如图7-64所示。图7

11、-64商品详情页最终效果第8章 移动端淘宝网店装修实战课时内容移动端淘宝网店装修实战授课时间90分钟课时2知识目标0熟悉移动端网店首页与PC端网店首页的不同。0熟悉移动端网店首页模块的组成。技能目标0掌握添加网店热搜的方法。0掌握添加店铺优惠券的方法。0掌握添加上新公告的方法。0 掌握使用鹿班智能货架添加商品的方法。素质目标0具备移动端网店首页设计装修的能力。0具备使用装修模板装修网店的能力。教学内容随着移动网络的发展，越来越多的人喜欢在移动端上网购物，移动端购物已经成为一种趋势，针对移 动端的装修已成为网店商家必不可少的工作。通过对本章的学习，读者可以掌握移动网店基础装修、 设计移动端网店首

12、页、鹿班一键全店智能装修。内容大纲：具体可结合本章的PPT课件进行配合讲解。第8章移动端淘宝网店装修实战8.1 移动端网店装修基础8.1.1 移动端网店首页与PC端的不同8.1.2 移动端首页模块的组成8.2 移动端网店首页设计装修8.2.1 首页装修入口8.2.2 添加店铺热搜8.2.3 添加店铺优惠券8.2.4 添加上新公告8.2.5 鹿班智能货架添加商品8.3 应用实例鹿班一键全店智能装修课后练习题课后习题课后绰可昱页=随着淘【宝店铺装修模板的全面上线，匐宝为商家提供了更多个性化的店铺装修模板，在 帮助商家提高车肖量的同时，也提高消费者的浏览体验。当商家购买了模板后，就可以自 由使用该模

13、板。(1)进入海1宝旺铺店铺装修页面，单击“装修模板”超链接，如图8-43所示。手叽KE* 修)百页岛昼装修裘材中心内心中心HfI5 XQtTMffi XtnHW.15 日 MWB 6,31 日置 月 15 BW1 件J0 -班30大笈利石门的情为 x芯mo分类e?waFHT?we*E.页面名博咫?1句陀2王2022-05-1511 09H图843单击“装修模块超链接HR另市同 装修市场PCS：*对店首页Hlk .MW EFT Y MS跣右场CIWJ1知REBB30/fl(2)打开装修市场页面，选择相应的装修模板，如图8-44所示二放心购依修设计定制20 2 17/Wfl图844选择装修模块(

14、3)打开模板详情页面，可以试用模板，如图8-45所示。进入试用环境后, 模块顺序、排列商品等。可自由调整介闰主旺浦 WAE优息养优融等ne小号裳运手戛也克若电文=,2)e I X 399.00X 200.00已*(0)馋 f i HM立ID 茶人群初618城 0/5人吟贝相席 0/9放心购n/1世感界图8-45试用模板1.1.4 九宫格构图1.1.5 圆形构图1.1.6 三角形构图1.1.7 整体场景构图1.1.8 流程构图1.1.9 物体轮廓构图1.5 电商视觉设计工作流程与岗位职责1.5.1 电商视觉设计工作流程1.5.2 电商视觉设计岗位职责1.6 应用实例分析网店首页的设计布局 课后练

15、习题课后练习题挑选一个自己喜欢的网店，淘宝网、京东、唯品会、拼多多等平台的均可，分析 鉴赏网店首页，着重分析其色彩搭配和文字的排版是否合理，分析首页中的店招、导 航、首页轮播图、促销商品图片等内容设计。在该网店中选择一件自己喜欢的商品， 并为其编写一篇商品详情页文案，如图1-38所示。课后习题器落心我 .El-IS仆1” 中午 11：59推荐宝贝犯8季新品。9520礼遇季保价6180S*ZOO推荐宝贝礼遇攀新品Q9满额即赠送超值好礼全屋搭配购买更划算课时内容电商视觉配色设计授课时间90分钟课时2知识目标0熟悉色彩的原理。0熟悉色彩的分类。0掌握色彩的三要素。技能目标0掌握网店页面配色技巧。0

16、掌握主色、辅助色、点缀色的使用方法。0掌握网店页面整体配色方案。素质目标0具备色彩搭配能力。0具备敏锐的观察力和较强的色彩感受能力。教学内容色彩是消费者对电商视觉设计的第一感受，色彩对人的视觉冲击力非常强。好的色彩搭配可以 给人美的享受，而不好的色彩搭配则会让人很不舒服。通过对本章的学习，读者可以掌握网店页面 配色基础、网店页面配色技巧、主色、辅助色、点缀色、网店页面整体配色方案等知识。内容大纲：具体可结合本章的PPT课件进行配合讲解。第2章电商视觉配色设计2.1 电商页面配色基础2.1.1 色彩的原理2.1.2 色彩的分类2.1.3 色彩的三要素2.2 电商页面配色技巧2.2.1 色彩搭配原

17、则2.2.2 网店风格的形成要素2.3 主色、辅色、点缀色2.3.1 主色决定作品风格2.3.2 辅助色的应用2.3.3 点缀色的应用2.4 电商页面整体配色方案2.4.1 红色系的配色方案2.4.2 橙色系的配色方案2.4.3 黄色系的配色方案2.4.4 紫色系的配色方案2.4.5 绿色系的配色方案2.4.6 蓝色系的配色方案2.5 应用头例使用Color Scheme Designer配色工具课后练习题课后练习蔓1 .观察图2-34所示的电商促销广告作品，利用所学知识分析其色彩搭配。分析该作品中哪些色彩是使用了同类色，哪些色彩是使用了邻近色，哪些色彩是 使用了对 比色，哪些色彩是使用了互补

18、色。课后习题图2.34电商促销广告作品2 .分析图2-35所示的网店海报，分析哪些是主色，哪些是辅助色，哪些是点缀色，并分析其搭配是否合理。pg里88会员节1元特权定金Topi*累计实付管后无忧9998月6日0点引爆第3章商品图片的美化与修饰课时内容商品图片的美化与修饰授课时间135分钟课时3知识目标0 掌握调整商品图片大小的方法。0掌握调整商品图片色彩的方法。技能目标0掌握组合商品图片的技巧。0 掌握修饰商品图片的技巧。0 掌握添加图片特效的技巧。素质目标0 具备调整商品图片色彩的能力。0具备针对商品图片的审美意识和审美能力。教学内容网上购物的特殊之处在于消费者只能通过图片、文字、视频来了解

19、商品，图片的好坏往往是吸 引消费者的重要因素，所以商品图片的美化与修饰非常重要。一幅好的商品图片胜过千言万语，有 经验的商家都非常重视商品图片在网络销售中的重要性。每个商家都需要有清晰、漂亮的图片来宣 传自己的商品。通过对本章的学习，读者可以掌握商品图片的美化与修饰技巧等知识。内容大纲：具体可结合本章的PPT课件进行配合讲解。第3章商品图片的美化与修饰3.1 商品图片大小调整3.1.1 网店图片的常见尺寸3.1.2 调整图片尺寸3.1.3 裁剪商品图片3.1.4 校正倾斜的图片3.2 商品图片的色彩调整3.2.1 调整图片亮度和对比度3.2.2 调整图片曝光度3.2.3 调整图片色阶3.2.4

20、 调整图片曲线3.2.5 调整图片色相/饱和度3.3 商品图片的组合3.3.1 抠取商品图片3.3.2 为商品图片添加文字3.3.3 添加形状与图案3.4 商品图片的修饰3.4.1 去除背景中多余的物品3.4.2 提高图片清晰度3.5 添加图片特效3.5.1 虚化背景3.5.2 添加发光效果3.5.3 添加精美边框3.6 应用实例批处理商品图片课后练习题课后习题课后练遵1.调整曝光不足的照片。打开素材文件，如图3-89所示。在“曝光度”对话框中设置 相应的参数，对曝光不足的图片进行曝光度的调整，调整曝光度后的效果如图3-90 所示。图389打开素材文件图3-90调整曝光度后的效果2.给图片添加

21、水印效果。打开素材文件，如图3-91所示。选择工具箱中的横排文 字工具，在图片上输入需要添加的文字，并设置图层样式，还可以设置文字图层的不 透明度，添加文字后的效果如图3-92所示。水016. IMUCKGtVUn X图3-91打开素材文件图3-92添加文字后的效果第4章 电商视觉营销推广图设计课时内容电商视觉常推广图授课时间135课时3知识目标0熟悉直通车图片的设计原则。0 熟悉超级钻展图片的设计原则。技能目标0 掌握设计直通车图片的方法。0 掌握设计商品促销海报的方法。0 掌握设计超级钻展图片的方法。素质目标0 具备电商视觉营销推广图设计能力。0具备编写海报文案的能力。教学内容营销推广图是

22、商家参加电商平台活动时使用的宣传图。一张优秀的推广图不 仅可以展示商品， 还能快速吸引消费者的注意，引导消费者进一步了解商品和网 店，从而提高商品的销量。通过对本 章的学习，读者可以掌握直通车图片设计、超级钻展图片设计、商品促销海报设计等知识。内容大纲：具体可结合本章的PPT课件进行配合讲解。第4章 电商视觉营销推广图设计4.1 直通车图片设计4.1.1 直通车图片设计原则4.1.2 突出商品卖点的设计4.2 超级钻展图设计4.2.1 超级钻展概述4.2.2 超级钻展图的设计原则4.2.3 博取眼球的创意设计4.2.4 图片设计风格统一4.2.5 确定重点表现元素4.3 商品促销海报设计4.3.1 商品促销海报设计标准4.3.2 商品促销海报设计思路4.4 应用实例设计促销海报课后练习题课后习题课后纯印页=为网店制作促销广告是为了推销商品，卜面练习制作商品促销海报。（1）给图片添加 水印效果。打开素材义件，如图4-41所不。I折封顶.全场包邮图4-41打开素材文件（2）置入人物图片，选择工具箱中的横排文字工具，在图片上输入需要的文字， 为其设置不同的字体、颜色和字号，并设置图层样式，完成的商品促销海报 效果如图 4-42所示。戮要轴春天3约会淘宝女装5 J 5.7好货直降不止20%0FF图4.42商品促销海报效果