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

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

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

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

设计注意点：

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

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

②慎用占位文本：

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

③临近原则：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

平台通用尺码：

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

厂商自定义尺码：

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

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

同学，你说的精选购具体是指什么？如果你的意思是比较小众精品的购物软件或者APP。是这样的哈，大学的时候用淘宝比较多，京东次之，那个年代好像也没有太多的购物软件可供选择。最后慢慢的，由于人们的消费升级，电商慢慢就火起来了，什么礼物说，蘑菇街，美丽说，礼物淘，三只松鼠，聚美优品，enjoy，半塘，良仓，小红书，调调，反正当下比较流行的我都试用过，多多少少也在上面买过东西。

我的感受呢就是，还是最爱淘宝，即使她有很多假货，但是形成了购物习惯，买一些小东西还是会不自觉的去淘宝。京东自然是家电的，其他的都不放心。

在三只松鼠上买过零食，感觉不错，服务很人性化，东西也不贵，重要的是有我喜欢的日式零食，但之后他们有一次改版把我的个人信息全弄没了，什么之前的订单，购物车里面收藏的东西都没了，问客服还说那你就重新加一下购物车吧，尼玛，老子逛了多少次才收藏起来的东西你让我怎么再加一次，我的时间是有多不值钱啊，在那以后就冷落了它，很少用了。

enjoy是比较喜欢的，这算是小众的吧，上面的东西都很有逼格，不过定位人群的收入稍微高一些。

蘑菇街和美丽说好像没有太大的区别。风格呀什么的，不过先入为主，我喜欢美丽说。

半塘一直挺喜欢的，感觉是很清新文艺的。

最近被闺蜜拉进一个群，说有个叫依你，具体的不很了解，好像还没上线，不过他们的宣传挺好的，看过一篇他们的软文，感觉是很温馨的，依你，这个名字我很喜欢，第一眼就觉得很喜欢，也说不上原因。至于这个是不是小众的，我现在也难说，因为没用过，只是看到这个问题顺便来说一下自己的之前的一些体验，因为我觉得我用过的购物APP不算少，不过可以期待一下，上线了可以用用，完了再来完善答案。

同学，你说的精选购具体是指什么？如果你的意思是比较小众精品的购物软件或者APP。一般有：大学的时候用淘宝比较多，京东次之，那个年代好像也没有太多的购物软件可供选择。最后慢慢的，由于人们的消费升级，电商慢慢就火起来了，什么礼物说，蘑菇街，美丽说，礼物淘，三只松鼠，聚美优品，enjoy，半塘，良仓，小红书，调调，反正当下比较流行的我都试用过，多多少少也在上面买过东西。

我的感受呢就是，还是最爱淘宝，即使她有很多假货，但是形成了购物习惯，买一些小东西还是会不自觉的去淘宝。京东自然是家电的，其他的都不放心。

在三只松鼠上买过零食，感觉不错，服务很人性化，东西也不贵，重要的是有我喜欢的日式零食，但之后他们有一次改版把我的个人信息全弄没了，什么之前的订单，购物车里面收藏的东西都没了，问客服还说那你就重新加一下购物车吧，尼玛，老子逛了多少次才收藏起来的东西你让我怎么再加一次，我的时间是有多不值钱啊，在那以后就冷落了它，很少用了。

enjoy是比较喜欢的，这算是小众的吧，上面的东西都很有逼格，不过定位人群的收入稍微高一些。

蘑菇街和美丽说好像没有太大的区别。风格呀什么的，不过先入为主，我喜欢美丽说。

半塘一直挺喜欢的，感觉是很清新文艺的。

最近被闺蜜拉进一个群，说有个叫依你，具体的不很了解，好像还没上线，不过他们的宣传挺好的，看过一篇他们的软文，感觉是很温馨的，依你，这个名字我很喜欢，第一眼就觉得很喜欢，也说不上原因。至于这个是不是小众的，我现在也难说，因为没用过，只是看到这个问题顺便来说一下自己的之前的一些体验，因为我觉得我用过的购物APP不算少，不过可以期待一下，上线了可以用用，完了再来完善答案。

相信很多的用户都使用过拼多多买过东西，拼多多的东西可以以很低的价格抢到手，但是也会有人疑惑，拼多多的的信息到底是不是真的，为什么会那么便宜呢

　　拼多多的东西是不是真的

1商品进货和销售渠道不同，不能说便宜就不是正品。

2判断正品除了专卖以外，还有加盟和授权，网上购物主要看授权书。

3拼多多我也用过几次，但是最好购买水果和生活用品，比如袜子、纸巾之类，价格高的品牌最好不要买。

　　拼多多的东西为什么那么便宜

首先拼多多拼单其实就是团购模式，走的是薄利多销，但实际上对消费者而言，总成本是增加的，商家利润却是减少的。因为拼多多卖家是必须包邮的，举例，一个杯子成本5块，加上邮费是95块，卖10块。如果在淘宝上，商家可以设置不包邮，按55出售，邮费45元，当你买一个时和拼多多一样，当你买两个时，55x2+45=155，而拼多多商家是不允许设置不包邮的，所以商家每一单价都必须加上运费，除非做战略性亏损，否则在拼多多上，同样的东西，你买越多，成本越高!

而且拼多多是没有购物车一项的，意味着消费者在一家店铺的消费几乎都是单品购。对那些薄利百货商品来说，每一件商品都加邮费是很难卖得动的，以往在淘宝主做SKU的商家，常通过牺牲三五个爆款的利润引流，吸引消费者进店购买其它，通过提高客单价，给消费者节约成本，也为自己增利，而拼多多没购物车，消费者这种顺带买点其他东西的行为大打折扣，商家让利方式理论上只会更保守。

流量便宜：电商和实体店也类似，实体店需要好位置才能有人进来;而电商也需要线上人群，也就是流量。电商的成本很大一部分都是流量成本，获客成本越来越高，所以现在有了新零售。但是，拼多多的流量成本很低。都是社交流量，基本都是免费的，平台有免费大量的流量，也导致商家成本也低，最终可以卖低价。