《电商视觉设计》课程资料(BD)
电商视觉设计教程
1 视觉识别设计
宝马标志的变革
1.1 什么是视觉设计
2 视觉传达设计
视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素， 利用视觉形象传达特定的信息给受众，从而使被传达对象产生影响的过程。
1.2 电商视觉设计前的准备
1
网店的视觉定位
2
明确视觉规范的作用
1.2 电商视觉设计前的准备
1 网店的视觉定位
2 色彩的联觉聚焦图片
2.1 网店页面的配色方案
2 色彩的联觉聚焦图片
主要以浅紫色为主，好像与 我想要购买的零食形象色彩 不搭调，这种图片应该不是 我需要的。不在关注图片中 的信息与内容，放弃点击
主要以橙黄色为主，与我想要 购买的零食形象相匹配，说不 定正是零食相关的图片，我要 继续了解一下。继续关注图片 信息，并可能执行点击操作
1.2 电商视觉设计前的准备
1 网店的视觉定位
1.2 电商视觉设计前的准备
1 网店的视觉定位
1.2 电商视觉设计前的准备
2 明确视觉规范的作用
1
统一识别
2
节约资源
3
重复利用
1.2 电商视觉设计前的准备
2 明确视觉规范的作用
可以确保网店在整体风格、售前售后服务和产品包 统一识别 装形象等方面都保持整体风格的一贯性，既有利于买家 识别和区分店铺，也可以避免买家在浏览时出现理解困
2.2 网店页面的配色误区
3 过分强调色彩的刺激度
选用黄色作为食品 2.3 网店的整体配色案例 店铺的店招背景，
可以刺激浏览者的 食欲，引导消费者 购买店铺中的产品
选用黄色的商品图，与导 航栏的颜色相呼应，给人 一种上下统一的视觉感受
选用灰色作为店铺的主色 调，可以更好地凸显产品 的诱人与美味
《电子商务视觉设计》-教学大纲
《电子商务视觉设计（第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年版.。
《电子商务视觉设计(第2版)》-课程标准
电子商务视觉设计（第2版）》课程标准一、课程性质该课程是电子商务专业核心课程，同时也是电子商务专业的一门面向职业岗位（群）的综合性实训课程。
本课程以PhotoshopCC2018和PremiereCC2019为操作平台，依据电子商务视觉设计工作任务规划课程内容，以理论+实例的形式全面介绍了PC端电商网店与移动端电商网店、微店的视觉设计思路和具体的实现方法，打破了以理论传授为主要特征的课程模式，转变为以工作任务为中心组织课程内容，并让学生在完成具体任务的过程中构建相关理论与实践知识，锻炼技能，发展职业能力。
通过本课程的讲解、演练与实践，能够促进学生更好地掌握电子商务视觉设计实战技能，具备利用Photoshop和Premiere进行电子商务视觉设计的实操能力，让学生从营销的角度，利用视觉手段来进行店铺形象、品牌、商品信息的传达，吸引与转化流量，提升转化率。
该课程的先修课程为《Photoshop网店美工实例教程》《网店美工》等，后续课程为《电子商务视觉营销》《网店运营实务》等。
二、设计思路本课程秉承“视觉是手段，营销是目的”的宗旨，从营销的角度来解析电子商务视觉设计的方法与技巧，涵盖电商网站视觉配色设计、店铺标志视觉设计、店铺首页视觉设计、商品详情页视觉设计、高点击率推广图片视觉设计、网店促销活动页视觉设计、移动端网店用户体验设计、手机移动端淘宝店铺视觉设计、手机移动端微店视觉设计和商品短视频视觉设计等。
本课程按照电子商务视觉设计工作任务安排学习内容，采用情境教学、理实一体的授课方法，通过“操作+报告”的考试方法，全面考核学生电子商务视觉设计的实际能力。
1．遵循职业性。
高职教育就是就业教育，是一种适应市场需求、培养高等技术应用人才的职业教育，所以高职电子商务专业的《电子商务视觉设计》就应该达到直接为提高学生专业操作技能服务，并最终为学生就业服务的教学效果。
《电子商务视觉设计》课程的设计突出职业性，着力营造职业氛围，逐步提高学生电子商务视觉设计意识，培养学生电子商务视觉设计的实际能力。
《电子商务网上视觉设计》课程标准
《电子商务网上视觉设计》课程标准一、概述(一)课程性质《电子商务网上视觉设计》就是电子商务专业学生必修的核心专业主干课程。
(二)课程的基本理念通过本课程的学习,要求学生掌握网店装修的基本概念,学会使用常用的PhotoShop来实现各种功能与表现,解决在网店美工中装修网店时遇到的各种专修效果问题,能够设计装修出常见的各种店铺风格的店铺首页以商品详情页,具备表达恰当、美观大气并能够体现商品的网店装修与美工的能力。
同时通过本课程的学习,培养学生成为技能全面,实战能力超强的“能手”型人才。
(三)设计思路《电子商务网上视觉设计》课程与美术、PhotoShop图像处理互相补充。
通过学习学生能掌握网店设计的各种知识,并运用所学知识做出具有特色的网店,使学生能够得到全面的培养,成为社会所需专用人才。
二、课程目标（一）总目标:使学生掌握常用的设计工具,熟练运用多种设计技术,具备店铺设计、制作美观大气并能够体现商品的基本技能,学生能够独立制作各种风格的店铺。
（二）具体目标:1、教学目标:（1）能认认识电商、认识美工重要性（2）了解美术基础及强化素描、色彩、手绘等（3）熟练操作Photoshop、Dreamweaver（4）初步理解专业图像处理、图片的修复与合（5）初步认识店招设计（6）初步认识海报设计（7）深入理解详情页制作（8）深入理解店铺装修的构思的作用（9）深入理解美工实践课店铺装（10）深入理解认识专业美工2、技能教学目标:（1）会使用Photoshop软件完成设计（2）掌握网页与平面构成、色彩、版面设计的关系（3）熟练掌握颜色值的配置与背景图案的设置方法,熟练掌握字符、链接颜色的设置方法（4）熟练掌握掌握重复、渐变、发射的构成练习（5）掌握特异、肌理、图与底、对比、韵律等平面使用方法（6）掌握使用滤镜对现成的图像进行处理（7）掌握熟练掌握图案填充的技巧（8）掌握相关工具与技巧的混合运用,绘制出各种图案效果（9）学生能够运用美术思想来设计制作具有观赏性的网页页面3、素质教学目标:（1）具有勤奋学习的态度,严谨求实、创新的工作作风（2）具有良好的心理素质与职业道德素质（3）具有高度责任心与良好的团队合作精神（4）具有一定的科学思维方式与判断分析问题的能力（5）具有较强的网店设计创意思维、艺术设计素质。
《电子商务视觉设计》教学大纲
《电子商务视觉设计》教学大纲一、课程说明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.字体设计中，婴幼儿用品使用（D）字体最为合适
A．汉仪金陵刻经
B．仿宋
C．汉仪碑刻黑字体
D．汉仪天真体
2.字体设计中，下面哪一项不属于文字设计的功能。
（A）
A．陶治情操
B．增强视觉传达效果
C．提高作品的诉求力
D．赋予版面审美价值
3.以下哪个选项是字体类型？（C）
A．衬线字体
B．无衬线字体
C．以上都是
D．以上都不是
4.汉仪金陵刻经的特征是（A）。
A．字体气象浑穆，结构古拙，风格与刻碑碑刻类似
B．字体方正平稳，平头齐尾，风格挺拔秀丽
C．字体圆润平滑，风格为古灵活泼
D．字体飞扬，笔触豪放，风格为挥洒自如的手写体
5.字体一直被做为最适合的（C）字体。
A．标题
B．副标题
C．正文
D．强调
6.色彩三要素是（C）。
A．色相明度亮度
B．色系纯度明度
C．色相明度饱和度
D．色系色相亮度
7.页面背景中大面积使用的颜色称为（B）。
A．搭配色
B．主色
C．辅色
D．对比色
8.以下对辅助色描述错误的是（A）。
A．辅助色应大面积使用
B．辅助色又称为点缀色
C．辅助色起到提示提醒作用
D．辅助色起到引导视觉注意力的作用
9.色彩搭配中，如需强烈对比色做辅助色，则需取主色色环中至少（D）范围内的颜色。
A．30°-45°
B．45°-60°
C．60°-90°
D．90°-180°
10.色彩三原色是（B）。
A．红黑白
B．红黄蓝
C．红黄绿
D．红绿蓝
11.纯文字海报排版一般构图方式是什么（C）
A．居左
B．居右
C．居中
D．剧上
12.文字文案摆放技巧有哪些（BCDE）
A．方形
B．三角形
C．长方形
D．梯形
E．圆形
13.下列描述正确的是（ABCD）
A．排版的过程中都是文字要居中
B．图文结合可以放在两边
C．左图右字右图左字
D．文字排版需有型，长方、三角、圆、梯形都可以
14.纯文字海报排版，居上是最保守的一个选择。
（错）
15.图文海报排版技巧可以是左图右字也可以是左字右图。
（对）
16.网上发布商品的主图的像素比例为（B）
A．300×500
B．800×1200
C．700×1500
D．200×300
17.网上发布商品的主图比例尺寸为（C）
A．3:4
B．4:5
C．2:3
D．3:5
18.无线端文字排版常见的构图方式有哪些（ABC）
A．上图下字
B．左图右字
C．右图左字
D．两边图中间字
19.无线端天猫或淘宝的详情页里可以放置的图片尺寸是（AB）
A．750×1000-1200像素
B．790×1000-1200像素
C．800×1200像素
D．300×500像素
20.手机端浏览商品时所有的商品类目可以展现长图的比例尺寸都为2:3。
（对）
21.主图详情化是（C）张主图
A．3张
B．4张
C．5张
D．6张
22.淘宝搜索页面展示的主图是多大（D）
A．800×800
B．700×700
C．140×140
D．根据展示的需求尺寸设计
23.做好视觉营销的目的有哪些（ABCD）
A．让页面更美观
B．更吸引买家的眼球
C．提升转化率
D．增加点击率
24.淘宝搜索页面展示的主图尺寸是800×800。
（错）
25.互联网销售的本质是：图片。
（对）
26.什么是商品主图（A）
A．商品的展示图片，搜索后展示的第一张商品图片
B．点击商品后所呈现的商品完整信息图片
C．贩卖商品的主要页面
D．购物平台的主页图片
27.为什么要优化主图（C）
A．台式机被淘汰
B．智能手机功能增多
C．现代生活节奏加快，信息爆炸，要在最短的时间吸引购买力
D．购买力下降
28.如何体现差异化（ABC）
A．与同类商品比较，采用不同网络展现商品，画面不循规蹈矩
B．与同类商品比较，突出特殊角度，吸引眼球
C．突破传统，采用夸张，拟人等手法，头脑风暴，无限创意
D．文案朴实，画面完整，与同类商品保持一致
29.主图文案卖点的两大要素（BD）
A．煽情动人的卖点
B．直击人心的口语化卖点
C．详细说明商品特点
D．用心提炼简洁突出
30.主图优化主要从哪几个方面进行（ACD）
A．有情景
B．有故事
C．有卖点
D．有差异
31.无线端拍摄注意取景的排版，相较于电脑屏，手机屏最好采用（B）图片拍摄。
A．横屏
B．竖屏
C．宽屏
D．斜屏
32.无线端详情页设计还有哪些方式技巧（ABCD）
A．满屏图
B．九宫格图
C．均等分
D．小圆圈的使用
33.无线端详情页设计的6大设计原则是（ABCDFG）
A．竖屏
B．去空白
C．留空白
D．七加或七减二法则
E．左右栏
F．上下栏
G．用特写
34.无线端图片设计要做到的“内容做加法，字号做减法”原则。
（错）
35.无线端的图片设计最精华部分既“大图展示、提炼卖点，少即是多原则”。
（对）
36.会对买家起到一个引导的作用，也会对他产生一个不可低估的心理暗示（D）
A．广告图中模特的视线
B．隐藏的链接
C．漂亮的图片
D．明确的箭头或按钮
37.广告图主题特突出三要素是（ABD）
A．主题分明
B．层次分明
C．产品特点
D．化繁为简
38.目标人群的精准呈现（CD）
A．目标人群购买力
B．目标人群的工作
C．目标人群的审美特征
D．目标人群的心里期望或心理特征
39.广告设计的六大法则（ACDEFG）
A．色彩
B．图片
C．字体
D．版式结构
E．间隙与留白
F．引导
G．细节
40.广告图中的文案设计，应该大小一致，画面才能协调。
（错）。