商品规格选择弹窗设计总结

Posted 2023-03-21

参考技术A 在电商APP中，商品规格属性选择弹窗（或称“选择面板”）绝对是用户操作最频繁的组件之一，其操作体验的好坏直接影响着购买转化率和销售额。因此，对商品规格选择弹窗的分析研究对产品设计和用户体验设计都有着很大的意义。

一般来说，常见的在四类页面上可以唤起规格选择面板：

在商品详情页点击规格数量选择、加入购物车和立即购买按钮可以弹出规格选择面板。其中“规格数量选择”属于直接唤起操作，“加入购物车”和“立即购买”属于间接被动唤起操作，即先判断是否已选择规格，若已选择则提示加入购物车成功或跳转确认订单页，若未选择则弹出规格选择面板。

设计注意点：

①采用强语义的视觉引导：

箭头“>”比“…”有更强的指引性，目前只见到天猫和京东是“…”，且京东用的是中间深色两边浅色、中间大两边小的样式，过重的视觉修饰反倒有点过犹不及了。伴随全面屏的兴起，大圆角按钮和卡片流行开来，毫无疑问，圆角按钮比矩形按钮更活泼、更容易成为视觉焦点，但过度使用会降低产品的品质感。规格选择作为重要信息也可以想办法突出显示。

②慎用占位文本：

关于占位符的辩论由来已久，但请务必遵循“如果字段标签能很好说明字段含义，尽量不要使用占位文本”的原则，因为用户很容易忽略看起来已填充内容的输入项。如下图所示，网易严选没有显示占位文本提示，天猫显示了“请选择 尺码”（“尺码”会根据商品品类动态显示，例如颜色/尺寸），京东则直接默认填入了该商品的有库存的第一个规格组合，但是点击“加入购物车”按钮依然会弹出规格选择面板以便用户选择自己真正需要的规格，是有点画蛇添足了。

③临近原则：

规格选择放在哪里更合适？由于商品图片、名称、价格等信息已经占据了将近2/3的屏幕空间，加上或多或少的促销信息，规格选择入口往往比较靠下。淘宝和天猫因为丰富的优惠活动在商品详情页的首屏是几乎看不到规格选择入口的，而严选、京东等因为促销信息少且位置靠前，大部分商品可以在首屏看到规格选择入口，但在用户使用过程中页面又是处于不断的滑动状态，所以是时候考虑把规格选择入口做成固定或悬浮的了。

④考虑更完整的用户使用流程：

可以结合规格选择的更多场景丰富规格选择的功能。例如提示用户完善尺码，以便做尺码推荐。又例如显示紧急库存信息，提示用户尽快购买。

购物车是用户用来暂存、收藏、对比有意向购买的商品的。随着不断深入的对比和决策，用户会修改、调整要购买的商品规格。天猫购物车支持在购物车进行商品规格修改，下图分别展示了已选规格有库存和无库存的重选规格方式，点击相应区域即可弹出规格选择面板。

在商品列表点击购买按钮直接弹出规格选择面板的情况比较少见，毕竟用户往往是在仔细查看商品详情后才会做出购买决策。但在限时购、今日必抢等列表页面，如果正品保证做得到位、又有时效压力，用户是有可能直接选择规格然后加入购物车的。如图是聚美优品的推荐列表，如果该商品只有一种sku，那么点击购买按钮直接加入购物车；如果该商品有多种sku，那么点击购买按钮就会弹出规格选择面板。

在订单中进行规格修改更不常见，但以笔者所在的校服电商行业为例，因为校服属于预售商品（家长付款后，校服厂商在根据尺码安排生产和发货），原则上只要没进入生产环节，就应该允许用户修改尺码信息。在退款功能不完善时，我们公司的校服订单列表和订单详情在厂商未导出生产单前都是支持修改尺码的。在未来也可以考虑在客服页面增加规格选择/修改入口，方便及时沟通修改。

经过收集整理各大知名电商APP的规格选择面板，得到下图。一般来说，规格选择面板主要包括以下几类：

商品信息：包括商品图片、商品名称、商品编号、剩余库存；

商品价格：单价、价格区间、原价（划线价）；

规格属性选项组：包括多种属性和属性值，如颜色、尺码、内存，单规格商品无需显示；

帮助信息：如尺码选择帮助；

数量选择：单个用户限购规则、数字加减按钮；

配送信息：当前位置，可手动更改，与库存和配送息息相关；

特色服务：增值保障服务，如联保、保修、延保、洗护、意外保护等；其他服务，如上门贴膜、电池换新等；

支付/购买方式：比如淘系可使用花呗；手机可以用合约机方式购买；

优惠信息：该商品适用的优惠券、折扣、满减等；

其他操作元素：遮罩层、关闭按钮；确定按钮；立即购买和加入购物车按钮；

规格选择面板的位置，或者说承载形式有两种：一种是弹出型面板，另一种是嵌入型面板。如下图：

左边的京东优选属于微信小程序，直接将规格选择面板内嵌于商品详情页，可直接选择规格，且支持展开收起。中间的是网易考拉，是最常见的弹出型面板。右边的是唯品会，同时使用了两种方式，如果商品基本信息下方相应的属性都选择了，点击“加入购物车”就会把该规格的商品加入购物车；如果未选择内嵌面板的规格或只是选择了部分属性，点击“加入购物车”就会弹出规格选择面板，以便用户把剩余的属性选择完整。

规格选择面板的形状可以分为两大类：凸起形和平头形。相比而言，平头形（下图京东）比凸起形（下图天猫）的空间利用率更高，但略显呆板。还有一类异形，如下图的苏宁易购，整个面板和屏幕边框之间有一定缝隙，符合圆角设计趋势。

面板尺寸和屏幕适配的关系更大，这里主要讨论面板高度和内容的关系。如下图：无论内容多少，淘宝使用了统一的面板高度，而网易严选根据内容多少自适应高度。从用户聚焦主任务的角度来看，用户在规格选择面板的主要任务是选择合适的规格，遮罩下方的内容并不重要，所以面板遮挡了下方多少内容并不重要。但从精品电商角度来看，这些商品的可选规格并不多，并不需要过大的面板。

基本注意点包括：使用默认占位图应对弱网环境下图片加载慢的情况；图片可点击放大查看，并支持手指捏合缩放；当前图片和规格选中项之间的联动。除此之外，调研过程中还发现淘宝的设计很是新颖，值得借鉴，聚美优品也采用相似设计，如下图。当在规格选择区域向下滑动时，触发大图模式，且可以左右滑动以对比查看其它规格的图片，上滑又切换回小图模式。点击图片可以全屏看图，且在每张图片下方会显示相应的规格说明，可辅助加深用户的瞬间记忆。

设计规格选项，除了要有效的传达已选、未选、不可选等状态信息，选项排布、帮助信息展示、多属性间的库存联动、缩略图的使用等也同样值得研究。

选项的视觉修饰方法涵盖了填充、描边、反白、大圆角、角标等，都是为了区分已选、未选和不可选状态。这其中也发现了不少惊喜：京东采用了“置灰文字+中划删除线”表示不可选，考拉海购使用虚线表示不可选，天猫和唯品会使用缩略图对选项进行了点，唯品会甚至对无货商品加了来货提醒功能。

选项布局上大都采用的是“等间距+折行处理”的策略，虽然不够整齐，但却是最节省空间且能满足更多场景需求。只有唯品会除外，是整齐的三列布局，因为它是尾货处理，规格数量本身就少。

交互方面，京东提供了默认选中项，反推其规则应该是“默认选中各属性的第一项，如果该不可选则向下顺延”。另外，如果在面板中选中了其中一项或几项，此时点击遮罩层或关闭按钮关闭面板，再次打开面板后，面板内会回显上次选中的值，这属于比较统一的做法。

由于各种产品运营策略的加入，规格选择面板中的内容越来越多，垂直滚动就显得有点直接生硬。常见做法有展开/收起和横向滑动。可参考下图苏宁和天猫的做法。

关于面板弹出的前后操作路径可分为两种：

第一种：加购/立购触发-弹出面板-选择-确定后收起面板-加入购物车/立即购买。如天猫、淘宝、网易考拉在规格选择面板中都只有一个确定按钮。

第二种：加购/立购触发-弹出面板-选择-加入购物车/立即购买。如网易严选、小米有品、聚美优品在规格选择面板中直接就有立即购买和加入购物车两个按钮。京东则有两种样式，一种是单个确定按钮，另一种是轻松购+确定按钮。

原则上，第二种更好一点，不知道出于什么原因，还没有被广泛使用。

对于服装类、鞋类商品，一般会提供尺码推荐、尺码助手、查看完整尺码表功能，无论对用户还是对卖家都是极好的，用户可以更准确方便的选择尺码，商家也减轻了客服工作量，更可以避免不必要的退换货。这里举了天猫和网易严选的例子供大家参考：

唯品会在选中衣服尺码后，会弹出尺码对应的身体参数，以便用户及时确认。

以笔者所在校服行业为例，传统校服订购大都采用线下量体的形式，为应对学生快速发育的情况，尺码往往偏大，家长也倾向于选择较大尺码，结果导致到货的尺码更不准。校服品类也比较固定，一般包括运动服春秋装、运动服夏装、运动服冬装、制服春秋装、制服夏装，而运动装一般都是男女同款。同时校服行业鱼龙混杂，不是所有厂商都有独立开发尺码的能力，所以他们一般会采用行业内通用尺码生产，但这些尺码并不规范。这次设计的目标是智能化选码，就是通过输入相应身体参数，系统自动计算并匹配尺码。如果匹配失败，则按照提交的数据进行定制生产。另外，收集学生身体数据也是为了不断修正平台尺码。

平台通用尺码：

家长可以通过阅读商品详情，结合孩子实际身高体重直接选择合适的尺码；也可以输入身高体重，自动计算获得推荐的正常尺码。如果正常尺码无法满足，则继续输入胸围、腰围等信息，以便通过计算获得特体尺码推荐；如果仍不满足，还有最后的定制尺码。缺点在于这套尺码号段过多，而一般校服都是针对不同学校推广的，过多的尺码反倒让家长难以选择。

厂商自定义尺码：

厂商自定义尺码就是厂商维护的尺码，和主流电商的尺码规格维护较为类似，不过这里加了特体参数填写入口，当然厂商可以自主选择开启和关闭。

本文主要从用户和设计技巧的角度总结了商品规格选择弹窗设计中的要点，而真正设计过程中，还要了解平台中各商品品类的规格特征，进行针对性设计。此外，还需要为商家设计易于操作的后台系统，方便商家维护商品规格。