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

***学校《网店美工》教案第 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摆放。

图6-17 打开素材“装饰物件”步骤5 从素材文件夹拖入“云.psd”，复制并摆放于背景层。

图6-18 打开素材“云.psd”步骤6 从素材文件夹拖入“装饰文字.psd”，放置于图层正上方。

图6-19 打开素材“装饰文字.psd”步骤7 从素材文件夹拖入“玩具车.psd”与“玩具遥控器.psd”，完成商品场景图设计。

图6-20 玩具场景图最终效果【案例二：服装】步骤1开启Photoshop CS6。

新建文件为“商品场景图”，尺寸为宽度800px，高度500px。

图6-21 执行新建命令步骤2从素材文件夹拖入“小孩.psd”，位于画框居中。

图6-22 打开素材“小孩”步骤3从“天空背景.jpg”文件拖入图层，如图6-23摆放。

图6-23 打开素材“天空北京”步骤4使用文字工具输入“fantasy rainbow”等字，并添加图层选项-投影效果，最终效果如下。

图6-24 最终效果课后任务：1.挑选任意商品，类似下图“作业素材-商品场景”做一个场景搭配图，可搭配文字。

图6-25 作业素材-商品场景2.挑选“优品食代”的商品，并设计一个场景体验图。

风格及表现手法不限。

任务26 竞品对比设计展现人类的欲望是无止尽的，对美的追求也一直是人类的基本欲念，但是人们又无法清晰的描述出自己想要的是什么，比如没有出现飞机或者汽车的时候，人们还只是在寻找一匹更快的马。

所以，设计师需要的是用视觉效果去告诉买家，你的商品为什么是美的、是好的，别人的东西跟你的具体差距在哪里。

竞品分析很重要，但竞品之间的对比在虚拟世界里，就只能用图文的方式来展示。

扬长避短，集中优势，以强调和形成自身商品的核心竞争力，最终达到促成交易的目的。

一般来说，主要从两方面拍摄和设计解析对比：1.拍摄方面来说，应保持商品真实的色彩和质感（如图6-26和图6-28）。

避免曝光过度，色彩过艳，与实际不符（如图6-27和图6-29）。

图6-26 玩具拍摄效果好图6-27 玩具拍摄效果差图6-28 服装拍摄效果好图6-29 服装拍摄效果差2.从设计方面来说，底色及纹饰的选择很讲究，在下列案例中，图6-30和图6-32的背景选择与商品同色系，装饰图案也选择可爱的卡通型图案，跟商品高度协调，增加产品的美感，渲染了意境。

而图6-31和图6-33中的设计，底色过艳，对比太强烈，文字装饰方面简单无新意，整体使得商品档次降低。

图6-30 玩具设计效果好图6-31 玩具设计效果差图6-32 服装设计效果好图6-33 服装设计效果差当然，竞品对比设计过程中，也有值得特别注意的一点，不宜有对竞品方指名道姓、贬低挞伐、文字攻击等不良行为。

良性竞争，才能共同创造良好的商业网环境。

课后任务：1.运用以上所学知识，如以下范例图“作业素材-竞品对比”进行设计和规划，耳机商品以及背景图可自行选用，风格及表现手法不限。

图6-34 作业素材-竞品对比2.挑选“优品食代”的商品图，进行色调、构图和文案排版，使商品更加美观、时尚。

风格及表现手法不限。

任务27 商品亮点设计展现商品亮点，也就是商品的卖点。

所谓卖点，其实就是一个消费理由，最佳的卖点即为最强有力的消费理由。

为产品寻找、发掘、提炼卖点，这已是现代营销学（广告学、公关学）的常识。

显然，问题已不在于要不要为产品寻找卖点的问题，而在于怎样寻找到卖点的问题了。

卖点的创意是很多的，人们已经在这方面积累了丰富的经验；卖点的创意又是不多的，因为新的卖点往往不是从经验中就可得来的，更不是从简单的模仿中、借鉴中可以得来的，它需要捕捉、需要发掘、需要提炼，更需要独创，每一个独特的卖点都是突破常规的结果，其间曲折坎坷、耐人寻味，也给产品卖点的创意平添了几分神秘（产品的卖点和产品的附加值有相近之处、交叉之点，也是关联作用极大的，一般说来，产品的附加值越出色，产品的卖点也就越好挖掘和提炼）。

卖点有以下几个特点：1.具有竞争优势，一眼可区别出同质产品。

2.可感知的、明确可转化为消费者的实际利益。

3.适合消费群心理。

在商品详情页里，卖点对产品转化率具有重要的影响，因此从设计上着重展现商品亮点也是一项很重要的任务。

例如：产品的细节、特点、材质等等。

【案例一：玩具】1.细节，突出细节质感，体现商品本身设计人性化，细心周到，给予买家温暖体贴的感受，引导买家更直观的聚焦。

图6-35 玩具亮点设计12.特点，在商品详情页的靠前部分，展现商品与众不同的独特之处，全面提升商品的价值度。

图6-36 玩具亮点设计23.材质，在生活品质高度提升的现代社会，人们更多追求高品质的、安全的事物，因此，商品材质常常为人们所关心，我们需要对材质、工艺等方面进行介绍，以消除买家此方面的顾虑，放心购买。

图6-37 玩具亮点设计3图6-38 玩具亮点两点设计3（文件夹内含PSD文件与图片文件）课后任务：1.按以下范例图“作业素材-亮点设计”进行设计和规划，鼠标商品以及背景图可自行选用，文字可沿用，风格及表现手法不限。

图6-39 作业素材-亮点设计2.挑选“优品食代”的商品细节图，进行设计排版，使细节功能更加突出。

风格及表现手法不限。

任务28 购物须知设计购物须知也可以称为购物声明，其作用主要有两点，一是让卖家对商品销售规则及售后事项做预先描述，避免一些前期麻烦和后期问题。

二是让买家清楚地了解到商品情况、售后服务、快递物流及包装等等方面的信息。

当然，在所展示的内容中，须尽可能地明确阐述自己的产品质量、售后服务条款，不发布虚假信息，无欺诈消费者的行为，同时具备完善的商家信誉评估体系和健全的用户信息安全保证措施，最大可能保证买家的利益。