第5章商品详情页视觉设计《Photoshop CC网店美工视觉设计实战》同步教学（工信版）（课件）

商品详情页视觉设计 Photoshop CC网店美工视觉设计实战（全彩微课版） 第5章 目录 Contents 商品详情页设计要点 商品详情页设计 5.2 5.1 实战演练——制作四件套详情页 5.3 5.1.1 商品详情页制作规范 3 美观的商品详情页可以吸引消费者的注意力和兴趣，从而提高商品销量。为了使商品详情页规范完整，网店美工在制作商品详情页前需要先了解制作规范。 商品详情页的风格应该与店标和店招等风格一致，以免造成页面整体不协调的问题。 商品详情页的内容一般都比较多，为了避免消费者在浏览商品详情页时出现加载过慢的问题， 装修时最好不要使用尺寸太大的图片。 在店铺管理页面中直接制作商品详情页十分不方便，因此网店美工可先通过Photoshop制作好商品详情页，再进行上传。 淘宝网对商品详情页的尺寸一般没有具体要求，但其宽度一般在750像素以内。 5.1.2 商品详情页的内容分析与策划 4 商品详情页的内容需要根据商品的特色进行策划，对于标准化商品，如数码类商品，消费者大多是基于理性购买的，关注的重点多为商品的功能性，此时就需要涉及细节展示、宝贝参数、功能展示等模块总之，要使详情页的内容引起消费者的兴趣，网店美工在策划模块时就需要把握以下4点。 激发兴趣和潜在需求 赢得消费者信任 替消费者做决定 宝贝推荐 A B C D 目录 Contents 商品详情页设计要点 商品详情页设计 5.2 5.1 实战演练——制作四件套详情页 5.3 5.2.1 焦点图设计 6 焦点图一般位于宝贝基础信息下方，由商品、主题与卖点3个部分组成，它通过突出商品优势以及放大商品的特点来吸引消费者的注意力并促使其产生购买行为。“友猫”宠物用品店需要为上新的猫砂设计大小为750像素×1200像素的焦点图来吸引消费者。 由于该猫砂的包装以蓝色为主色，为了使焦点图与包装统一，网店美工在设计上可以继续沿用蓝色作为主色，以包装图案作为设计点，再加入猫咪元素和说明文字来体现主题，然后在其上添加网店Logo，达到宣传网店的目的，具体操作如下。 绘制渐变圆 1 绘制圆 5.2.1 焦点图设计 7 2 绘制矩形渐变 3 5.2.1 焦点图设计 8 4 添加素材 输入文字 5 5.2.1 焦点图设计 9 7 输入其他文字 绘制自定义形状 6 设置渐变叠加 8 5.2.1 焦点图设计 10 9 添加素材 最终效果 3 绘制直线 11 10 5.2.2 卖点说明图设计 11 “友猫”宠物用品店需要在焦点图的下方设计卖点说明图，为了增强消费者对该猫砂的信任感。 网店美工在设计时可以从消费者的需求角度出发，如抑菌、除臭、天然、超强吸水等方面来设计说明图，在颜色选择上可继续沿用焦点图的色调，使整个设计更加统一，具体操作如下。 2 绘制矩形 添加离子素材 1 5.2.2 卖点说明图设计 12 4 输入文字 绘制圆角矩形 3 添加猫砂杯素材 输入除臭模块文字 5 6 5.2.2 卖点说明图设计 13 8 绘制直线和斜线 绘制渐变矩形 7 输入豌豆猫砂相关文字 添加素材和文字 9 10 5.2.2 卖点说明图设计 14 12 绘制直线 创作其他模块 11 添加研究图片素材 输入文字 13 14 5.2.2 卖点说明图设计 15 最终效果 15 5.2.3 信息展示图设计 16 由于网络的虚拟性，消费者并不能通过图片来准确把握商品的尺寸，因此网店美工需要在商品详情页中充分展示商品的尺寸、颜色或细节等内容。 猫砂的信息展示图主要用于展示消费者关注的猫砂问题，如品牌、净含量、主要成分、保质期、适用对象等，可增强消费者对该猫砂的信任感，也能使网店在消费者心中留下深刻的印象。除此之外，网店美工还可添加猫砂使用指南，让消费者了解该猫砂的使用方式，继续加深他们对网店的印象及增强他们对网店的好感度，具体操作如下。 2 绘制直线 绘制圆角矩形 1 5.2.3 信息展示图设计 17 4 绘制矩形 输入文字 3 绘制矩形 设置不透明度 5 6 5.2.3 信息展示图设计 18 最终效果 7 5.2.4 快递与售后图设计 19 快递与售后图主要是展现快递和售后的信息。“友猫”宠物用品店为了提高消费者的满意度，准备在最下方设计快递与售后图，在该图可添加客服热线和售后问题，让消费者了解本网店的诚意，增强消费者对网店的归属感，具体操作如下。 2 添加素材 绘制圆角矩形并填充颜色 1 添加客服素材 3 5.2.4 快递与售后图设计 20 5 输入说明文本 最终效果 4 目录 Contents 商品详情页设计要点 商品详情页设计 5.2 5.1 实战演练——制作四件套详情页 5.3 实战演练——制作四件套详情页 22 某网店准备上新一套古典印花四件套，需要制作详情页，且希望通过详