07.产品详情页设计

★任务导读：

商品详情页是所有营销的最终落脚点，是卖家通过商品搜索进入店铺的首个页面，也是买家在商品购买之前最仔细阅读的页面。买家对于详情页会反复看、对比着看，进而咨询、最终决定是否要下单。如果详情页不能够满足买家的需求、不能够解决买家的实际问题，即便设计再漂亮的详情页也不会让买家下单。

本节课将从产品详情页策划、设计与制作等步骤展开工作任务。通过阐述产品详情页在设计过程中应考虑的核心要素，帮助学生掌握产品详情页设计的方法和技巧，并引导学生进行产品详情页设计实操。

★学习目标：

1.了解详情页的策划设计的要点；

2.熟知详情页的构成要素；

3.熟知详情页的设计规则；

4.掌握详情页的制作方法和技巧。

★案例引入：

小白经营的淘宝店铺首页流量比较大，但是转化率长期维持在3%左右，而行业的平均值在8%，无论如何增加流量调整推广策略店铺的转化率都没有明显的提升。为了让店铺的转化率有所提升，小白决定对店铺的商品详情页进行调整。在详情页设计时应如何规划页面布局及调整内容，才能有效提升转化率？

★知识学习：

【以视频形式展现】

★课中练习：

设备要求：

（1）教学设备：安装有Photoshop，并且连接互联网的计算机

（2）实训场地：美工实训室

操作步骤:

本实训要求学生通过Photoshop软件完成对产品详情页的设计。通过本章内容的学习与实训，要求学生熟练掌握Photoshop软件的使用方法和技巧，并掌握详情页设计方法。

步骤1：任务布置

教师向学生介绍任务要求和内容，将班学生按每3-4人的标准划分成若干个任务小组，以小组为单位进行任务实训。学生领取任务。

设计要求：

1.宽度750px，高度不限；

2.详情页包涵商品海报、商品信息、商品卖点展示、商品细节展示等信息；

3.页面简洁、风格统一。

步骤2：产品详情页分析

详情页是强调在于让买家进行购买的关键，学生根据分配到的任务，首先分析产品详情页如何设计，需要体现什么。

步骤3：产品详情页设计

1.新建详情页文件。按快捷键【Ctrl+N】快捷键，新建一个图像文件，在【新建】对话框中 设置页面的宽度为750PX，通常默认淘宝产品详情页宽为750，天猫产品详情页宽为790PX，高度为8000PX，分辨率为72PX，颜色为RGB模式，如图7-1所示。

图7-1新建文件

2.新建文件组。在【图层】面板中新建“组”命名为产品焦点图，如图7-2所示。

图7-2 新建文件组

3.焦点图模块设计。选择工具箱中的【矩形工具】，前景色设置为蓝色，背景色设置为粉红色，绘制如图7-3所示的两个区域，无描边。

图7-3 背景矩形绘制

按【Ctrl+T】键出现变换控件，在长按【Ctrl】键进行矩形变换、斜铁到合适的位置，7-4所示如图。

图7-4 制作焦点图背景

制作矩形区域。选择工具箱中的【矩形工具】，前景色设置为浅灰色，画出“矩形”进行颜色填充，描边为白色，描边数值为5，如图7-5所示。

图7-5 制作矩形区域

导入素材。按快捷键【Ctrl+O】快捷键，打开产品“帽子模特”素材，选择工具箱中的【移动工具】，将素材拖动到灰色矩形框上面，点击右键“创建剪贴蒙版”，让产品素材和图形搭配更细致，如图7-6所示。

图7-6素材导入

添加文案。按快捷键【Ctrl+O】快捷键，打开产品“logo”素材，选择工具箱中的【移动工具】，将素材拖动到灰色矩形框上面，选择【横排文字工具】，设置前景色为深灰色，在图形上输入产品主题“儿童鸭舌帽”等文字进行编辑排版，产品焦点图完成，选择【移动工具】将所有焦点图图层移动到组，如图7-7所示。

图7-7 添加文案

制作详情页中的模块分类。在【图层】面板中新建“组”命名为产品信息，选择工具箱中的【矩形工具】，画出相应的矩形、圆角矩形、线条等，如图7-8所示。

图7-8 制作模块分类

4.商品参数息模块设计。选择工具箱中的【横排文字工具】，设置前景色为白色，在图像上输入主标题文字“产品信息中英文”“产品具体参数”字体为“微软雅黑”进行文字大小、文字颜色的编辑，如图7-9所示。

图7-9 商品参数模块

产品信息文字编辑完成以后，最好一步需要加入山脉暗纹作为装饰，打开“山脉”素材文件，选择工具箱中的【移动工具】将素材拖动到新建的文件中，放在合适的位置，如图7-10所示。

图7-10 素材导入

与制作商品参数方法相同，使用钢【矩形工具】、【横排文字工具】等进行编辑模特展示、产品细节、门店展示等。

5.模特展示区模块设计。按【Ctrl+O】快捷键，打开素材文件“儿童模特素材”文件。选择工具箱中的【移动工具】将素材拖动到主标题下面，进行版面的大小排列、排版组合，让产品颜色通过不同的方向、不同的角度全方位展示，完成产品展示，如图7-11所示。

图7-11 模特展示编辑

6. 产品颜色展示模块设计。按【Ctrl+O】快捷键，打开素材文件“帽子产品素材”文件。选择工具箱中的【矩形工具】，设置前景色为灰色，拖动鼠标指针，在产品细节展示区绘制灰色矩形作为背景。然后在选择工具箱中的【移动工具】将素材拖动到主标题下面，进行排列，在选择工具箱中的【矩形工具】【横排文字工具】对产品颜色方面进行阐述，如图7-12所示。

图7-12 产品演示展示

7.细节展示模块设计。选择工具箱中的【矩形工具】，设置前景色为灰色，拖动鼠标指针，在产品细节展示区绘制灰色矩形作为背景。按【Ctrl+O】快捷键，打开素材文件，选择工具箱中的【移动工具】将素材拖动到新建的背景中。如图7-13所示。

图7-13 矩形绘制以及素材导入

选择工具箱中的“椭圆工具”，按住【Shift】键，在产品细节展示部分绘制一个正圆，无填充，蓝色描边，绘制完成以后按住【Alt】键进行复制，如图7-14所示。

图7-14 圆形绘制

选择工具箱中的“直线工具”，新建图层，按住【Shift】键，分别绘制三段直线，如图7-15所示。

图7-15 直线工具编辑

选择工具箱中的【横排文字工具】，在图像上输入说明文字，前景色设置为深蓝色，字体“微软雅黑”，如图7-16所示。

图7-16 横排文字编辑

按【Ctrl+O】快捷键，打开“帽子细节素材”，选择工具箱中的【移动工具】，将素材移动到细节展示图底下，进行排版编辑，选择【矩形选框工具】【横排文字工具】，将前景色设置为白色，绘制矩形在图像上，透明度调至59%，进行图形文字编辑，产品细节图完成，如图7-17所示。

图7-17 产品与文字排版

8.品牌故事模块设计。选择工具箱中的“圆角矩形”，设置前景色为蓝色，绘制矩形。按快捷键【U】进行编辑，无描边，在选择工具箱中的【移动工具】，将鼠标指针置于矩形上，按住【Alt】键的同时进行拖动，复制三个矩形进行排版大小、位置，如图7-18所示。

图7-18 圆角矩形绘制

按【Ctrl+O】快捷键，打开“模特素材”将不同的功能服进行展示，选择工具箱中的【移动工具】将素材移动到“矩形图层”上层，在此图层的图层名称上右击，在弹出的快捷菜单中选择“创建剪贴蒙版”命令，依次使用相同的方法创建剪贴蒙版，如图7-19所示。

图7-19 创建剪贴蒙版

选择工具箱中的【横排文字工具】，在图像上输入，字体设置为“微软雅黑”，大小根据页面所需进行调节，如图7-20所示。

图7-20 输入文案

选择工具箱中的“椭圆工具”设置前景色黄色，新建图层，按住【Shift】键绘制正圆，在选择工具箱中的【移动工具】，将鼠标指针置于矩形上，按住【Alt】键的同时进行拖到复制，复制完成以后进行不同颜色的填充，正圆位置的排列、文字的编辑，让整个页面更显的活力，产品阐述页面完成，如图7-21所示。

图7-21 正圆绘制完成品牌故事模块设计

9.与“品牌故事模块设计”方法相同，使用【矩形工具】“创建剪贴蒙版”等工具完成“门店展示模块设计”，如图7-22所示。

7-22门店展示模块设计

步骤4：总结评价

学生总结详情页的设计思路及注意事项。老师针对学生完成的设计作品进行点评，奖励优秀小组。

★美工小经验：

【以PDF形式展现】 

★课后练习：

1. 请根据素材包中提供的赣南脐橙素材图制作一套赣南脐橙色移动端详情页，文案自行设计。

2.请根据素材包中提供的百香果素材图制作一套百香果移动端详情页，文案自行设计。

3.请根据素材包中提供的红枣素材图制作一套红枣移动端详情页，文案自行设计。

★回顾总结：

商品详情页直接关系到商品是否能够说服买家购买，对于店铺转化率至关重要，一个逻辑清晰、设计优美、说服力强的详情页可以让更多浏览产品的买家产生下单行为。

通过本节课的学习，让学生对产品详情页建立完整的认知，掌握商品详情页的设计逻辑，设计要点。