8.3 任务三 商品详情页设计方法
8.3.1 任务目标
| 知识目标 | 技能目标 |
| ● 能了解网店商品详情页的作用； ● 能熟悉商品详情页的构成模块； ● 能辨别不同商品使用的详情页文案类型。 | ● 能根据商品文案需求，制作不同类型的详情图； ● 能根据商品详情页结构，制作相关模块内容； ● 能根据设计要求，设计并制作完整的商品详情页。 |
8.3.2 任务知识链接
一、商品详情页的作用
详情页展示商品详细内容，增加消费者对商品的了解，一般由商品图片、促销信息、商品参数信息和商品细节描述等模块组成，这些信息方便消费者了解商品的外形、功能和颜色等，尽可能消除消费者对于商品的疑惑，取得消费者对商品、品牌和店铺的信任，引导消费者购买商品，提高转化率。
商品详情页必须真实准确，描述部分要与商品标题、主图和信息参数等信息契合，填写的商品属性或类目也需要正确，与商品一致，如果标题、主图和详情页内容不一样，会让消费者立马产生不信任感，甚至关闭商品页面。
在制作商品详情页之前，充分做好市场调研工作，例如同行业同类型商品的考察，尽可能规避一模一样的设计。针对消费者方面的调研，例如消费者的需求、消费者的购买能力和消费者的偏向喜好等，同时也需要调研清楚，消费者一般对这类型商品存在什么样的疑惑，对商品比较在意的问题。
可以利用淘宝营销工具，分析一段时间内消费者对该商品的需求趋势，搜索关于人群的分析、地域的分析和消费能力的分析，以及详情页文案中可能出现的热门关键词。通过客服了解前来咨询或者是购后评价的留言，收集售前、售中和售后出现次数较多的问题，利用详情页解决的消费者在意的问题，把出现频率高的问题转化制作成为详情内容，全方面展示商品，解决消费者购前疑虑。
根据市场调研的结果，分析网店商品，对比同行优缺，总结消费者意愿，做好商品和消费群体定位，发觉商品的特点，明确商品的风格，作为自己商品的热点卖点，对页面需要的文案、字体、颜色和排版等进行设计，详情页制作出符合当下流行的页面，和同类型商品区分。
商品详情页包括的六大设计要素分别是详情页整体配色、字体型号大小、文案内容设计、构图框架结构、文字图案排版和商品氛围搭配。
常见的商品描述页模块，前半部分是商品信息内容，主要描述商品的特点和属性，后半部分的商品增值内容，主要让消费者产生信任感，可以展示购后的好评、品牌认证或者是明星代言等。商品详情页在设计上也要遵循排版规则，出现在详情页上的内容都要有展示的价值。
二、商品详情页构成模块
图8-51 详情页模块
图8-52 详情页模块
图8-53 详情页模块
8.2.3 任务知识拓展
商品详情页尽可能展示完整的商品内容，网络购物时消费者无法触摸到实物，详情页需尽可能的从各个角度出发，把商品全方位描述清楚，打消消费者在网络上购物的顾虑。
一、详情页设计原则
1、详情页文案讲故事，内容能够引发情感共鸣；
2、用简单易记的词语展现商品的特点或卖点，多次出现反复强调，无形中给消费者起暗示的作用；
3、运用好FAB法则，即属性、作用和益处的法则。
二、详情页文案类型
1、普通型
直接从商品核心卖点出发，真实还原商品特点和属性，关于商品的文字描述，简单扼要，细节描述详细准确，如图8-54所示。
图8-54 普通型详情页文案
2、解决痛点
瞄准消费者购买该商品的最重要原因，解决当前急需处理的问题，使消费者产生认同感，认定购买商品能解决问题，引导购买意愿，如图8-55所示。
图8-55 解决痛点型详情页文案
3、故事型
以一个故事作为基础，使消费者产生共鸣，感情与商品文案在同一情绪水平线上，通过内容认同商品价值，如图8-56所示。
图8-56 故事型详情页文案
三、详情页商品图片设计
1、商品主图
商品主图就是消费者在淘宝搜索列表中看到的商品展示图片。商品主图是店铺获取平台免费流量和点击率最重要的因素，如图8-57所示。
图8-537 商品主图展示
2、商品辅图
商品主图以外的其他图片影响商品的转化率。—般点开商品详情页，左上角的第一张图为主图，其余图片为辅图，包含展示的细节图和营销图等，如图8-58所示。
图8-58 商品辅图展示
四、商品详情页主要描述模块
商品详情页主要描述需要激发消费者的购买欲望，把商品优势通过图片和文案的形式对外展示。以下图例是详情页的主要描述模块，但是在详情页中不一定全部展示完，看自己详情页设置的需要。
1、焦点图如图8-59所示。
图8-59 焦点图
2、商品描述，如图8-60所示。
图8-60 商品描述
3、商品卖点，如图8-61所示。
图8-61 商品卖点图
4、快递与售后，如图8-62和8-63所示。
图8-62 快递图
图8-63 售后图
5、细节图如图8-64所示。
图8-64 细节图
