这几天，北京的秋意渐凉，几阵秋雨过去，夏天似乎已经走的很远了。

从我们提出“商品详情页是时候升级了”，到推动立项，计划执行，反复打磨，上线验证，一晃也从夏天到了秋天。项目暂告段落，下面总结下过程里的得失。

A. 立项故事

经过近一年的探索，转转APP的产品结构日渐完善，迎来了从需求验证到体验升级的节点。作为交互设计师，除去对日常需求的把握，回看重要的功能与流程，重新反思我们的设计，耐心打磨体验，同样重要。

考虑从商品详情页的改版入手，原因有三：

1）详情页是形成购买动机的关键节点，直接影响用户的进一步行为；

2）交易行为漏斗中，详情页处于上游，PV量级大，提升这里的转化“性价比”高；

3）当前详情页的行为数据，仍有可提升空间。

很高兴在详情页改版的重要性上和PM同学一拍即合，促成了项目的诞生。

十分感谢PM同学的支持，让我们有充分的时间、空间进行设计推导，并从多元角度提供建议，感谢用研、UI、技术团队的共同努力，顺利完成了此次改版计划。

B. 设计改版之路

C. 一些心得

1.先做信息的认知优先级分层，再做设计

在问题收集阶段，常听到用户、同事吐槽说详情页的信息凌乱。什么是凌乱，为什么会有凌乱感？在用研同学的帮助下，通过眼动实验和访谈，我们找到了答案：信息展现不符合用户的信息认知优先级时，会让人产生凌乱感。

用户在获取信息的过程中，有一套自己的认知优先级，比如A>B>C，并不会因为我们将信息展示的顺序设计为B>A>C，用户就会改变自己的认知顺序。因此在浏览过程中会产生视线的跳跃、不顺畅、找不到所需信息的感受，也就是凌乱感。

我们意识到，直接动手重新设计信息的布局是没有意义的，必须先弄清用户对于商品信息的认知优先级，再让设计顺势而为，才可能解决长久以来的凌乱问题，提高用户的浏览效率。具体方法小结如下：

Step1.提取信息元

尽可能全的罗列出商品相关的信息元素。

Step2.明确各信息元的认知优先级

我们通过投放问卷的方式，了解用户对不同信息元的关注程度。

Step3.理解认知优先级的动机

我们通过眼动实验对问卷结果进行验证，并结合访谈，获得很多意料之外的信息。比如：

1）用户对留言的关注度比想象的高，因为用户喜欢通过留言了解更多商品信息，是否可以砍价，卖家是否活跃等；

2）比起异地商品，用户在浏览同城商品时，对于具体地点的关注度更高，因为见面交易的吸引力更大；

3）比起美观的商品照片，用户对真实、有丰富细节的照片关注度更高，因为真实性是用户对商品的首要评价标准。

Step4.制作信息优先级靶子（High Value Target）

我们使用一个简单的可视化图板，对信息做排序和分组，以便于在设计时快速参考。为了表达对杰森斯坦斯新片的期待，给它取名为High Value Target吧。

在整理清楚商品信息的认知优先级之后，对于信息的展示设计只要顺势而为就好，当然过程也是很消磨人的(❁´ω`❁)。

2.先做行为的价值度分层，再做设计

对于转转的交易行为，用户的行为转化是非线性的漏斗，用户在商品详情页会分散到不同的分支路径上，再从不同的分支路径回流到下单支付的后续流程。同样在动手设计前，我们需要分析每种转化的价值，才能知道如何在设计上处理这些分支路径的轻重缓急。

基于这样的分析，我们对旧版操作的层级做了调整。

1）将联系卖家的重要程度提高，与马上买平级，作为两个主要出口；

2）优化留言和想要的展现样式，刺激互动。

3.展示方式服从阅读需求

通过用户研究，我们发现留言区不仅是留言用户与卖家公开沟通的途径，对于浏览用户同样是重要的信息来源。买家阅读留言的主要诉求是查看买卖双方的问答信息，此类信息的获取效率直接影响留言区的阅读效率。因此，我们对留言区进行了简单的改造，以提升留言的阅读效率。

1）回复信息附上回复对象内容，使问答信息可以聚合阅读；

2）给卖家增加特殊标记，帮助用户快速定位卖家的留言（卖家的留言价值度更高）。

4.延伸用户的探索触角

在旧版的设计中，用户如果对商品不感兴趣，只能返回列表继续浏览。由于推荐算法的逐渐成熟，我们可以根据商品推荐更多相关的商品，用场景提高命中率。因此我们在新版设计中增加推荐模块，整合卖家还在转和相似商品的数据，把详情页作为用户继续探索的节点，将探索路径从直线形拓展为树状结构，增强用户的探索沉浸和平台的可逛性。

D. 接下来的路

跟踪灰度测试中的数据效果，一些预期的数据指标有了起效，一些部分有了更进一步优化的思路，由于保密考虑，暂不在文中详述。项目没有结束，体验优化也没有终点，接下来的路，继续和小伙伴们手拉着手一起走。