电子商务产品详情页设计「电商详情页设计教程」

今天给大家普及一下电子商务产品详情页设计「电商详情页设计教程」相关知识，最近很多在问电子商务产品详情页设计「电商详情页设计教程」，希望能帮助到您。

商品详情页是电商产品订单转化的关键页面，也是构造整个产品信息架构闭环的关键节点，对全站流量的分流引导、订购达成、提升订购转化有着重要的意义。

一、商品详情页意义

1.1 订购转化

电商所有的一、二信息层级和营销活动，不管是出于促活、引流，还是拉新的目的，都很难呈现更多的商品信息给用户，加之用户对电商产品质量等信任问题普遍存在的情况下，唯有将流量引入可以帮助做购买决策的地方，才能有效地促成订购，提升转化。

所以商品详情页的应用场景之一就是向用户展示 a.商品具体信息 ，帮助用户快速了解商品详情 b. 提供的售后保障、正品信息等服务，消除用户的购买担忧 c. 当前存在的优惠促销活动 ，刺激用户购买欲望 d.以往购买者对商品的评价信息，增加用户对商品的信任 。 以此循序渐进的引导用户，从认识、了解商品——信任商品——购买刺激，达到让用户收藏、加入购物车或直接购买的目的。

1.2 流量分发

如果用户在了解商品详情后，依然认为商品不符合要求，很容易导致跳出。如果，商品详情能根据用户以往购买习惯、喜好、浏览历史综合分析，最终精准的为用户推荐同类商品，就可以将用户引入其他商品页面，重复上面所说的场景，既可以有效的分流降低跳出率 构造产品闭环，又可以提升订购转化。

从以上商品详情的意义分析，可以罗列出商品详情页的信息架构如下：

二、商品详情页面设计

据统计，60%的文字信息用户不会阅读，而商品详情页需要介绍商品是什么、为什么买等需要传达给用户的信息，其中文字信息占半壁江山。因此商品详情页的页面设计需要信息层级清晰、可读性高、扁平化；让用户进入商品详情页之后，第一屏展示的信息就能让用户知道：当前商品的基本信息（什么商品）、有什么优惠和促销活动（刺激用户购买冲动），参考如下：

以上信息可以让用户了解商品和当前购买优惠，用户在此基础上要下单购买还需要了解更多信息，如商品的规格尺寸、颜色，商品退换货规则；其他买家对商品的评价如何，在用户了解商品基础信息后，继续浏览时即呈现该部分内容，也就是在第一屏之后即呈现，参考如下：

之后便是商品详情内容和依据数据分析今准推荐的商品信息。详情页面的信息层级基本如此。交互上的设计尽可能让用户可快速查看想了解的信息内容，如下滑时顶部即露出tab 切换栏，切换时锚点定位至对应位置。tab切换的频道通常为商品详情页主要信息内容：商品、评价、详情、推荐

根据产品的定位，商品详情页呈现的信息也有较大差别，如盒马生鲜强调商品新鲜、解决一顿饭问题的产品需要让用户明确知晓商品送达的时间范围，所以详情页内容也会区别于一般电商详情页。

三、商品详情页规则

商品详情页信息层级如上，但是具体展示什么内容，需要在进入商品详情页时判断，如：当前商品是否有特殊标签（团购、秒杀等）、商品可参加什么促销、优惠券、售后是否可退可换、商品配送时间和地区是否有限制等信息。以下就常见的内容介绍规则（所有规则可根据产品特性做调整）：

3.1 商品主图信息：

a.商品主图信息包括：短视频、图片、全景图片等，当商品同事具有不同类型的主图信息时，优先顺序要确定。

b. 主图信息分页按钮，滑动即翻页，翻至最后一页时，进入商品详情页面

c. 商品标签：根据促销活动打标，在用户了解商品基本信息时，增加用户的关注。如： 限时秒杀、团购、折扣（数值）等

3.2 商品价格

a. 价格类型： 比较重要的信息，文字高亮； 划线价格等辅助价格信息做参照，增加价格对用户的刺激，如： 当前销售价、划线价、跨境综合税（跨境商品）

b. 价格标签： 根据产品和商品的特性，可适当露出价格标签，如会员专享价等; 价格标签一般在商品价格有对比（最终销售价格、划线价格）情况下展示，如果没有价格对比，不展示标签

3.3 商品库存信息：库存紧张、仅剩X件等内容展示;库存范围对应展示内容，传单用户需要尽快下单的信息

3.4 促销活动、优惠券

a.系统中商品符合该时间的促销活动、和优惠券，就在对应区域展示；没有促销、优惠，该区域隐藏

b.仅登录用户可领，未注册（登录），则引导用户注册（登录）

c. 优惠券展示与优先规则： 仅露出部分优惠券，全部优惠券通过Toast弹窗展示；按照优惠额度大小、生效时间等综合规则进行排序

d .促销活动排序，按照设置活动时的权重值展示

e. 单击促销信息，跳转至符合该促销活动的商品集合页面

3.5 售后服务标签

如：【正品保障、平台客服、无理由退换货/不支持无理由退换货】 等标签按照商品属性展示； 部分商品如跨境商品，一般不提供无理由退换货服务等

3.6 商家店铺入口露出： 如果商品属于有店铺的商家商品，对应露出店铺入口； 单击可跳转至店铺首页

3.7 商品评价信息：

a 评价信息： 总评价数、评价分类、每类别的评价数

b.评价信息默认展开展示的数量，评价总数超过默认数量；露出查看【更多入口】，单击查看更多，则进入评价页面

c. 有图片的评价信息： 其中文字信息最多展示的行数（2-3行） 图片默认展示的数量，单击则浮层展示评价的全部信息（图片、分页表现、评价详细内容等）

3.8 底部标签栏：

底部标签栏，即主要操作入口，如： 客服、收藏、购物车、加入购物车、立即购买、货到通知等

展示什么标签栏，视商品而定

3.9 推荐商品

可为用户推荐相同品类的商品（当前商品品类、用户浏览过的品牌、用户喜好等数据分析），以及类似商品和配套商品的。

4.0其他

不同平台、不同商品展示的信息有差异，但不管展示什么内容，都是依据商品即商品相关属性； 所以商品详情页的内容，在进入商品详情页时即判断展示的信息，再根据页面的设计，在不同区域分别露出信息内容。

最后，商品详情页是转化和分流的重要页面，不仅仅需要展示基本信息，更重要的是商品详情页的营销策略、推荐分流。好的商品详情页，可以让明确购买目的的用户，快速决策是否下单购买、或者先收藏；让不明确购买目的 的用户可以继续逛起来。在设计自己产品商详页时，需要根据产品特性、用户场景针对性规划信息架构，最大可能的的提高转化，构造流程闭环。