网店美工 市赛获奖

赢家宝典网店美工赢家宝典吸引买家才是王道之详情页设计第11章Areyouready?第11章吸引买家才是王道之详情页设计详情页设计技巧制作商品详情页代码制作商品详情页11.111.211.3商品详情页是提高转化率的入口，它可以激发买家的消费欲望，树立买家对店铺的信任感，打消买家的消费疑虑，促使买家下单。商品本身虽然对转化率起着决定性的作用，但是好的宝贝详情页可以提高商品的转化率。宝贝详情页的设计要与宝贝主图、宝贝标题相契合，详情页的内容必须能真实地介绍宝贝的属性，如标题或主图中体现的商品是韩版男士西装，但是设计出来的页面却是欧美风格，买家的第一感觉就是不符合标题所述，肯定会马上关闭页面。因此，在打造爆款详情页的时候需要遵循三点设计原则。第一：策划文案策划商品文案是让卖家头痛的一件事，面对自己的宝贝，想提炼的卖点太多，想表现的内容更多，却没有一个合理排版的文案，该怎么办？此时，买家可以参考同行的店铺来策划文案，一个成熟的天猫店铺，他们的文案以及商品体验系统已经做到了非常优秀的地步，而卖家要做的事情仅仅是站在巨人的肩膀上来学习他们的文案系统，并将多个天猫店铺的文案进行拆分，结合自己商品的特点再将文案重组。策划方案第二：表现形式这里所指的表现形式就是将文字信息通过图片+文字的形式展现给买家，而不是以单纯的文字对产品进行描述。买家看完详情页之后，买还是不买主要是看商品表现形式是否打动了买家的心。另外，不要将详情页设计的像商品的说明书一样，因为没有买家愿意一字一句得去了解你的商品，需要做的是将文字中的卖点提炼，将卖点通过图片的形式展现出来提炼前的详情页提炼后的详情页前后两张图片所示的是鑫艾克线缆的卖点。其中，第一幅图提炼前的详情页是通过一句话和一张图片来阐述了高精度无氧铜的特点，却没有将文字中所提及到的重点内容展现出来，只有区区几十个字的宝贝描述，买家会因为这一句话而购买吗？后一幅图所示的提炼后的详情页是经过笔者修改后，以抓住买家心理让买家购买为前提，结合生动的图片表现形式将语句中的卖点提炼出来。不但能够让买家清晰、直观、详尽地了解高精度无氧铜的特点，还能够洞察买家的内心世界，提炼出“十年可省电费3264元”来满足买家的期望。第二：表现形式第三：色调统一宝贝详情页的色调是能够给买家传达心理暗示的一种最直接的方式。整体详情页的色调给大家的第一感觉是什么，买家就会根据这个感觉去浏览宝贝详情页。例如购买电线时，我们首先想到的是要买品质好的安全电线，那么，电线详情页的整体颜色就应该采用绿色，给买家一种安全、环保的感觉。如果采用红色系来设计，就会让买家联想到火而违背了买家购买的初衷。绿色调详情页红色调详情页第三：色调统一从绿色调详情页和红色调详情页两幅图片中可以看出，商品的文字信息、商品的摆放位置和图片中采用的元素都是一样的，不同的是一幅采用绿色调来诠释电线的特点，而另一幅采用红色调来诠释电线的特点，哪张图更符合商品本身，我想大家一定一目了然了吧。因此，在设计详情页时要传达的色调要符合商品的气质，带动买家的情绪，类目不同、商品不同，但是道理是相同的。很多新手买家或者美工以为做商品详情页就是简单的摆放几张商品图，然后加一些参数表、再放一个5星好评就可以了，其实做详情页说简单也简单，说难也难，难就难在什么样的详情页布局能够将产品卖出去！简单来说，详情页的布局应该采用上半部分阐述商品价值，下半部分培养买家的消费信任感来完成。在详情页的构成框架中，每一块组成都有它的价值，都要经过仔细地推敲和设计，下面针对每一个框架进行详细的阐述。商品详情页的构成上半部分阐述商品价值利用创意海报瞬间传递商品以及店铺信息，用最短的时间使买家产生继续浏览的欲望，因此在设计该部分时可以尽情展现商品的特色。上半部分阐述商品价值一个商品的卖点有很多，如果零散的分布，买家很难自己总结出商品的优势，因此在阐述卖点之前应该对所有卖点进行一个大的总结，告诉买家这个商品的卖点都在哪里，都有哪些。上半部分阐述商品价值根据商品卖点优势总结进行逐一的展示，其中1～6个卖点在对应的模块中展示，这里所要展现的就是商品的特色，塑造商品“专业”性，向买家传达产品能够带来卓越功效等此类信息，提升买家的购买欲望。上半部分阐述商品价值这里要写的其实就很简单了，它指的是可视化的商品说明书。上半部分阐述商品价值商品全方位展示以多个角度展示商品面貌，目的就是拉近与买家的距离，让买家了解这款商品是否适合自己。上半部分阐述商品价值商品细节展示要清晰、富有质感，并且附加具体细节的相关文案介绍，方便买家更好地了解商品的材质和构造。下半部分培养买家的消费信任感通过对比强化自己的商品卖点，不断向买家阐述商品的优势。下半部分培养买家的消费信任感通过商品包装可以展现店铺的品牌实力和商品的专业性，好的产品包装可以赢得买家的信赖，让买家觉得这个产品的性价比很高。下半部分培养买家的消费信任感这里体现的是品牌的实力，引导买家关注商品的专业品质，并让买家对商品产生信任感，从而接纳商品。下半部分培养买家的消费信任感通过店面或者工厂的图片展示，可以烘托出品牌和店铺的实力，增强买家对品牌的认知和信任感。下半部分培养买家的消费信任感商品售后说明可以解决买家已知和未知的各种问题，例如，是否支持7天无条件退换货，本店选择发哪种快递，产品有质量问题应该如何解决等，好的商品售后说明模块不但可以减轻客服的工作压力，也可以增加静默转化率，从而做到把复杂的问题留给自己，把简单的答案留给买家。本节介绍的是常见的详情页布局框架，具体情况下，买家需要提炼、结合自身商品的卖点来套用框架，并不是说所有的类目都适合这一框架。通过前面的学习我们已经对商品详情页的设计有了深刻的了解，下面就根据所学内容来对商品详情页中的部分重要模块进行设计制作。关联销售模块是推动商品转化率的重中之重，它的作用不仅仅是分流，还会增加客单价（是指每个顾客平均购买商品的金额），让买家买完这个还想买那个。卖家可以在这里搭配本店的其他明星产品，这样不但能增加客单价，也可以促进转化率。关联销售模块通常放在页面的最顶端或者创意海报情景大图下方，但是不建议放入太多的关联产品，一般5～8个为最优效果。具体操作步骤如下：关联销售模块操作步骤步骤1执行【文件】丨【新建】命令，新建一个名称为关联销售，尺寸为750×510像素的空白文档，然后为背景图像填充颜色，色值为【#c92912】。新建文档并填充颜色操作步骤步骤2利用【直线工具】绘制粗细为1像素的白色直线，然后利用【横排文字工具】输入文字信息。字体：微软雅黑；大小：5.58点字体：创艺简老宋；大小：11点字体：AmericanGaramondBold；大小：4点字体：ArrusBT；大小：10点字体：创艺简老宋；大小：12点字体：ArrusBT；大小：15.83点绘制直线并输入文字执行【窗口】丨【字符】命令，打开【字符】面板，点击其中的【仿斜体】按钮，可将字体设置为倾斜。【字符】面板操作步骤步骤3在工具箱中选择【矩形工具】，然后在图像中直线的下方绘制五个白色矩形。绘制矩形操作步骤步骤4在【图层】面板中选中左侧矩形所在的图层，打开本书配套素材【1.jpg】文件，将其中的商品图像拖动到【关联销售.psd】图像窗口中左侧矩形上，然后在【图层】面板中为商品图像所在的图层创建剪贴蒙版。复制素材文件并创建剪贴蒙版操作步骤步骤5在工具箱中选择【横排文字工具】，然后为商品添加对应的文字信息。输入文字字体：微软雅黑；大小：15.83点；颜色值：#B71300字体：黑体；大小：4点；颜色值：#B71300字体：Arial；大小：2.5点；颜色值：#B71300字体：黑体；大小：3点；颜色值：#B71300操作步骤步骤6根据步骤4～5中的操作方法，将【2.jpg】【3.jpg】【4.jpg】文件中的商品图像分别拖动到矩形选框中，创建剪贴蒙版后，输入对应的文字信息。完成关联销售模块后的最终效果如右图所示。复制素材文件并输入文字商品卖点总结模块主要是给买家一个清晰的商品功能全景，让买家对商品功能、特点，一览无余，对商品有一个全面的印象。按照先总结后分组的逻辑，把商品最好的一面展示出来。具体操作步骤如下：商品卖点模块操作步骤步骤1执行【文件】丨【新建】命令，新建一个名称为卖点总结，尺寸为750×630像素的空白文档，然后为背景图像填充颜色，色值为【#bff0fe】。打开本书配套素材【6.psd】文件，将其中的商品图像拖动到【卖点总结.psd】图像窗口中。新建文档、填充颜色并复制素材操作步骤步骤2执行【文件】丨【新建】命令，新建一个名称为卖点总结，尺寸为750×630像素的空白文档，然后为背景图像填充颜色，色值为【#bff0fe】。打开本书配套素材【6.psd】文件，将其中的商品图像拖动到【卖点总结.psd】图像窗口中。字体：方正兰亭中黑；大小：16.23点字体：方正兰亭中黑；大小：18.93点；颜色值：#7f7f7f字体：方正兰亭中黑；大小：19.95点；颜色值：#1c779c字体：方正兰亭中黑；大小：33.56点；颜色值：#1c779c绘制圆角矩形并输入文字操作步骤步骤3在工具箱中选择【自定形状工具】，在工具选项栏【形状】下拉列表中点击按钮，在弹出的菜单中选择【符号】，弹出【AdobePhotoshop】提示框，点击【追加】按钮，在列表中选择【选中复选框】，并设置前景色的色值为【#177299】。添加形状操作步骤步骤4在图像上按住【Shift】键的同时拖动鼠标绘制形状。绘制形状操作步骤步骤5在工具箱中设置前景色的色值为【#75afef】，利用【椭圆工具】在图像上绘制一个正圆形。绘制正圆形操作步骤步骤6在【图层】面板中点击【添加图层样式】按钮，在弹出的菜单中选择【投影】命令，为正圆形添加阴影样式。添加投影样式操作步骤步骤7打开本书配套素材【7.psd】文件，将其中的图片拖动到【卖点总结.psd】图像窗口中的正圆形上，并利用【横排文字工具】输入对应的文字信息。复制素材并输入文字字体：方正准圆简体；大小：18点；颜色值：#5c6c70字体：方正准圆简体；大小：18点；颜色值：#75afaf操作步骤步骤8根据步骤4～6中的操作方法，绘制其他商品功能模块，其中需要打开本书配套素材【8.psd】文件。制作其他商品功能模块操作步骤步骤9为了模块的美观度，可以为商品添加对应的英文信息，也可以添加一些云朵图案（素材【9.psd】文件），完成商品卖点总结模块后的最终效果如右图所示。最终效果为商品制作可视化的尺寸表格，列出基本参数，让买家了解商品的真实信息，以免收到商品后低于心理预期。具体操作步骤如下：制作商品基本参数操作步骤步骤1执行【文件】丨【新建】命令，新建一个名称为商品参数，尺寸为750×330像素的空白文档。新建文档操作步骤步骤2在工具箱中选择【直线工具】，在工具选项栏中设置颜色的色值为【#000000】，【粗细】为【1像素】，然后在图像上绘制多条直线。绘制多条直线操作步骤步骤3利用【椭圆工具】在图像上绘制三个黑色正圆形，再利用【横排文字工具】输入对应的商品文字信息。绘制正圆形并输入文字操作步骤步骤4打开本书配套素材【10.psd】文件，将其中的商品图像拖动到【商品参数.psd】图像窗口中。复制素材文件操作步骤步骤5在工具箱中选择【直线工具】，设置颜色为黑色，粗细为1像素，然后在图像上绘制如右图所示的直线。绘制直线操作步骤步骤6选择【椭圆工具】，在步骤5中绘制的直线上绘制黑色正圆形，然后利用【横排文字工具】输入文字信息，完成基本参数模块的制作。绘制正圆形并输入文字商品优劣对比模块是为了凸显自己商品的品质，让买家可以对同等商品进行对比。具体操作步骤如下：商品优劣对比操作步骤步骤1执行【文件】丨【新建】命令，新建一个名称为商品优劣对比，尺寸为750×450像素的空白文档，然后为背景图像填充颜色，色值为【#f2f2f2】。利用【横排文字工具】输入文字信息。新建文档、填充颜色并输入文字字体：方正兰亭大黑；大小：15.42点；颜色值：#000000字体：方正兰亭大黑；大小：42.8点；颜色值：#000000字体：方正兰亭大黑；大小：55点；颜色值：#b1000a操作步骤步骤2打开本书配套素材【11.psd】文件，将自己店铺的商品和其他店铺的商品图像拖动到【商品优劣对比.psd】图像窗口中，再利用【横排文字工具】输入文字【VS】等信息。复制素材并输入文字字体：Impact；大小：91.33点；颜色值：#b1000a操作步骤步骤3利用【直线工具】绘制对比选框，利用【横排文字工具】输入对比的文字信息。绘制直线并输入文字字体：张海山楷体；大小：24.4点字体：微软雅黑；大小：13点操作步骤步骤4在工具箱中选择【自定形状工具】，在工具选项栏中选择【选中复选框】形状，并设置前景色的色值为【#3b8202】，然后在图像上绘制形状。绘制形状操作步骤步骤5利用步骤4中的操作方法，设置前景色的色值为【#b1000a】，绘制【复选框】形状，然后利用【横排文字工具】在形状上输入【X】，完成商品优劣对比模块的制作。绘制形状并输入文字字体：方正兰亭黑；大小：24.26点；颜色值：#b1000a商品详情页的代码设计和其他模块的代码设计步骤不同，需要先切图再编辑代码，然后将代码上传到店铺中，在这里分3个小节对其进行讲解。操作步骤步骤1在Photoshop软件中打开本书配套素材【详情页.jpg】文件。打开素材文件操作步骤步骤2在工具箱中的【裁剪工具】上按住鼠标左键停留1～2秒，在弹出的菜单中选择【切片选择工具】。选择切片选择工具操作步骤步骤3在图像上点击鼠标右键，在弹出的菜单中选择【划分切片】命令，在弹出的【划分切片】对话框中勾选【水平划分为】复选框，再点击【像素/切片】单选钮，在编辑框中输入数值，范围建议在500～700像素之间，点击【确定】按钮。操作步骤步骤4关闭对话框后，完成详情页的划分切片操作。执行【文件】命令丨【存储为Web所用格式...】命令，快捷键为【Alt+Ctrl+Shift+S】。选择【存储为Web所用格式...】命令操作步骤步骤5在弹出的【存储为Web和设备所用格式】对话框中选择【图片格式】为【JPEG】，【品质】设定为【100】，点击【存储】按钮，将文件存储到桌面上。操作步骤步骤6这时会在桌面上生成一个【image】文件夹，文件夹内就是划分好的商品详情页图片。【image】文件夹商品详情页已经划分完毕，卖家需要将划分好的图片全部上传到淘宝【图片空间】，为利用Dreamweaver软件制作详情页代码做好准备工作。具体操作步骤如下：操作步骤步骤1进入Dreamweaver软件，在【文件】面板中新建【详情页.html】文件。步骤2双击打开【详情页.html】文件，点击【代码】按钮，然后删除代码区域内所有代码。操作步骤特效代码步骤3在【详情页.html】代码区域内输入新的代码内容。步骤4代码中的【width】代表详情页图片宽度；【overflow:hidden】代表不可以超过750像素以外；【float:left】代表图片永远是左侧顶端对齐。在详情页中划分了多少张图片，在这里就需要编辑对应数量的【<