电子商务视觉设计 课件 教学大纲
电子商务视觉设计PPT课件(共8章)第6章 电商网店详情页视觉设计
学习重点和难点
• 学习重点： 电商网店详情页视觉设计方法
• 学习难点： 电商网店详情页视觉设计制作
第一节 电商网店详情页认知
1.1 详情页意义
电商网店详情页是展示商品信息的页面，通常消费者注意到感兴趣的首页后， 最想浏览的就是详情页，它直接决定了电商网店能否留住消费者，达成交易。
1.2 详情页营销流程
第四节 产品细节图视觉设计
4.3 商品细节图视觉设计案例——品牌女鞋 案例效果：选择“直线工具”，性栏中将填充颜色设置为黑色，描边颜色设置
为无，描边宽度设置为1像素，然后绘制指示连接线，完成最终效果图。
第五节 商品功能图视觉设计
5.1 商品功能图认知
如下图所示商品功能图对商品的功能或作用进行翔实、透彻的分析和说明。 在整个商品详情页中商品功能图的位置相对靠后，能坚持浏览到这里的消费者说 明已经对商品产生了很大兴趣。因此，商品功能图视觉设计的好坏，直接影响消 费者对商品的持续认可，进而影响消费者下单。
（四）服务型：详情页中保修费用全免、送货上门、无忧退换等有保障的售后 服务虽然不计入商品价值，却深受消费者喜爱。
（五）附加型：有时可以通过详情页中体现的附加价值来提高店铺的销量和消 费者的黏性。该类型详情页虽然是老客户的服务通道及专属的优惠力度，但是新 客户也会有相应的礼品。
第二节 商品主图视觉设计
第二节 商品主图视觉设计
2.2 商品主图设计形式 （一）摆拍设计商品主图的基本要求是可以清晰
地展示商品全貌。商品摆拍可以使用纯白背景或简洁 背景，这种设计的优点是直接、干净，可以让消费者 快速了解商品的外观与颜色，最能直观地表现商品特 点和属性。
（二）场景设计场景设计是指通过模特进行商品 展示，或者根据产品特点和用途搭建生活化、场景化 的环境。这种设计在展示商品的同时，还可以起到烘 托商品氛围的作用。场景设计通常需要较高的成本和 一定的拍摄技巧运用不当会适得其反。
《电子商务视觉设计》-教学大纲
《电子商务视觉设计（第2版）》教学大纲一、课程信息课程名称：电子商务视觉设计课程类别：专业核心课课程性质：必修计划学时：42计划学分：3先修课程：无选用教材：适用专业：本书可作为高等院校电子商务类和市场营销类等专业课程教材。
课程负责人：二、课程简介本课程以电子商务视觉设计中的行业应用为落脚点，采用理论与案例相结合的方式，详细介绍了PC端与移动端电商网店的视觉设计思路和具体的实现方法，对需要掌握的各种设计技能以案例的形式进行实战制作。
本课程共分11章，内容包括初识电商视觉设计、电商网站视觉配色设计、店铺标志视觉设计、店铺首页视觉设计、商品详情页视觉设计、高点击率推广图片视觉设计、网店促销活动页视觉设计、移动端网店用户体验设计、手机移动端淘宝店铺视觉设计、手机移动端微店视觉设计及商品短视频视觉设计等。
三、课程教学要求注：“课程教学要求”栏中内容为针对该课程适用专业的专业毕业要求与相关教学要求的具体描述。
“关联程度”栏中字母表示二者关联程度。
关联程度按高关联、中关联、低关联三档分别表示为“H”“M”或“L”。
“课程教学要求”及“关联程度”中的空白栏表示该课程与所对应的专业毕业要求条目不相关。
四、课程教学内容五、考核要求及成绩评定注：此表中内容为该课程的全部考核方式及其相关信息。
六、学生学习建议（一）学习方法建议1．理论配合案例操作进行学习，提高学生的电子商务视觉设计能力；2．开展电子商务视觉设计实践，根据设计效果及数据分析评估学生电子商务视觉设计水平。
（二）学生课外阅读参考资料七、课程改革与建设本课程紧跟时代潮流，涵盖了电子商务视觉设计的各个方面，充分考虑课程要求与教学特点，以必需和实用为准则，在简要而准确地介绍概念和理论的基础上，重点讲解行之有效的设计方法与技巧，着重培养学生的实际设计水平。
本课程列举了大量电子商务视觉设计的精彩案例，以激发读者的学习兴趣，并引导其进一步深入思考，使其通过案例讲解真正达到学以致用、举一反三的学习效果。
《电商视觉设计》课件——1.1电商视觉设计的概念
1.1.1 视觉识别设计
在2017年的法兰克福车展上，宝马对外发布了经过扁平化处理的单色Logo， 并将传承百年的经典配色调整为黑白色，这个新Logo专为旗下高端的“精英” 车型使用，其简约和纯粹的风格更加凸显了品牌的悠久历史和引以为傲的奢华 品质。
计来传达IBM的优点和特点，并使公司的设计统一化”的倡导，
因此，IBM公司首先推行了CIS设计。
随后，一些大中型企业也纷纷将CIS作为一种企业经营战略， 并希望他成为企业形象传播的有效手段。
1.1.1 视觉识别设计
企业形象识别系统（CIS） 一般分为三个方面： • 理念识别（MI） • 行为识别（BI） • 视觉识别（VI）
1
视觉识别设计 视觉传达设计 电商视觉设计
谢谢观看！
1.1.3 电商视觉设计
(1)图片美化 图片是网店商品的展现形式，拍摄的商品 图片一般是不能直接使用的，电商视觉设计人 员通常需要运用图片处理软件对图片做一些设 计和美化，以吸引买家的注意力。
对比商品图片进行美化后的效果，对商 品图片进行校色、适当添加促销文案，以及丰 富图片内容等。
1.1.3 电商视觉设计
1.1.2 视觉传达设计
视觉传达设计的典型案例是可口可乐。 在20世纪30年代，红白装圣诞老人形象 一直被用在可口可乐公司的广告活动中，久 而久之，人们就以为圣诞老人是身穿红白装 的老人，而在此之前圣诞老人的打扮是五颜 六色的。 视觉识别设计的影响力于此可见一斑。
图3：红白装圣诞老人形象
1.1.3 电商视觉设计
(2)网店装修 利用色彩、图像、文字、创意的排版方式 进行网店装修后，可增强网店的吸引力。 一个网店通常包括导航、基础设置、促销、商 品描述、商品分类、商品展示等模块，电商视 觉设计师通过对网店中的模块进行编辑，能够 快速完成对模块的装修。
《电商视觉设计》课程教学大纲
《电商视觉设计》课程教学大纲一、课程信息二、课程目标通过本课程的学习，学生应具备以下几方面的目标：1.该课程为一门创业引导实践课程，应培养学生养成较好的互联网视觉审美意识和对基本理论体系的驾驭能力。
2.了解并掌握互联网平台视觉设计理论及设计基本方法。
通过对课程理论和基本方法的熟识，能更有针对性的驾驭该课程。
3.了解互联网视觉设计的基本内容和服务范围。
通过对设计服务范围及内容的了解，使学生在本领域范围内更加精准、有效的对知识加以运用。
4.了解并把握顾客视觉浏览习惯和购物心理。
在课程内容中适当增加部分消费学、心理学等内容介绍，更好的引导学生了解消费习惯和心理。
5.提高店铺视觉设计层次，并引导顾客形成点击，促进购买，进而增加店铺产品转化率。
6.根据数据分析设计细节，对症下药，解决设计各个环节问题。
课程目标对毕业要求的支撑关系表三、教学内容与预期学习成效4567四、教学目标达成度评价1.教学目标1，2的达成度通过课堂练习、讨论和课后作业的形式进行综合考评。
2.教学目标3的达成度通过课堂练习和课后作业的形式进行综合考评。
3.教学目标4、5、6的达成度通过视觉设计作品设计、修改、最终展示效果和客户反馈等等形式综合考评。
五、成绩评定课程成绩包括4个部分，分别为平时出勤、课堂作业、课后作业、综合实践作品。
具体要求及成绩评定方法如下：1．平时出勤。
平时出勤采用“只扣分，不加分”的方法计算成绩，无故旷课一次，将在总评成绩中扣除2分。
迟到早退5次者，取消本门课程的考核资格。
2．课堂作业。
本课程的课堂作业主要分为四个部分：视觉设计文案策划和撰写、店铺首页设计、店铺详情页设计、店铺专题页设计。
该内容包含了学生的学习态度、对设计的艺术感知度和熟练度。
占总成绩的30%。
3．课后作业。
该部分内容包含布置的课后练习等内容。
占总成绩的20%。
4．综合实践作品。
该作品是对本课程内容的整体呈现。
占总成绩的50%。
六、课程教材及主要参考书1. 建议教材淘宝大学.《视觉不哭》.电子工业出版社，2014年版.2.主要参考书1. 阿里巴巴商学院.《新电商精英系列教程》.电子工业出版社，2016年版.2. 刘涛.《深度解析淘宝运营》.电子工业出版社，2015年版.。
《电子商务视觉规划》-教学教案
《电子商务视觉规划》-教学教案电子商务视觉规划-教学教案介绍本教学教案旨在为学生提供关于电子商务视觉规划的知识和技能。
通过此教学教案，学生将学会如何为电子商务平台设计并实施有效的视觉规划，以增强用户体验和提高销售效果。
教学目标通过研究本教案，学生将能够:- 理解电子商务视觉规划的重要性和作用- 掌握电子商务视觉规划的基本原则和要素- 学会使用各种工具和技术进行电子商务视觉规划- 分析不同电子商务平台的视觉规划案例，并提出改进建议教学内容模块一: 电子商务视觉规划概述- 电子商务视觉规划的定义和背景- 电子商务视觉规划的重要性和作用- 视觉传达的基本原则模块二: 电子商务视觉规划要素- 用户界面设计原则- 形象设计和品牌识别- 色彩选择和配色方案- 图像和多媒体素材的使用模块三: 电子商务视觉规划工具和技术- 设计软件和工具的使用- 网站和应用程序的设计原理- 用户体验测试和数据分析- 响应式设计和移动端优化模块四: 电子商务视觉规划案例研究- 分析不同电子商务平台的视觉规划案例- 提出改进建议和优化策略- 实施视觉规划并进行测试评估教学方法- 授课讲解和演示- 小组讨论和合作项目- 实际案例分析和模拟场景训练- 学生个人或团队视觉规划项目评估方法- 参与度和课堂表现- 小组项目和个人作业- 视觉规划案例分析报告- 最终视觉规划项目评估参考资料- Tidwell, J. (2010). Designing interfaces: Patterns for effective interaction design. O'Reilly Media.- Landa, R. (2012). Graphic design solutions. Cengage Learning.- Williams, R. (2019). The Non-Designer's Design Book. Peachpit Press.教学时长本教学教案根据课程需要，建议授课时长为16学时。
《电子商务视觉设计》-教学教案
二、商品短视频构图要素与构图法则
在拍摄商品短视频时，拍摄的距离、角度、光线等因素不是一成不变的，可以根据具体情况随时进行调整。
在进行商品画面构图时，需要注意以下四个要素。
1．线条
2．色彩
3．光线
4．影调
在进行商品短视频拍摄取景时，要遵循以下构图法则。
1．主体明确
2．主体陪衬
3．合理布局
4．场景衬托
5．画面简洁
三、商品拍摄景别
在拍摄商品短视频时，需要展现商品的整体形象、不同角度的外观及内部细节等，所以经常采用全景、中景、近景、特写等不同的景别进行拍摄。
1．全景
2．中景
3．近景
4．特写
四、拍摄方向与拍摄角度
拍摄方向主要有正面、前侧面、侧面、背面等，通过选择不同的拍摄方向，可以多方位地展示商品。
在拍摄方向不变的前提下，通过改变拍摄的高度可以使画面的透视关系发生改变。
由于高度的变化，常常用到的有平视、仰视、俯视等拍摄角度。
对于拍摄高度的选择，要根据所要表现的主体商品和周围的环境来确定。
例如，在服装视频拍摄中，常常采用平视角度拍摄上衣、裙装，采用仰视角度拍摄裤子、靴子等，采用俯视角度拍摄内衣等商品。
第三节主图视频设计案例实操
一、导入并整理素材
制作商品主图视频前，首先要将所用的素材导入Premiere程序中，然后对素材文件进行整理。
《电子商务视觉设计》教学大纲
《电子商务视觉设计》教学大纲一、课程说明1.课程代码：xxxxxxxxxx2.课程名称：视觉设计3.课程学时：72学时4.课程学分：3分5.适用专业：电子商务专业6.先修课程：PHOTODHOP二、课程性质、目的与任务1.性质：本课程是电子商务专业大一第二学习开设的专业基础课程，教学方式为课堂教学，结合教育见习实践，为该专业学生毕业后从事网店美工职业做好理论和技能的准备。
2.目的：通过本课程的学习，培养学生行业认知理解力和实践操作能力。
随着电子商务行业的兴起和飞速发展，以及企业竞争的不断加剧，网上店铺蓬勃发展的同时，简单枯燥的网店页面已经远远不能打动消费者，在这种趋势下电子商务企业的岗位用人需求也日渐细分化，“网店美工”这一类技术人才在电子商务快车上的作用凸显出来。
当我们深入了解那些脱颖而出的店铺时，会发现这些店铺不仅有着过硬的爆款商品，还有店家颇具视觉冲击力的装修设计和吸引消费者眼球的亮点，完成课程学习可以顺利解决这一问题。
3.任务：本课程理论结合实践，要求学生学期内完成八个章节的学习。
了解绪论、电商视觉设计体现、电商视觉影像传达等内容，掌握电商商品图片的处理、电商网店首页视觉设计、电商网店详情页视觉设计和推广图与促销活动页视觉设计等内容，理解手机移动端视觉设计等内容。
三、学时分配四、教学内容第1章绪论目标和要求：了解视觉设计的内容；掌握电商网店的视觉定位；了解视觉营销的内容。
能够掌握商品文案的策划；能够拍摄产品；能够处理图片。
重点和难点：电商网店视觉图像的色彩调整；电商网店的字体设计，电商网店视觉设计创意及构图。
第2章电商视觉设计体现目标和要求：了解电商网店视觉体现的内容；掌握电商网店视觉风格的概念；了解广告视觉传达的概念及意义。
能够掌握商品视觉体现的主要内容；能够根据商品确定电商网店的风格。
重点和难点：商品视觉体现；电商视觉营销策略。
第3章电商视觉影像传达目标和要求：了解拍摄常用的器材；掌握构图的含义与目的；了解开播前必不可少的准备工作。
电子商务视觉设计 教案
《电商视觉设计》配套教学教案第一章电商视觉设计基础挑选一个自己喜欢的网店，淘宝网、京东、唯品会、拼多多等平台的均可，图1-38分析网店首页第2章电商视觉配色设计1．观察图图2-34电商促销广告作品所示的网店海报，分析哪些是主色，哪些是辅助色，哪些是色，并分析其搭配是否合理。
图2-35网店海报第3章商品图片的美化与修饰1．调整曝光不足的照片。
打开素材文件，如图图3-89打开素材文件图3-90调整曝光度后的效果2．给图片添加水印效果。
打开素材文件，如图3-91 所示。
选择工具箱中的字工具，在图片上输入需要添加的文字，并设置图层样式，还可以设置文透明度，添加文字后的效果如图3-92 所示。
图3-92添加文字后的效果第4章电商视觉营销推广图设计为网店制作促销广告是为了推销商品，下面练习制作商品促销海报。
图4-41打开素材文件）置入人物图片，选择工具箱中的横排文字工具，在图片上输入需要的文为其设置不同的字体、颜色和字号，并设置图层样式，完成的商品促销海报效果如图所示。
图4-42商品促销海报效果第5章店标与店招视觉设计下面使用提供的素材文件制作店招，本练习需要的素材文件如图图5-72素材文件）把素材文件置入背景图层，然后选择工具箱中的横排文字工具，在背景输入文字“彩油全场免邮”。
（2）选择“图层”|“图层样式”|“描边”命令，设置图层描边（3）选择工具箱中的横排文字工具，在舞台上单击并输入文字“分装除外限时限量”。
（4）单击工具选项栏中的“创建文字变形”按钮，弹出“变形文字””下拉列表框中选择“旗帜”选项，最终制作的店招效果如图5-73 所示。
图5-73店招效果第6章网店首页视觉设计下面使用提供的素材文件制作网店首页。
图6-102首页效果第7章商品详情页视觉设计下面为一个家居网店制作商品详情页，通过实践练习制作商品详情页。
图7-63选择一个适合的模块）在详情页模板编辑区设置各个板块的文字和图片信息，商品详情页最终所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《电子商务视觉设计》教学大纲
一、课程说明
1.课程代码：XXXXXXXXXX
2.课程名称：视觉设计
3.课程学时：72学时
4.课程学分：3分
5.适用专业：电子商务专业
6.先修课程：PHOTODUOP
二、课程性质、目的与任务
1.性质：本课程是电子商务专业大一第二学习开设的专业基础课程，教学方式为课堂教学，结合教育见习实践，为该专业学生毕业后从事网店美工职业做好理论和技能的准备。
2.目的：通过本课程的学习，培养学生行业认知理解力和实践操作能力。
随着电子商务行业的兴起和飞速发展，以及企业竞争的不断加剧，网上店铺蓬勃发展的同时，简单枯燥的网店页面己经远远不能打动消费者，在这种趋势下电子商务企业的岗位用人需求也日渐细分化，“网店美工”这一类技术人才在电子商务快车上的作用凸显出来。
当我们深入了解那些脱颖而出的店铺时，会发现这些店铺不仅有着过硬的爆款商品，还有店家颇具视觉冲击力的装修设计和吸引消费者眼球的亮点，完成课程学习可以顺利解决这一问题。
3.任务：本课程理论结合实践，要求学生学期内完成八个章节的学习。
了解绪论、电商视觉设计体现、电商视觉影像传达等内容，掌握电商商品图片的处理、电商网店首页视觉设计、电商网店详情页视觉设计和推广图与促销活动页视觉设计等内容，理解手机移动端视觉设计等内容。
三、学时分配
四、教学内容
第1章
目标和要求：了解视觉设计的内容；掌握电商网店的视觉定位；了解视觉营销的内容。
能够掌握商品文案的策划；能够拍摄产品；能够处理图片。
重点和难点：电商网店视觉图像的色彩调整；电商网店的字体设计，电商网店视觉设计创意及构图。
第2章
目标和要求：了解电商网店视觉体现的内容；掌握电商网店视觉风格的概念；了解广告视觉传达的概念及意义。
能够掌握商品视觉体现的主要内容；能够根据商品确定电商网店的风格。
重点和难点：商品视觉体现；电商视觉营销策略。
第3章
目标和要求：了解拍摄常用的器材；掌握构图的含义与目的；了解开播前必不可少的准备工作。
能够掌握电商商品拍摄基本的构图方法；能够正确选择电商商品拍摄的背景。
重点和难点：电商商品拍摄中商品的陈列与摆设；电商商品视频拍摄的流程。
第4章
目标和要求：了解十六种常见的构图方法；掌握精细处理图片的方法；掌握抠取图片的常用方法；掌握丰富商品图片的方法。
能够运用Photoshop软件相关操作与命令美化图片；能够完成电商网店装修所需素材的处理与制作。
重点和难点：商品图片的处理方法；利用Photoshop软件的相关操作完成电商网店的装修。
第5章
目标和要求：了解和认知店电商网店页；掌握电商网店首页的店招视觉设计；掌握电商网店首页的店徽视觉设计；掌握电商网店首页的海报视觉设计。
能够利用Photoshop软件的相关操作与命令制作电商网店首页内容；能够完成电商网店首页装修的整体布局与处理。
重点和难点：电商网店首页店招、店徽和海报的视觉设计；利用Photoshop软件的相关操作，完成电商网店首页的视觉设计。
第6章
目标和要求：了解和认知电商网店详情页；掌握商品主图视觉设计方法；掌握关联营销图视觉设计方法；掌握商品细节图视觉设计方法；掌握商品功能图视觉设计方法；掌握商品展示设计方法。
能够运用Photoshop软件相关操作与命令制作网店店铺详情页；能够完成电商网店详情页装修。
重点和难点：电商网店详情页视觉设计方法；电商网店详情页视觉设计制作。
第7章
目标和要求：了解和认知推广图与促销活动页；掌握推广图意义；掌握推广图视觉设计方法；掌握促销活动页设计原则；掌握促销活动页视觉设计方法。
能够运用Photoshop软件相关操作与命令进行推广图视觉设计；能够运用Photoshop软件相关操作与命令进行促销活动页视觉设计。
重点和难点：电商网店推广图与促销活动页视觉设计；推广图与促销活动页和海报的区别。
第8章
目标和要求：了解手机移动端视觉设计理论；掌握手机移动端电商网店首页视觉设计方法;掌握手机移动端电商网店详情页视觉设计方法;掌握手机移动端微店首页视觉设计方法; 掌握手机移动端微店详情页视觉设计方法；掌握手机移动端微店尾部导航视觉设计方法。
能够运用Photoshop软件相关操作与命令制作手机移动端电商网店视觉设冲；能够运Photoshop 软件相关操作与命令制作手机移动端微店视觉设计。
重点和难点：手机移动端电商网店视觉设计；手机移动端电商网店视觉设计与PC端电商网店视觉设计的区别。
五、成绩考核
注重理论考察与实践相结合，考试形式为上机操作，过程（60%）+期末（40%）=总成绩（100%）。