商详页改版设计的复盘思考

　

前段时间笔者主导了网站 wap 端的商详页改版设计，这次终于腾出时间来好好分析总结下。虽然从这个项目中能够获得的经验远远低于我的预期，但这个小项目多少也融入了笔者很多思考，当然其中有很多不足，在这里一并分享给大家，彼此学习。

本文会从以下四个方面别离阐述：

Part1：项目配景Part2：项目目标Part3：目前现状&解决方案Part4：遇到的坑Part1：项目配景

商详页改版设计项目是运营同学发起的，发起原因大致有以下三点，分述如下：

商详页整体设计感差，样式排版混乱商详页蹦失率太高，转化低目前只有“加入购物车”流程，希望增加“立即购买”流程，给用户更多选择Part2：项目目标

运营同学希望通过本次改版优化，达到以下两个目标：

全面修改商详页设计风格，提升整体设计感，提升视觉层面的用户体验借此优化商详页页面加载性能，降低蹦失率，提高转化Part3：目前现状&解决方案

经过笔者分析，目前商详页存在的问题诸多，主要表示在以下几个方面，并针对每个问题提出了本身的解决方案，分述如下：

1、顶部banner和轮播指示器

商详页决定着用户是否愿意将商品加入购物车，以及在多长时间内做出加车购买决策。

由于受限于手机屏幕尺寸，一屏内能呈现的内容极其有限，顶部banner的展示占据了较大问题。banner的展示我相信运营有本身的考虑，更多是希望在商详页向其他页面（如活动页、专题页）引流。

可是有没有想过，商详页最重要的任务在于让用户尽快加车，提高“商详页的转化”，把用户引流到其他页面去，我实在无法理解这是为什么。

别的，就是轮播指示器目前是放在图片之上的，这个也是要占空间的。

如图：

因此，针对以上问题，我做了如下优化。

解决方案：

建议直接去掉banner；或者对商品类型进行分类办理，针对差别类型的商品进行差异化运营——好比热卖sku不加banner，销量平平的sku可以加banner（不必然对，我只是随便举个栗子）；将轮播指示器放到图片上去，节省空间。

优化草图：

2、销售属性（主要指尺寸和颜色两种属性）

目前尺寸和颜色两种属性的选择都采用的是「下拉列表式」的设计方式，我能想到的毛病在于：

展示不直不雅观，用户选择属性需要操作两步：点击下拉列表——选中属性，当需要切换属性时，又要重复操作两个步骤，反复如此，操作成本实在太大；不符合移动端的用户操作习惯，用户在移动端操作更喜欢「标签式」or「点选式」的设计。

如图：

因此，针对这个问题，我做了如下优化。

解决方案：

针对这个问题，我采用了直不雅观清晰的平铺的「点选式」设计方案，即将尺寸和颜色属性设计成按钮，全部一 一平铺展示出来，清晰可见，点击即选中，一方面更符合用户操作习惯，改善了用户体验，同时也符合「所见即所得」的设计原则。

优化草图：

3、标签位置

目前由于各种促销活动、商品自己属性和类型等各种原因，会将商品在商详页打上各种标签，以示说明。对于库存标、热销标和促销时间标等更是起到一个反馈商品热销情况，引导用户快快下单的效果。

但是由于未形成比较规范的尺度，这些标很可能放置位置不是固定的，并且我们是跨境电商，有很多币种，遇到某个币种导致价格太长，就不得不折行显示了。所以常常导致“今天放在这个位置，明天就放到阿谁位置了”的位置。整体是混乱的。

如图：

因此，针对这个问题，我做了如下优化。

解决方案：

对于促销标，只能放到价格这一行（位于价格后面）；对于促销时间标，放到价格下方，并与“免邮标”放到同一行。

优化草图：

4、商品增减控件

商品增减控件存在两个问题，一个是样式丑，控件样式大，占空间；一个是当商品数量为1时，「-」控件没有做类似置灰这样的处理，导致用户常常点击却没反应。这是明显违反「实时反馈交互效果」原则的。

如图：

因此，针对这个问题，我做了如下优化。