淘宝商品详情信息重构：“搭积木”背后的设计思考

淘宝商品详情信息重构：“搭积木”背后的设计思考

━

事实上，平台或商家为用户提供的各种营销手段、权利公开、品牌背书等最终目的都是为了提高用户的决策效率，激励用户做出更好的决策，从而实现转化目标的正反馈。

改版前细节所面临的现实是，逐渐串联起来的信息复杂混乱，没有统筹规划，造成了严重的信息过载，影响了信息呈现的效率和可读性。

在一些极端场景下，明显超出了用户认知负担的极限，适得其反地造成了信息接收效率和决策效率的下降。

从用户角度来看，这种反馈失败最直观的感受就是“混乱”，如下图所示，大卖和预售就是最典型的例子。

最终基于业务目标与当下环境的双重定位，自然而然地推导出本次改版的设计目标：通过设计手段平衡业务呈现与用户感知，重建业务目标与用户感知之间的正反馈。简言之，就是如何在“不损失任何所承载信息”的前提下，重塑健康的用户体验，降低信息噪音与认知负担，提升信息传递效率。

设计基础：用户研究

━

浏览商品详情的用户是我们实现提升信息传递效率这一设计目标最有效的切入点：平台与商家为用户提供了海量的信息，但真实的用户是如何看待这些信息的？这是我们重构信息最原始的逻辑基础。

在项目前期，我们通过卡片测试与定性访谈相结合的方式进行了典型的用户调研，在卡片测试中我们要求用户按照自己心中最为合理的关注优先级或决策顺序对详情页模块卡片的信息优先级进行排序，或者剔除自己完全不关心的卡片。

用户一般最关注的模块包括价格、运费及发货地点、月销量及折扣等，而一般不会过多关注标题、服务和一些吸引力不够的促销活动等信息。

当然，“设计不能被数据忽悠”，测试结果和数据都是表面文章。淘宝详情这样一个在消费者心中已经形成非常稳定心态的产品，其用户研究的难点最为明显，即很多不合理的地方在“日积月累”的过程中，已经被用户习以为常、习以为常。

如何去挖掘现象的本质，这些关注层次、优先顺序背后的本质是什么——用户购买东西时的真实视角和决策的递进过程，这也是我们在深度访谈中比较关注的问题。

以下是根据我们在采访中收到的意见和线下购物的例子做出的解释。

大家都有去电器店买东西的经历，就拿买电视机来说吧：

1、首先，一台电视吸引我们注意的可能是画质、外观、价格、品牌等一些基本、直观的信息。

2. 如果我们感兴趣的话，我们就会询问销售人员现在购买是否有折扣或赠品。

3. 如果收到满意的答复，在做出最终购买决定之前，我们会询问有关交货和保修的进一步问题。

4.最后选择自己喜欢的颜色和型号，下订单即可。

消费者在网络购物中的心路历程亦然，无论最终是否感兴趣，决策都不是突然做出的，而是经过“吸引决策→刺激决策→强化决策→完成决策”的完整过程，这个线索才是对后续设计真正有指导价值的结论。

基于用户视角的信息重构

━

产品细节体验的本质，是沿着“吸引决策→激发决策→强化决策→完成决策”的线索，层层递进地引导用户完成交易。具体而言，设计优化的输出，是基于上述结论，结合真实的用户视角，重构出优先级更加合理的信息架构。

在我们的方案中，我们在评估区上方的四大板块中，建立了这四个决策阶段的心理与细节的对应关系，并且这个信息架构与用户研究的结果是一致的。

与改版前的方案相比，我们可以看到一些明显的变化——比如服务和品牌信息解耦之后，服务信息被移到了折扣区的后面，而更有价值的品牌代言则被前移到了标题处。

除了整体优先级的调整，四大版块内部的子模块也做了一些调整。比如，新版中价格被置于标题上方，信息顺序也由“一件连衣裙，售价299元”变为“一件连衣裙，售价299元”。这并不是简单的语序调整，而是基于用户反馈、逻辑连贯性等考虑的处理。在调查中，用户普遍反映，在点击搜索、店铺等前端链接进入详情前，已经对标题和“这个商品是什么”有了大致的感知和了解，而进入详情后，最关注的是商品图片和更全的价格。

类似的例子还有很多，限于篇幅，这里就不一一列举了。但任何看似自然的变化背后，都是对产品真实用户视角的理解和考量。

少即是多：降低信息噪音、减少认知负荷

━

确定了符合用户真实心理预期的决策主线之后，如何才能达到在产品信息层面提升信息效率的目标呢？

我们都熟悉“少即是多”的理论，这也是减少信息噪音和细节认知负担的最基本思想——呈现的信息种类越少，相同认知负担下能容纳的信息量就越大。

在详细信息激增的背景下，只有聚集现有的信息并大幅缩小风格，才能为新的营销方式、权利和内容提供更多的空间。

以表格形式呈现的信息

基于相似信息一致呈现的原则，将商品基础信息下方、评价上方区域内大量结构相似的信息以“左标签+右内容”的统一形式进行设计，通过左侧标签统一整个列表的缩进，个性化行业配置的区域、配色方案、图标使用等被大大简化和封闭，重复冗余的视觉元素也在很多地方被简化。

评估部分的信息收集

评测部分也按照信息块、互动热点等组合进行了聚类，不仅大大节省了模块高度，也为更多UGC、PGC信息的拓展提供了统一的结构框架。

♦店铺名片信息选择

店铺卡片是店铺的重要入口，之前的设计向用户展示了很多信息和行动点，比如所有商品、关注人数、DSR 评分、查看品类、访问店铺等。这些信息和行动点对用户来说都是有用的，但这并不意味着把它们都布局出来就是合理的，比如进店铺时你想先进入哪个 tab 就是一个很难让所有人都满意的问题的典型例子。

新版本基于用户诉求与价值调研，经过精挑细选，仅保留“全部商品”与“到店”两个诉求最强烈的行动点，同时信息结构也进行了精简，为门店卡除了门店导流外，还能承载更多D2D（到店）导流提供操作空间。

上述重构带来的最直接影响就是屏幕效果的大幅提升，下图是改版前后两款信息量几乎相同的产品的直观对比。

对于顶栏与底栏之间的可视区域，我们可以看到新版相比旧版可以节省大约半屏的空间，新鲜度和规律性也得到了明显提升。改版后的实际业务效果也很好地证明了我们的假设。

这一切“小事”都是为了即将到来的“更多事”做准备。

更多有趣细节：短视频与内容注入

━

2017-2018年无疑是短视频的爆发年，顺应这一趋势，手机淘宝也在多场景探索短视频时代电商购物新体验，而细节则走在了这一创新探索的前列。

详情作为手机淘宝的流量中枢，是新体验触达用户最直接的渠道，有着天然的规模优势。同时，公域导购、内容中的视频体验，沿着体验路径，最终都会落到具体商品的维度上，而商家产出的短视频最主要的分发渠道也是详情。作为终端节点，影响力和产出能力决定了详情是短视频探索中无可争议的先行者。

01|视频尺寸更适合移动端体验

在探索详情的短视频体验时，首先要探索的就是打开详情后映入眼帘的主视频。

在短视频时代到来之前，视频只是一种辅助主图的展示形式，视频只是简单沿袭了主图的展示方式，以“可播放主图”的身份占据了其中一个位置。如何根据移动端视频体验对视频尺寸做出新的能力支持或约束，如何让用户更愿意、更高效地观看视频，是短视频化细节化面临的挑战。

原版主图视频的容器尺寸与主图一致，为1：1，而视频本身尺寸多为16：9、4：3等横向尺寸，播放时会出现上下黑边，体验不够理想。

早期主流影像视频以16:9等横屏视频为主的原因很简单，因为这些视频大多是从大量PC视频直接移植过来的，追根溯源，这个习惯最早来自于电影画面，而这种媒体尺寸是随着对应的播放媒体而产生的，无论是电影、电视还是PC，这些播放媒体本身的尺寸都是横屏的。

在移动时代，16：9的短视频体验并不友好，竖屏很难看清楚，横屏的操作和心理成本也相对较高。和看电视剧不同，短视频的时长决定了横屏的使用频率很高，很多时候看到一个人横着拿着手机就被等同于“不认真做事”。

按照“媒体决定媒体”的思路，很容易想到符合移动时代体验的短视频应该是竖屏的。在2:3、3:4、9:16等多个竖屏尺寸中，我们考虑了商品价格标题与底栏正常可见所需的最小高度，最终选择了3:4作为短视频时代淘宝主推的商品视频尺寸。

上线后的实际效果也证明，新的3:4尺寸给竖屏视频浏览体验带来了立竿见影的质变。其中，以模特为主的服装、美妆类目的视频效果尤为突出。