唯品会|优化“商品规格选择”面板，需要注意这几点_小红书|品牌|笔记|关键词|护肤

导读：现如今我们几乎每天都会接触到电商类产品，除了商品详情、活动营销会很大程度影响用户购买心理之外，“商品规格选择”面板（ACTION SHEET）（又或“弹窗”）则会直接影响用户对心理行为所对应的交互操作。不同电商平台的面板有何差异？怎样的面板组件设计才是让用户觉得流畅且简单的？本文从对面板的控件拆解分析及各大平台的面板分析，梳理总结了一些商品规格选择面板的控件交互规则，及当业务需求过多时，如何选择控件。

文章插图
文中产品包括（都以鞋类为例）：
小程序：李宁、NIKE、ECCO、特步、安踏
APP：淘宝、拼多多、京东、唯品会、得物
一、“商品规格选择”面板1.1 唤起面板通常在商品详情页，可以通过“加入购物车”和“立即购买”按钮控件唤起商品规格选择面板，“淘宝”可以通过点击商品详情处的规格选择唤起；其中唯品会将规格选择作为卡片直接设置在商品详情页中，无需唤醒面板即可完成购买。其余则可以选择颜色属性，更多属性仍需要点击按钮控件唤起面板。

文章插图
值得一提得是，按钮控件得功能属性和产品本身定位有很大关系，“拼多多”和“得物”都是直接购买，直接促进用户下单，前者在于其拼团属性，后者在于营销活动相关度不高且存在较多抢售产品。且按钮控件的功能属性也会影响规格选择面板中的按钮控件属性。
1.2 面板高度和形式面板的尺寸和面板中承载的组件和信息内容多少有关，大体包括两种类型：
①可滑动面板（有进度条）
除了商品本身的规格选择，“淘宝”“京东”综合性电商平台涵盖更多活动信息，诸如购买方式、分期付款、洗护保洁等服务；“李宁”增加了尺码表信息。所以面板高度都较高，且能通过进度条上下滑动
②固定面板（无进度条）
其他活动等信息承载内容少的情况下，通常则包括商品颜色、商品码数、商品数量三大信息，这时使用固定面板可减少误操作，提高选择效率。

文章插图
1.3 面板拆解想要设计好用、高效的选择面板，首先需要对面板中的内容、内容布局、涉及控件有一个基本了解，通过对比竞品，（这里选择淘宝为例，能涵盖现有电商平台较为全面的选择面板信息。）
1.3.1 面板布局
选择面板主要包含以下主要区域：