《网店美工》项目3网店页面设计

目录任务3.1首页设计任务3.2商品详情页设计任务3.1

首页设计子目录店招与导航条全屏海报设计动画制作商品陈列区客服区无处不在网店收藏制作页面背景不再裸奔首页整体打造案例任务3.1

首页设计技能要求根据特定的场合需要，熟练使用"钢笔工具”"形状工具”绘制出所需的形状，并使用"图层样式”对形状进行修饰。学会根据客户的要求或者网店活动主题来设计海报的风格、布局、文字和修饰素材，制作海报。根据网店的风格或者设计画面的尺寸来对网店的客服区和

商品陈列区进行布局设计，使用风格和色彩统一的修饰素材进行点缀。学会根据网店页面的背景需要，设计不同形式的页面背景。

3.1.1

店招与导航条设计1.店招设计规范店招是打造网店品牌的最好阵地之一。一个好的店招不但能起到很好的宣传效果，还能传达网店的经营理念。店招设计体现为两点:品牌定位和产品定位。有些网店喜欢在店招上面放很多内容，如logo、优惠信息、活动内容、促销款式、收藏、关注等，但视觉的过度堆砌，会让人眼花缭乱，造成视觉疲劳。

有些店招虽然简单，但是确让人不知所然。图3-1~图3-3所示店招有什么问题，你知道吗?图3-1问题店招1图3-2问题店招2图3-3问题店招33.1.1

店招与导航条设计第一个店招只有英文店名，买家很难记住。第二个店招虽然是中文店名，但是具体是卖什么产品，我们无法猜测。第三个店招买家关注点

太多，造成网店最应该传达给买家的信息没有得到重视，分散了注意力，得不偿失。优秀的店招设计应具有以下共性，如图3-4、图3-5.图3-6、图3-7所示。店名使用粗体字，logo放在醒目的位置。店招上的文字和背景对比色鲜明。品牌和产品两个信息的传达都要很明确，买家一眼就能明白网店究竟在卖什么产品，适不适合自己。

3.1.1

店招与导航条设计图3-4优秀店招1图3-5优秀店招23.1.1

店招与导航条设计。图3-6优秀店招3图3-7优秀店招43.1.1

店招与导航条设计2.导航条设计规范淘宝网店导航是买家访问网店的快速通道,借助导航条可以方便地从一个页面跳转到另一个页面,查看网店的各类商品信息。因此,提供

清晰的导航条能保证更多网店页面被访问,使更多的商品、活动被发现。尤其买家从宝贝详情页到其他页面,若缺乏导航条的指引,将极大影响

转化率。导航条的设计,应与店招风格相统一。

3.1.1

店招与导航条设计3.店招与导航条的设计案例图3-8所示为"茵曼”官方旗舰店的店招和导航条，我们来分析一下她的视觉点在哪里。纵观这个店招，虽然内容看着挺多，但是内容主次把握得很好，它其实只想给顾客看到的是品牌形象和活动信息。在店招的中部放置活动信息，容易吸引顾客的注意；左边的卡通人物代表了其品牌文化；而品牌知名度等信息已被弱化到只给感兴趣的人看。所以，这个店招看似复杂，但实际完全符合店招设计原则，即视觉点只需要1~2个即可，视觉点多了反而没有视觉点。

3.1.1

店招与导航条设计图3-8"茵曼”官方旗舰店的店招和导航条3.1.1

店招与导航条设计如图3-9所示，"裂帛”官方旗舰店的店招和导航条简洁而且富有设计感，它有一个特点就是首页的设计和店招互相呼应，整体感非常强，页面令人看起来很舒服，同时又融合了民族风的元素在里面。图3-9"裂帛”官方旗舰店的店招和导航条3.1.1

店招与导航条设计如图3-10所示,这是一个以促销为设计理念的网店,网店标语设计在店招的左侧,店招的右侧为配合店铺活动而设计了一些促销产品的宣传,也就是说设计师在设计店招的时候就已经想了建立一种平衡,但这种平衡会让顾客有分不清重点的感觉,设计师为了突出促销的元素,把人物与背景作了对比色,并把价格字体放大,这种效果既增加了促销的紧张感,又把顾客的视线集中在这里,因此平衡感的网店品牌则成为了一个视觉点。而这里的大红色,同时也让人关注品牌。为了达到视觉传达的效果,同样也运用了两个视觉点的理论。图3-10以促销为设计理念的网店的店招和导航条3.1.1

店招与导航条设计图3-11

950

px×120

px的店招4.店招和导航条的制作店招的规格尺寸分为950px×120px和950px×150px，在淘宝中大多数人都做成950px×120px。图3-11所示为宽950px、高120px的店招，其特点是:把店招和导航条分开成单独的两个模块，这样导航条可以直接用系统提供的导航条。这个方法适合大多数刚起步的卖家，其特点是简单、方便、易懂。

3.1.1

店招与导航条设计图3-12所示为宽950px、高150px的店招，其特点是:店招与导航条合并在一起，利用代码链接制作而成，可以把导航条设置成自己喜欢的样式，大多天猫网店都采用这种方法来制作，其美观、大气，更能体现网店的风格，更能吸引顾客的眼球。图3-12950px×150px的店招和导航条提示:导航条模块不可删除。如果装修发布后发现导航条不见了，可以将网店店招的尺寸修改为950px×120px（页头高150px包含店招和导航，如果店招的高度设置成150px，发布后导航条可能就消失不见了)。

3.1.1

店招与导航条设计店招和导航条的制作步骤如下。步骤1：执行“文件”→“新建”命令（按Ctrl+N组合键)，弹出“新建”对话框，参数设置如图3-13所示。图3-13“新建”对话框提示：建议

电脑都是宽屏的，如果太小，"宽度”设定在1500px以上，因为现在很多两边会出现背景的填充。

3.1.1

店招与导航条设计步骤2：执行"视图”→"新建参考线”命令，弹出"新建参考线”对话框，水平参考线的设置如图3-14所示；同理新建两条垂直参考线，如图3-15和图3-16所示。新建参考线示意如图3-17所示。

图3-14新建水平参考线提提示示::垂直参考线的计算法为(1

920-图3-15新建垂直参考线1图3-17新建参考线示方

950)÷2意=4885+950=1

43图3-16新建垂直参考线25,4 5。3.1.1

店招与导航条设计步骤3:打开素材图片，放入合适的位置。如图3-18所示。图3-18打开文件3.1.1

店招与导航条设计步骤4：输入导航条信息，如图3-19所示。（如果店招与导航条是分开的，跳过此步骤)。图3-19输入导航条信息3.1.1

店招与导航条设计步骤5:最终效果如图3-20所示。图3-20店招和导航条的最终效果3.1.1

店招与导航条设计海报是首页视觉传达的焦点,是传递重要信息的地方。优秀海报设计示例如图3-21~图3-26所示。图3-21优秀海报设计示例13.1.2

全屏海报设计图3-22优秀海报设计示例2图3-23优秀海报设计示例33.1.2

全屏海报设计图3-24优秀海报设计示例4图3-25优秀海报设计示例53.1.2

全屏海报设计图3-26优秀海报设计示例6优秀海报的共同点是:图文结合，有字有画，内容上都有一个宣传主题。制作海报分为图像设计和文字设计两部分。图像设计时考虑怎样

选择和制作图像，文字设计时主要考虑文字内容、书写位置和字体样式。

3.1.2

全屏海报设计下面介绍制作一张全屏海报的具体操作步骤。步骤1：执行"文件”→"新建”命令，弹出"新建”对话框，参数设置如图3-27所示。图3-27海报的参数设置3.1.2

全屏海报设计步骤2：执行“视图”→“新建参考线”命令，弹出“新建参考线”对话框，分别设置4条垂直参考线，在“位置”文本框中分别输入285px、485px、1435px、1635px。步骤3：设置背景色为淡兰色（#ddf3e7)，如图3-28所示。图3-28设置背景色3.1.2

全屏海报设计步骤4：打开白云素材图片，首先用"魔棒工具”抠取白云，如图3-29所示；然后执行"图像”→"调整”→"曲线”命令，调整白云的色彩；最后执行"编辑”→"变换”→"变形”命令改变白云形状，如图3-30所示。

图3-29抠取白云图3-30编辑白云3.1.2

全屏海报设计步骤5:打开人物素材图片，放在第一根参考线的右侧，如图3-31所示。图3-31将人物素材图片放在第一根参考线的右侧3.1.2

全屏海报设计步骤6：使用"画笔工具”对人物进行蒙版处理，如图3-32所示。图3-32对人物进行蒙版处理3.1.2

全屏海报设计步骤7:对所有的图层重新命名，如图3-33所示。图3-33对图层重新命名3.1.2

全屏海报设计步骤8：复制"云”图层，将其放到相应位置，调整"不透明度”，如图3-34所示。效果如图3-35所示。图3-34复制"云”图层3.1.2

全屏海报设计图3-35复制"云”图层后的效果3.1.2

全屏海报设计步骤9：单击"创建新组”按钮

，右击"组1”，在弹出的快捷菜"组单中选择"组属性”命令，弹出

属性”对话框，在"文本框”中输入"文字”，单击"确定”按钮，并将"文字”组移到合适的位置，如图3-36所示。

图3-36创建"文字”新组3.1.2

全屏海报设计步骤10：输入文字信息"2016爱就要在一起”"LOVERS”和"买就送情侣款”，字体设置如图3-37、图3-38和图3-39所示。

图3-37"2016爱就要在一起”设置

图3-38"LOVERS”设置图3-39"买就送情侣款”设置3.1.2

全屏海报设计步骤11：打开素材图片"玫瑰花”和"标签”，并放在合适的位置，如图3-40所示。图3-40将"玫瑰花”"标签”素材图片放在合适位置3.1.2

全屏海报设计步骤12:输入图3-41所示的文字信息。图3-41文字信息3.1.2

全屏海报设计“活动规则”设置如图3-42所示。“1、买男款……”设置如图3-43所示。“2.联系客服……”设置如图3-44所示。

图3-42"活动规则”设置

图3-43“1.买男款……”设置

图3-44“2.联系客服……”设置3.1.2

全屏海报设计步骤13：使用"矩形选框工具”给"活动规则”图层添加白色矩形框，如图3-45所示。图3-45添加白色矩形框3.1.2

全屏海报设计步骤14：用同样的方法制作文字信息及底色。输入文字信息"PS:因为这次活动的主题是约会季，所以买两件女款或者两件男款，则不能享受该活动哈”和"SHOPTHELOOKBOOK活动时间：12月27日~1月3日”。"PS:因为……”的设置如图3-46所示。"SHOPTHE…”的设置如图3-47所示。

图3-46"PS:因为……”的设置图3-47"SHOPTHE…”的设置3.1.2

全屏海报设计如图3-48所示,黑色矩形框的填充色为#1d1d1d,绿色矩形框的填充色为#4e9263。图3-48添加黑色矩形框和绿色矩形框3.1.2

全屏海报设计步骤15：用"钢笔工具”制作小标签，如图3-49所示。图3-49制作小标签3.1.2

全屏海报设计步骤16:最终效果如图3-50所示。图3-50海报的最终效果提示:制作海报时，最好将重要的信息放在第二根参考线和第三根参考线的内侧,如果产品较大或者种类较多,可以超过一些位置,但是千万不能超出第一根参考线和第四根参考线。因为当海报超过最外两头的参考线时,如果买家使用的不是宽屏显示器,那么超过最外两头的信息是看不见的。

3.1.2

全屏海报设计Gif动画在网店设计中的应用很广泛,比如店标、网店收藏、广告、价格标签等,如图3-51所示。图3-51Gif动画3.1.3

动画制作Gif动画不适合做很大的图，一个原因是文件比较大时下载起来时间较长，另一个原因是Gif文件会损失色彩梯度。所以，建议Gif动画是由简单色块组成的图案。下面来看一个Gif动画的制作示例。步骤1:打开Photoshop软件，新建文件宽100px、高100px，透明背景。

步骤2：设置前景色为黑色，单击工具栏中的"矩形工具”按钮,画一个,圆单击"矩形工具”选项栏中的"圆角矩形工具”按钮角矩形，如图3-52所示。图3-52圆角矩形3.1.3

动画制作步骤3：单击工具栏中的"横排文字工具”按钮，在圆角矩形中输入文本"关注”，参数设置如图3-53所示。

图3-53"关注”字体设置3.1.3

动画制作步骤4：单击工具栏中的"矩形工具”按钮，在"矩形工具”选项栏中单击"自定形状工具”按钮，在"关注”文字的右侧画一个心形。步骤5：复制"心”图层，如图3-54所示。图3-54复制"心”图层3.1.3

动画制作步骤6：双击"形状2副本”图层的颜色，弹出"拾取实色”对话框，把颜色饱和度调低，如图3-55所示。图3-55弹出拾取实色框3.1.3

动画制作步骤7：执行"窗口”→"动画”命令，单击"0秒”，在弹出的选项栏中选择0.5，将时间设置为0.5秒，如图3-56所示。

图3-56设置时间3.1.3

动画制作步骤8：复制帧。单击"复制所选帧”按扭,复制帧,如图3-57所示。

图3-57复制帧3.1.3

动画制作步骤9：单击"形状2副本”图层的"指示图层可见性”按扭，使其不可见。

为Web，查看效果，以便修改。和设备所用格式"命令，保存为步骤10：单击"播放动画”按扭步骤11：执行"文件”→"存储GIF格式，如图3-58所示。图3-58保存为GIF格式3.1.3

动画制作步骤12：单击"存储”按钮，保存图片，最终效果如图3-59所示。图3-59Gif动画效果3.1.3

动画制作3.1.4

商品陈列区设计商品陈列区的设计原则首页三部曲——新款、主推、热款。陈列的目的是让顾客做出决策。功能模块的设置要合理。陈列图片的规格既要节省空间又要清晰表达产品的特征。每个陈列模块之间要有清晰的界限。不要滥用广告图。善用陈列中引起购物欲望的元素。陈列中不可忽视的即兴消费。2.商品陈列区的设计案例设计网店的商品陈列区时，一定要让陈列的商品很容易被买家发现;同一个区域，要重点突出;商品展示的品类和风格应统一、规范;关联陈列要选好商品;有时两个对比色的色块放置在一起很容易吸引人的眼球。通过这种视觉特征，就可以设计出一个吸引人的商品陈列区。

3.1.4

商品陈列区设计图3-63商品陈列区的设计案例2.商品陈列区的设计案例3.1.4

商品陈列区设计具体操作步骤如下。步骤1：新建文件（宽度为950px，高度为800px)，新建垂直参考线（位置为475px)。商品陈列区设计为两排三列。步骤2：输入文字“美式经典热卖系列”“AMERICANSERIESOFSOLIDWOOD”“卧室产品”。“美式经典”设置如图3-64所示，“热卖系列”设置如图3-65所示，“AMERICAN…”设置如图3-66所示，“卧室产品”设置如图3-67所示。所输入文字的颜色号均为d51e56。

3.1.4

商品陈列区设计图3-64"美式经典”设置图3-65"热卖系列"设置图3-66"AMERICAN…”设置图3-67"卧室产品”设置3.1.4

商品陈列区设计复制，然后按住Shift键不放，单击鼠标画"形状1”图层，出现"形状1副本”步骤3：单击"椭圆工具”按钮一个圆，出现"形状1”图层。图层，如图3-68所示。

图3-68复制"形状1”图层3.1.4

商品陈列区设计步骤4：双击"形状1副本”图层前面的颜色块，在弹出的"拾取实色”对话框中将颜色设置为白色。步骤5：选中"形状1副本”，右击，在弹出的快捷菜单中选择"栅格化图层”命令。步骤6：使用"矩形选框工具”将白色圆形删除一半，如图3-69所示。图3-69将白色圆形删除一半3.1.4

商品陈列区设计选中"形状1”图层，单击"添加图层样式”按钮，在弹出的快捷菜单中选择"描边”命令，弹出"图层样式”对话框，在"大小”文本框中输入3，在"位置”下拉列表框中选择"居中”，单击"填充类型”选,单击，弹出"选取描边颜色：”对话"确定”按钮。添加图层样式后项组中的"设置描边颜色”图标框，在"#”文本框中输入d51e56的效果如图3-70所示。

图3-70添加图层样式后的效果3.1.4

商品陈列区设计步骤7：在圆圈中输入文字"HOT”和"黑胡桃色”，参数设置分别如图3-71和图3-72所示，输入文字后的效果如图3-73所示。

设置图3-71"HOT”设图置 图33-73输入文-72"黑胡桃色”字后的效果3.1.4

商品陈列区设计步骤8：打开标尺，单击"圆角矩形工具”按钮，

按住Shift键不放，单击鼠标画一个圆角正方形，出现"形状2”图层。选中"形状2”图层，单击"添加图层样式”按钮，，在弹出的快捷菜单中选择"描边”命令，弹出"图层样式”对话框，在"大小”文本框中输入1，在"位置”下拉列表框中选择"居中”，颜色设为#d51e56。添加圆角正方形后的效果如图3-74所示。图3-74添加圆角正方形后的效果3.1.4

商品陈列区设计打开素材1，将其放在圆角正方形的位置上，如图3-75所示。选中"图层1”，右击，在弹出的快捷菜单中选择"创建剪贴蒙版”命令，效果如图3-76所示。

图3-75将素材1放在圆角正方形位置上图3-76创建剪贴蒙版的效果3.1.4

商品陈列区设计在图片下方输入文字“经典美式实木公主床”（设置字体为华康饰艺体，字体大小为16点)、“黑胡桃色系”（设置字体为宋体，字体大小为12点)、“HOT价：3780”（“HOT价：”的字体为方正正粗黑简

体，字体大小为18点；“3780”的字体为方正正粗黑简体，字体大小为30点)，效果如图3-77所示。创建“组1”，命名为“产品1”，把相应图层放入其中，如图3-78所示。

图3-77素材1配上说明文字的效果图3-78创建"组1"3.1.4

商品陈列区设计步骤9：按住Alt键不放，复制两个"产品1”组，并分别命名为"产品2”和"产品3”，并摆放好位置，如图3-79所示。图3-79复制两个"产品1”组后的效果3.1.4

商品陈列区设计采用同样的方法创建"产品4”"产品5”和"产品6”组，并摆好位置，如图3-80所示。图3-80复制6个"产品1”组后的效果3.1.4

商品陈列区设计品组中的内容,最终效果如图3-6步骤10：把"产品2”组中的图片换成素材2，并更改相应文字，如图3-81所示。图3-81更改"产品2”组的内容步骤11：采用同样的方法更换其他产 3所示。3.1.4

商品陈列区设计图3-82装修后台图3-83客服中心模块3.1.5

客服区设计1.添加左侧客服中心以网店专业版为例，添加左侧客服中心的具体步骤如下。步骤1：进入卖家中心后台，在左侧找到网店装修入口后单击进入，进入装修后台后，选中“客服中心”模块（见图3-82)，并按住鼠标左键将该模块拖到右侧你想要的位置处，如图3-83所示。

步骤2：添加完毕后，双击"客服中心”模块或者单击右上角的"编辑”按钮，弹出"客服中心”对话框，在"内容设置”选项板中设置工作时间、联系电话、是否分流等，如图3-84所示。图3-84内容设置3.1.5

客服区设计步骤4：在"显示设置”选项板中设置模块标题和是否显示标题栏，如图3-85所示。图3-85显示设置3.1.5

客服区设计步骤5：单击"保存”按钮，再发布店铺，客服中心的设计效果如图3-86所示。

图3-86客服中心的设计效果3.1.5

客服区设计2.制作个性客服区设计首页时为了保持风格和色彩的统一,很多卖家会自己设计客服区,如图3-87、图3-88和图3-89所示。图3-87个性客服区示例13.1.5

客服区设计图3-89个性客服区示例32.制作个性客服区图3-88个性客服区示例23.1.5

客服区设计制作客服中心的具体操作步骤如下。步骤1：打开Photoshop软件，新建文件大小为950px×100px，放入素材图片，输入文字"CUSTOMERSERVICE”和"客服中心”，如图3-90所示。文字参数设置如图3-91所示。图3-90新建"客服中心”文件图3-91设置文字参数3.1.5

客服区设计步骤2：单击工具栏中的"矩形工具”按钮，在"矩形工具”选项栏中单击"直线工具”按钮，"粗细”为1px，颜色为黑色，再复制该图层两份，并放置到相应的位置，如图3-92所示。图3-92复制图层两份3.1.5

客服区设计步骤3：输入文字“售前客服：”（字体为黑体，字体大小为16点)、“小兔

兜兜

大象

小马

蝈蝈”（字体为宋体，字体大小为14点)、“售后：”（字体为黑体，字体大小为16点)、“美羊羊”（字体为宋体，字体大小为14点)、“请联系亮灯旺旺，认准同一客服咨询”（字体为宋体，字体大小为14点)、“在线时间：”（字体为宋体，字体大小为18点)、“8:30—23:30”（字体为方正正粗黑简体，字体大小为18点)，如图3-93所示。图3-93输入“售前客服”等文字3.1.5

客服区设计步骤4：插入客服旺旺代码后的最终效果如图3-94所示（具体操作详见4.3.5节)图3-94插入旺旺代码后的最终效果3.1.5

客服区设计如果我们能做一个3精.美1.的.6图片网,再店配收上收藏藏链设接计,计不仅可以大大地提高收藏量,而且可以提高网店的整体水平,如图3-95和图3-96所示。图3-95网店收藏示例1图3-96网店收藏示例23.1.7

页面背景设计1.加入网店二维码在全屏固定背景中加入二维码的步骤如下。

步骤1：新建文件，大小为1920px×1000px。步骤2：新建垂直参考线，“位置”分别设置为485px和1435px。步骤3：单击工具栏中的“渐变工具”按钮，在“渐变工具”选项栏中单击“线性渐变”按钮，在“渐变编辑器”对话框中设置参数（见图3-97)，结果如图3-98所示。

图3-97设置线性渐变参数图3-98线性渐变结果3.1.7

页面背景设计步骤4：制作淘宝网店二维码。打开自己的网店，把鼠标放在"用手机逛本店”上，如图3-99所示。将二维码图片下载到本地计算机中。步骤5：把二维码图片中间的"淘”换成产品或者文字，如图3-100所示。图3-99将二维码图片下载到本地电脑图3-100更换文字3.1.7

页面背景设计步骤6:将二维码图片放在合适的位置，建议不能超过左、右两边的垂直参考线，如图3-101所示。图3-101把二维码图片放在合适的位置3.1.7

页面背景设计步骤7:把素材图片放在合适的位置，如图3-102所示。图3-102把素材图片放在合适的位置3.1.7

页面背景设计步骤8:去掉垂直参考线，最终效果如图3-103所示。图3-103加入网店二维码的最终效果3.1.7

页面背景设计图3-104网店音乐服务2.添加背景音乐添加背景音乐的操作步骤如下。步骤1：进入"卖家服务中心”，找到"淘宝卖家服务”，搜索"网店音乐”，找到"网店音乐服务”，如图3-104所示。

3.1.7

页面背景设计步骤2：选定"基础版”→"年限”免费购买后，该服务就被添加了。步骤3：进入"网店装修”页面，将鼠标放到右边的音乐图标上，会

弹出"编辑”两个字，单击进入编辑。步骤4：在"添加歌曲”选项组中把喜欢的音乐添加进去后，单击"保存”按钮，如图3-105所示。步骤5：保存完音乐后，单击"发布”按钮，再次打开网店之后就可以听到音乐了。

3.1.7

页面背景设计3.1.7

页面背景设计图3-105添加音乐3.1.8

首页整体打造案例1)1.网店首页整体打造要求整体布局2)橱窗区4)分类区5)货架摆放区6)自定义页面3)网店招牌3.1.8

首页整体打造案例2.网店首页设计实例本案例是为女鞋所设计的网店首页,制作中使用了白色背景和不同明度的灰色字体来进行色彩搭配,由此产生干练稳重的感觉,并通过常规习惯性阅读方式布局,添加修饰性图片,给画面带来动感,其具体的设计效果如图3-106所示。图3-106女鞋网店首页1)设计理念白色是一种稳重、百搭的颜色，在案例中使用白色作背景、灰色作为辅助色调进行配色，突出产品鲜亮的色调，提高买家的购买欲望，而不同明度的灰色又可以增强画面的层次感，使其主次分明。将白色作为画面的背景，突出高跟鞋产品带给买家的一种高档质感。设计中以标签作为修饰元素，对商品进行合理的归类和描述，使整个画面一目了然、简单大方。

3.1.8

首页整体打造案例2)技能要求使用各种工具创建选区，为创建的选区填充适当的颜色，为产品进行分区，适当调整画布的大小。设置合适的参考线。通过对照片的内容识别、仿制图章等工具制作全屏海报效果。使用滤镜制作阴影、波浪线效果。

3.1.8

首页整体打造案例3)操作步骤步骤1：打开Photoshop软件，新建文档，宽度和高度分别是1920px、1000px，背景颜色白色。建立参考线分别为水平120px、150px，垂直485px，1435px，如图3-107所示。图3-107建立参考线3.1.8

首页整体打造案例步骤2：使用“横排文字工具”在店招左边的位置添加所需的文字（中文为爱米兰品牌女鞋；英文为LOVE，SOSOFTANDWARMBESIDEME，IFIWERETOGIVEMYTHEARTITWOULDHAVETOYOU，EDWALTER.)，并分别进行参数设置，如图3-108所示，输入文字的效果如图3-109所示。

3.1.8

首页整体打造案例图3-108"爱尔图3-109兰…输…"参数设置入文字的效果3.1.8

首页整体打造案例步骤3：绘制小标签，放在店招的右侧。单击"横排文字工具”，输入"诚信商家”"Honestbusiness”，并分别进行参数设置，如图3-110所示。

图3-110"诚信商家"等参数设置3.1.8

首页整体打造案例新建图层，设置前景色为#555555，选择"画笔工具”，找到"王冠笔刷294”，调整大小，如图3-111所示。图3-111新建图层3.1.8

首页整体打造案例步骤4：以同样方式输入其他文字："如实描述”"Truthfullydescribe”"贴心售后”"Warmafter-sales”，如图3-112所示。图3-112输入其他文字3.1.8

首页整体打造案例步骤5：新建图层，命名为“波浪”。

使用“画笔工具”绘制出一条直线（设置画笔大小为1px，按下Shift键确保画出来的直线)。执行“滤镜”→“扭曲”→“波浪”命令，弹出“波浪“对话框，设置参数如图3-113所示。图3-113制作“波浪”3.1.8

首页整体打造案例把波浪线旋转90°并调整大小,复制一份,放置到合适的位置,如图3-114所示。图3-114设置波浪线3.1.8

首页整体打造案例步骤6：选择"横排文字工具”，输入".”，在"字符”活动面板中设置参数"黑体”"9点”，如图3-115所示。将".”调整到店招底部，如图3-116所示。图3-115设置".”的参数图3-116输入".”后的效果3.1.8

首页整体打造案例步骤7：在"图层”活动面板中创建名为"店招”的组，将之前创建的图层拖到该组里，如图3-117所示。图3-117创建"店招”组3.1.8

首页整体打造案例步骤8:制作海报。将所需素材添加到文件中，并调整好位置，如图3-118所示。

图3-118将所需素材添加到海报中3.1.8

首页整体打造案例使用"矩形选框工具”将画布的左侧区域添加到素材，执行"编辑”→"填充”命令，弹出"填充”对话框，在"使用”下拉列表框中选择"内容识别”，单击"确定”按钮。单击工具栏中的"仿制图章工具”按钮修复图像,使得海报的左侧布满图像,如图3-119所示。图3-119海报左侧区域布满素材3.1.8

首页整体打造案例采用同样的方法使海报右侧也布满图像,如图3-120所示。图3-120海报右侧区域布满素材3.1.8

首页整体打造案例步骤9：选择"自定形状工具”，先画一个矩形，描边颜色为#f4f5ef；再画一个六边形，描边颜色为#cecfca，"大小”为1px，"位置”为外部。输入文字"BOOKMARK”，设置参数如图3-121所示；输入文字"查看所有宝贝”"上新区”"跟高分类”，参数设置如图3-122所示。输入"BOOKMARK”等文字后的效果如图3-123所示。

图3-121"BOOKMARK”参数设置图3-112"查看所有宝贝”等参数设置3.1.8

首页整体打造案例图3-123输入"BOOKMARK”等文字后的效果3.1.8

首页整体打造案例在"图层”活动面板中创建新组，命名为"海报”，将图层拖到该组里，如图3-124所示。图3-124创建"海报”组3.1.8

首页整体打造案例步骤10：制作"上新推荐”区。单击"圆角矩形工具”画一个圆角矩形，颜色为#e8eae5，右击"添加图层样式”，在弹出的快捷菜单中选择"投影”，添加投影样式，如图3-125所示。输入文字"上新推荐”，设置参数如图3-126所示；输入文字"love，sosoftandwarmbesideme.”设置参数如图3-127所示。按照步骤5再画一条波浪线，如图3-128所示。图3-125设置圆角矩形的投影样式3.1.8

首页整体打造案例图3-126"上新推荐”参图3-128数设置

参数设置"上新推图3-127"love…”荐”区的效果3.1.8

首页整体打造案例步骤11：调整画布大小。执行"图像”→"画布大小”命令，弹出"画布大小”对话框，设置参数如图3-129所示。图3-129调整画布大小3.1.8

首页整体打造案例步骤12：将所需素材添加到文件中，命名为"上新推荐”，并给产品制作阴影。创建新图层，命名为"阴影”。画一个椭圆，设置前景色为黑色，背景色为白色；图层样式选择"描边”，在"填充类型”下拉列表框中选择"渐变”，在"样式”下拉列表框中选择"径向”填充椭圆，如图3-130所示。图3-130制作阴影3.1.8

首页整体打造案例执行"滤镜”→"模糊”→"高斯模糊”命令，按Ctrl+T组合键自由变换椭圆大小，调整好位置。如果阴影效果不好，可以适当调整阴影的不透明度和填充。调整阴影后的效果如图3-131所示。图3-131调整阴影后的效果3.1.8

首页整体打造案例步骤13：使用"横排文字工具”在适当的位置输入所需的文本信息，适当调整文字的属性，"￥88”的参数设置如图3-132所示，"￥188”的参数设置如图3-133所示，"立即抢购”的参数设置如

图3-134所示。单击"矩形工具”画一个矩形，填充颜色为#ffe9e9。创建新组，命名为"产品”，如图3-135所示。

3.1.8

首页整体打造案例图3-132置 图3-13设置图3-134"￥88”的参数设"立即抢购”的参数设置图3"￥188”的参数3-135创建"产品"组3.1.8

首页整体打造案例步骤14：对“产品”组进行复制（见图3-136)；适当调整组之间的距离，如图3-137所示。图3-136复制“产品”组3.1.8

首页整体打造案例创建名为"上新推荐”的组，将图层添加到其中，如图3-138所示。

3.1.8 首页整体打造案例图3-137复制"组”后的效果步骤15：创建名为“热卖推荐”的组，复制一个“上新推荐”的标签（见图3-139)，修改其中的文字为“热卖推荐”（见图3-140)。图3-138创建“上新推荐”组3.1.8

首页整体打造案例图3-139创建"热卖推荐”组图3-140修改"上新推荐副本”文字3.1.8

首页整体打造案例步骤16：将所需素材添加到"热卖推荐”组里面，适当调整素材的大小和位置。设置前景色为红色。使用"自定形状工具”绘制"心”形。输入文本"RMB78”"￥198”和"已售1999”，参数设置分别如图3-141和图3-142所示。最终效果图3-143所示。

图3-141"RMB78”参数设置图3-142"￥198”和"已售1999”参数设置3.1.8

首页整体打造案例图3-143"热卖推荐”中添加素材后的效果3.1.8

首页整体打造案例步骤17：创建新组，命名为"产品1”，将图层添加到其中，如图3-144所示。图3-144创建"产品1”组3.1.8

首页整体打造案例复制三份“产品1”组，并调整好位置（第一种方法是利用垂直参考线，其计算方法为（950−210×4)÷3=36.7，485+210+36.7=731.7，731.7+210+36.7=978.4，其中210表示产品的宽度。第二种方法是：选中“产品1”组对齐左参考线；选中“产品1副本3”组对齐右参考线；然后选中所有产品组，单击“移动工具”按钮，再单击“顶对齐”和“水平居中分布”按钮)，效果如图3-145所示。

图3-145复制三份"产品1”组的效果3.1.8

首页整体打造案例以同样的方法复制3"3.产1品.18”8组首，并页调整整好体位置打，效造果案如图例3-146所示。图3-146复制多组"产品1”后的效果步骤18：创建名为“宝贝排行榜”的新组（见图3-147)，复制一份“上新推荐”的标签（见图3-148)。图3-147创建名为“宝贝排行榜”的新组图3-148复制一份“上新推荐"的标签3.1.8

首页整体打造案例步骤19：使用"矩形工具”绘制一个矩形，大小为宽140px，填充颜色为#e8eae5，栅格化形状，接着输入文字"NO1”，参数设置如图3-149所示；使用Ctrl+T组合键旋转"NO1”，再使用"钢笔工具”或"多边形套索工具"在矩形的左上角绘制一个三角形，删除三角形区域，效果如图3-150所示。图3-149"NO1”参数设置图3-150矩形效果展示3.1.8

首页整体打造案例步骤20：将所需素材添加到图像中，适当调整素材的位置。输入"2016春新款”和"￥198”，参数设置如图3-140所示。绘制一个白色圆角矩形，如图3-151所示。图3-151白色圆角矩形的效果3.1.8

首页整体打造案例步骤21：创建新组，命名为"产品1”，将图层添加到其中，如图3-152所示。图3-152创建"产品2”组3.1.8

首页整体打造案例3.1.8 首页整体打造案例复制四份"产品2”组，并调整好位置，如图3-153所示。图3-153复制四份"产品2”组的效果步骤22：创建新组，命名为"二维码”，复制一份"波浪线”并垂直摆放，单击"直排文字工具”按钮，输入"一直下拉更多惊喜”，参数设置如图3-154所示。将素材图片放在适当的位置，效果如图3-155所示。图3-154"一直下拉更多惊喜”参数设置3.1.8

首页整体打造案例图3-155"一直下拉更多惊喜”效果展示3.1.8

首页整体打造案例任务3.2

商品详情页设计子目录利用"钢笔工具”和"自定形状工具”绘制图形。掌握适合自己网店的色彩确定方法。能够根据商品的特点从不同的角度将商品的局部进行放大。

任务3.2

商品详情页设计技能要求宝贝描述模板的设计宝贝描述模板制作实例商品详情页是提高转化率的入口,能够激发顾客的消费欲望,树立顾客对网店的信任感,打消顾客的消费疑虑,促使顾客下单。优化商品详情页也对转化率有提升的作用,但是起决定性作用的还是产品本身。在做商品详情页设计前应做好以下几项准备工作。

3.2.1

商品详情页设计的准备工作1.了解商品详情页设计原则商品详情页是网店中最容易与顾客产生交集共鸣的页面,详情页的设计极有可能会对用户的购买行为产生直接的影响。所以,商品详情页要与商品主图、商品标题相契合,商品详情页必须真实地介绍商品的属性。例如,顾客浏览到标题或者主图里写的是职业女装,但是详情页展示的却是嘻哈风格,这样会引起顾客的反感。

3.2.1

商品详情页设计的准备工作2.市场商调品研详情页设计前既要充分进行市场调研和同行业调查,又要做好面向目标消费者的调查,如分析目标人群的特征、消费能力、消费的喜好及购买时所在意的问题等。

3.2.1

商品详情页设计的准备工作3.调研结果及产品分析根据市场调研结果及自己的产品进行系统的分析总结,罗列出消费者所在意的问题、同行的优缺点及自身产品的定位,挖掘出自身与众不同的卖点。

3.2.1

商品详情页设计的准备工作4.商品定位根据网店商品和市场调研确定本店的消费群体。例如，一双跑步鞋，有的卖二三十元，卖的就是价格，定位于低端;有的卖一百多元，卖的是性价比，定位于中端顾客。有的国

际品牌卖到几百上千元，卖的就是保健服务等功能。

3.2.1

商品详情页设计的准备工作商品卖点主要由商品的外观、属性、颜色分类、出产地和材质等组成。针对消费群体挖掘出本店的商品卖点。例如，一家卖花皮脐橙的网店发现评价里中评很多，大多是抱怨脐橙太丑了，一般的掌柜可能会在后期用修图软件将脐橙修得漂亮点，但是会与产品外形不符，更容易引起纠纷。而这家掌柜则直接把描述里的卖点改为"史上最丑的脐橙却是最甜的脐橙！”，同时声明其售卖的脐橙无公害无农药残留，并且附上权威机构出具的检测报告。结果出人意料，评分直线上升，评价里都是关于脐橙真的好甜很新鲜之类的评语。所以挖掘出商品卖点，可以直接引导并改变消费者的心理期望，从而达到非常良好的效果。

5.挖掘商品卖点3.2.1

商品详情页设计的准备工作6.准备设计元素根据消费者分析、自身产品卖点的提炼及商品风格的定位,开始准备所用的设计素材、详情页所用的文案并确立商品详情页的色

彩、字体和排版等。此外,还要烘托出符合商品特性的氛围。例如,如果商品详情页主要展示跑步鞋的透气功能,那么其背景可以采用

气体喷出的效果。要确定的六大设计元素是配色、字体、文案、构图、排版、氛围。

3.2.1

商品详情页设计的准备工作7.常见的商产品品详价情值情+页消费的信整任=体下单框架商品详情页的上半部分展示产品价值,下半部分用来培养顾客的消费信任感。对于消费信任感的树立,不仅应通过各种证书和品牌认证的图片,而且要正确使用颜色、字体和排版结构。商品详情页的每一块组成都有其价值,都要经过仔细地推敲和设计。商品详情页整体框架排序如图3-156所示。图3-156商品详情页整体框架排序3.2.1

商品详情页设计的准备工作7.常见的商品详情页的整体框架商品详情页的描述基本应遵循以下顺序：引发兴趣—激发潜在需求—赢得消费信任—替顾客做决定。特别要注意的是，由于顾客不能真实体验产品，所以应通过商品详情页来打消买家的顾虑。从顾客的角度出发，关注最重要的几个方面并不断强化。所以，在设计商品详情页的描述时应遵循的原则是：文案要运用情感营销引发共鸣，对于卖点的提炼要简短易记并反复强调和暗示，运用好FAB法则[属性（feature)、作用（advantage)、益处（benefit)的法则]。

3.2.1

商品详情页设计的准备工作本实例是为女装商品设计的商品描述页面。设计中以白色作为背景色,通过放大突出产品特点来表现细节,用简单的文字进行说明。图3-157商品详情页实例3.2.2

商品详情页设计实例商品详情页整体框架排序按照关联销售、模特全景图、搭配套餐、商品卖点、商品规格参数、商品细节图片展示、模特全方位展示进行模块设计。背景选用白色,文字色彩选择了黑色和灰色进行搭配,产生简约、大气的视觉效果,修饰元素的色彩使用明度较高的玫红色,使画面多了些活泼。整体布局采用中间对齐模式,让顾客的眼球集中浏览商品,产生安静稳

定的感觉。其中细节展示使用对角线排列放置图片,让画面多了些灵活,不至于整体画面过于呆板。使用狭长的矩形来对每个模块进行分割,能够快速直观地传递信息给顾客。

1.设计理念3.2.2

商品详情页设计实例使用"钢笔工具”和"自定形状工具”绘制出画面中所需的图形；使用"拾色器”选择合适的颜色。选择"横排文字工具”添加合适的文字；建立"垂直参考线”及使用"移动工具”对齐图片、文字。具体操作步骤如下。步骤1：新建文件。新建文件的宽750px、高3000px；新建垂直参考线，"位置”为375.5px，如图3-158所示。

2.工具使用图3-158新建文件3.2.2

商品详情页设计实例步骤2：输入文字"2016HOTOPENGRAB人气精选区入店必买，快来抢购！”，"2016HOT…”参数设置分别如图3-159所示，"人气精选区”参数设置如图3-160所示，效果如图3-161所示。

图3-159"2016HOT…”参数设置3.2.2

商品详情页设计实例图3-160"人气精选区”参数设置

图3-161"2016HOT…”等文字效果3.2.2

商品详情页设计实例图3-162"RMB：”参数设置图3-163"48.0”参数设步骤3：横向制作三个商品展示区，宽度和高度均为250px。添加素材图片，输入文字"RMB：48.0”，"RMB：”参数设置如图3-162所示，"48.0”参数设置如图3-163所示。单击"圆角矩形工具”，颜色为#f3a4dc，在其中输入文字"立即抢购”，参数设置如图3-164所示。置3.2.2

商品详情页设计实例图3-164"立即抢购”参数设置3.2.2

商品详情页设计实例图3-165创建"产品1”创建新组，命名为"产品1”，把产品图层和文字图层放入其中，如图3-165和3-166所示。组3.2.2

商品详情页设计实例图3-166把产品图层和文字图层放入"产品1”组3.2.2

商品详情页设计实例图3-167复制五份"产品1”组3.2.2 商品详情页设计实例复制五份"产品1”组，并调整好位置，如图3-167所示。

步骤4：创建新组，命名为"人气精选区”，并把所需图层放入其中，如图3-168所示。图3-168创建"人气精选区”组3.2.2

商品详情页设计实例步骤5：单击"矩形工具”绘制一个矩形，填充颜色为#a4cdf3，描边颜色为黑色，"大小”为1px。在矩形中输入文字"颜色展示”和"디스플레이

색상”，参数设置分别如图3-160和图3-169所示。

图3-168"디스플레이

색상”参数设置3.2.2

商品详情页设计实例打开素材图片，并调整好位置，输入文字"优雅粉”"气质白”，参数设置如图3-170所示，效果如图3-171所示。

图3-170"优雅粉”参数设置图3-171素材图片输入文字后的效果3.2.2

商品详情页设计实例图3-172创建"颜色展示”创建新组，命名为"颜色展示”，并把相应图层放入其中，如图3-172所示。组3.2.2

商品详情页设计实例步骤6：选中"颜色展示”组，按住Alt键，单击"移动工具”，复制一份"颜色展示”组，并移到相应位置。修改文字信息为"搭配展示”"배합

전시”"美女清凉A字裙8340款”"波点印花A字裙8342款”，如图3-173所示。删除素材图片3和4，放入素材图片5和6，如图3-174所示。图3-173修改文字信息图3-174放入素材图片5和6的效果3.2.2

商品详情页设计实例步骤7：创建新组，命名为"设计解析”。单击"直线工具”按钮，按住Shift键，画一条黑色直线。单击"矩形工具”按钮，画一个黑色矩形，输入文字"设计解析”和"∙”，如图3-175所示。图3-175创建"设计解析”组3.2.2

商品详情页设计实例步骤8：打开素材图片7，移到相应位置。单击"多边形套索工具”按钮，画一个梯形，删除多余图片。此时保留虚线。创建新图层，命名

为"斜线”。选中"斜线”图层，在虚线上右击，选择"描边”，在弹

出的"描边”对话框中进行参数设置，如图3-176所示。效果如图3-177所示。

图3-176"描边”对话框图3-177梯形描边后的效果3.2.2

商品详情页设计实例选中"斜线”图层，向右移动。单击"橡皮擦工具”按钮，删除多余的黑线，如图3-178所示。

图3-178删除多余的黑线3.2.2

商品详情页设计实例步骤9：输入文字"设计师·说”和"디자이너

말했다”，参数设置分别如179和图3-180所示。单击"矩形工具”按钮绘制一个灰色矩形，并调整好位置，如图3-181所示。

图3-179"设计师·说”参数设置

图3-180"디자이너

말했다”参数设置3.2.2

商品详情页设计实例图3-181灰色矩形效果3.2.2

商品详情页设计实例步骤10：输入文字"经典时尚圆领，修饰脸型。木耳边衣身，荷叶边袖，开缝设计，清新优雅。宽松的上身版型能很好的隐藏身材缺点，甜美性感气质都是大热STYLE！你是否每天都要苦恼穿衣打扮你是否厌倦繁琐的搭配但又想穿出时尚感？纯色百搭显瘦的A字裙变身高贵典雅时尚达人办公室宠儿！”，如图3-182所示。图3-183所示为"设计解析”组面板。

图3-182输入文字图3-183"设计解析"组3.2.2

商品详情页设计实例图3-184创建"潮流趋势”步骤11：创建新组，命名为“潮流趋势”。按住Alt键，使用“移动工具”复制一份“设计解析”组中的“设计解析”“∙”、“直线”“矩形”图层，并更改文字信息（见图3-184)，调整好位置，如图3-185所示。组3.2.2

商品详情页设计实例3.2.2 商品详情页设计实例图3-185复制"设计解析”组步骤12：打开素材图片8和9，调整好相应位置。选中"素材9”图层，按Ctrl+T键变换图片。单击"添加图层样式”按钮，选择"描边”选项，在弹出的"图层样式”对话框中进行设置，如图3-186所示。输入文字"手臂开口设计特显瘦”，参数设置如图3-187所示。单击"矩形工具”按钮，绘制一个矩形，填充颜色为#f50ea6，调整好位置，效果如图3-188所示。

图3-186设置描边参数图3-187"手臂开口……”参数设置3.2.2

商品详情页设计实例图3-188矩形中输入文字的效果3.2.2

商品详情页设计实例步骤13；创建新组，命名为"面料解析”。按住Alt键，使用"移动工具”复制一份"设计解析”组中的"设计解析”"∙”"直线”"矩形”图层，并更改文字信息，调整好位置，如图3-189所示。效果如图3-190所示。图3-189创建"面料解析”组图3-190"面料解析”组的效果3.2.2

商品详情页设计实例步骤14：打开素材10，调整好图片位置，输入文字"面布수건

韩国麻”，参数设置如图3-169所示。单击“矩形工具”按钮，画一个矩形，描边颜色为黑色，再对这个形状图层的“填充”设置为0%，“大小”为1px。单击“自定形状工具”按钮，画一个对钩，调整好位置，复制三份。在对钩后面依次输入文字“舒适”“柔软”“防皱”“不易变形”，效果如图3-191所示。

图3-191输入"舒适”等文字的效果3.2.2

商品详情页设计实例步骤15：创建新组，命名为"版型解析”。重复步骤14，打开素材11，调整好位置，效果如图3-192所示。

图3-192"版型解析”组的效果3.2.2

商品详情页设计实例步骤16：创建新组，命名为“版型指数”。输入文字“版型指数”，参数设置如图3-193所示。单击“矩形工具”按钮，填充颜色为#ececec。单击“圆角矩形工具”按钮，画一个圆角矩形，再对这个形状图层的“填充”设置为0%；单击“添加图层样式”按钮，选择“描边”选项，“大小”为1px，颜色为#a09f9f，线性渐变。

图3-193"版型指数”参数设置3.2.2

商品详情页设计实例单击"矩形工具”按钮绘制一个矩形，填充颜色为#eeeeee，描边颜色为#949494，"大小”为1px。输入文字