Transition Page过渡页1赢赢家家宝宝典典网 店 美 工 赢 家 宝 典Transition Page过渡页2 视觉陈列 之 商品布局第第6 6章章Are you ready?Contents Page目录页第6章 视觉陈列之商品布局打造爆款推荐模块制作关联推荐，提升店铺销量优化商品陈列模块6.16.26.34打造爆款推荐模块6.1第6章 视觉陈列之商品布局淘宝爆款也就是店铺的人气宝贝，众所周知，拥有了爆款商品就拥有了流量提升的利器，淘宝网店转化率也将不再是难题。于是，各位卖家每天都费劲心思地打造爆款，但是淘宝爆款的打造远没有想象的简单，在打造爆款之前做好店铺首页爆款推荐模块，这才是成功的基础。5第6章 视觉陈列之商品布局6.1三三大大设设计计原原则则6.1.16.1.1打造爆款推荐模块我们都知道，一个店铺的自然流量中80%都是来自爆款，所以，在没有高额广告费用投入的情况下，做好店铺首页的爆款推荐就成了重中之重。那么，爆款推荐模块究竟是如何炼成的呢？每一个爆款都有其生命周期，针对不同的客户群体，更要合理地把握好这个周期，为店铺赢得流量，因此，我们要遵循以下三大设计原则。6第6章 视觉陈列之商品布局6.1三三大大设设计计原原则则6.1.16.1.1打造爆款推荐模块通过突出销量可以赢得新客户的信赖，也让新客户不难看出这款宝贝正处于销售热潮阶段，是当季的热卖款。突出销量7第6章 视觉陈列之商品布局6.1三三大大设设计计原原则则6.1.16.1.1打造爆款推荐模块销售折扣是一种促销手段，通过突出折扣不但可以赢得老客户的回头率，还可以有利于扩大商品的销路，增加产品的销量，提高店铺的整体盈利水平。突出折扣8第6章 视觉陈列之商品布局6.1三三大大设设计计原原则则6.1.16.1.1打造爆款推荐模块商品需要通过主推爆款商品和潜在爆款商品来设计商品陈列，这样布局能有效地解决店铺跳失率的问题，从保持主推爆款大于潜在爆款的模式，到商品的文字细节，一方面可以引导买家浏览体验，另一方面也可以避免让买家产生视觉疲劳，分不清主推产品是哪款。分清主次9第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块6.1.1节我们讲解了爆款推荐模块设计的三大原则，大部分卖家的爆款推荐模块只占其中之一，接下来我们要做的是将三大设计原则融合到一个模块中。从右图可以看出该模块以7款产品的设计为例，1款主推爆款商品，2款潜在爆款商品，3款热销商品进行设计布局，具体操作步骤如下：10第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤1执行【文件】丨【新建】命令，新建一个名称为爆款推荐模块，尺寸为9501050像素的空白文档，然后为背景图像填充颜色，色值为【#f3f3f5】。新建文档并填充颜色11第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤2打开本书配套素材【1.psd】【2.psd】【3.psd】，将其中的商品图拖到【爆款推荐模块.psd】图像窗口中并进行布局，将主推爆款商品放在中间，潜在爆款商品放在两边，营造出层次感。复制素材文件12第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤3按【Ctrl+R】组合键启动标尺，在590像素的位置创建水平参考线。创建水平参考线13第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤4在工具箱中选择【矩形选框工具】，根据参考线所示位置在图像上按住鼠标并拖动，框选多余的商品图片，选好后按【Delete】键删除多余部分。删除图像多余区域注意：因三幅商品图在不同图层上，所以先选中目标图层再进行框选和删除操作。14第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤5选择工具箱中的【矩形工具】，然后在图像上绘制一个颜色色值为【#f0000】的矩形，再复制出两个矩形，并利用【横排文字工具】依次输入商品原价、折扣价、销售量和商品文字信息。绘制矩形并输入文字字体：方正兰亭中黑；大小：12点15第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤6在工具箱中选择【椭圆工具】，设置前景色的色值为【#272727】，按住【Shift】键的同时拖动鼠标绘制正圆形，利用【横排文字工具】在正圆形上输入【】符号。字体：方正兰亭中黑；大小：12点绘制正圆形并输入符号16第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤7在【图层】面板中创建新图层，快捷键为【Ctrl+Shift+Alt+N】。在工具箱中选择【矩形选框工具】，框选水平参考线以下的部分，设置前景色值为【#026b32】，按【Alt+Delete】组合键为选区填充前景色。绘制矩形选区并填充颜色17第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤8在工具箱中选择【矩形工具】，在工具选项栏中设置填充色的色值为【#ffffff】，在【W】编辑框中输入【236像素】，在【H】编辑框中输入【437像素】，然后在图像上点击，弹出【创建矩形】对话框，点击【确定】按钮，创建矩形。将矩形复制出3个，并均匀排列。绘制矩形18第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤9在【图层】面板中选中【矩形2】图层。打开本书配套素材【4.jpg】文件，将其中的商品图拖动到【爆款推荐模块.psd】图像窗口中最左侧矩形的上方，执行【编辑】丨【自由变换】命令，显示自由变换框，按住【Shift】键的同时，在角控制点上拖动鼠标，调整图像到合适大小。复制素材文件并调整大小19第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤10在【图层】面板中，选中商品图所在的【图层5】，点击鼠标右键在弹出的菜单中选择【创建剪贴蒙版】命令。创建剪贴蒙版20第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤11在工具箱中选择【矩形工具】，然后在商品图下方绘制颜色值为【#ffdf00】和【#d40108】的矩形，利用【横排文字工具】输入文字信息。绘制矩形并输入文字字体：方正兰亭中黑；大小：13.5点；颜色值：#ffffff字体：方正兰亭中黑；大小：13.5点；颜色值：#cd0210字体：方正兰亭黑；大小：12点；颜色值：#cd0210字体：方正兰亭黑；大小：12点；颜色值：#00000021第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤12利用步骤911中的操作方法完成其他3张商品图的制作，其中素材分别为【5.jpg】【6.jpg】【7.jpg】。制作其他商品图22第6章 视觉陈列之商品布局6.16.1.26.1.2利利用用P Ph ho ot to os sh ho op p制制作作爆爆款款推推荐荐模模块块打造爆款推荐模块操作步骤步骤步骤13经过以上步骤的操作完成最终效果。按【Ctrl+S】组合键保存图像，按【Ctrl+Shift+S】组合键将其存为JPEG格式文件。爆款推荐模块效果23第6章 视觉陈列之商品布局6.16.1.36.1.3为为爆爆款款推推荐荐模模块块添添加加链链接接代代码码打造爆款推荐模块在6.1.2节中已经利用Photoshop制作了爆款推荐模块，那么如何为其添加对应的链接，并展示给买家呢？本节主要教大家如何用Dreamweaver软件为制作好的爆款推荐模块添加商品超链接。24第6章 视觉陈列之商品布局6.16.1.36.1.3为为爆爆款款推推荐荐模模块块添添加加链链接接代代码码打造爆款推荐模块操作步骤步骤步骤1打开Dreamweaver软件，在【文件】面板中新建文件，并将文件重命名为【6-18.html】。步骤步骤2双击打开新建的文件，点击【表格】按钮，在打开的【表格】对话框中编辑表格内容，点击【确定】按钮，关闭对话框。25第6章 视觉陈列之商品布局6.16.1.36.1.3为为爆爆款款推推荐荐模模块块添添加加链链接接代代码码打造爆款推荐模块步骤步骤3根据【爆款推荐模块.psd】的制作尺寸，在【属性】面板中表格【高】编辑框中输入对应的高度数值【1043像素】。步骤步骤4根据步骤3中的操作，建立了一个和图片尺寸一模一样的表格，点击【图像】按钮，在弹出的对话框中选择【爆款推荐模块.jpg】，依次点击【确定】【否】和【取消】按钮完成插入。操作步骤插入图像26第6章 视觉陈列之商品布局6.16.1.36.1.3为为爆爆款款推推荐荐模模块块添添加加链链接接代代码码打造爆款推荐模块步骤步骤5点击【图像】按钮右侧的下拉三角按钮，在打开的下拉列表中选择【绘制矩形热点】命令。操作步骤选择【绘制矩形热点】命令27第6章 视觉陈列之商品布局6.16.1.36.1.3为为爆爆款款推推荐荐模模块块添添加加链链接接代代码码打造爆款推荐模块步骤步骤6点击【图像】按钮右侧的下拉三角按钮，在打开的下拉列表中选择【绘制矩形热点】命令。操作步骤创建热点区域28第6章 视觉陈列之商品布局6.16.1.36.1.3为为爆爆款款推推荐荐模模块块添添加加链链接接代代码码打造爆款推荐模块步骤步骤7点击创建好的热点区域，在【属性】面板中添加商品的超链接地址，然后选择【目标】为【_blank】。操作步骤步骤步骤8利用步骤57中的操作方法，为爆款推荐模块中的其他商品添加商品的超链接地址即可完成案例操作。296.16.1.46.1.4第6章 视觉陈列之商品布局将将爆爆款款推推荐荐模模块块放放入入店店铺铺展展示示打造爆款推荐模块爆款推荐模块的代码制作好后，如何将代码放入店铺展示给买家呢？具体操作步骤如下：306.16.1.46.1.4第6章 视觉陈列之商品布局将将爆爆款款推推荐荐模模块块放放入入店店铺铺展展示示打造爆款推荐模块步骤步骤1在Dreamweaver操作页面中点击【代码】按钮，就可以找到要放入店铺展示所需的代码。操作步骤步骤步骤2在代码中将所有【Map】属性改成自己喜欢的属性名字，如将【Map】改成【zs01】，因为淘宝系统网站有【Map】属性，所以属性不可以跟淘宝系统属性重复，如果重复会导致页面无法显示。316.16.1.46.1.4第6章 视觉陈列之商品布局将将爆爆款款推推荐荐模模块块放放入入店店铺铺展展示示打造爆款推荐模块步骤步骤3按住鼠标左键并拖动，将【Map】区域内的代码全部选中，按【Ctrl+X】组合键，再按【Ctrl+V】组合