***学校  《网店美工》教案      第  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-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  玩具亮点设计1
    2.特点，在商品详情页的靠前部分，展现商品与众不同的独特之处，全面提升商品的价值度。
图6-36  玩具亮点设计2
    3.材质，在生活品质高度提升的现代社会，人们更多追求高品质的、安全的事物，因此，商品材质常常为人们所关心，我们需要对材质、工艺等方面进行介绍，以消除买家此方面的顾虑，放心购买。
图6-37  玩具亮点设计3
图6-38  玩具亮点两点设计3
（文件夹内含PSD文件与图片文件）
课后任务：
  1.按以下范例图“作业素材-亮点设计”进行设计和规划，鼠标商品以及背景图可自行选用，文字可沿用，风格及表现手法不限。
图6-39  作业素材-亮点设计
2.挑选“优品食代”的商品细节图，进行设计排版，使细节功能更加突出。风格及表现手法不限。
任务28  购物须知设计
    购物须知也可以称为购物声明，其作用主要有两点，一是让卖家对商品销售规则及售后事项做预先描述，避免一些前期麻烦和后期问题。二是让买家清楚地了解到商品情况、售后服务、快递物流及包装等等方面的信息。当然，在所展示的内容中，须尽可能地明确阐述自己的产品质量、售后服务条款，不发布虚假信息，无欺诈消费者的行为，同时具备完善的商家信誉评估体系和健全的用户信息安全保证措施，最大可能保证买家的利益。
    一般购物须知都有以下几个项目：1.关于产品 2.关于质量 3.关于尺寸 4.关于差 5.关于产品退换问题 6.发货问题；为了增强互动感，我们可以采用买卖家对答的形式进行制作：
步骤1  开启Photoshop CS6。新建文件为“购物须知”，尺寸为宽度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天内，买家可以登陆“我的淘宝” >> “我是买家（我是卖家）” >> “已买入的宝贝（已卖出的宝贝）”进行评价。评价主要由星级评价和文字评论组成，作为判定“好评”、“中评”、“差评”的标准。
    1.引导买家好评：
    在早期的网店中，卖家为了刺激买家对其进行好评，通常会以真实利益作为报酬，比如赠送小礼品，甚至小金额的返还。但网店平台的规则不定期都会做调整，时至今日，好评返现已被禁止，所以不建议加入好评返好礼等信息。这也是平台为了进一步规范市场交易真实性的举措，是值得提倡的。
步骤1   开启Photoshop CS6。新建文件为“好评引导”，尺寸为宽度750px，高度300-500px。
图6-47  执行“新建”命令
步骤2  使用文字工具对内容进行排版。
图6-48  输入文字内容
步骤3  使用自定形状工具并点击形状，如图6-49，选择五角星形状，模拟星级评价。
图6-49  图形装饰
步骤4   使用矩形工具对版面进行修饰；
图6-50  矩形工具绘制装饰
步骤5  打开“笑脸表情.psd”，对画面进行美化和修饰。
图6-51  添加装饰素材
搜集买家好评作为参考：
    大多数人在购物过程中，都习惯以已购买者的评价作为重要参考，因此，用户评价的重要性更是显得举足轻重。如果能够在浏览产品的时候，就能清楚地看到已购买者的评论好评信息，那常常对促成交易有很大的帮助。
步骤1   在评价里挑选一些买家对店铺商品的经典好评作为素材；
步骤2   开启Photoshop CS6。新建文件为“好评参考”，尺寸为宽度750像素，高度500-1000像素；
图6-52  执行新建命令
步骤3  把搜集好的评论截图素材，置入文件中。
图6-53  截图素材添加
步骤4   使用矩形工具做红底，并用文字工具输入文字“亲，买过的人是这样说的”。
图6-54  绘制标题框并输入文字
步骤5 可用矩形工具框出关键词，作为重点强调。
步骤6   最后一步，打开素材“好评如潮.psd”的盖章图样，作为装饰。
图6-55  突出重点文字
图6-56  添加图章作为装饰
课后任务：
  1.收集用户好评，根据下图“作业素材-购物须知”进行排版设计，文字可沿用，学习和熟悉用户好评的作用。
图6-57  作业素材-购物须知
    2.为“优品食代”的设计一套用户好评。风格及表现手法不限。