站在用户效率的角度看淘宝商品详情页的设计亮点

商品详情页作为承载商品介绍信息的主要页面，对于引导用户购买商品，提高“下单转化率”至关重要。另一方面，好的商品详情页设计也能够一定程度上减轻用户负担，提升购物效率。

随着电商行业的不断迭代，各大电商平台也在不断调整着商品详情页的样式，作为电商行业龙头之一的淘宝，它在商品详情页上的设计下了哪些功夫？又是如何提升用户效率的呢？接下来本文将对淘宝的商品详情页设计进行分析，寻找淘宝商品详情页的设计亮点。

什么是商品详情页

商品详情页的基本定义是展示商品详细信息的一个页面，承载着电商平台的大部分流量和订单的入口，是用户决定是否购买和购买什么的地方。

从客户角度看，商品详情页是用户查看商品具体情况、问题解答、过往评价等进行比较再做出购买决策的重要一环。

从商家角度看，一个好的商品详情页不仅可以激发顾客的购买兴趣，加深产品记忆，促成顾客下单，提高商品的订单转化；还能让顾客更加清晰地了解产品的各方面情况，避免出现一些不必要的售后问题，能大大减少客服人员的工作量；大幅度提高店铺对流量的消化能力，让砸广告的钱不白花，让产品销量更广，让店铺盈利能力更强。

从商业角度看，商品页面对网站的成功至关重要，客户需要有足够的信息来做出购买决定。商品详情页是电商网站中最容易与客户产生交集共鸣的页面，详情页的设计极有可能会对用户的购买行为产生最直接的影响，影响到最终的GMV。因此商品详情页的设计还会涉及到运营层面。

什么是用户效率

无论是B端还是C端产品，有一个共同的体验目标就是“提升用户的操作效率”。甚至在一定程度上，C端产品比B端产品要求更高。在C端产品中，提升用户效率十分重要。C端产品面临激烈的市场竞争，如果效率方面存在明显的不足，用户很容易就转向其他平台了。在提升用户效率时，我们需要关注用户场景和行为路径，从而寻找到更多的效率提升突破口，主要包含以下 3 个注意点：

①明确用户的行为路径，寻找用户核心关切点，提升用户效率；

②转移用户操作成本，让系统承担更多的行为判断和用户引导；

③用户行为聚合时，应当集中关键的行为信息，避免对用户核心行为造成干扰。

淘宝作为一个常规性的C2C电商平台，在商品详情页的设计上提升用户效率是一个加分项。淘宝为提升用户效率在详情页做了哪些设计？下面一起来看看吧。

1.信息容器样式

淘宝的信息容器设计为“卡片式”。进入淘宝商品详情页，我们可以很明显地看出每类信息都被装进了一张张“卡片”之中，浅灰色的圆角矩形卡片之间被白线分割，在信息主标题的右侧都有一个示意能够进入详情页的箭头，顾客可以根据卡片清晰地去选择要查看的信息详情内容。

2.下拉足迹好帮手

淘宝还在详情页上设计了一个提升用户效率的细节：在详情页下拉后会从顶部弹出“我的足迹”，即展示从最近浏览过的商品按照先后时间顺序依次排列，方便用户多次浏览，进行比价。省去了用户在货比三家时需要反复退出确认的繁复操作，为用户挑选商品节省时间。

3.价格细节更突出

网上购物经常会碰到xxx元起或者价格区间，需要在详情页选中不同的规格后才可以看到具体价格。但顾客在淘宝选择商品的时候，可以直接在“加入购物车”或“购买”页面看到不同规格/套装等商品的价格，比需要一个个选中商品后才能看到价格的体验好很多。同时也方便顾客根据商品组合和价格更快速地挑选自己想要的商品。

4.评价区筛选关键词多元化

最近淘宝的评价区也做了一些小改动。查看商品评价时，支持直接筛选用户所购规格的同类评价，方便查看同规格的反馈与对比；而点击评价头部“选商品款式”，也能在全规格中选择目标规格查看评价，从而协助用户判断，减少决策时间，促进下单转化。评价布局也调整为类似聊天对话形式，沉浸感更强，延长用户停留时间，提高下单概率。

小结

淘宝的商品详情页设计亮点：

1.信息容器新调整，卡片式结构内容呈现更清晰；

2.下拉足迹节省用户时间，提高购物效率；

3.评价区信息筛选更加精准，提升用户筛选信息的效率和速度。

4.“加入购物车”时单件价格明确标出，减少用户操作频率。

可以看出，淘宝在减轻用户挑选商品负担、提升用户效率方面一直做出了努力。

电商设计要围绕用户、消费场景做改良，添加有用的设计细节，站在用户的角度看问题和提出更好的方案，才能够帮助平台在激烈的电商竞争中获得消费者更多的好感和吸引力。

参考文章
想让用户下单？给你一份专家的商品详情页设计指南！https://www.uisdc.com/product-detail-page-design
为什么你设计的详情页不耐看，也没有购买欲？https://www.uisdc.com/detail-page-design-2
10个产品细节剖析，让你看看大厂是如何做设计的 https://www.uisdc.com/10-product-details-3
淘宝App五年来最大力度改版，从设计师角度为你详细分析！ https://www.uisdc.com/taobao-app-9-13
5000+干货！6个章节帮你掌握信息容器的归类与应用https://www.uisdc.com/information-container-application
这8个卡片设计方法，你还真不一定知道！https://www.uisdc.com/8-card-design-methods