学习情境一 岗位认识与网店视觉规范

学习情境一岗位认识与网店视觉规范PAGE8任务一电商美工岗位认识 一、教学目标1.知识目标了解电商美工的岗位要求、职责及工作流程。2.技能目标能正确理解电商美工岗位的要求、职责及工作流程。3.情感目标培养学生团队合作等职业素养。二、教学内容分析电商美工是电商行业中比较重要的一个岗位，主要负责电商相关平台的视觉设计，包括商品图片处理、活动图制作、网店装修等。认识该岗位的岗位要求、职责及工作流程，能为后面的网店装修学习做好准备。教学重点：电商美工岗位的要求、职责及工作流程。教学难点：提升自身的美工岗位职业素养。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示电商美工岗位工作日常的视频。思考电商美工岗位的工作内容有哪些？通过观看视频初步认识电商美工的工作日常。通过展示视频，激发学生的学习兴趣。2.新课讲解一、电商美工岗位要求电商美工是电商行业中比较重要的一个岗位，主要负责电商相关平台的视觉设计，包括商品图片处理、活动图制作、网店装修等。电商美工人员需要具备以下能力。（一）专业技能需要熟练掌握Photoshop（PS）、Illustrator（AI）等图像处理软件，具备扎实的修图、图像合成、配色、字体选择、排版等技能。了解Dreamweaver（DW）等网页设计软件，掌握一定的HTML代码知识，能完成网店装修基本操作。了解商品图片与视频拍摄，能熟练操作PremierePro（Pr）、剪映等视频剪辑软件。了解一些电商平台的设计规范和要求，如淘宝、京东、拼多多、抖音等平台对网店图片内容、尺寸、格式、分辨率等的规定，避免因违规而影响网店正常运营。（二）创意与创新能力紧跟电商设计趋势，将创意与创新融入网店设计中，能够根据商品特点和运营需要，从营销角度提出独特的创意和设计，提升点击率和转化率。（三）协作与沟通能力需要与客户、运营、客服等进行沟通协作，了解客户的需求、运营的营销思路，将其转化为具体的设计；与客服沟通了解买家反馈，再对设计进行优化；能清晰地表达自己的设计思路及其可行性。二、电商美工岗位职责（一）商品图片处理能对商品拍摄后的图片进行后期技术处理，包括抠图、修图、调色等，以提升图片的质量和视觉效果，从而更好地展示商品信息。网店页面设计能根据网店定位或商品特点统一网店风格视觉设计，包括海报、商品主图、商品详情页、首页、自定义页、直播间设计等。更新网店页面根据网店运营需要，定期或不定期对网店页面进行更新及优化。三、电商美工职业发展路径电商美工可以从初级电商美工、资深电商美工、电商美工主管、电商设计师、视觉设计经理/总监垂直晋升，也可以向电商运营、产品经理方向横向拓展。具备一定的经验和资源后，电商美工也可以选择自主创业，承接多平台网店设计，成立自己的设计工作室或电商公司。电商美工岗位工作流程电商美工需要与运营、客户、客服等多部门沟通协作，倾听其他部门意见，理解不同部门的需求，结合运营策略和消费者需求，通过有效的团队协作，提高工作效率，设计出点击率、转化率高的设计内容。其主要工作流程如下。需求分析明确任务目标与运营、客户方等进行沟通，了解本次任务的目标，如新品上新、页面优化、主题活动等。2.了解产品卖点了解产品的参数、功能、使用方法等，更好地表达产品的卖点。3.了解目标人群了解目标人群的年龄、性别、消费习惯等，使设计更符合目标消费人群的喜好，提高点击率。（二）制订计划（1）根据任务需求和沟通结果，规划设计风格、色彩搭配、字体选择等。（2）对首页、详情页、自定义页等复杂页面，先使用Photoshop或Excel制作框架图，如主体图、文案、背景的摆放位置，为后期设计提供框架。（3）针对框架图与团队成员进行沟通，听取意见和建议，然后进行优化和完善。（三）任务实施1.素材准备根据计划，收集和整理所需的素材，如商品图片、品牌LOGO、背景图等。2.页面设计按照框架图进行页面设计。（四）审核及上传（1）完成初稿后，先自我检查，然后提交给组长进行审核。（2）根据组长审核意见，对初稿进行修改直至达到审核要求。（3）将修改后的设计稿提交验收人进行审核。根据验收人的反馈，再次进行优化以满足运营或客户需求。（4）首页、详情页、自定义页等页面需要进行切片，生成适合网页展示的图片和代码，上传到网店。（5）页面上传发布后，关注点击率、转化率等数据，分析效果，为后续优化提供数据支撑。认识电商美工岗位的要求、电商美工岗位职责、电商美工职业发展路径以及工作流程。让学生从多方面充分认识电商美工岗位，为后面的网店装修知识与技能学习做好准备。3.新课讲解1.电商美工岗位的学习计划制定根据上面知识点，分析自己的电商美工能力。让学生清晰认识自身在电商美工岗位中的技能掌握情况。4.学生实训任务名称：岗位晋升路线图任务要求：分组绘制“初级电商美工→资深电商美工→电商美工主管→电商设计师→视觉设计经理/总监→创业者”的发展路径图，标注各阶段需掌握的硬技能（如3D建模、动效设计等）与软技能（如运营思维、客户需求等）通过实训任务，掌握美工岗位晋升路线图。通过实训任务，让学生明确自身的职业目标。5.课后小结本节课要掌握的重点：电商美工岗位的要求、职责及工作流程。明白本节课自己要掌握的知识点学习情境一岗位认识与网店视觉规范PAGE8任务二网店视觉规范（一） 一、教学目标1.知识目标（1）熟悉网店视觉规范的基础理论知识。（2）认识网店风格的定位及其配色方案。2.技能目标（1）能够正确定位网店风格。（2）能够根据网店或商品特点选择合适的配色方案。3.情感目标（1）培养学生团队合作等职业素养。（2）感受中华诗词里的色彩艺术，培养文化自信。二、教学内容分析合适的网店风格能最大限度地提升网店形象，提高网店浏览量、客户停留时间，为网店带来较高的转化率。若网店风格与商品风格不一致，则会给进店的买家带来较差的购物体验，增加客户的跳失率。因此，优秀的网店视觉效果十分重要。教学重点：1.网店风格的定位及其配色方案。教学难点：1.正确定位网店风格。2.能够根据网店或商品特点选择合适的配色方案。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示两张不同的网店首图，思考该网店风格与其销售的产品之间的联系。观察两张不同的网店首图，思考问题。通过展示视频，激发学生的学习兴趣。2.新课讲解一、网店风格定位网店风格是指网店给访客的直观感受。网店风格主要体现在网店主营商品类型、网店装修风格、网店商品价位、网店促销方式、网店顾客服务等方面。目标消费群体对网店风格认同感越强，就越容易被网店吸引，成为网店的潜在顾客。网店风格主要体现在网店装修风格上。定位网店风格时一定要贴近自己的目标消费群体，了解他们的喜好、顾虑，进行综合分析，最后形成网店风格。定位网店风格主要有以下方法，也可以找一个网店模仿学习，然后与之进行差异化处理。（一）行业特性根据行业特有的性质来确定网店风格。例如，户外运动网店的关键词为：动感、大自然、健康、活力，推荐色系为蓝、绿、橙、红。孕婴用品网店的关键词为：温馨、希望、洁净、成长，推荐色系为浅粉、浅玫瑰、浅绿、浅蓝。（二）商品特性根据商品本身的特点来确定网店风格，主要可以从以下几个方面入手。1.价格水平例如，珠宝首饰类需要花费上千元甚至上万元的贵重商品，多数购买者的年龄层为25～40岁。在这类商品的使用者中，女性占绝大多数。那么，就可以从商品的档次上来定位装修风格，要显得精美、有档次。2.消费群体可以从消费者的性别、年龄、职业、文化水平、收入水平等方面找出消费群体的特性和共性。例如，经营数码类商品的网店，其目标消费群一般以成年男性为主，因为成年男性喜欢理性的、专业的设计风格，那么在网店装修上就需要简洁，可以采用以黑灰色为主的色调，以体现出网店的科技感与时尚感。3.文化内涵根据商品不同的特性，可以在装修时选择具有不同文化内涵的主题，如茶具、茶叶、保健品等可以选用具有中国风、水墨复古风的装修风格。（三）时节特性有时候还需要根据季节的不同，选择不同的网店装修风格。春天春回大地，可选择绿色为主色来装修网店；夏天可以以大海、沙滩、贝壳等为元素进行装修；秋冬可以以橙色、红色等暖色进行装修。不同的节日，还可以更换不同的风格。熟悉网店定位风格的方法。让学生学会网店风格定位的方法，掌握如何从不同的方面确定网店的风格。3.小试身手登录淘宝网搜索小家电的网店首页，并保存一张设计效果好的首页作为案例，分析该网店符合哪种网店风格定位方法。搜索小家电网店首页，分析该网店符合的网店风格定位方法。让学生学以致用，学会分析网店风格定位的方法。4.新课讲解二、配色方案确定简单地说，配色方案就是如何将不同的颜色搭配到一起，达到一种和谐的或者有视觉冲击力的效果。网店整体配色一定要给人统一和谐的感觉。配色总的应用原则是“总体协调、局部对比”。也就是说，页面的整体配色效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。（一）色彩属性色彩是人脑识别反射光的强弱和不同波长所产生的差异的感觉，色彩具有色相、明度、饱和度三种性质，也就是HSB模式中的色相（H）、明度（B）、饱和度（S）。（1）色相（H）即色彩可呈现出来的质地与相貌，如红、橙、黄、绿、青、蓝、紫等。色相决定了色别。（2）明度（B）又称为色彩的亮度，它决定了色彩的明暗。（3）饱和度（S）即纯度，是各色彩中包含的单种标准色成分的多少，它决定色彩的深浅。饱和度最高的色彩就是原色，随着饱和度的降低，色彩就会变淡。（二）色彩心理选对颜色对网店装修有着非常重要的作用。要选对颜色，必须了解不同颜色会给人带来什么不一样的感觉。暖色调暖色调包含红、橙、黄及这三种颜色的混合，是让人觉得温暖、愉悦、热情、激动的颜色，适合促销、女性、儿童、家居、食品等主题。2.冷色调冷色调包含绿色、蓝色和紫色，是让人觉得清爽、稳重、舒缓、冷静的颜色，适合男性、户外、电器、数码、夏天、春天等主题。3.暗色色调纯色加黑色得到暗色色调，是让人觉得成熟、高贵、尊贵、气势、高雅的颜色，能够体现能力感和高格调文化，适合汽车、电器、数码、商务、奢侈品等主题。4.明色色调纯色加白色得到明色调，是让人觉得时尚、活泼的颜色，适合时尚、运动、年轻等主题。5.淡色色调明色加白色得到淡色色调，是让人觉得清新、温柔的颜色，适合少女、幼儿等主题。（三）色彩搭配进行色彩搭配前，再来了解一下色环，12色相环由三原色（红、黄、蓝）、二次间色（橙、绿、紫）和三次复色（黄橙、红橙、红紫、蓝紫、蓝绿、黄绿）组合而成。1.同类色配色同类色配色即选择单一色彩，然后调整明度或者饱和度形成层次，单一色彩页面给人协调统一的美感。2.邻近色配色邻近色就是色相环顺序相邻的2个颜色，使用邻近色配色的效果与单一色彩配色相似，能使画面统一协调但不失对比度，是使用频率最高的配色方案之一。3.对比色配色对比色配色是在色相环上相差120°的两种颜色配色，这种配色方式视觉冲击力强，具有鲜明对比，但在色彩搭配上比较难把控4.互补色配色色相环中180°对立的两种色彩，对比是最强烈的。在色相环中，角度越大的两种颜色，对比越强；反之，就越弱。互补色配色就是先选定一种色彩，然后选择它的互补色进行配色。一般来说，对比强的色彩能够集中人的视线，使整个页面色彩丰富但不花哨。在配色过程中，建议画面色彩不宜超过3种，3种指的是3种色相，比如深红和暗红可以视为一种色相。无论用几种颜色来组合，首先要考虑用什么颜色作为主色。网店装修主色的选择可以从品牌、消费人群和产品属性3个方向来考虑。如果网店有品牌，可以使用品牌LOGO颜色作为网店的主色，也可以根据消费人群喜好或易接受的色调来确定网店的主色。确定主色后采用同类色、邻近色来确定辅助色，再使用对比色、互补色配色方法确定点缀色。一般情况下，如果各种颜色面积平均分配，色彩之间互相排斥，就会显得凌乱。建议配色黄金比例为60∶30∶10，其中的60%为大面积使用的主色，30%为辅助色，10%为点缀色。熟悉网店配色方案确定的依据点：色彩属性、色彩心理、色彩搭配。让学生学会如何为网店确定配色方案。5.小试身手请打开学习情境一中小试身手素材，使用主色、辅助色、点缀色的配色顺序给海报配色依据素材，根据所学内容给海报配色。让学生任务尝试，掌握配色方案的确定方法。6.课后小结本节课要掌握的重点：网店风格的定位及其配色方案。明白本节课自己要掌握的知识点

任务二网店视觉规范（二） 一、教学目标1.知识目标（1）熟悉网店视觉规范的基础理论知识。（2）认识网店字体的规范要求。（3）掌握网店视觉规范的确定流程。2.技能目标（1）能依据网店特点正确地选择合适的字体。（2）能完成网店视觉规范的设计。3.情感目标（1）培养学生团队合作等职业素养。（2）感受中华诗词里的色彩艺术，培养文化自信。（3）了解字体的规范使用，避免字体侵权。二、教学内容分析合适的网店风格能最大限度地提升网店形象，提高网店浏览量、客户停留时间，为网店带来较高的转化率。若网店风格与商品风格不一致，则会给进店的买家带来较差的购物体验，增加客户的跳失率。因此，优秀的网店视觉效果十分重要。教学重点：1.网店字体的规范要求。2.网店视觉规范的确定流程。教学难点：1.不同网店特点对应的字体选择。2.网店视觉风格的选择。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示不同类目的网店首页，提出思考问题：这些页面的字体区别在哪里？看展示的网店首页，思考问题？引发学生学习兴趣2.新课讲解一、字体规范不同的字体可以给人不一样的感觉，因此，选对字体对我们的设计有着不可或缺的作用。一般网店中常用字体规范为：中文字体不超过两种，一种用于标题，另一种用于商品描述；数字字体一种，英文字体一种，特殊字体一种（只在特定活动时用于渲染气氛）；同一页面使用不超过三种字体。在选择字体的时候，还要考虑网店产品的受众和品类。（一）适合男性产品使用的字体男性产品就是消费和使用人群主要为男性的产品，如：体育运动类用品、汽车、剃须刀、游戏设备等。基于男性粗犷、硬朗、稳重、力量、大气等特征，男性化文字特征一般为：笔画粗、遒劲有力、棱角分明、有力量感、粗细搭配、有主有次等。推荐使用的字体有思源黑体、阿里巴巴普惠体、站酷酷黑体等。免费商用字体有思源黑体、思源宋体、思源柔黑体、思源真黑体、阿里巴巴普惠体、站酷酷黑体、站酷高端黑、站酷快乐体、站酷文艺体等。（二）适合女性产品使用的字体女性产品就是消费和使用人群主要为女性的产品，如：女装、鲜花、珠宝配饰、护肤品、化妆品等。基于女性飘逸、俊俏、柔软、秀气、苗条、气质、时尚等特征，女性化文字特征一般为：纤细、曲线、秀美、线条流畅、字形有粗细细节变化。推荐使用宋体、思源宋体、装甲明朝体、方正仿宋等字体，这些字体具有端庄、典雅、清正、秀丽等特征。（三）适合中性产品使用的字体中性产品就是消费和使用人群中男性和女性都有的产品，如：数码产品、大家电、小家电、家装、厨卫产品等。基于中性干净、简洁、中性美、精致、平静等特征，中性化文字特征一般为：性别属性不强，并不需要很强烈的情感特征，偏中立，兼具男性字体和女性字体的特征。推荐使用阿里巴巴普惠体、思源黑体等字体，这些字体具有简洁大方、比较中性的特征。（四）适合孩童产品、童趣产品使用的字体孩童产品就是使用人群主要为儿童的产品，如婴幼产品、零食、玩具等；童趣产品就是那些有卡通人物设计、