中职《电商视觉设计》校本教材的开发与实践

刘鸿生

摘要：《电商视觉设计》校本教材的开发是基于提升中职电子商务专业学生的美术素养为目的，是对电子商务专业必修专业课的补充和拓展。课程在高二年级开设，是对高一专业课的有力补充，以色彩训练、抠图训练、视觉营销训练、商品主图和商品详情页設计四个主题的训练为途径，一方面帮助学生巩固知识，另一方面提升学生的审美水平，使学生在美术核心素养方面有一定的提升，也是为学生在高三阶段的综合实践专业课学习做好支撑。该教材以photoshop软件的相关操作为载体，让学生通过色彩训练、抠图训练、视觉营销训练、商品主图和商品详情页设计四个主题的训练，通过翻转课堂等多种教学方法的实施，创新发展性考核评价方式，有效提升学生美术核心素养，为学生的职场发展支撑助力。

关键词：中职;电商视觉设计;校本课程;美术核心素养;主题

电商视觉设计师是中职电商专业毕业生起薪最高的岗位之一，也是电商行业对学历要求不是太注重的岗位，颇受中职电商专业学生的青睐。中职电商专业毕业生虽然具备较熟练的软件操作技能，进入美工设计岗位相对容易，但在实际工作中还是较难让客户真正满意，网店装修不够赏心悦目或吸引眼球，缺少美感，究其原因是美感素养较为薄弱，也造成职业发展的后驱力不足。反观现阶段中职电商专业，师资配备多为计算机专业的教师，在美术素养上显得不足，在网站设计类课程实施过程中更多侧重于在软件操作技术上进行大量练习，在美术核心素养培养上却是一带而过。学生在独立设计网店各模块图时或者是东拼西凑，或者刻意模仿。高一年级专业必修课程《商品拍摄与图像处理》中有涉及美感要求，但过于简单，学生领会提高不均。在高二、高三两个学年中没有此类课程的设置，而高三的《网站建设》等综合实践专业课更需要美术修养的支撑辅助。《电商视觉设计》校本教材的开发是基于提升中职电子商务专业学生的美术素养为目的，在高二年级开设，是对高一专业课的有力补充，以色彩训练、抠图训练、视觉营销训练、商品主图和商品详情页设计四个主题的训练为途径，一方面帮助学生巩固知识，更重要的一方面是提升学生的审美水平，使学生在美术核心素养方面有一定的提升，也是为学生在高三阶段的综合实践专业课学习做好支撑。

一、课程目标

（一）总体目标

《电商视觉设计》校本课程旨在突破初学photoshop软件时在操作技巧层面的学习，基于提升学生的美术核心素养，即图像识读、美术表现、审美判断、创意实践和文化理解等五个方面。

（二）具体目标

1.知识与技能。熟练掌握photoshop软件主要功能的应用;具备美术图像识读的能力，会分析、运用网店页面各模块中颜色、形状的选择、搭配、构图布局的能力，使网店页面既有营销功能又富有美感。

2.过程与方法。品读、分析优秀的网店设计作品，丰富学生对“商业”与“美感”的理解，培养学生具备创意实践的美术核心素养，在设计过程中形成创新意识、运用创意思维和创造方法;通过专题训练和任务驱动法将学习的过程演化为工作的过程，在工作中学习，在学习中工作，培养终身学习的理念，鼓励学生个人自主探究和集体合作探究的方式参与网店设计。

3.情感态度与价值观。具备审美判断的美术核心素养，对优秀的设计作品中的审美对象进行感知、评价、判断与表达。能形成基本的审美能力，显示健康的审美趣味。能用形式美原理对审美对象进行感知、描述、分析和评价。提高学生对网店设计中形式美欣赏和探索的素养，逐步达到“商业”与“美感”的兼顾和均衡，尊重个性发展，拓宽眼界。

二、课程内容

本课程内容由色彩训练、抠图训练、视觉营销训练、商品主图设计和商品详情页设计训练等四个主题组成。

（一）主题一：色彩训练培养图像识读素养

色彩是第一时间抓住消费者眼球的元素，在视觉营销上讲究色彩的诱目性，好的配色是吸引人在网店多停留的重要因素。本专题训练偏重于探索色彩给予的影响，包括配色和色彩对人的心理和生理的影响，根据不同的网店要求运用“适当的色彩”是要解决的问题。对于美术基础较弱的中职学生而言，他们对色彩的运用和把握较差。所以，色彩训练是一直贯穿在整个课程的各个主题中的。在色彩训练中，培养学生图像识读的素养是视觉设计的前提，学生可以比较与辨识作品中各种图像符号的造型、色彩、比例和肌理等形式特征，清楚它是运用了哪些形式美的法则，做到有章可循。在读懂看透的条件下，教师可以结合学生实际情况展开专题训练，比如在“色彩的明度”这一专项训练中，教师可以将一些富有美感的渐变图案做成空白格子，让学生来进行明度渐变的填色练习（见图一），在练习过程中既熟练了填充工具的操作，又理解了明度这个色彩三要素之一，同时还掌握了“渐变”这种形式美法则，专题训练要结合网店案例，展示以明度渐变为主要设计思路的banner例子（见图二），让学生从学习到应用，培养美术表现核心素养，完成知识的迁移。学生在色彩训练时可运用色彩构成图案进行练习，也可以设计别出心裁的练习，比如在“色彩的年龄”专项训练中（教学设计见下图），以服装为载体让学生进行填色练习，以此来提高学生对色彩所表达含义的敏锐性（见图三）。

1.《色彩的年龄》教学设计。

教学目标：知识与技能：学生可以掌握色彩搭配不同年龄段的特点，学会区分不同年龄段的网店色彩企划。过程与方法：欣赏不同年龄段网店配色图片，结合课堂练习法，来体会并运用色彩的年龄特征。情感态度与价值观：学生可以增强对色彩年龄的感受力，发挥在色彩搭配时的主动性和创造力。

教学重点：学生能够掌握不同年龄段色彩的特征，并可以运用ps为媒介进行配色创作。

教学难点：色彩搭配的美感。

教学过程：

学生在教师的引导下，能够感知到色彩是有年龄区分的，本课意图也在于培养学生善于发现生活中的色彩除了年龄，是否还有其他方面的特质，比如性别、职业等，激发学生的求知欲。电子商务专业的学生缺乏色彩知识的系统学习，配色是一个长期训练并积累和尝试的过程，不是一个主题训练就可以解决的，须贯穿到整个选修课程的教学中去。

（二）主题二：抠图训练实践美术表现核心素养

抠图又称抠像、去背景等，它是进行视觉设计必经的基础步骤。通过抠图可以制作出美术表现中表达思想与情感的媒介、符号和隐喻手段。抠图的质量直接决定了商品页面的精致程度，要求既要精细又要有效率。高效地判斷抠取某件商品所适合的抠图工具并熟练抠取，是本专题要解决的问题。抠图水平能够反映美工的软件操作熟练度和对图像特点把握程度，看似是耗时间的机械劳动，实际考验的是美工对画面中形状和颜色的判断和提炼，要想取得较高的效率，除了对软件工具熟悉，更重要的是判断图像的经验。比如平滑带有弧度的商品可选择钢笔工具抠取，形状琐碎的树叶、细密飞扬的毛发可选择用通道或调整边缘抠取，主体和背景色彩反差大的图可用色彩范围抠取等，有些图还须多个抠图工具的配合才能完成。抠图中如果具备丰富的色彩常识将会使得该训练事半功倍，比如在通道抠图时要判断色彩的对比度，要通过调整色阶来加强图像的反差等。

（三）主题三：视觉营销训练培养创意实践素养

本主题训练学生运用联想、想象和变通的方式进行构想与生成有创意的方案，并利用商品和文案等元素进行创造和实践。网店的最终目的是产生销售，如何利用视觉营销的相关知识让网店增长销售额是本专题训练的目的。创意实践美术核心素养可以在此主题中得以培养。网店商品的展示技法与视觉表现逐渐受到重视，如果缺乏创意则顾客的视线将不会过多地停留，美国市场营销学会（AMA）研究表明，人们决定是否要购买一件商品仅需在关注它的前三秒，而且70%是因为商品的视觉表现力。电商视觉设计的设计是为了引起消费者的共鸣，产生购买欲望，最终转化成交，因此，课程中要融入联想、想象等创意思维，以提升产品的销量。电商视觉设计在进行店铺装修时首先具备整体意识，整个页面符合人体工程学的要求，符合人的视觉流动规律。人的视线运动具有直线性特点，即视线在多个视点之间转移时是以直线形式，在多种刺激样式之间转移时也是以直线的形式，如何在直线运动的轨迹上布置商品页面，如何合理地设置多个刺激点抓住顾客的眼球，是这一专题要训练的创意实践素养。人的视线会习惯先看大氛围，再看小细节，反复多次移动，如果网店页面中某一信息对视觉刺激较强，它被关注的时间就越长，更多的信息量就会传递给买家，如何富有创意地利用色彩、形状、文字来吸引买家关注，也正是这一主题要专门训练的。

（四）主题四：商品主图和详情页设计培养美术表现素养

美术表现素养是指运用传统与现代的媒材、技术和美术语言，通过构思与反思，创作具有思想和文化内涵的美术作品，或用来表达自己的各种想法与情感。本主题要求用美术语言表达思想内涵和商品卖点。在设计主图前，要对拍摄的原图进行筛选并作相应处理，保证图片具有更好地展示效果，制作之前还要先对主图样式、风格进行分析，然后再在photoshop中进行设计;完成主图制作之后需要对商品详情页的设计与制作，对网店中销售的单个商品进行详细介绍，根据商品的风格和特点来设计详情页，包含banner、商品信息模块、商品卖点模块和商品展示模块。以banner为例，概括提炼典型的美术表现手法，以美术语言来进行设计（见图八）。商品主图和详情页设计过程不是孤立的，要一直贯穿色彩搭配常识、抠图技术和视觉营销知识等。

《电商视觉设计》校本选修课程在内容选择上具有科学性，与时俱进，专注于培养学生的美术核心素养，不局限于教材，可以根据学生情况广泛选择参考书目，并结合最前沿的网店装修案例，去粗取精，整合出适合中职电商视觉设计的内容来进行教学。

三、课堂教学

（一）教学计划

根据电商视觉设计从业人员的职业能力与基本素质的要求，系统的为学生量身定制教学计划，见表1：

传统的“翻转课堂”由于中职学生的个体差异，导致课前任务完成质量较差。本选修课采用“课内翻转课堂”的教学模式（见图五），区别于传统的“翻转课堂”即学生在课堂上教师的监督下学习微课，在规定的时间内独立完成自主学习，经过小组交流、展示、评价和问题反馈，教师和学生集中解决普遍问题，达成目标后再进入下一环节，教师控制时间和节奏，成绩好的学生做助教辅导个别同学，最后师生一起串联知识点并总结，形成一节课的整体脉络。这能有效解决传统的“翻转课堂”由于中职学生的个体差异，导致课前任务完成质量较差的问题。

1.课内翻转课堂教学设计。

【课题】设计商品推广海报

【课时】2课时

【教学目标】

知识与技能：学生能够了解商品推广海报的背景制作和工作流程。

过程与方法：通过课内翻转课堂，自主探究，学生掌握并熟练运用同类色、色调的相关知识来配色，熟悉商品推广海报的设计思路和制作技巧，设计商品推广海报。

情感态度与价值观：体会色调统一的美感，学会避免画面“花”“乱”的问题。

【重点与难点】

教学重点：了解商品推广海报的背景、各构成要素设计要点和工作流程。

教学难点：根据实际需求设计美观、有效的商品推广海报。

【教学方法】

本节课是实操课，教师运用讲授法、任务驱动法等方法进行教学，学生运用讨论、自主学习等方法。

【教学过程】

本节课为实训操作课，在2课时时间里，学生通过微课学习，初步感知课堂要点，按照任务进行课堂练习，在练习过程中发现自学中问题，通过讨论，完成自主学习，普遍存在的问题，教师有的放矢统一解决，提高课堂效率，并照顾到学生个体差异。由于课时所限，只能深入练习同类色配色法，对比色等配色有待于学生利用微课课后自主学习。在课内翻转课堂的教学模式下，本选修课结合任务驱动法与案例教学法来组织教学。

（二）教学方法

1.任务驱动法。在教学过程中，教师在任务中巧妙地整合知识点，学生在总任务的驱动下，通过教师的指导完成各个具体任务，并从中学到新的知识。例如，在“详情页海报设计”教学中，教师先指导学生了解详情页海报设计的要求，分析该商品的卖点;然后，根据卖点制定主题内容，搜集素材;最后，通过版式、配色、字体、文案等达到形式美的效果。在任务实施过程中，把教学内容划分成设计海报背景、设计商品图片、设计促销文字三个子任务，学生在任务引领下主动参与学习，在完成任务的同时培养了自主解决问题的能力和创造意识。

2.案例教学法。高二学生已经掌握初步的photoshop的操作知识，因此可以在商品图的“校色”“抠图”“修图”等内容上采用案例教学法。例如，在讲解“校色”内容时，以学生自己拍摄的“白瓷茶杯”主题的照片为素材，要求处理图像的偏色、畸變等问题。学生拿到素材，独立思考，运用最近发展区理论，先发挥出自己的水平，再与同学探究，与老师研讨，运用已掌握的曲线、色相/饱和度、色阶等工具来解决问题，达到知识的升华。采用案例教学方法，可以激发学生内在的动力，调动学生的学习积极性。

四、考核评价

（一）考核标准与岗位标准对接

《电商视觉设计》选修课除了重视三维目标评价，更要重视发展性评价，侧重点在于网店装修美感把握上，重视学生在上课中表现出来的对布局、配色的实践能力，教师通过下企业锻炼、实地调查等方式，了解最新岗位的需求，把电商视觉设计从业人员所需的知识结构、业务素质、甚至行为规范要求引入课程评价中，让学生就业实现技能和心态上的无缝对接，为其踏入岗位做好准备。

（二）评价内容将美感量化

从美术作品的角度对一张banner做评价，无论是教师还是学生往往趋向于主观化，很难给学生一个明确的方向，但是本选修课尝试将美感客观化、量化。以制作茶叶网店banner为例，满分是50分，样图和见下图（图六）：

图六 《春茶上新》banner的样图

（三）评价方式多元多维

多元评价强调的是多元化，即评价主体多元化、评价内容多维化、评价标准多样化，既有自我评价，又有他人评价;既有形成性评价，又有终结性评价，具体如表3所示。

五、实践成效

《电商视觉设计》校本选修课课受到学生喜爱，每学期期末由教学部门对校本选修课进行问卷调查，《电商视觉设计》选修课两个学期共发放问卷65份，收回65份，有效问卷65份，调查研究目的是了解学生对《电商视觉设计》校本选修课的认同感及其成效。学生调查问卷的指标包括教师授课方式、美术核心素养的培养、专业技能的提高、学习愉悦感等。结果有89%的学生认为提高了审美素养，能够对网店装修的美感上有所把握，而不仅仅是注重操作技能，而忽略了艺术性。有超过85%的学生非常希望能持续开设并继续选修《电商视觉设计》的选修课。

学生经过《电商视觉设计》校本选修课的学习，在专业技能之外提升美术修养，在我校的技能节上，高二年级分为文案策划、网店商品详情制作、网店轮播海报三个赛项。这三个赛项，使学生运用现有的知识并结合自己的创意，投入到实践中，考验了同学们的创意思维以及美感表达能力;在学校举办的贸易节上，高二年级历时一个月，以班级或社团为单位，经历了班级网店运营的整个流程，实践了专业知识，选修课上的学生成为网店美化装修、优化的主力军;学生在省电子商务大赛中获得一等奖，在全国职业院校技能大赛中职组电子商务技能赛项中，获得三等奖的佳绩;此外，学生在美术表现和创意实践方面大胆尝试，在各级各类比赛中，用photoshop软件设计出的原创创意海报分别获得了市一等奖和省二等奖的好成绩，这得益于本选修课对学生美术核心素养的培养。《电商视觉设计》的培养目标与岗位需求对接，具有它的教学价值。随着网上购物、微商的不断普及，每个店铺新产品的上架和宣传都需要电商视觉设计类的人才，在这样的背景下，中小企业的大量需求使得电商视觉设计人才成为炙手可热的高薪阶层，电商视觉设计的社会需求量大，教学价值就显得越来越大。

综上所述，本课程的开发与实践有效弥补了传统教材的不足，提高了学生课堂参与度，促进了教学有效性的提高。但是，笔者也认为还有一些需要后续优化，一些内容需要给以重视和强化。例如，在校本教材的编写上，各个模块中设计“知识链接”部分，辅以优秀、典型的美术作品，并指明其与电商设计相关的亮点，两者相互印证。教材的所有操作案例中，所提供的工具、命令的设置参数务必准确。选修课任课教师熟练软件操作外，须多阅读美术类、设计类的书，如《配色设计原理》《设计中的设计》等。学生的分组训练，要考虑到分组的有效性，真正做到人人有事做，比如文案处理、背景设计，抠图，色彩、构图的整体把握等，分工明确，避免能者多劳，一人做，众人看的情况。评价环节，由教师控制好时间，做好引导提醒，避免拖沓，时间分配不均的情况。

【参考文献】

[1]张岩，邵忠国.电商网站的创造性视觉设计分析[J].设计，2016（07）：140-141.

[2]耿甜.空间在电商视觉设计中的应用[J].大众文艺，2016（08）：85.

[3]张岩.电商网站视觉设计应用研究[D].湖北工业大学，2016.

[4]梁爽，刘迎春，屠芸.课内渐进式翻转课堂教学模式的设计与应用——以中职学校“网页制作”课程为例[J].现代教育技术，2016，26（07）：78-84.

[5]冯浩煜.电商网页界面视觉设计元素解析[J].科技视界，2018（01）：159-160.

[6]贺正悦.电商网站视觉设计与应用[J].时代金融，2018（12）：181-182.

[7]周天姿.电商网页UI视觉设计研究[D].湖北美术学院，2018.

[8]全秋燕.基于混合式教学的电商视觉设计人才培养探索[J].无线互联科技，2018，15（09）：70-71.

[9]张雯丹.数据驱动下的电商视觉设计[J].办公自动化，2018，23（22）：44-46.

[10]傅俊，商玮.双师工作室在电商视觉设计方向学徒制改革中的作用[J].中国商论，2018（33）：15-16.

[11]姚广灿.电商网站视觉设计应用研究[J].西部皮革，2018，40（24）：22-23.

[12]高美琪，王一帆.视觉设计C2C电商平台的信用评价模型[J].当代经济，2019（02）：88-93.