《网店美工》教案--商品详情页设计

***学校《网店美工》教案第 1 页

有兴趣的设计师们可以利用业余时间多进行了解。如果能够成为集设计与文案才能于一身的高级人才，可想而知，你将备受青睐。

商品详情页设计是直接决定交易能否成功的其中一个重要因素，如何去构思使之更具有吸引力，更能抓住消费者的心理是关键。我们需要收集和了解买家需要看什么，不需要看什么：

图6-1 详情页所需内容板块示意

接着，在再构思宝贝页面需要放置什么内容：

图6-2 详情内容要点示意

任务23 商品功能性介绍区域设计

在做商品详情页规划前，清楚商品详情页每个区域的功能性，对后期布局设计起到相当重要的作用。一般来说，商品详情页分三大区域：商品营销区、产品展示区、品牌包装区。而三

大区域则又细分成以下6个展现区，并形成商品描述的布局图：

突出卖点：提炼商品的主要功能利益进行重点表现，吸引买家关注并进行浏览

由整体到细节：先进行商品的整体展现，再进行商品的细节描述，这也是买家在购买商品时的浏览顺序

情感联想：针对商品提炼情感利益，激发买家的感性购买需求

导购服务：针对买家关注的商品问题进行导购式解答，逐步打消买家的购买疑虑售前售后：对买家进行购买后的一系列服务，从包装、物流到售后服务进行描述

实力呈现：商品的质量认证、企业的实力展示、品牌介绍、荣誉等体现店铺实力的内容

关联销售：关联销售区域，以便买家跳出前有更多商品选择

图6-3 详情页个区域内容细分示意

另外，除了基础功能区域版块，为了提高买家逛店体验度以及店铺成交转化率，我们建议增加一些额外的版块，来为商品详情页的功能加分：

1.增加买家购买欲望—促销活动区：在商品描述中加进给力的促销信息，让买家了解商品的同时清楚可以享受的促销优惠，让促销优惠来刺激买家的购买欲望。

2.增加客单价—商品推荐：商品推荐有两种，分为同类商品推荐，设计必须要突出同类商品中不同商品的优势。告诉买家可以如何进行商品选择，如可以的话还可以体现出购买咨询和导购信息。另一类则是搭配商品推荐：设计中要突出不同商品搭配的艺术，或功能或效果或视

理念或促销导购写到这里来，但是文案不宣过长。

图6-4 形象展示区域

二.促销导购

可以包含收藏关注和满减换购等优惠信息。

图6-5 促销导购区域

三.关联信息

主要体现产品的关联营销产品，以及套餐搭配价格。

图6-6 关联信息区域

四.产品信息

商品的单品海报和功能介绍，还可以包含商品的主要功能、基本参数、颜色和尺码规格等

信息。

图6-7 产品信息区域

五.适用范围

包含使用人群或环境。数量根据实际需求而定，但不宜过多。

图6-8 适用范围区域

六.详情展示

详情展示是一个详情页最重要的部分，要精准地描述出商品的全部优点、卖点。卖点可以夹杂在详情页各个地方体现。这才设计之初，就要先把卖点提炼总结出来，然后美工和运营人员根据排版的样式安排在详情页不同位置。以玩具为例，包含设计细节解析、设计理念、适合群体、材质卖点、工艺卖点等等。

图6-9 详情展示区域

七.细节展示

细节展示部分，让买家从更多更细的方面深入了解到商品的价值，加深购买的决心。

图6-10 细节展示区域

八、PK对比

这个版块就是进行一个产品对比的过程，适用于同质化比较多的商品。

图6-11 PK对比区域

九、购物须知

主要告知邮资、物流、退换货以及售后问题等。

图6-12 购物须知区域

十.品牌文化

对店铺或者商品品牌的企业文化做简要介绍，提升自我形象，让买家认同和接受产品、店家乃至品牌。

图6-13 品牌文化区域

商品详情页所包含的内容以及其规划基本如上述介绍。但在实际应用中，都会存在板块的

增减或者位置排序变化的可能，这还需根据实际情况适时调整。以上板块均为基础板块，每个板块却都非常的重要，在以下的课程中我们会列举部分板块来做重点介绍。

任务25 商品场景图设计展现

商品场景图，完整地说，叫做商品应用场景图，指一个商品被使用的时候，用户“最可能的”所处场景，是一种更接地气的分析和描述用户需求的方法。场景包括时间、空间、设备支持、社交及用户情绪等多个方面，进行应用场景的判断和描述的时候，应尽量把这些方面都考虑周到。心理学知识显示，当用户具有某种需求时，会尝试各种手段来进行自我满足。经济发展到一定程度上，人民生活中的讲究更多，讲究很大一部分表现在，对于贯穿成为生活的场景更为讲究、提出更高、更专门的要求。因此，对于一个商品，单纯地用文字说好不好用，和用各种精美的整体图、细节图展现它，都是不足以体现商品价值的，还需要设计使用情景，加以情景模拟，帮助消费者进行对产品使用体验的理解，让消费者更直观地看到商品的价值，这在商品交易的促成当中起着较为重要的作用。

如何给店铺内的商品设计搭配合适的场景图，非常的关键，必须精准地体现商品的功能和价值，全面为促成交易画上点睛之笔。

对于素材的选择和整体排版的美观非常重要。下面我们来具体解析一下：

【案例一：玩具】

步骤1 开启Photoshop CS6。新建文件为“商品场景图”，尺寸为宽度790px，高度790px。

图6-14 执行新建命令

步骤2 对前景色填充色值R:0 G:105 B:185，作为背景。

图6-15 为背景填色

步骤3 从素材文件夹拖入“小孩.psd”，位于画框居中。

图6-16 打开素材“小孩.psd”

步骤4 从“装饰物件”文件夹拖入若干装饰图层，如图6-17摆放。