（中职）网店装修学习情境五 引起购买欲的详情页课件

（中职）网店装修学习情境五引起购买欲的详情页课件

在网店装修中，无论是新手卖家还是老卖家都知道宝贝详情页的重要性，相信没有一个消费者在看宝贝的时候不了解宝贝详情就直接购买的，一个好的宝贝详情页是营造客户良好体验，介绍公司的产品或者服务并且突出卖点，能激起顾客的购买欲，打消客户顾虑，促使顾客下单购买，从而提高店铺转化率和降低客服接待工作量。那么怎么样的宝贝详情页才更吸引你的目标客户呢？

表5-1任务单任务指派人陈明发出日期10.8完成日期/时间10.10任务名称茶花随手杯详情页制作任务要求有明确细文档列明要求/路径

其他：任务用途首页

主题独立页

官方承接页

主图

直通车图

钻展图

详情基础优化

详情深度优化

官方引流图

主题广告图

新品上新

常规活动营销策划主题活动策划

大型活动策划

商品运营策划

其他：对YIMI伊米生活日用百货店进行店铺装修视觉规范自我检查

确认签名

组长检查

确认签名

验收人按要求完成是

否确认签名

细文档：

因新品上新的需要，设计部主管陈明发出一任务单（见表5-1），要求制作茶花随手杯的详情页。

具体要求：

1、设计要求突出产品卖点。2、表现要求简约大气，排版合理，主次分明。3、作品风格要根据目标客户群体制定，必须原创。4、C店设计规格均为750×3000以上。5、必须是彩色原稿，能以不同的

比例尺寸清晰显示。1、知识目标2、技能目标掌握网店详情页的设计流程能够独立完成网店详情页设计了解网店详情页的基础理论知识掌握网店详情页的创作方法详情页内容模块任务一

资讯学习流程计划设计决策任务实施详情页策划任务一举个例子，两家马克杯的详情页，对比一下。

资讯学习流程计划设计决策任务实施

一、详情页的尺寸一屏的高度大约等于800像素，优秀详情页屏数应为20屏。对于PC端来讲：高度：约为16000px宽度：750px（C店）、790px（B店）详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块1、宝贝的基本信息表详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块2、关联促销关联促销是指在一个宝贝详情页里放进另外一个或几个其他产品的促销信息或店铺优惠信息等。1）热销产品推荐详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块2）店铺促销活动详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块3、宝贝焦点图能够展示品牌以及产品特色的意境图、热销盛况、产品升级、买家痛点、宝贝促销信息、以海报形式展示，能够引发客户购买冲动的图片。详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块4、宝贝整体展示宝贝整体展示大体可以分为场景图和摆拍图。1）场景图：宝贝的使用场景。详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块2）摆拍图：以突出产品为主，通过简单的背景对宝贝进行实拍。详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块5、宝贝细节展示近距离展示商品亮点，通过细节实拍图和简短文字，清晰富有质感地展示宝贝的材质、图案、做工、功能等各细小部分。详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块6、宝贝规格参数描述宝贝的规格参数，包含编号、产地、颜色、材质、规格、重量、洗涤建议等。详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块7、品牌说明通过一系列的理念、品牌介绍，让买家觉得品牌质量可靠，烘托出品牌实力。1）品牌介绍详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块2）媒体推荐详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块3）正品证书、品质证书详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块4）正品、假冒伪劣商品对比图详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块8、搭配推荐可以放搭配套餐、同款推荐、穿搭建议，如情侣款或者中长款，但不要和之前的关联推荐重复。详情页内容模块任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块9、买家反馈信息买家反馈展示包括好评如潮的相关截图、网络红人的使用体验和买家秀展示。详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块10、包装展示详情页策划任务一资讯学习流程计划设计决策任务实施

二、详情页的内容模块11、购物需知包括邮费、发货、退换货、衣服洗涤保养、售后问题等。详情页策划任务一资讯学习流程计划设计决策任务实施根据《天下网商》做的调查显示，仅有20%的买家会在详情页停留2分钟以上。

详情页策划任务一资讯学习流程计划设计决策任务实施

三、详情页的模块排序详情页的成交五部曲：第一步：引发兴趣详情页的开头应该是视觉的焦点，可以放一些能够展示品牌以及产品特色的意境图、热销盛况、产品升级、买家痛点等，第一时间引发买家兴趣。第二步：激发需求利用详情页的前三屏激发买家的潜在购买需求，放一些场景图、产品使用效果图等，引发买家购买欲望。第三步：产生信任通过宝贝细节展示、功能展示、参数展示，全面展示宝贝任何一个细节，着重突出产品卖点，逐步获取买家信任。详情页策划任务一资讯学习流程计划设计决策任务实施

三、详情页的模块排序第四步：信赖到占有通过同类商品对比、品牌介绍、媒体推荐、正品证书、品质证书、买家反馈信息等，展示出品牌实力。第五步：打消顾虑成交通过展示各种售后保障服务、物流问题，如支持7天无理由退换货，温馨提示，邮费说明等免除买家后顾之忧。还可以进行搭配推荐，让客户再购买更多的宝贝，提高成交的客单价。详情页策划任务一资讯学习流程计划设计决策任务实施

三、详情页的模块排序详情页的成交五部曲：①引发兴趣②激发需求③产生信任④信赖到占有⑤打消顾虑成交根据以上成交五部曲的分析，详情页的模块排序建议：详情页策划任务一资讯学习流程计划设计决策任务实施买家定位产品形象通过对任务的分析及详情页设计的学习，制定以下计划：描述策划撰写同行调查详情页策划任务一资讯学习流程计划设计决策任务实施一、买家定位每种商品都应相对应的消费人群，而每个消费人群都有其特征，如：性别、年龄、消费能力、职业特征等。通过阿里指数（/）、生意参谋等数据工具，查询随手杯类目的消费人群。

通过分析，我们将随手杯的客户人群定位为18--29岁喜欢户外运动、爱好大自然、游山玩水、有一定经济基础的青年人或居家妇女。因此详情页的主体风格应该采用大气、清新、自然简约的风格；色调采用明朗柔和、清新环保的颜色；排版风格采用简约版式。二、产品形象产品的外观、包装、功能、使用方法、作用等不同方面，会影响描述的风格策划。这款茶花随手杯，外观设计偏向清新、运动感，以柠檬绿色为主色调，设计简约时尚。

三、全网调查通过分析全网销量最前的几款随手杯的详情页，分析他们的定位、文案和风格等等，然后相应做出调整。四、详情页策划撰写详情页策划任务一资讯学习流程计划设计决策任务实施使用Excel策划出如下“茶花随手杯详情策划书”。1、引发兴趣：产品氛围焦点图。2、激发潜在需求：随手杯的使用场景图、实拍图。详情页策划任务一资讯学习流程计划设计决策任务实施使用Excel策划出如下“茶花随手杯详情策划书”。3、产生信任：随手杯的产品信息、细节展示。详情页策划任务一资讯学习流程计划设计决策任务实施使用Excel策划出如下“茶花随手杯详情策划书”。4、信赖到占有：茶花的品牌介绍、与其他品牌对比。详情页策划任务一资讯学习流程计划设计决策任务实施使用Excel策划出如下“茶花随手杯详情策划书”。5、打消顾虑成交：随手杯包装展示、使用说明、购买需知。详情页策划任务一详情页设计任务二

资讯学习流程计划设计决策任务实施详情页设计任务二

2013年1月31日，加多宝与王老吉的“广告词官司”。加多宝虽然输掉了广告词，却赢得了更多的关注。资讯学习流程计划设计决策任务实施

一、详情页文案编写要点1、分析产品价值提炼精细化文案

分析产品的价值，直接提炼买家对产品的认知，通过提炼产品的价值，用简洁、精细化的文字表达出来。详情页设计任务二资讯学习流程计划设计决策任务实施

一、详情页文案编写要点2、分析产品的自身优势提炼文案的精髓

同类产品的优势有些是相似的，我们可以参考别人的同类产品，找出自身产品优势，并把挖掘到的优势进行放大、精炼，吸引买家。详情页设计任务二资讯学习流程计划设计决策任务实施

一、详情页文案编写要点3、分析行业趋势提炼文案吸引力

通过对比竞争对手的详情页文案，更能了解行业趋势，加深文案吸引力。详情页设计任务二资讯学习流程计划设计决策任务实施

一、详情页文案编写要点4、分析季节相关与潮流走势提炼文案

季节性提炼文案，如：夏季产品就应该突出夏季产品清凉、冰爽的特点；冬季产品就应该突出冬季产品保暖、温暖的特点。详情页设计任务二资讯学习流程计划设计决策任务实施

一、详情页文案编写要点5、通过品牌形象制作文案精髓

如果你的产品有明星款、代言人，可以突出其品牌形象制作文案。详情页设计任务二资讯学习流程计划设计决策任务实施

产品详情页有很多种类型，你的产品到底适合哪种类型？详情页设计任务二资讯学习流程计划设计决策任务实施

一、详情页类型1、功能型商品详情页

这种类型的详情页主要体现的价值在于商品功能上，比如：各类护肤品的使用效果、电器和数码产品的功能介绍等。详情页设计任务二资讯学习流程计划设计决策任务实施

一、详情页类型2、符号型商品详情页

对于有特殊意义的商品，可以以商品为载体，重点突出商品的内在含义，传达商品的内在意义，引起买家共鸣。详情页设计任务二资讯学习流程计划设计决策任务实施

一、详情页类型3、感觉型商品详情页

这种类型的详情页主要给顾客体现身临其境的感觉。详情页设计任务二资讯学习流程计划设计决策任务实施

一、详情页类型4、服务型商品详情页

比如免费送货上门、免费安装、各种有保障的售后服务等，虽然这些服务不计入商品价值当中，但是这些服务却深受顾客喜爱。详情页设计任务二资讯学习流程计划设计决策任务实施

一、详情页类型5、附加价值

专属老顾客的服务通道，以及专属的优惠价，新顾客也有相对的礼品，通过附加价值提高店铺销量、顾客粘性。详情页设计任务二资讯学习流程计划设计决策任务实施分析策划书字体、配色、风格选择通过对任务的分析及详情页设计的学习，制定以下计划：PS制作描述搜找相应素材详情页设计任务二资讯学习流程计划设计决策任务实施一、分析策划书

根据策划人员给的策划书，我们得知：1、茶花随手杯消费人群的特征：一般为沿海地区的喜欢户外运动、大自然的男女青年或居家妇女，且女性稍多。而该类消费者一般都喜欢时尚，清新，简约，动感的风格。2、茶花随手杯的特征：颜色为柠檬绿色，设计简约时尚，清新动感。3、其他网店的随手杯详情页设计：一般以简洁，可爱，女性化风格为主。二、配色、风格、字体选择

根据策划书的分析，我们初定茶花随手杯的详情页设计配色以黄绿色、灰色、白色为主色调，由于我们的随手杯还有大部分男性消费者，所以设计风格主要以简约、时尚、动感为主，不易太过可爱活泼。字体上选用简洁有力，不刚不柔的方正兰亭系列，如：大标题使用方正兰亭粗黑，小标题使用方正兰亭中黑、方正兰亭黑，正文使用方正兰亭细黑。三、搜找相应素材

看看全网销量排前的详情页，把有用的素材及排版方式保存备用，通过各大设计网站以及百度图片搜索下载素材。详情页设计任务二资讯学习流程计划设计决策任务实施1、打开文档

调出之前完成详情页策划书的“茶花随手杯详情策划书.xls”，根据策划书设计详情页，文案可以根据排版需要做调整。2、新建图像

打开PS软件，新建一个750×3000像素的文档，文件名为“随手杯详情页”。图像高度按照后期详情页的需要继续增加，高度增加方法：打开“画布大小”，修改高度为你需要的高度，定位点击向上箭头。详情页设计任务二资讯学习流程计划设计决策任务实施3、设计随手杯的核心卖点焦点图

可以使用情镜三的“随手杯海报.psd”，再根据需要做简单修改调整。详情页设计任务二资讯学习流程计划设计决策任务实施4、设计随手杯使用场景图

多方面展示随手杯的使用效果，使用场景。通过客户肖像表分析，我们将随手杯的客户人群定位为18--29岁喜欢户外运动、爱好大自然、游山玩水的青年人或居家主妇，所以针对健身一族、户外一族，我们需要一些能展示杯子能拿去户外活动的图片，比如运动、野餐、开车时可以用到我们的随手杯；针对花卉一族，我们需要几张大自然和随手杯放一起的场景；而针对居家妇女，就得需要随手杯放在家里的图片，比如说在餐桌上、办公桌上放随手杯。因此我们可以得到以下几个主题，如：旅行伴侣、运动伴侣、办公伴侣、居家伴侣等。详情页设计任务二资讯学习流程计划设计决策任务实施5、设计随手杯实拍图

多角度展示随手杯，配上简单文字，更能显示产品优势。详情页设计任务二资讯学习流程计划设计决策任务实施6、设计随手杯产品参数信息

产品参数，尺寸对比（参照物使用较为常见的物品）、产品分解（把产品每个零配件展示出来，叙述其优势所在）。详情页设计任务二资讯学习流程计划设计决策任务实施7、设计随手杯细节展示图

把产品的细节用大图展示，配上合适的，有说服力的文案。详情页设计任务二资讯学习流程计划设计决策任务实施8、设计PK图

被PK的水杯图尽量使用拍摄效果不好的，水杯质量差的图片，更能显示出我们自己的产品的优势。详情页设计任务二资讯学习流程计划设计决策任务实施9、设计茶花品牌简介展示

把文案和图片做合适的排版展示。详情页设计任务二资讯学习流程计划设计决策任务实施10、设计随手杯包装展示和硅胶清洁小知识

把文案和图片做合适的排版展示。详情页设计任务二资讯学习流程计划设计决策任务实施11、设计随手杯购买需知

把购买需知的相关文案排版展示，风格与前面的保持一致。详情页设计任务二资讯学习流程计划设计决策任务实施12、设计关联促销

选择4款畅销产品作为关联促销，突出产品的高销售量。由于随手杯为新产品，所以该关联放在随手杯描述的最前面，以减少买家流失率。详情页设计任务二资讯学习流程计划设计决策任务实施13、保存文档。详情页设计任务二详情页上传任务三

资讯学习流程计划设计决策任务实施

一、详情页切图

我们经常可以发现有些店铺由于详情页图片过大而加载时间很长，很多买家都会失去耐心而跳出页面。一般我们做好的详情页都很长，对于这些宽度为750像素，高度超过7000像素的图片，单单一种图片大小就超过3MB了，在一般的网速下，如不加载5分钟都看不到图片。

所以我们必须对做好的详情页进行切片上传，淘宝官方建议详情页图片不宜超过25张，宽度与高度分别控制在750px与1500px，而且单张图片大小不宜超过300k，要不没等图片加载完，买家就直接关掉页面了。

另外，由于往往会因为网速太慢，而出现切割的图片间被断开，所以在切割时我们还需要注意的是，尽可能的把每一片切片切割成一个完整的图片。详情页上传任务三资讯学习流程计划设计决策任务实施

二、切片工具PS的切片工具可以根据需求截出图片中的任何一部分，同时一张图上可以切多个地方。PS的切片在另存为的时候就能将所切的各个部分分别保存一张图片。

切片工具的作用：可以在不改变图片的尺寸下缩小图片的大小，使网页在相同的网速下加载速度更快，其次还可以对每张切片加上链接，省去了Dreamweaver软件的应用。

保存切片，选择“文件”—“存储为WEB和设备所用格式”；只需要代码文件，存储格式选择“仅限HTML”；两者都需要，选择“HTML和图像”。详细详情页切图操作请看下面的“任务实施”部分。详情页上传任务三资讯学习流程计划设计决策任务实施使用Photoshop切片工具切图保存图片到空间设计好详情后，进行切图上传，制定以下计划：上传到店铺详情页上传任务三资讯学习流程计划设计决策任务实施1.使用Photoshop打开“随手杯详情页.jpg”。2.选择“切片工具”

对图片切片，然后鼠标变成小刀，在想切片的地方开始，长按鼠标左键然后往右拉或者往下拉，就会出现一个四方形的区域块，这就是每个切片的范围，直到拉到合适地方为止后放开鼠标左键。如果想把一个图片平均分成几等份时，可以右击“切片分割”，选择水平或垂直分割，将图片平均分割，而不需要一步步切割。每个完整的图片切一张，每个切片高度控制在1500px内。详情页上传任务三资讯学习流程计划设计决策任务实施3.保存时，选择“存储为WEB和设备所用格式”（快捷键：Alt+Shift+Ctrl+S），这是一种专门用于网页制作的格式。详情页上传任务三资讯学习流程计划设计决策任务实施4.详情页只需要图片文件，所以存储格式选择“仅限图像”。详情页上传任务三资讯学习流程计划设计决策任务实施5.根据保存的路径，找到相应的文件夹，打开名为“image”的文件夹就能看到根据刚才切片的规格切割的一张张图片。详情页上传任务三资讯学习流程计划设计决策任务实施6.将每一张图片上传到空间。详情页上传任务三资讯学习流程计划设计决策任务实施7.编辑详情页，把图片空间中的图片插入到详情页中，注意图片的顺序可能会在上传时被打乱，所以插入图片时必须看清楚，按顺序地插入。由于这款随手杯为新产品，销量较低，所以应该把关联促销插入到产品描述的前面（若为热销产品建议把关联促销放描述后面，详细请看任务一中的关联促销部分）。详情页上传任务三资讯学习流程计划设计决策任务实施8.确认，完成编辑。详情页上传任务三一、详情页策划详情页尺寸（PC端）高度建议约为16000px（20屏），宽度C店为750px、B店为790px。详情页的内容基本可以分成以下几个模块：1、宝贝的基本信息表2、关联促销（热销产品推荐和店铺促销活动）3、宝贝焦点图4、宝贝整体展示（场景图和摆拍图）5、店铺促销活动6、宝贝规格参数7、品牌说明（品牌介绍、媒体推荐、正品证书、品质证书和正品、假冒伪劣商品对比图）8、搭配推荐9、买家反馈信息10、包装展示11、购物需知。

二、根据买家消费心理过程，建议对详情页各模块进行如下排序：三、在撰写详情页策划前，需进行以下几个任务：1、通过淘宝指数，分析产品的消费群，得出客户群肖像表；2、分析产品的外观、包装、功能、使用方法、作用等产品形象；3、借鉴全网销量最前的几款随手杯的详情页。

四、详情页文案编写思路与技巧：1、分析产品价值提炼精细化文案；2、分析产品的自身优势提炼文案的精髓；3、分析行业趋势提炼文案吸引力；4、分析季节相关与潮流走势提炼文案；5、通过品牌形象制作文案精髓。

五、产品详情页类型：1、功能型商品详情页（如：护肤品、电器、数码产品）；2、符号型商品详情页（如：节日礼物、鲜花）；3、感觉型商品详情页（如：沙滩裙）；4、服务型商品详情页（如：免费送货上门、免费安装）；5、附加价值（如：会员专享）六、详情页上传1、使用切片工具对做好的详情页切片，每张切片的宽度与高度分别控制在750px与1500px，而且单张图片大小不宜超过300k。2、把每张切片上传到图片空间。3、把上传到图片空间的切片插入到详情页中。实训目的了解详情页制作的设计方法及步骤，掌握如何为店名为“三年2班”的文体店中的圆珠笔商品设计一份详情。实训准备（1）组队：以小组为单位，4-6人一组，并选出一名组长，分配好组员的工作。（2）素材：商品图片若干，见情境五实训素材实训任务