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

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

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

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

设计注意点：

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

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

②慎用占位文本：

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

③临近原则：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

平台通用尺码：

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

厂商自定义尺码：

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

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

我也是碰到这种情况，在手机客户端还是在网页上都是。即时到账的问题我也在支付宝钱包里注意到了，就是钱是直接打到他们的账户上去了而不是一般在淘宝上买东西那种先把钱打到支付宝，满意确认收货才确认支付，那种在支付宝钱包里显示的是“担保交易”，而聚美订单在同一栏显示的是“即时到账”。所以他才那么敢跟消费者说，等你用好了满意了多久确认收货都没关系，说得好像客户至上是的，其实是钱早到他们账上了他们才敢跟客户打包票。

如果你成功付款了但是在他那个订单状态是看到什么未付款或者付款出错什么的，相信你支付宝的信息，支付宝信息里说交易成功说明钱已经打出去了。他那个订单状态出的错，建议你等个5分钟再去刷新一下订单状态就看到正常了，这个我也不太清楚是什么技术原因造成信息延迟。

我第一次碰到这种情况也很着急，但是我看很多人因为看到错误的信息就去付第二次款，这个就不知道他们最后怎么解决的，这点上看有点像骗子行为。不过幸好我过后刷新状态就显示“已付款”了，要等5到10分钟才能看到。而且之后货也送到手上了，好几次了，因为他上面特卖的东西老不同我一个月也会在上面买几次东西。所以这种情况别急，以支付宝的信息为准。

手机淘宝怎么使用购物车？

方法：

1 登陆您的淘宝账号，然后在淘宝网上查找商品，然后浏览到你自己喜欢的宝贝点击进入购买。

2 选择好尺码和颜色然后点击加入购物车，把尺码、颜色、购买数量后确定好，逐个加入到购物车中。

3 把宝贝加入购物车后，点击购物车进入查看。

4 或者在右下方的购物车快捷栏上购物车进行结算。

5 将加入购物车的宝贝全部勾选了合并价钱，然后进行结算，并填写收货地址，购买运费险，然后确定进入支付宝或者网银付款，完成操作。

为什么淘宝买家用手机购物购物车不能加入

如果不是购物车东西放满了，就可以是系统问题 了

可以让客户卸载以后，清理下内存，再重新安装试试。

手机淘宝怎么把商品加入购物车一起结算？

看商品时点击加入购物车就是的了

手机淘宝天猫怎么加购物车

宝贝详情页下方都有加入购物车和立即购买两个选择的。如果只显示一个立即购买那就是说那个宝贝不支持与其他商品一起购买。

用手机在天猫买东西怎样加入购物车

手机天猫购物需在个人中心加入天猫购物袋，进行购物后，查看购物车，点击付款-选择网银银行或支付宝进行结算。

智能手机安装淘宝客户端可在天猫商城进行购物。非智能手机无法使用。

美团中用电脑加入购物车的东西在手机美团怎么找到

无法找到

原因：您加入购物车的东西是在本地缓存的，和登录的缓存是一样的。

如果您要进行手机支付什么的，请先提交订单，

提交订单后，会将您的订单数据写入服务器。

通过手机找到未支付的订单就好了。

希望能给您提供帮助。

在手机京东购物时一定要把货物加入购物车才能下订单的吗？ 10分

在京东商城购物并非一定要先加入购物车才能购物的。

在京东商场购物，用户可以点击商品详情页面的立即购买按键直接购买商品。也可以点击加入购物车后，在从购物车结算的方式购买商品。

立即购买和加入购物车购买的不同点有：

立即购买，一次只能购买一种商品，且直接跳转结算页面结算。对一次购买一种商品的用户来说是非常方便的购买方式。

加入购物车，一次可以购买多种商品，结算时需要进入购物车，多种商品一起结算，京东发货时按同一订单发货。这对于一次购买多种商品的用户来说是非常方便的购买方式。

如何在手机上将淘宝商品加入到购物车并结算

点击需要购买的商品在屏幕下方点击加入购物车

之后选择需要购买的颜色或其他参数

然后返回淘宝主界面点击屏幕最下方的购物车

进入后选定需要购买的商品点击右下方的结算

然后你就可以付款了

为什么手机淘宝商品加入不了购物车

最近淘宝客户端都出现这样的问题，很多宝贝就是加入不了，这个是没有办法的，你可以关闭软件后重新打开看看，还有这个店铺给你一点意见，三颗星全是好评，而且销售量很低，我觉得不要相信，看你自己吧

聚美优品！！怎么加入购物车！手机app找不到哪里加入！！ 急！！难道只能一个一个的下单？

都是他们的网址哦,CD的是成都的,BJ的是北京的,GZ是广州仓,SH就是上海仓发货的,如果你输入wwwJUMEICOM一般都能自动识别你所在的城市最靠近哪个仓库哦不过四个网址的东西有小部分是不一样的,所以都可以看看,如果这边仓库没货的东西,也可以看看别的仓库有没有,有就直接在相应的网址购物就好了相对发货时间可能长一点