1.商品详情页的框架

一般商品的详情页包括焦点图、商品属性、商品卖点、商品细节、商品信息及品牌故事这6大板块，根据店铺、品牌、商品特性等不同，详情页的框架结构也会有所差异。

1）焦点图

详情页的焦点图是为推广该商品而设计的海报。设置详情页焦点图一般有两个目的：一是明确商品主体，突出商品优势；二是承上启下，做好商品信息过渡。详情页一般通过主图引入，因此商品卖点、特点等需要相互衔接，从而对主图信息进行延伸。如图6-8所示为主图与详情页焦点图。

2）商品属性

展示商品属性图片的目的是明确目标客户群体，让顾客在浏览详情页时判断自己准备购买的产品是否满足自己的需求（见图6-9）。

图6-8

3）商品卖点

顾名思义，商品卖点主要展示商品的特点。卖点图可使消费者对商品有基本的了解，并通过展示效果让消费者产生继续看下去的兴趣（见图6-10）。

图6-9

图6-10

4）商品细节

细节图的选择十分重要。细节图片一定要清晰、明了，尽量避免偏色。细节图需要较强的逻辑性，才能让消费者跟着商家的思路，完整地浏览一遍商品详情。细节图的样式一般分为两种：一种是同时放置商品图和细节图，将细节图指向商品的具体位置；还有一种是单独进行细节展示。不同类目的商品细节图的内容会有所差异，商家需根据商品的特点、卖点、优势进行细节展示。

5）商品信息

商品信息图用于展示商品详情，在该板块中需展现商品的参数，让消费者对商品有更客观的了解，如图6-11所示。

6）品牌故事

品牌故事是为了强化品牌价值，增加信赖感，使消费者了解企业情况，展现企业实力，在消费者心中树立品牌形象，通过此途径可以减少消费者的回购成本（见图6-12）。

(www.daowen.com)

图6-11

图6-12

除了上述6个板块，还有商品的使用感受、商品使用方法等其他板块可在详情页中进行设计。目前国内主流电商平台都有自己相应的设计规范，京东平台在移动端对字号有明确规定，强调用户阅读体验；天猫平台没有特别要求；唯品会作为国内最大的特卖网站，其更注重的是用户使用体验。所以，在详情页设计中，需要结合产品特性、卖点以及平台规则对商品的详情页进行不同的设计。

2.详情页排版方式

不同类目的商品的详情页排版情况不同，相同类目的不同风格排版方式也有差异。以下列举了几种典型的详情页排版方式。

（1）简单排版：商品图+细节图。

商品图+细节图是最基本的排版方式，实物商品的各个类目均可应用，最简单的只需商品图片即可说明。

（2）基础排版：模特图/商品使用图+商品展示图+细节图。

这种方式包含了三类图片，通过增加的模特图或使用图，将产品放在具体环境中进行展示。例如服装类商品的模特展示，可以让消费者直接感受穿着效果，有利于成交转化。

（3）升级排版：产品优势/功效图+模特图/商品使用图+商品展示图+细节图。

这种方式包含四类图片，增加的产品优势/功效图通常采用对比方法，介绍产品的不同点或独特优势。通过比较的方法表现商品的升级，可以让消费者更加信任产品，促进下单购买。

（4）全面排版：产品优势/功效图+模特图/商品使用图+商品展示图+细节图+品牌授权证明书/品牌实力展示十常见疑问解答+快递包装图。

这种方式包含了较全面的详情页要素。新加入的实力展示可使消费者加深印象、产生品牌信任感；疑问解答比咨询客服更快，可以提高顾客成交速度；快递包装图可以让关心的消费者对商品包装情况更加了解，消除购买顾虑。

知识拓展

商品详情页设计的其他建议：

1.商品详情页不宜过长，以免引起顾客阅读疲劳。如果设计的图片过大、页面太长，在手机端加载是很慢的，这会严重影响客户体验度。

2.增加商品推荐，关联销售。在商品描述详情页中可以适当地加入几个其他商品推荐，最好是自己店铺里面的热门商品，或者是店铺刚上新的商品。顾客如果对这款商品不满意，还可以选择其他商品，给顾客更多的选择，增加顾客购买欲。

3.引入商品好评或者实际案例，加深买家对商品的信任感。在商品详情页面，可以从自己店铺后台截取几张好评图片，加入到描述页面中来；也可以通过试用报告，将试用者对产品的相关描述和真人秀放到商品的描述详情页中，让看到的买家信任该商品，刺激买家的购买欲望。

总体来说，怎么样的设计才算是一个好的商品详情页呢？编辑好一个商品的详情页，要做到的一个原则就是尽量地突出商品的特点，给消费者呈现出最直观的感受，增加购买欲望，这样才能有效地提高商品的转化率。