电子商务视觉设计教案
《电商视觉设计》课程教学大纲
《电商视觉设计》课程教学大纲一、课程信息二、课程目标通过本课程的学习，学生应具备以下几方面的目标：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年版.。
《电子商务视觉设计》PPT课件(共11章)第8章移动端网店用户体验设计
滑动屏幕后，界面 放大，消费者能够 比较清晰地看清界 面中的信息
界面的缩放设计
为了能够更清晰地阅读界面上的文字信息，就需要消费者点击图 片，然后滑动屏幕，放大界面
当消费者想要完 整且清晰地阅读 详情页文字信息 时，在未缩放的 情况下，无须拖 动界面，便可以 展示该部分信息
放大界面后，受 手机屏幕尺寸的 限制，界面中的 信息不能在纵向 或横向空间中完 整地展示，消费 者还需要左右上 下拖动界面才能 完整地浏览这部 分信息
在进行手机移动端店铺装修的视觉设计时， 要考虑到手机端的特点与属性，并进行相应的 变化与调整。
8.2.1 信息内容简洁，便于快速传播
• 对信息进行必要的精简化处理是让消费者快速浏览与接收信息的关键。
手机移动端商品详情界面简化版
PC端图文详情
移动端与PC端对比
8.2.1 信息内容简洁，便于快速传播
作为一款手机应用，移动端网店的页面装修也 应该遵循这样的设计理念，下面将以手机淘宝为例 进行详细介绍。
8.1.1 移动端网店店标设计
手机淘宝的店标设计思路与 PC 的网店完全不同，手机淘宝的店标直接出现在店铺头上，并 在店标右侧显示店铺名称。手机淘宝的店标适合采用图形或字母组合的形式。
店标图片
8.1.1 移动端网店店标设计
深色调显得较为沉 闷与压抑，不能给 人带来轻松感
明亮的色彩给消费 者带来豁然开朗感， 惹眼而又具有活力
两种色调对比
8.2.4 保持色彩与文字的鲜明感
在进行手机移动端店铺的视觉设计时，最好采用较为鲜亮的色彩，因为这样既能给消费者带来较 好的浏览体验，同时也能与淘宝平台所提供的背景相融合，让店铺的整体设计风格更加统一与完整。
需在图片上添加文字时， 中文字号≥30磅，英文和 阿拉伯数字字号≥20磅
《电子商务视觉规划》-教学教案
《电子商务视觉规划》-教学教案电子商务视觉规划-教学教案介绍本教学教案旨在为学生提供关于电子商务视觉规划的知识和技能。
通过此教学教案，学生将学会如何为电子商务平台设计并实施有效的视觉规划，以增强用户体验和提高销售效果。
教学目标通过研究本教案，学生将能够:- 理解电子商务视觉规划的重要性和作用- 掌握电子商务视觉规划的基本原则和要素- 学会使用各种工具和技术进行电子商务视觉规划- 分析不同电子商务平台的视觉规划案例，并提出改进建议教学内容模块一: 电子商务视觉规划概述- 电子商务视觉规划的定义和背景- 电子商务视觉规划的重要性和作用- 视觉传达的基本原则模块二: 电子商务视觉规划要素- 用户界面设计原则- 形象设计和品牌识别- 色彩选择和配色方案- 图像和多媒体素材的使用模块三: 电子商务视觉规划工具和技术- 设计软件和工具的使用- 网站和应用程序的设计原理- 用户体验测试和数据分析- 响应式设计和移动端优化模块四: 电子商务视觉规划案例研究- 分析不同电子商务平台的视觉规划案例- 提出改进建议和优化策略- 实施视觉规划并进行测试评估教学方法- 授课讲解和演示- 小组讨论和合作项目- 实际案例分析和模拟场景训练- 学生个人或团队视觉规划项目评估方法- 参与度和课堂表现- 小组项目和个人作业- 视觉规划案例分析报告- 最终视觉规划项目评估参考资料- 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程序中，然后对素材文件进行整理。
电子商务视觉设计 教案 第8章 手机移动端视觉设计
2.信息简洁，便于传播（三）手机移动端电商网店视觉设计要点1.保障速度2.考虑简洁3.重视色彩4.保持常新三、新课教学二：手机移动端电商网店首页视觉设计（-）手机移动端电商网店首页店招视觉设计1.底图为背景图片：选择好看的背景图片作为店招的底图，再搭配清晰的文字2.底图为单一纯色图片•：山于手机端电商网店篇幅限制，经常有很多商家在设计手机移动端电商网店店招时采用单一纯色图片，这样的设计会使文字所传达的信息更加清晰，一目了然。
3.底图为促销活动内容：在设计时把促销活动的图片、主题或文字内容作为背景，不仅迎合设计主题，而且可以强化优惠信息，吸引消费者眼球。
（二）手机移动端电商网店首页焦点图视觉设计手机移动端电商网店首页焦点图也叫轮播图，和PC端电商网店首页海报视觉设计相同，通常被放置在店铺的首页，也就是手机第一屏中可以被消费者快速看到的关键位置。
但是，由于手机屏幕较小，又要展示产品和促销活动等内容，所以主题要简明突出、文字要清晰准确、层次要主次分明。
在制作手机移动端电商网店首页焦点图时，轮播的图片要控制在4张以内。
（三）手机移动端电商网店首页优惠券视觉设计优惠券可以抵减购买商品时的费用，是商家用于吸引消费者眼球，促进消费者达成购买的重要营销手段。
在通常情况下优惠券被放置在手机移动端电商网店首页的开端位置，以便消费者可以第一时间找到，快速引起消费者兴趣，激起购买欲望（四）手机移动端电商网店首页商品分类导航区视觉设计在设计手机移动端电商网店首页商品分类导航区时.，由于手机的屏幕限制，一定要把握好显示尺寸与比例，力求简明清晰，易于消费者选择。
分类导航区通常紧接店铺优惠券，起到快速导航的作用。
（五）手机移动端电商网店首页商品展示区视觉设计在商品分类导航区之后出现的就是商品展示区。
与PC端电商网店一样，商品展示区主要用于展示商品，但因空间局限，不能对商品进行过多装饰与美化，只能进行单排或双排的展示，以此来迎合手机移动端电商网店目标群体求快、求变的心理, 方便其浏览和购买。
《电子商务视觉设计》教学大纲
《电子商务视觉设计》教学大纲一、课程说明1.课程代码：xxxxxxxxxx2.课程名称：视觉设计3.课程学时：72学时4.课程学分：3分5.适用专业：电子商务专业6.先修课程：PHOTODHOP二、课程性质、目的与任务1.性质：本课程是电子商务专业大一第二学习开设的专业基础课程，教学方式为课堂教学，结合教育见习实践，为该专业学生毕业后从事网店美工职业做好理论和技能的准备。
2.目的：通过本课程的学习，培养学生行业认知理解力和实践操作能力。
随着电子商务行业的兴起和飞速发展，以及企业竞争的不断加剧，网上店铺蓬勃发展的同时，简单枯燥的网店页面已经远远不能打动消费者，在这种趋势下电子商务企业的岗位用人需求也日渐细分化，“网店美工”这一类技术人才在电子商务快车上的作用凸显出来。
当我们深入了解那些脱颖而出的店铺时，会发现这些店铺不仅有着过硬的爆款商品，还有店家颇具视觉冲击力的装修设计和吸引消费者眼球的亮点，完成课程学习可以顺利解决这一问题。
3.任务：本课程理论结合实践，要求学生学期内完成八个章节的学习。
了解绪论、电商视觉设计体现、电商视觉影像传达等内容，掌握电商商品图片的处理、电商网店首页视觉设计、电商网店详情页视觉设计和推广图与促销活动页视觉设计等内容，理解手机移动端视觉设计等内容。
三、学时分配四、教学内容第1章绪论目标和要求：了解视觉设计的内容；掌握电商网店的视觉定位；了解视觉营销的内容。
能够掌握商品文案的策划；能够拍摄产品；能够处理图片。
重点和难点：电商网店视觉图像的色彩调整；电商网店的字体设计，电商网店视觉设计创意及构图。
第2章电商视觉设计体现目标和要求：了解电商网店视觉体现的内容；掌握电商网店视觉风格的概念；了解广告视觉传达的概念及意义。
能够掌握商品视觉体现的主要内容；能够根据商品确定电商网店的风格。
重点和难点：商品视觉体现；电商视觉营销策略。
第3章电商视觉影像传达目标和要求：了解拍摄常用的器材；掌握构图的含义与目的；了解开播前必不可少的准备工作。
电子商务视觉设计课程教学大纲教案
《电子商务视觉设计》教学大纲教案一、课程信息课程名称：电子商务视觉设计课程类别：专业核心课课程性质：必修计划学时：42计划学分：3先修课程：无选用教材：《电子商务视觉设计》适用专业：本书可作为高等院校电子商务类和市场营销类等专业课程教材。
课程负责人：二、课程简介本课程以电子商务视觉设计中的行业应用为落脚点，采用理论与案例相结合的方式，详细介绍了PC端与移动端电商网店的视觉设计思路和具体的实现方法，对需要掌握的各种设计技能以案例的形式进行实战制作。
本课程共分11章，内容包括初识电商视觉设计、电商网站视觉配色设计、店铺标志视觉设计、店铺首页视觉设计、商品详情页视觉设计、高点击率推广图片视觉设计、网店促销活动页视觉设计、移动端网店用户体验设计、手机移动端淘宝店铺视觉设计、手机移动端微店视觉设计及商品短视频视觉设计等。
三、课程教学要求注：“课程教学要求”栏中内容为针对该课程适用专业的专业毕业要求与相关教学要求的具体描述。
“关联程度”栏中字母表示二者关联程度。
关联程度按高关联、中关联、低关联三档分别表示为“H”“M”或“L”。
“课程教学要求”及“关联程度”中的空白栏表示该课程与所对应的专业毕业要求条目不相关。
四、课程教学内容五、考核要求及成绩评定注：此表中内容为该课程的全部考核方式及其相关信息。
六、学生学习建议（一）学习方法建议1．理论配合案例操作进行学习，提高学生的电子商务视觉设计能力；2．开展电子商务视觉设计实践，根据设计效果及数据分析评估学生电子商务视觉设计水平。
（二）学生课外阅读参考资料《淘宝天猫网店美工：商品拍摄店铺装修视频制作（视频指导版第2版）》，何叶马小红李淑君主编，2021年；七、课程改革与建设本课程紧跟时代潮流，涵盖了电子商务视觉设计的各个方面，充分考虑课程要求与教学特点，以必需和实用为准则，在简要而准确地介绍概念和理论的基础上，重点讲解行之有效的设计方法与技巧，着重培养学生的实际设计水平。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
视觉识别系统规范手册就是用来规范企业形象的图书，内容主要分为基本设计要素和应用设计要素两个部分。
二、视觉传达设计
视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素，利用视觉形象传达特定的信息给受众，从而使被传达对象产生影响的过程。
视觉传达的作用是让人与人之间利用“看”的形式进行交流，是通过视觉语言进行表达传播的方式。
第二节电商视觉设计前的准备
一、网店的视觉定位
视觉定位，就像人的风格定位一样。
不同的产品对应不同的视觉定位，不同的消费群体有着不同的视觉偏好，关键是要将产品的定位和卖家的视觉偏好进行整合，使店铺在风格上能够呈现出一种整体的效果。
（一）营销型网店的视觉定位原则在于营造促销氛围，主要体现在通过对比强烈的颜色突出显示打折、包邮、半价等优惠活动的字眼。
（二）品牌型网店的视觉定位原则是突出品牌优势，整体设计风格偏向于简洁、干净，重点突出品牌Logo的形象代言等元素。
（三）服务关系型网店的视觉定位原则是包装服务形象。
二、明确视觉规范的作用
制定视觉规范有以下几个方面的意义：
统一识别：视觉规范可以确保网店在整体风格、售前售后服务和产品包装形象等方面都保持整体风格的一贯性，既有利于买家识别和区分店铺，也可以避免买家在浏览时出现理解困难，甚至是理解错误的现象。
节约资源：除了活动海报等个性模块之外，其他的页面和模块参照规范进行设计可以极大地减少设计时间，从而达到节约资源的目的。
重复利用：设计相同属性的模块或页面时，执行视觉规范有利于减少无关的信息，方便买家的阅读和信息传递。
同时，视觉规范也有利于美工之间的协调工作。
标准化的视觉规范不但可以节约设计时间，还可以避免出错。
第三节电商视觉设计黄金构图法
（二）对比配色
（三）色调配色
（四）近似配色
（五）单重点配色
（六）分隔式配色
（七）夜配色
二、色彩的联觉聚焦图片
三、网店风格的形成要素
（一）店铺的主要风格
常见的店铺风格有简约清爽型、商业型、炫酷型、可爱型和特色型等。
（二）产品的情绪
产品情绪是指产品本身赋予色彩的情感。
（三）活动的主题气氛
店铺的主题气氛主要通过店铺的配色和装饰来烘托。
（四）店铺的包装色彩
在确定网店主题色调时，应该与商品特性相符合，或者与目标消费群体的特性相符合。
（五）VI配色
VI配色是指在网店配色中提取VI或包装中的主色彩，主要分为单色VI、双色VI和多色VI。
第二节网店页面的配色误区
一、色彩过多
二、背景和文字对比不强烈
三、过分强调色彩的刺激度
第三节网店的整体配色案例
一、店铺页面主色设计
二、店铺页面辅色设计
三、店铺商品配色
2．熟练掌握首焦轮播区的设计技巧。
1．掌握店招的设计规范及技巧。
教学重点
2．掌握首焦轮播区的设计技巧。
1．熟悉店招的设计规范及技巧。
教学难点
2．熟练运用首焦轮播区的设计技巧。
教学方法讲授法、案例法
课时数6课时
教学内容
第一节首页视觉水平的四大指标
一、首页跳失率
首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问次数占该入口总访问次数的比例。
以淘宝为例，买家进入店铺的店铺首页渠道有很多，大致可以分为以下四种渠道，如下图所示。
二、首页点击率
首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率=首页点击量÷首页展现量）。
通过首页点击率可以看出店铺推广的宝贝是否吸引人，首页点击率越高，说明宝贝越吸引买家。
有了展现就会产生点击，有了点击就会有流量。
三、首页人均点击次数
首页人均点击次数，指在一段时间内人均点击了多少次。
首页人均点击次数可以用来测试用户粘度，如果首页的客户体验做得很差，让访客进入首页后不知所措，找不到自己
2．掌握手机淘宝店铺详情页的设计方法。
教学重点
1．熟练掌握手机移动端淘宝店铺首页设计的优化技巧。
2．熟练掌握手机淘宝店铺详情页的设计方法。
教学难点
1．熟练运用优化技巧对手机移动端淘宝店铺首页进行优化。
2．熟练运用手机淘宝店铺详情页的设计方法。
教学方法 讲授法、案例法
课时数 6课时
教学内容
第一节 手机移动端淘宝店铺首页优化设计
与PC 端店铺首页的设计方法类似，手机移动端店铺首页同样可以根据商品、店铺品牌等定位的不同采用不同的设计风格与设计方式。
一、店招的优化设计
手机移动端店铺的店招设计主要包括店铺标识与店招底图的设计。
店招底图作为店招的主要装饰元素，可以用其突出店铺的特色与形象
二、轮播图片优化设计
轮播图片也称为焦点图，它通常被放在店铺的首焦页面，也就是第一屏中能被消费者快速看到的位置。
轮播图内容要尽量简洁，文字表现清晰，主次分明且能达到快速传播的手机
移动
端店
铺首
页
（二）商品及辅助配色：类似色调
类似色调的色值如下图所示。
三、案例配色扩展
（一）扩展配色：互补色系
互补色系的色值和效果如下图所示。
（二）扩展配色：同类色系
同类色系的色值和效果如下图所示。
四、案例设计流程
第五节母婴微店视觉设计案例实操
一、制作微店店招
二、制作首页导航
三、制作促销广告
四、制作特价专区
五、制作商品详情页
归纳与提高
通过本章的学习，我们对手机移动端微店视觉设计之前的准备活动有了一个比较全面的认识，掌握了微店首页、商品详情页与底部导航的优化设计等内容。
建议读者在对手机移动端微店视觉设计进行准备活动时注意几点：无论是淘宝还是微店，店铺视觉设计得是否能够抓住消费者的目光、是否能够在同质化愈加严重的今天突出自己商品的特色都是至关重要的。
在微店中，由于版幅所限，要想让消费者对微店和商品有更全面的了解，就必须对微店页面进行合理地规划和设计。