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

PAGEPAGE1***学校《网店美工》教案第1页学科网店美工项目六商品详情页设计检查授课班级授课时数16教具计算机、多媒体广播授课时间教学方法演示、讲解、实操教学目的①了解店铺首页的基本构成②熟悉各模块的功能与参数③设计美化各个模块教学重点和难点重、难点：商品详情页的每个重要组成部分和美化设计复习提问教学内容、方法、过程和版书设计教学追计商品详情页是网店组成最重要的部分之一，商品在这里得以最全面的展示，它如同无形的导购员，这是买家会不会下单的关键环节，详情制作的优劣，就好比实体店导购员推介商品时表现的好坏，最终直接关系到交易是否能产生。它是提高转化率的入口，刺激买家的消费欲望，树立买家对店铺的信任感，消除买家的各种担忧和疑虑，促使成单。所以，详情页的设计很关键，它在一定程度上对买家的消费行为产生了直接的影响。值得一提的是，详情页设计得好的能产生的效果有两种：强制营销和选择营销。强制营销是将你想阐述的卖点强制灌输给买家，用各个举例证明方法，让他认为你说的是正确的，信赖你的产品，这样买家可能在你的页面渲染状态下就购买了，属于冲动消费。第二种是选择营销，抓住买家的心理，将他心理的选择展现出来，让买家更加理性的购买，这样的好处是顾客体验好，退款率小，这样的操作方法也只有大卖家会这样操作，因为他们有足够的品牌调性，他们的顾客群体也固定了，所以他们可以操作的更理性点。任务22商品详情页设计标准及整体构思1.基本要求

单张图片应当保持在500K以内，仅支持JPG、GIF、PNG格式。提高缓冲速度，保证观看流畅度。2.PC端商品详情页图片尺寸：(1)宽度750像素；(2)单张高度建议800像素；(3)格式为：JPG\GIF\PNG。3.文字要求：(1)当需要在图片上添加文字时，中文字体大于等于12号字；(2)当需要添加的文字太多时，建议使用纯文本的方式编辑，这样看起来更清晰。建议文字尽量简洁，多用一些关键词去突出产品的特色。商品详情页的设计标准有六个重点：配色、字体、文案、构图、排版、氛围。通过对数据的分析、商品卖点的提炼，及店铺风格自身的定位，我们要先开始准备所需的设计素材。网络购物中，相信没有一个消费者在看商品的时候不去了解宝贝详情页就直接购买的，其重要性不言而喻。当然宝贝详情页要与宝贝主图、宝贝标题相契合，详情页必须真实地介绍出宝贝的特点属性，切忌夸大其词。接下来我们用图的方式来讲解商品详情页设计整体构思：优秀的详情设计，不单单是精美的画面，文案一样很重要。文案是画龙点睛的一笔，往往那么一个词汇、那么一个句子，却足以触动买家的心，这便是所谓的图文并茂。当两者完美地结合，其所产生的力量更为强大。好的文案通常具备如下特点：1.短短数秒的时间便能抓住买家的心2.三屏以内的内容就能让买家下定决心购买3.善于讲故事，用情感赢得买家的共鸣4.简洁的一句广告词便浓缩了产品的卖点5.重复地表达产品的最主要卖点6.诉求利益因素，给买家一个购买的理由网络营销发展至今，文案已经演变成了一个独立而专业的职位，在这里我们就不多加介绍，有兴趣的设计师们可以利用业余时间多进行了解。如果能够成为集设计与文案才能于一身的高级人才，可想而知，你将备受青睐。商品详情页设计是直接决定交易能否成功的其中一个重要因素，如何去构思使之更具有吸引力，更能抓住消费者的心理是关键。我们需要收集和了解买家需要看什么，不需要看什么：图6-1详情页所需内容板块示意接着，在再构思宝贝页面需要放置什么内容：图6-2详情内容要点示意任务23商品功能性介绍区域设计在做商品详情页规划前，清楚商品详情页每个区域的功能性，对后期布局设计起到相当重要的作用。一般来说，商品详情页分三大区域：商品营销区、产品展示区、品牌包装区。而三大区域则又细分成以下6个展现区，并形成商品描述的布局图：突出卖点：提炼商品的主要功能利益进行重点表现，吸引买家关注并进行浏览由整体到细节：先进行商品的整体展现，再进行商品的细节描述，这也是买家在购买商品时的浏览顺序情感联想：针对商品提炼情感利益，激发买家的感性购买需求导购服务：针对买家关注的商品问题进行导购式解答，逐步打消买家的购买疑虑售前售后：对买家进行购买后的一系列服务，从包装、物流到售后服务进行描述实力呈现：商品的质量认证、企业的实力展示、品牌介绍、荣誉等体现店铺实力的内容关联销售：关联销售区域，以便买家跳出前有更多商品选择图6-3详情页个区域内容细分示意另外，除了基础功能区域版块，为了提高买家逛店体验度以及店铺成交转化率，我们建议增加一些额外的版块，来为商品详情页的功能加分：1.增加买家购买欲望—促销活动区：在商品描述中加进给力的促销信息，让买家了解商品的同时清楚可以享受的促销优惠，让促销优惠来刺激买家的购买欲望。2.增加客单价—商品推荐：商品推荐有两种，分为同类商品推荐，设计必须要突出同类商品中不同商品的优势。告诉买家可以如何进行商品选择，如可以的话还可以体现出购买咨询和导购信息。另一类则是搭配商品推荐：设计中要突出不同商品搭配的艺术，或功能或效果或视觉呈现。让买家明白购买搭配商品他所能得到的不光是价格上的优惠，更多是购买该搭配产品所能带来更多的附加价值。3.增加买家易用性(访问深度)—分类模板：当然，光提供商品推荐对众多买家来说，远远不够，很多买家更希望自己选择，所以在描述中体现所有产品或者相关产品的分类，会让买家有更多选择的余地，提高买家的访问深度。4.增加买家咨询率—咨询功能模块：买家在浏览不同信息的时候都会产生不同的想法，同时，在客户介入时，转化率会大大提升，那我们设计该做的就是把自己当成买家，去考虑买家在看到什么信息的时候会想到咨询，同时把咨询旺旺添加到买家产生咨询想法的地方，增加咨询率。任务24商品详情页的规划消费者来到购物网站，目的往往非常明确，要么购物要么准备购物。大致有以下几种情况：1.

当消费者无目的的浏览淘宝时，大部分是通过各种推广活动，被其中某一样商品吸引住，从而点击进入店铺，直接浏览宝贝详情。2.当消费者有熟知并喜好的品牌，则直接从店铺首页进入，选择感兴趣的商品点击查看详情，再考虑是否购买，或者通过品牌商品搜索进入宝贝详情页面查看。3.

当消费者以某一商品为购物目的，通过搜索或活动推广直接进入宝贝描述页面查看详情。由此可见大多数消费者着陆页面都会是宝贝描述页面，意味着消费者在进入店铺首页之前，绝大多数是在看宝贝，如果不能成功吸引或挽留住消费者，使得消费者直接在宝贝上失去信心和兴趣的话，进入店铺的可能性就不大，也就意味着成交率为0。

所以说，首页的主要作用是吸引消费者，并树立店铺品牌形象，宝贝描述页面则是影响消费者是否购买的一个重要因素，是将点击率转化为成交率的最关键页面。既然商品详情页很大程度影响了商品的转化率，也是直接决定交易能否达成的关键因素，如何规划好商品详情页，去抓住消费者的心理成为了关键。一个完整的商品详情一般规划如下：一.形象展示一般放在最上面，用一张图片和简短文案来展示你在卖什么。当然也可以把卖点中的风格理念或促销导购写到这里来，但是文案不宣过长。图6-4形象展示区域二.促销导购可以包含收藏关注和满减换购等优惠信息。图6-5促销导购区域三.关联信息主要体现产品的关联营销产品，以及套餐搭配价格。图6-6关联信息区域四.产品信息商品的单品海报和功能介绍，还可以包含商品的主要功能、基本参数、颜色和尺码规格等信息。图6-7产品信息区域五.适用范围包含使用人群或环境。数量根据实际需求而定，但不宜过多。图6-8适用范围区域六.详情展示详情展示是一个详情页最重要的部分，要精准地描述出商品的全部优点、卖点。卖点可以夹杂在详情页各个地方体现。这才设计之初，就要先把卖点提炼总结出来，然后美工和运营人员根据排版的样式安排在详情页不同位置。以玩具为例，包含设计细节解析、设计理念、适合群体、材质卖点、工艺卖点等等。图6-9详情展示区域七.细节展示细节展示部分，让买家从更多更细的方面深入了解到商品的价值，加深购买的决心。图6-10细节展示区域八、PK对比这个版块就是进行一个产品对比的过程，适用于同质化比较多的商品。图6-11PK对比区域九、购物须知主要告知邮资、物流、退换货以及售后问题等。图6-12购物须知区域十.品牌文化对店铺或者商品品牌的企业文化做简要介绍，提升自我形象，让买家认同和接受产品、店家乃至品牌。图6-13品牌文化区域商品详情页所包含的内容以及其规划基本如上述介绍。但在实际应用中，都会存在板块的增减或者位置排序变化的可能，这还需根据实际情况适时调整。以上板块均为基础板块，每个板块却都非常的重要，在以下的课程中我们会列举部分板块来做重点介绍。任务25商品场景图设计展现商品场景图，完整地说，叫做商品应用场景图，指一个商品被使用的时候，用户“最可能的”所处场景，是一种更接地气的分析和描述用户需求的方法。场景包括时间、空间、设备支持、社交及用户情绪等多个方面，进行应用场景的判断和描述的时候，应尽量把这些方面都考虑周到。心理学知识显示，当用户具有某种需求时，会尝试各种手段来进行自我满足。经济发展到一定程度上，人民生活中的讲究更多，讲究很大一部分表现在，对于贯穿成为生活的场景更为讲究、提出更高、更专门的要求。因此，对于一个商品，单纯地用文字说好不好用，和用各种精美的整体图、细节图展现它，都是不足以体现商品价值的，还需要设计使用情景，加以情景模拟，帮助消费者进行对产品使用体验的理解，让消费者更直观地看到商品的价值，这在商品交易的促成当中起着较为重要的作用。如何给店铺内的商品设计搭配合适的场景图，非常的关键，必须精准地体现商品的功能和价值，全面为促成交易画上点睛之笔。对于素材的选择和整体排版的美观非常重要。下面我们来具体解析一下：【案例一：玩具】步骤1开启PhotoshopCS6。新建文件为“商品场景图”，尺寸为宽度790px，高度790px。图6-14执行新建命令步骤2对前景色填充色值R:0G:105B: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开启PhotoshopCS6。新建文件为“商品场景图”，尺寸为宽度800px，高度500px。图6-21执行新建命令步骤2从素材文件夹拖入“小孩.psd”，位于画框居中。图6-22打开素材“小孩”步骤3从“天空背景.jpg”文件拖入图层，如图6-23摆放。图6-23打开素材“天空北京”步骤4使用文字工具输入“fantasyrainbow”等字，并添加图层选项-投影效果，最终效果如下。图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购物须知设计购物须知也可以称为购物声明，其作用主要有两点，一是让卖家对商品销售规则及售后事项做预先描述，避免一些前期麻烦和后期问题。二是让买家清楚地了解到商品情况、售后服务、快递物流及包装等等方面的信息。当然，在所展示的内容中，须尽可能地明确阐述自己的产品质量、售后服务条款，不发布虚假信息，无欺诈消费者的行为，同时具备完善的商家信誉评估体系和健全的用户信息安全保证措施，最大可能保证买家的利益。一般购物须知都有以下几个项目：1.关于产品2.关于质量3.关于尺寸4.关于色差5.关于产品退换问题6.发货问题；为了增强互动感，我们可以采用买卖家对答的形式进行制作：步骤1开启PhotoshopCS6。新建文件为“购物须知”，尺寸为宽度750px，高度500-1000px。图6-40执行“新建”命令步骤2按照规划好的分区，用辅助线划分六个板块，方便后期排版。图6-41划分区域步骤3使用文字工具分段输入预先编写好的文字；图6-42输入对应文字步骤4使用文字工具标注好每个块的序列号，方便买家阅览。图6-43输入对应编号顺序步骤5打开图层，如图6-44，调整不透明度为10%；并摆放至如图所示的位置。图6-44对顺序数字进行处理步骤6为了使购物须知更加直观，可从专业素材网站下载一些对应图标，分别对相应的栏目进行修饰。图6-45购物须知设计最终效果课后任务：1.按本任务进行设计和规划，图标可自行寻找和下载，文字可沿用，学习和熟悉购物须知的作用。图6-46作业素材-购物须知2.为“优品食代”的设计一套购物须知。风格及表现手法不限。任务29用户评价区域设计在淘宝网上交易成功后，买卖双方均有对该笔交易做出评价的权利，评价区显示的内容，是淘宝网用户诚信度的重要标尺，也是新的买家对卖家资质进行判断的一个重要标准。其重要意义主要体现在以下两点：1.随着交易数目的不断增加，买家满意度的不断提高，卖家获得的信用积分也就会越来越高。这一点对于卖家来说尤为重要，来自买家的信用评价可以体现卖家的历史交易情况以及买家的满意度等，而其他买家在购买时，通过卖家的信用就可以客观地了解到该商品的交易情况并决定是否购买。2.一般来说，如果买家给予了好评，那么说明卖家的商品质量、服务态度都比较放心；如果给予了中评或差评，就说明买家对商品质量、服务态度或者发货进度等方面不够满意。因此，做足一切的优质服务，引导买家在交易完成后对卖家进行好评，和对新顾客展示已有的老顾客好评信息，都显得至关重要。当支付宝软件系统下一笔交易的显示状态应为“交易成功”，在交易成功后买家可以直接进行评价或者在交易成功的15天内，买家可以登陆“我的淘宝”>>“我是买家（我是卖家）”>>“已买入的宝贝（已卖出