海量的、全面的商品信息流通，改变了人们的消费习惯，也重新定义了商品交易市场的游戏规则。电商商品详情页作为电商信息的主要承载页面，也是电商业务转化的主战场。因此商详页面的设计规划，是电商产品设计的核心，承担着转化率，甚至产品设计KPI。
一、那什么是商品详情页面？
商品详情页是用户用来做决定的地方，比如添加进购物车，收藏、预定、打电话、完成表单等操作。有效的商品详情页结合文本与图片来展示商品基本信息、透露其实用性、价格并有购买商品的清晰路径。
在一个电商产品的页面中，没有任何一个页面能够像产品详情页一样对提升购买率如此关键。从用户的角度，希望在此页面看到更多真实信息，做购买决策。而商户希望能展示产品的优点，促成交易，并在此基础上为自己店铺引流，带来更多销量。作为App（商城平台）会从自身发展需要，调整产品形态，平衡C端（用户）和B端（商户）的需求。
二、如何提升商品详情的价值体现？
解决用户的担忧和痛点，稳固商家的目标和利润是商品详情页的主要价值体现，但是不同阶段不同平台要解决的问题还是有所差别的，对于起初是自营B2C模式自营物流配送的京东来说，如今也入驻第三方企业商家，模式也由原来的B2C变成了B2B2C模式，不过京东自营B2C模式还是在平台占据很大比例。早期的淘宝是C2C模式就如现在的咸鱼和58，之后入驻了企业，也就变成B2B2C模式，不过淘宝C2C强大的DNA基因还是大量存在。对于在阿里系产品长期引导下的用户来说，在面对日渐趋于成熟稳定的视觉设计和交互方式，模块划分也比较一致的两家商品详情页来说貌似大同小异，没有什么太多的差异。
1、降低噪音，提高信息传达的效果
在现如今，产品不断迭代的更新、热点、风口、浪潮等等都让人应接不暇，但相比于热闹的营销活动，体贴入微的导购体验，无处不在的引流入口，商品详情的形态还是依旧稳定很多，因为不管如何变化，他终究都是一个形态稳定的决策信息载体。其实成熟稳定的背后还是产品目标的稳定。尽管如今被赋予了更多新的期待，对商品详情而言，亘古不变的核心商业目标仍然是成交，即促成感兴趣的用户决定购买；其次是分流，引导不感兴趣的用户继续无缝地去浏览其他商品，当然，分流的最终目的仍然是成交。
提升UV价值最关键的点，就是信息传达的提效，在一个特定用户初始购买意愿可视为一个定值的情况下，如何在用户的认知负荷和耐心达到极限前，将更多有效信息传达给用户。信息传达的目标看似简单，但当商品详情面对过载的基础信息、营销推广、权益服务、产品介绍越来越庞大的情况下，如何让用户快速抓住重点，留住用户做出决策判断，这一点也是商品详情页在设计时遇到的最大挑战。
2、重新审视用户感知，提升用户决策效率
以前周鸿祎讲过很多次关于用户感知的话题。一个产品，不管你用了怎样的技术，怎样的实现架构，怎样的流程逻辑，最终体现给用户的，其实是用户感知，也许你做的很简单，但用户感知很饱满；也许你做的很复杂，很多时候在详情页面中我们过多的担心和焦虑，担心产品的信息不全不能给用户做参考，但是糟糕的详情面对的现实问题是，海量的信息在没有经过统筹规划的情况下，复杂度和混乱度已经造成了严重的信息过载，影响了信息呈现效率和可读性。在一些极端场景下，已经明显超出了用户认知负担的极限，从而适得其反地造成了信息接收效率和决策效率的降低。
如下图所示，淘宝聚划算和日常产品详情，最具代表的两个截图：
很显然，左侧聚划算的详情页的信息明显超出了用户认知的界线，对于右侧日常的产品详情页来说，通过设计方式很好的平衡业务和用户感知值，简单言之就是合理有效降噪，提升用户认知，有效传达产品信息。
3、设计基点：有据可循
通过卡片测试和定性访谈相结合的方法了解到，浏览商品详情的用户普遍最关注度的模块有：价格、运费与发货地、销量和优惠，而普遍不会过多关注标题、服务以及部分吸引力不够强的促销活动等信息。
是不是真实的情况真如测试结果和数据体现那样呢，如果是的话我们就“被数据骗了”，像淘宝、京东详情这样一个已经在消费者心中形成非常稳定心智的产品，在用户调研中存在的一个最明显的难点，就是即便有一些不合理的地方，在日渐固化的使用习惯会让用户认为这是理所应当。
回想我们的购物流程，看到中意的商品后，回询问商品的价格，超出预期或其他原因时我们会再次徘徊，这个时候如果店员再三推荐有活动满减等活动时候，我们会再次激起购买的欲望，最后在综合对比下，加上品牌的服务等因素我们愉快的刷卡下单购买。
其实线上购物的心里过程基本也是一样的，不管是不是感兴趣最后决定下单购买的都不是一瞬间突然决定的，都是经过“目标吸引、刺激决策、徘徊比较、辅助决策、加固决策、下单成交”这样一个完整的过程的。
4、基于视觉效果的信息结构
那我们沿着这个递进式的引导用户完成整个购物流程。让我们看看京东、淘宝是如何将这6个购买阶段的心理与详情页中的模块信息建立起对应关系的。
从浏览路径发现，在搜索商品、店铺等前置链路点击进入详情之前，就已经对标题和“商品是什么”有了大概的感知和了解，进入详情后最关心的就是商品图片和更完整的价格。
由上图京东、淘宝对比后可以看到：
（1）基础信息：主图/短视频：
短视频时代到来之前，视频只是主图的一种锦上添花的展示形式，视频也只是单纯地沿用了主图的展示方式，作为一个“可以播放的主图”占用了其中一个坑位。而如何基于移动端的视频体验，对视频尺寸做出新的能力支持或约束，如何让用户更有意愿、更有效率地观看视频，就是摆在详情短视频化面前的挑战。
京东：视频尺寸与主图一致，都是1:1，而视频自身的尺寸多数是16:9、4:3等横向尺寸，播放时会在上方和下方留有黑边，个人认为体验并不理想。
淘宝：从2:3、3:4、9:16等多个竖向尺寸中，淘宝最终选择了3:4作为短视频时代的淘宝主推的商品视频尺寸。这个尺寸为竖屏视频浏览体验带来了立竿见影的质变，其中，服饰美妆类目以模特出镜为主的视频效果提升尤为出众。
（2）基础信息区：价格+品牌背书
京东：商品品牌信息直接和主图融合到一起，把更有价值的品牌背书强调至产品价格和标题之前
淘宝：商品的价格和商品优惠直接聚集在一起，而更有价值的品牌背书则提前至标题之前。
（3）信息表单区：优惠区+参数区+服务区+保障区
除区基础信息区外的其他6个板块内的产品信息页做了的展示。遵从设计一致性原则，视觉上对优惠区、参数区、配送服务区等6个区域进行了“左标题右内容”的表单式处理，通过文字排版替代了配色种类和icon等使用方式，整体页面进行了简单纯粹的简化和收缩。
京东：统一了整个列表的所有缩进的尺寸，通过黑色加粗区分表单中不同小模块的内容标题，不同模块之间通过上下20px的灰色留白拉开彼此的间距，圆角的边缘处理使得整体页面干净整齐的同时又不失温柔。
淘宝：因表单区中的发货、活动、平台保障、参数对于淘宝用户来说都不如价格和图片那么重要，所以在配送区、优惠区、服务保障区、参数区的标题做了灰色处理，凸显各个小模块的内容信息，同时最大限度的压缩了卡片的高度，为了给下面的评价留出“首屏露脸”的空间。
（4）评价区：
京东：强化“好评度”的数据体现，在信息和交互热区留出了大量的空白，刺激用户通过【查看全部评价】进入更多详情信息，对评价区做了有效的信息整理。
淘宝：2018年前的淘宝也是和京东一样的设计方式，在2019年的改版中，淘宝对信息区块和交互热区的组合方式上进行了聚拢，大幅节省模块高度的同时，也为更多UGC、PGC信息的扩展提供了统一的结构框架
（5）多维度的辅助决策：
以很自然的形态接入详情，在不影响信息传达效率的前提下，助力消费者更好地从更多维度了解商品。
京东：京东提供了一个常见问题的整理，没有太多的其他维度的评价信息，我想这和京东自身的平台定位和方向有一定关系。
淘宝：内容社区也是提升详情探索的一个新方向，整齐清晰的把商家和平台希望传达给用户的信息体现出来，在此之上，用户在详情“逛”起来，看到更多来自真实消费者中立的、有价值的图文或者视频反馈，更多来自领域内达人的专业评测，和短视频化一样，都是详情变得更有趣的重要环节。
（6）商家信息区：
京东：商家卡片是进店导流的重要入口，竟在商家卡片区向用户展示了品牌、关注人数、DSR评分、以及店铺热推的一些商品入口，在卡片的下面保留了【联系客服】【进店逛逛】等，这些信息和行动点对用户都是有用的，但是这并不意味着全部罗列出来就是合理的。
淘宝：相比于京东，我更倾向于淘宝的设计，可以看出淘宝是经过慎重的取舍，只保留了“全部宝贝”和“进店逛逛”两个诉求最强的行动点。在信息结构上页做了简化处理，对商家卡片的空间做了一倍的压缩处理，为商家导流提供了更多的运营空间。
(7)交互方式
从交互上分析，交互上的体现也是一样的，点击淘宝的“加入购物车”需要用户来选择规格；京东则默认选中展示的商品，更快捷加入购物车。淘宝商品详情页弱化了购物车按钮放在了右上角；京东则把购物车放在了加入购物车旁边。
当把商品加入购物车后，购物车页面淘宝也不会选中加入的商品；京东则会选中用户加入购物车的商品。
从经营模式上分析，两家的侧重点不一样，交互方式也就会有差异化，淘宝平台更看重单件快速交易。京东则是希望用户把想买的东西都放购物车，统一结算，平台也能更方便地统一配货配送。
所以不难理解，B2C的产品会更突出加入购物车，例如纯B2C的小米商城和网易严选，都是更突出加入购物车！
最后结语
不管是京东还是淘宝，我们都可以发现他们在信息过载的页面设计都秉承着“少即是多”的理论，对详情的信息降噪和认知减负来说这也是一个最底层的思路——信息呈现的类型越少，相同认知负担下，能容纳的信息量就更大。
参考文献：《人人都是产品经理》
参考产品截图：京东、淘宝
Powered by Froala Editor
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册