《网店美工》项目6--PC端与移动端详情页设计制作
电子商务专业《网店美工》课程标准
×××××职业技术学校《网店美工》课程标准×××××学校《网店美工》课程标准一、课程名称《网店美工》二、适用专业中职：电子商务专业三、课程性质中等职业院校电子商务专业核心课程四、课程设计一个优秀的网店美工除了会使用Photoshop、Coreldraw等图片处理工具之外，还需要对消费者购物心理有一定了解，能用精美的图文表达产品的卖点；对网页布局有丰富经验，对色彩敏感，能处理各种视觉冲突，有良好的审美观；能够根据公司产品的上架情况和促销信息制作促销广告；能够通过网站后台数据，挖掘消费者的浏览习惯和点击需求。
本课程按照网店美工岗位从业人员的典型工作任务，总结细化再现出5个学习项目，从简单修图到商品主辅图制作，进阶到广告制作和店铺装修及商品描述，最后进行数据分析和网店装修诊断，通过实际案例讲解，充分体现了“做中学”的思想，在保证基本知识能力的基础上，重点培养学生分析问题、解决问题的能力,让学生毕业后能尽快进入美工岗位，顺利投入岗位工作。
五、课程教学目标本课程的教学目标是以现代职业教育理念为指导，通过先进的教学手段，使学生充分掌握网店设计中平面构成、色彩搭配、字体设计、排版与布局多个方面的理论知识并结合实例进行设计，使学生具备开放的专业思维，树立牢固的专业信心，培养学生具备独立从事网店页面设计的能力。
素质目标（1）培养学生的审美及色彩辨别能力；（2）培养细致耐心的工作态度；（3）培养基本审美意识和审美观；（4）倡导网络文明，使学生自觉抵制低俗营销；（5）培养诚信经营的意识，做到商品如实描述，不欺骗消费者；（6）培养法律意识，不用没有授权的图片和资料，合法经营，不恶意攻击竞争对手；（7）培养商业机密保密意识，防止网店经营数据泄露。
知识目标（1）认识商品照片裁剪、抠图的方法；（2）了解照片调色的方法；（3）学习商品照片的修图方法；（4）知道商品主副图的尺寸版面要求、商品照片背景的处理方法和步骤；（5）知道商品图片美化的主要方法；（6）学习不同网店装修配色、排版知识；（7）了解买家购物认知规律；（8）了解网店美工不同岗位工作内容；（9）了解数据分析指标含义和基本原理；（10）学习店铺装修诊断基础知识。
网店美工设计(项目式全彩微课版)
3.2.1任务引入 3.2.2设计理念 3.2.3任务知识：“渐变”工具、“亮度/对比度”命令 3.2.4任务实施
3.3.1任务引入 3.3.2设计理念 3.3.3任务知识：“圆角矩形”工具 3.3.4任务实施
3.4.1任务引入 3.4.2设计理念
相关知识：店铺趣味 海报设计基础知识
任务4.1设计护肤产 品海报
网店美工设计（项目式全彩微课版）
读书笔记模板
01 思维导图
03 目录分析 05 读书笔记
目录
02 内容摘要 04 作者介绍 06 精彩摘录
思维导图
本书关键字分析思维导图
项目
理念
美工设计
学生
项目
美工
网店
项目
网店
设计 任务
基础知识
全彩
知识
店铺
工具
命令
设计
图片
内容摘要
本书全面、系统地介绍网店设计的相关知识和基本技巧，具体内容包括网店美工基础、美化商品图片、设计 网店推广图片、设计店铺趣味海报、设计PC端店铺首页、设计PC端店铺详情页、设计无线端店铺和拍摄与制作网 店视频等。全书采用“项目—任务”编写方式，各项目均设有“相关知识”模块，帮助学生系统地了解网店设计 的各类基础规范；每个任务分设“任务引入”“任务实施”等模块，帮助学生掌握网店设计思路并完成相关任务。 本书主要项目的最后还安排项目演练，以提升学生的综合应用能力。本书可作为中等职业院校网店美工相关课程 的教材，也可供网店设计相关人员学习参考。
任务8.2制作手冲咖 啡教学视频
任务8.3项目演练— —制作花艺活动宣传 视频
8.1.1任务引入 8.1.2任务知识：拍摄工具 8.1.3任务实施
8.2.1任务引入 8.2.2任务知识：剪辑工具 8.2.3任务实施
《网店美工》教案--商品详情页设计
***学校《网店美工》教案第 1 页有兴趣的设计师们可以利用业余时间多进行了解。
如果能够成为集设计与文案才能于一身的高级人才，可想而知，你将备受青睐。
商品详情页设计是直接决定交易能否成功的其中一个重要因素，如何去构思使之更具有吸引力，更能抓住消费者的心理是关键。
我们需要收集和了解买家需要看什么，不需要看什么：图6-1 详情页所需内容板块示意接着，在再构思宝贝页面需要放置什么内容：图6-2 详情内容要点示意任务23 商品功能性介绍区域设计在做商品详情页规划前，清楚商品详情页每个区域的功能性，对后期布局设计起到相当重要的作用。
一般来说，商品详情页分三大区域：商品营销区、产品展示区、品牌包装区。
而三大区域则又细分成以下6个展现区，并形成商品描述的布局图：突出卖点：提炼商品的主要功能利益进行重点表现，吸引买家关注并进行浏览由整体到细节：先进行商品的整体展现，再进行商品的细节描述，这也是买家在购买商品时的浏览顺序情感联想：针对商品提炼情感利益，激发买家的感性购买需求导购服务：针对买家关注的商品问题进行导购式解答，逐步打消买家的购买疑虑售前售后：对买家进行购买后的一系列服务，从包装、物流到售后服务进行描述实力呈现：商品的质量认证、企业的实力展示、品牌介绍、荣誉等体现店铺实力的内容关联销售：关联销售区域，以便买家跳出前有更多商品选择图6-3 详情页个区域内容细分示意另外，除了基础功能区域版块，为了提高买家逛店体验度以及店铺成交转化率，我们建议增加一些额外的版块，来为商品详情页的功能加分：1.增加买家购买欲望—促销活动区：在商品描述中加进给力的促销信息，让买家了解商品的同时清楚可以享受的促销优惠，让促销优惠来刺激买家的购买欲望。
2.增加客单价—商品推荐：商品推荐有两种，分为同类商品推荐，设计必须要突出同类商品中不同商品的优势。
告诉买家可以如何进行商品选择，如可以的话还可以体现出购买咨询和导购信息。
另一类则是搭配商品推荐：设计中要突出不同商品搭配的艺术，或功能或效果或视理念或促销导购写到这里来，但是文案不宣过长。
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学课件—第6章制作PC端网店首页
22
构图：构图的好坏直接影响海报的效果，构图主要分为左右构图、左中右三分式构图、上 下构图、底面构图和斜切构图6种。
左右构图
6.3.2 全屏海报的设计要点
23
配色：海报需要统一色调。在配色时，重要的文字信息用突出、醒目的颜色进行强调，通 过明暗对比以及不同颜色的搭配来确定对应的风格。海报的背景颜色应该统一，不要使用 太多的颜色，以免页面杂乱。
6.3.1 全屏海报的组成要点
20
全屏海报一般是由文案、商品图片、模特或背景中的至少两种元素组成的，下面分 别分别介绍。
文案：文案主要用来表现海报
主题，其组成部分包括标题、
01
副标题、促销信息等。
商品图片：可以让文案描述更
02
加具象化。
模特：模特是辅助商品展示的
03
元素。
背景：背景主要起烘托主题的
3 创建组 5 输入“农家果园”文字 6 输入其他文字
4 添加 Logo
6.2.5 制作通栏店招
17
7 输入其他文字 8 拖入水果素材 9 输入商品促销文字 10 绘制圆角矩形 11 绘制导航条
6.2.5 制作通栏店招
12 设置导航条文字
13 绘制矩形框 15 完成后的效果
18
14 设置色阶值
ห้องสมุดไป่ตู้
6.1 认识PC端网店首页 6.2 网店店招与导航条的制作 6.3 全屏海报的制作 6.4 优惠券的制作 6.5 商品分类的制作 6.6 其他板块的制作 6.7 课堂实训——制作女包PC端网首页
6.2.1 店招的制作要点
7
就淘宝网而言，按尺寸大小可以将店招分为常规店招和通栏店招两类。常规店招 为950×120像素，而通栏店招尺寸多为1920×150像素。一般来说，店招主要包括品 牌形象展示店招和商品导购店招两种。
电子商务《网店美工》课程标准-童话V1.0版
电子商务《网店美工》微课版课程教学标准一、课程的性质与任务《网店美工》课程是电子商务专业的必修课程，旨在进一步提升学生对网店的美化和设计能力。
通过该课程的学习，使学生在原先已掌握的电子商务基础上，进一步掌握视觉营销的理念、美工设计的思路，美工中常用的Photoshop技能，网店常用图片设计制作，主图与主图视频设计制作，PC端与移动端详情页设计制作，无线端网店页面装修等知识和操作技能。
本课程在教学过程中强调基础理论知识“必须够用”的原则，以实际项目为载体，采用案例导入任务驱动的教学方法提升学生的实际应用能力。
通过教学与实训，加强学生在电商平台上的操作技能以及在专业上的应用能力，提高学生专业技能和就业竞争力。
二、课程教学目标本课程以学生为主体，以教师为主导，以培养学生的职业行动能力为目标。
即将必要的理论知识融入到相关的案例中，以任务为驱动，以学生动手完成任务为核心教学过程，使每个学生在各个学习案例中学会网店美工的知识与操作技能，从而提升学生的设计能力与效率，提高学生的综合职业能力。
通过协作学习方式提升学生的交流沟通、团队协作、图文共创能力，以及可持续发展的能力与职业迁移能力。
(一) 知识教学目标1.掌握色彩基本理论与视觉营销的概念；2.掌握Photoshop的基本操作、基本概念；3.了解光影魔术手的知识与技能；4.了解图片空间的知识与技能；5.掌握网店常用图片设计的知识与技能；6.掌握主图及主图视频的知识与技能；7.掌握PC端和移动端的知识与技能；8.掌握无线端网店页面装修的知识与技能。
(二) 能力培养目标1.利用PS软件熟练进行图片的排版与设计美化能力；2.利用光影魔术手软件熟练进行图片的排版与设计美化能力；3.利用PS软件进行直通车、钻展、店招图、活动图等的排版与设计能力；4.素材的收集、整理、处理与提炼能力；5.能够策划并设计高转化率主图的能力；6.能够合理布局详情页图文及设计的能力；7.能够规划好无线端店铺页面并合理布局；8.自主应用其它相关设计软件的能力；(三) 素质教育目标1.激励学生探索、分析、归纳和创新；2.利用所学知识分析问题，解决问题；3.具有勤奋学习的态度，严谨求实、创新的工作作风；4.具有良好的心理素质和职业道德素质；5.具有高度责任心和良好的团队合作精神；6.具有一定的科学思维方式和判断分析问题的能力；7.具有较强的图像处理创意思维和健康的审美意识，以及较高的艺术设计鉴赏能力。
《网店美工第4版》教案
第一节首焦轮播区及其设计思路一、认识首焦轮播区网店的首焦轮播区主要用于告知买家网店在某个时间段有广告商品或促销活动，其位于网店导航的下方位置，其主要作用就是告知买家网店在某个特定时间段的一些动态信息，帮助买家快速了解网店的活动或商品信息。
首焦轮播区根据设计的内容可以分为新品上架、网店动态、活动促销等，不同的内容其设计的重点是不同的。
另外，在首焦轮播区中通常情况下会使用字号较大的文字来突出主要信息,同时搭配字号较小的文字来进行补充说明，并利用文字之间的组合编排来突出艺术感。
二、首焦轮播区的设计思路首焦轮播区在设计时用来搭配的图片不能太复杂，这样才能突出主题。
同时，要采用符合网店商品形象的文字，以避免产生凌乱的感觉。
常见的商品陈列区布局方式有3种，包括方块式布局，以及下面将要介绍的折线型布局与随意型布局。
1.折线型布局折线型布局就是将商品图片按照错位的方式进行排列。
在这种布局中，买家的视线会沿着商品图片做折线运动。
这样的设计可以给人一种清爽、利落的感觉，具有韵律感。
2.随意型布局随意型布局就是将商品图片随意地放置在页面中。
这种随意往往需要营造出一种特定的氛围和感觉,让这些商品之间产生一种联系，否则画面中的商品会由于缺乏联系而显得突兀。
随意型布局在女装搭配、组合销售中使用得较多，是一种灵活性较强的布局方式。
第四节课堂案例：当季热卖商品陈列区设计一、设计理念•在色彩搭配上，颜色对比要强烈，以增强视觉冲击力。
画面主色调采用鲜艳的红色和蓝色进行对比，营造出明亮、大气的视觉效果，这样的颜色设计很容易吸引买家的注意力。
•使用蓝色矩形图案进行修饰，使画面看起来更加和谐。
•使用同色系的价格标签作为点缀，增强画面的设计感。
二、技术要点•使用翦贴蒙版来控制图像的显示部分。
•使用矩形工具绘制图像的背景及修饰形状，并应用图层样式进行修饰。
三、实操演练略第五节综合实训以提供的图片为素材，为某男装网店设计新品上架的首焦轮播区。
移动端店铺首页与详情页设计
移动端店铺首页与详情页设计
移动端设计与桌面端设计有许多不同之处。
在移动端设计店铺详情页面时，应该考虑以下几个方面：
简洁明了的设计：移动屏幕通常比桌面屏幕小，因此店铺详情页面需要简洁明了。
应该使用大号字体和清晰的图像，并将内容简化到最基本的元素。
页面布局应该直接简洁，以便用户可以轻松找到所需的信息。
焦点突出：在移动端上，屏幕空间非常宝贵。
为了让用户集中注意力，应该突出显示重要内容，比如商品信息和购买按钮。
响应式设计：在移动端设计店铺详情页面时，应该使用响应式设计，以适应各种不同的设备尺寸。
响应式设计能够根据屏幕尺寸自动调整页面布局和元素大小，以适应不同的设备。
图像优化：在移动端上，加载时间更重要。
应该使用优化的图像，将其大小缩小并将其压缩，以加快页面加载速度。
简化导航：在移动端上，应该尽可能简化导航。
使用简单的菜单和图标，以最大程度地减少用户需要浏览的页面数量。
简化购买流程：为了使购买过程变得简单易用，可以尝试简化购买流程。
例如，使用一步购买功能，并简化支付选项。
测试和优化：设计移动端店铺详情页面后，需要进行测试和优化。
可以使用A/B测试工具，比较不同设计方案的转化率。
同时，可以使用移动端网站性能测试工具，评估页面加载时间和性能，并对其进行优化。
在移动端设计店铺详情页面时，需要考虑到移动用户的使用习惯和需要，以提供最佳的用户体验。
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》—教学教案
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学教案第1章小结1、掌握网店美工的工作范畴。
2、掌握网店美工需要遵循的设计原则。
3、掌握网店美工工作流程。
课后练习课后练习——赏析ESEDO网店首页的设计本练习要求以如图所示的网店首页为例，赏析其页面风格、色彩搭配、商品图片展现、设计手法等。
第2章2.4.1文案在网店美工中的重要性2.4.2文案的策划2.4.3文案的前期准备2.4.4文案的写作要点2.4.5主图文案的设计与编写2.4.6详情页文案的设计与编写2.4.7海报文案的设计与编写2.5课堂实训——鉴赏森林大叔旗舰店的首页2.6课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配练习2：赏析森马官方旗舰店首页的布局2.7拓展知识小结1、掌握色彩的搭配技巧。
2、掌握版式布局的知识。
3、掌握文字的运用原则。
4、掌握文案设计与编写。
课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配如图所示为戈美琪女鞋旗舰店首屏效果，要求对页面的设计元素、色彩搭配与字体搭配进行分析。
练习2：赏析森马官方旗舰店首页的布局如图所示为森马官方旗舰店首页，要求对首页的颜色、风格、搭配、构图方式、网页元素等进行分析。
第3章实训3：抠取耳机图片并合成3.5课后练习练习1：处理红毛丹污点练习2：抠取红酒商品图片并合成3.6拓展知识小结1、掌握修改商品图片尺寸及校正方法。
2、掌握优化图片的方法。
3、掌握抠取图片并合成的方法。
课后练习练习1：处理红毛丹污点本例将打开“红毛丹.jpg”素材文件，处理其中的污点并加深红毛丹的色泽。
处理前后的对比效果如图所示。
其具体要求如下。
熟练掌握商品图片的优化方法。
分别使用污点修复画笔工具、海绵工具、模糊工具对图片进行处理，使整个红毛丹更加美观。
练习2：抠取红酒商品图片并合成本例将对“红酒.jpg”素材文件进行抠图，将其抠取出来的红酒瓶应用到其他背景中，调整大小和位置后合成为更具有营销表现力的效果图片。
(完整word版)01《电商美工》课程
《电商美工》课程标准一、概述（一）课程性质《电商美工》是电子商务专业开设的一门专业主干课，是一门理论与实践相结合的应用型课程。
通过本课程的学习，旨在培养学生的创意和审美观，帮助学生理解图、文、色彩的配搭方式，掌握常用的工具软件，提高学生对图片的综合处理及页面的整体布局能力，为电子商务专业实训课程的开展奠定良好的基础。
（二）课程的基本理念通过本课程的学习，要求学生掌握电商美工设计的步骤、方法，培养学生的综合设计能力、创造性思维能力以及艺术修养，最终使学生能够综合运用所学知识，独立在电子商务领域中完成店铺的产品主图、产品海报图、产品详情页、店铺首页等创意与设计美化。
掌握电商美工设计基本概念，学会使用常用的PhotoShop、dreamweaver等工具来解决在主图制作、海报制作、详情制作、首页装修时遇到的各种专修效果问题，能够设计发布出常见的各种风格的商品、装修出常见的各种店铺风格的店铺首页。
具备表达恰当、美观大气并能够体现商品的特性和网店装修风格。
同时通过本课程的学习，培养学生成为技能全面，实战能力超强的“能手”型人才。
并且通过客户案例，逐渐认识美工设计对电商领域的重要作用，能够欣赏和分析优秀网络店铺的图文设计，能够区分不同产品对色彩、构图、客户心理、营销文案的差异化要求，能够通过对产品的理解制作主图、详情页、店铺首页等。
在教学的过程中，学生需要熟练的掌握photoshop和工具的使用，对电商美工的了解，尤其是让学生独立完成主图制作、海报制作、详情制作、首页装修等是课程的根本目标。
二、课程设计思路1、突破常规教学顺序，采取艺术审美先行本课程的设计思路以终身教育、创新教育等职业教育理念为指导思想，以职业需求为导向，按照基于工作过程的职业能力来进行课程开发，这不是简单的教学顺序调整，而是从审美与应用切入，产生强烈的学习欲望，变“要我学”为“我要学”。
学生在一入门就明确学习目标和任务，树立好学习该课程的信心。
2024年夏季学期《网店美工》学期教学计划
课堂案例：数码网店商品详情页设计
综合实训
技能拓展
9
商品短视频制作
商品短视频的作用
商品主图视频制作
商品详情页视频制作
综合实训
10
移动端网店装修美工设计
移动端网店页面结构分析
移动端网店装修快速入门
课堂案例：美妆商品直播秒杀主图设计
11
移动端网店首页与详情页装修设计
移动端网店首页装修设计
第8章商品详情页设计
第9章商品短视频制作
难点
第4章店招与店标设计
第5章网店装修六大技能
第8章商品详情页设计
学生情况分析及提高教学质量主要措施
学生情况分析
学生对象为22电商班，学生好动，喜玩游戏，对一些PS的基本操作还不是很熟悉，特别是部分动手能力较弱的同学连最基本的操作都存在困难，也有少部分同学较好的掌握了PS基础技能，因而要把握每节的授课量、及难度。
修图——完美展现商品细节
调色——校正有色差的商品图片
编辑——美化与修饰商品图像
文字——商品信息辅助说明
5-8
4
店标与店招设计
网店店标的设计
课堂案例：水果网店店标设计
了解网店店招与导航
课堂案例：母婴网店店招与导航设计
综合实训
技能拓展
9-11
5
首焦轮播区和商品陈列区设计
首焦轮播区及其设计思路
课堂案例：节日主题的首焦轮播区设计
周授课内容安排
周别
教学内容
教学要求
课时安排
1
网店装修美工设计快速入门
初步了解网店装修
网店装修的风格
网店装修中需要注意的问题
1-2
2
《网店美工》项目6--PC端与移动端详情页设计制作
有一句话是这样说的：“有道无术,术尚可求,有术无道,止于术”。意思是说有方法理论但是没 有技术，技术尚且是可以学到和培养，如果只有技术但缺少理论方向的支持，则只能停留于技 术层次，个人发展很容易到瓶颈，无法进一步发展，只能止步不前。网上有些人把美工分为技 术型美工和运营型美工，这个也是美工自我发展的一个过程。从营销学的角度分析，详情页的 设计思路基本上遵循以上五部曲。
京东商城
≤790px（像素）
自定义
Aliexpress（速卖通） ≤790px（像素）
自定义
— 17 —
6.2.2 PC端详情页设计
1.模板设计
步骤1 打开Photoshop软件，选择“文件”|“新建”菜单项，新建一个750像素*600像素空白文档，将文件 保存为“四件套详情.psd”。 步骤2 选择工具箱中的“横排文字工具”Ｔ，输入相应的文本“商品在展示”及“Commodity Display”， 设置字体为“微软雅黑”，颜色为“＃3ca5b8”，如图6-12左边部分所示。 步骤3 选择工具箱中的“矩形工具”，绘制一个颜色为“＃3ca5b8”的矩形，如图如图6-12右边部分所示。
— 15 —
6.2.1 页面内容布局
— 16 —
6.2.2 PC端详情页设计
在各大电商平台的宝贝详情页中，都有各自不同的详情页图片尺寸 和标准，以下为主流平台详情页图片建议尺寸
平台
详情页建议图片宽度 详情页单张图片高度
淘宝
≤750px（像素）
≤1500px
天猫商城
≤790px（像素）
≤1500px
在生产工艺上有无特别之处 消费者是否喜欢通过这种工艺生产的产品
网店美工设计教学教案
《网店美工设计》教学教案第1讲认识网店美工的基础知识。
了解网店装修的常用软件。
熟悉网店装修的风格定位。
明确网店装修的基本流程。
熟练网店装修的软件操作。
能够划分网店装修的页面内容。
掌握网店装修的设计要点。
第2讲掌握裁剪的处理基础。
掌握抠图的处理基础。
掌握调色的处理基础。
掌握修图的处理基础。
了解商品图片的美化原则。
掌握商品图片的处理方法。
培养对商品图片的审美鉴赏能力。
培养对商品图片的美化创意能力。
2.9.3任务实施：修复高跟鞋图像瑕疵2.10复制取样图像2.10.1任务引入2.10.2任务知识：仿制图章工具2.10.3任务实施：复制取样挂饰图像2.11项目演练-调整曝光不足的商品图片2.11.1任务引入2.11.2任务实施：复制取样食品图像小结1、掌握裁剪的处理基础。
2、掌握抠图的处理基础。
3、掌握调色的处理基础。
4、掌握修图的处理基础。
作业2.11项目演练-调整曝光不足的商品图片本任务通过调整曝光不足的商品图片，熟练掌握“曲线”命令和“色阶”命令的使用。
第3讲掌握主图的设计基础。
掌握直通车图的设计基础。
掌握钻展图的设计基础。
了解网店推广图的设计思路。
掌握网店推广图的制作方法。
培养对网店推广图的审美鉴赏能力。
培养对网店推广图的设计创意能力。
3.3.3任务知识：圆角矩形工具3.3.4任务实施：设计生鲜食品钻展图3.4 项目演练-设计母婴产品车图3.4.1任务引入3.4.2设计理念小结1、掌握主图的设计基础。
2、掌握直通车图的设计基础。
3、掌握钻展图的设计基础。
作业3.4项目演练-设计母婴产品车图本任务通过设计母婴产品车图，明确当下母婴产品行业车图的设计风格并掌握车图的设计要点与制作方法。
第4讲掌握店铺海报的设计尺寸。
掌握店铺海报的版式构图。
掌握店铺海报的设计形式。
了解店铺海报的设计思路。
掌握店铺海报的制作方法。
培养对店铺海报的审美鉴赏能力。
培养对店铺海报的设计创意能力。
小结1、掌握店铺海报的设计尺寸。
网店美工设计(项目式全彩微课版)58824-教学大纲[2页]
![网店美工设计(项目式全彩微课版)58824-教学大纲[2页]](https://img.taocdn.com/s3/m/4117be608f9951e79b89680203d8ce2f0066652b.png)
《网店美工设计(项目式全彩微课版)》教学大纲课程介绍：本书全面系统地介绍了网店设计的相关知识点和基本设计技巧，包括走进网店美工世界、美化处理商品图片、设计网店推广图片、设计店铺趣味海报、设计PC端店铺首页、设计PC端店铺详情页、设计无线端店铺和拍摄与制作网店视频等内容。
全书内容介绍均以相关知识讲解加任务案例为主线。
每章的相关知识讲解部分使学生能够系统的了解网店设计中的各类基础规范，任务部分可以使学生快速掌握网店设计思路并能完成任务。
主要章节的最后还安排了项目演练,可以拓展学生对网店设计的实际应用能力。
本书可作为职业院校网店美工相关课程的教材，也可供相关人员学习参考。
培训目标：➢走进网店美工世界➢美化处理商品图片➢设计网店推广图片➢设计店铺趣味海报➢设计PC端店铺首页➢设计PC端店铺详情页➢设计无线端店铺➢拍摄与制作网店视频学习时间：64学时。
培训内容：一、走进网店美工世界1.认识网店美工的基础知识；2.了解网店装修的常用软件；3.熟悉网店装修的风格定位；4.明确网店装修的基本流程。
二、美化处理商品图片1、掌握裁剪的处理基础；2、掌握抠图的处理基础；3、掌握调色的处理基础；4、掌握修图的处理基础。
三、设计网店推广图片1、掌握主图的设计基础；2、掌握直通车图的设计基础；3、掌握钻展图的设计基础。
四、设计店铺趣味海报1、掌握店铺海报的设计尺寸；2、掌握店铺海报的版式构图；3、掌握店铺海报的设计形式。
五、设计PC端店铺首页1、掌握PC端店铺首页的设计尺寸；2、掌握PC端店铺首页的核心模块。
六、设计PC端店铺详情页1、掌握PC端店铺详情页的设计尺寸；2、掌握PC端店铺详情页的核心模块；七、设计无线端店铺1、掌握无线端与PC端店铺的区别；2、掌握无线端店铺首页的设计基础；3、掌握无线端店铺详情页的设计基础。
八、拍摄与制作网店视频1、掌握网店视频的构图原则；2、掌握网店视频的上传类型；3、掌握网店视频的制作流程。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
产品的价格
2. 3.
产品的价格与产品质量的配合程度如何 消费者对产品价格的认识如何
……
产品的卖点
1. 2.
产品独特卖点是什么 它无我有的特点是什么
……
1. 产品的主要原料是什么
产品的材质
2. 3.
产品在材质上有无特别之处 消费者对产品材质的认识如何
……
1. 产品通过什么样的工艺生产
产品生产工艺
2. 3.
任务3
6.3.1 页面内容布局 6.3.2 移动端详情页切片制作 6.3.3 神笔高效率制作无线详情页
— 3—
项文案策划能力；宝贝焦点图的设计构思； PC端和移动端详情页的制作技能掌握。
【项目导图】
— 4—
【引例 】
超市都是自选销售模式，并将超级市场和折扣店的经营优势合为一体的满足 顾客一次性购足需求的零售业态，合理布局和科学的商品陈列对于吸引顾客具有 极为重要的作用。通过新颖，活泼，更具吸引力的卖场布局和商品陈列，可以直 接或间接地提高门店的营业效率。
产品调研分析
内容
1. 产品的性能有哪些
产品的性能
2. 3.
产品最突出的性能是什么 产品最适合消费者需求的性能是什么
4. 产品的哪些性还不能满足消费者需求
……
1. 产品是否属于高质量的产品
产品的质量
2. 3.
消费者对产品质量的满意程度如何 产品的质量能继续保持吗
4. 产品的质量有无继续提高的可能
……
1. 产品价格在同类产品中居于什么档次
1. 在性能上有什么优势，有什么不足
2. 在质量上有什么优势，有什么不足
与同类产品比较
3. 在价格上有什么优势，有什么不足 4. 在材质上有什么优势，有什么不足
5. 在工艺上有什么优势，有什么不足
6. 在消费者认知和购买上有什么优势，有什么不足……
— 8—
6.1.2 文案策划
详情页文案写作的范畴
图6-1 标题文案 案
— 9—
图6-2 属性文
6.1.2 文案策划
页面详细文案设计
— 10 —
6.1.2 文案策划
详情页文案编写中常见的问题
图6-4 无逻辑性标题（“/”符号标题） 样的标题
— 11 —
图6-5 含有“预售”字
6.1.2 文案策划
内页文案编写遵循符合商品营销的5大环节
1）引发兴趣环节。 2）激发潜在需求环节。
3）营销引导环节（从信任到信赖）。 4）深度营销环节（从信赖到想拥有）。 5）替客户做决定环节。
有一句话是这样说的：“有道无术,术尚可求,有术无道,止于术”。意思是说有方法理论但是没 有技术，技术尚且是可以学到和培养，如果只有技术但缺少理论方向的支持，则只能停留于技 术层次，个人发展很容易到瓶颈，无法进一步发展，只能止步不前。网上有些人把美工分为技 术型美工和运营型美工，这个也是美工自我发展的一个过程。从营销学的角度分析，详情页的 设计思路基本上遵循以上五部曲。
2. 在质量上有什么优势，有什么不足
3. 在价格上有什么优势，有什么不足
与同类产品比较
4. 5.
在材质上有什么优势，有什么不足 在工艺上有什么优势，有什么不足
6. 在消费者认知和购买上有什么优势，有什么
不足
……
记录
《网店美工》
— 7—
表6-1 产品调研分析表
.
6.1.1 产品调研分析
产品调研分析
内容
目 录 页
Contents Page
任务1 产品调研分析与文案策划 任务2 PC端详情页设计 任务3 移动端详情页设计
— 2—
目 录 页
Contents Page
任务1
6.1.1 产品调研分析 6.1.2 文案策划 6.1.3 解析详情页设计思路
任务2
6.2.1 页面内容布局 6.2.2 PC端详情页设计
3. 消费者是否喜欢通过这种工艺生产的产品…… 1. 产品的外观与包装是否与产品的质量、价格和形象相称
析，如图表6-1 产品
产品外观与包装
2. 产品在外观和包装上有没有缺欠 3. 外观和包装在货架上的同类产品中是否醒目
调研分析表。
4. 外观和包装对消费者是否具有吸引力 5. 消费者对产品外观和包装的评价怎么样……
— 12 —
6.1.2 文案策划
焦点图
激发潜在需求
精彩文案
— 13 —
好评图
目 录 页
Contents Page
任务1 产品调研分析与文案策划 任务2 PC端详情页设计 任务3 移动端详情页设计
— 14 —
6.2.1 页面内容布局
产品价值+消费信 任=下单，详情页上半部 分诉说产品价值，后半部 分培养顾客的消费信任感。 对于消费信任感不光通过 各种证书，品牌认证的图 片来树立。使用正确的颜 色，字体，还有排版结构， 这些对赢得顾客消费信任 感也会起到重要的作用。 详情页每一块组成都有它 的价值，都要经过仔细的 推敲和设计。
在生产工艺上有无特别之处 消费者是否喜欢通过这种工艺生产的产品
……
1. 产品的外观与包装是否与产品的质量、价格
和形象相称
2. 产品在外观和包装上有没有缺欠
产品外观与包装 3. 外观和包装在货架上的同类产品中是否醒目
4. 外观和包装对消费者是否具有吸引力
5. 消费者对产品外观和包装的评价怎么样
……
1. 在性能上有什么优势，有什么不足
1. 产品独特卖点是什么
文案，让买家通过宝
2. 它无我有的特点是什么…… 1. 产品的主要原料是什么
贝详情页能够清楚了
产品的材质
2. 产品在材质上有无特别之处 3. 消费者对产品材质的认识如何……
解产品的特性和卖点， 产品生产工艺
1. 产品通过什么样的工艺生产 2. 在生产工艺上有无特别之处
主要从8个方面来分
— 5—
目 录 页
Contents Page
任务1 产品调研分析与文案策划 任务2 PC端详情页设计 任务3 移动端详情页设计
— 6—
6.1.1 产品调研分析
在为宝贝设计详情页之前，我们首先 要对产品进行调研分析，通过彻底了解宝贝 后，再根据其特点来设计宝贝详情页文案， 让买家通过宝贝详情页能够清楚了解产品的 特性和卖点，主要从8个方面来分析，如图 表6-1 产品调研分析表。
记录
在为宝贝设计 详情页之前，我们首 先要对产品进行调研 分析，通过彻底了解 宝贝后，再根据其特 点来设计宝贝详情页
产品的性能
产品的质量
产品的价格 产品的卖点
1. 产品的性能有哪些 2. 产品最突出的性能是什么 3. 产品最适合消费者需求的性能是什么 4. 产品的哪些性还不能满足消费者需求…… 1. 产品是否属于高质量的产品 2. 消费者对产品质量的满意程度如何 3. 产品的质量能继续保持吗 4. 产品的质量有无继续提高的可能…… 1. 产品价格在同类产品中居于什么档次 2. 产品的价格与产品质量的配合程度如何 3. 消费者对产品价格的认识如何……