前言：目前大家几乎天天会接触到了电子商务产品，除开宝贝详情、活动推广会很大程度上危害用户购买心理以外，“商品规格挑选”面板（ACTION SHEET）（亦或“弹出窗口”）则会直接影响到用户对心理与行为对应的交互实际操作。不一样电商平台面板有什么差别？什么样的面板组件设计才算是让用户感觉顺畅且简单？本文以对面板的控件拆卸分析与各个平台的面板剖析，总结提炼了一些商品规格挑选面板的控件交互标准，及当项目需求太多，如何选择控件。
原文中主要产品有（都是以鞋品为例子）：
微信小程序：安踏、NIKE、ECCO、安踏、李宁
APP：淘宝网、拼多多平台、京东商城、维品会、得物APP
一、“商品规格挑选”面板
1.1 勾起面板
通常是在宝贝详情，能通过“购物车”和“提交订单”按键控件勾起商品规格挑选面板，“淘宝网”能通过点一下宝贝详情处规格型号挑选勾起；在其中维品会将规格型号挑选做为信用卡立即设在宝贝详情中，不用唤起面板就可以完成选购。其他可以选择颜色属性，大量特性仍然需要点击图标控件勾起面板。
值得一提的是，按键控件得功能特性和产品自身***定位有很大的关系，“拼多多平台”和“得物APP”都可以直接选购，立即推动用户提交订单，前面一种在于它的拼单特性，后面一种取决于促销活动有关度低且存有比较多抢售商品。且按键控件的功能特性也会影响到规格型号挑选面板里的按键控件特性。
1.2 面板高度和方式
面板的尺寸大小面板中承受的模块和信息是多少相关，大致包含两类：
①可滚动面板（有时间轴）
除开产品自身的规格型号挑选，“淘宝网”“京东商城”综合型电子商务平台包含大量活动资讯，例如购买渠道、分期还款、洗护品保洁服务等业务；“安踏”增强了规格表信息内容。因此面板相对高度都比较高，且可以通过时间轴左右滚动
②固定不动面板（无时间轴）
别的主题活动等相关信息承重具体内容少的情形下，一般通常包括产品色调、产品尺码、产品数量三大信息内容，这时候应用固定不动面板可以减少操作失误，提升挑选高效率。
1.3 面板拆卸
需要设计方案实用、高效率的挑选面板，首先要对面板里面的内容、具体内容合理布局、涉及到控件有一个基础知道，通过分析竞争对手，（这儿挑选淘宝网为例子，能包含目前电子商务平台比较全方位的挑选面板信息内容。）
1.3.1 面板合理布局
挑选面板主要包括下列关键地区：
- 产品现阶段挑选信息内容区：代表着用户时下选择一个好的产品信息，包含商品信息信息内容、市场价格、名字、库存量、派送详细地址等，差异服务平台针对产品展示的形式多么不一样，充分体现了不一样平台对产品展示的差异考虑到。
- 派送地址选择区：从此次竞品对比来说，仅有拼多多平台会到面板开展地址选择，别的系统会再下一步来操作，也与拼多多平台用户量巨大相关。包含所在位置、变更派送详细地址、预计送达时间
- 服务平台关键高速服务区：一些服务平台会将***主要的服务项目设在规格型号挑选上边，反映品牌个性服务和特性，例如购买渠道、服务保证等。绝大多数鞋品垂直领域商城系统还会继续给予码数挑选协助服务项目。
- 商品规格选择区：以鞋品为例子，商品规格特性一般包括色调、鞋号、总数三大类型，大部分都会同歩表明库存量，“得物APP”还会继续独立表明不一样鞋号的价钱。
- 服务平台主次高速服务区：在用户选好产品后系统会鼓励用户挑选大量升值保障，如花呗分期选购，会员权益、保养清洗服务等
- 控件原素：包含蒙层、关闭按钮、保存按钮（下一步、购物车、提交订单）等功能特性按键、时间轴、挑选控件
1.3.2 面板控件
进一步对挑选面板里的挑选控件进行整理，大致包含以下这些：
- 单选题点一下选择符：在商品规格选择上，色调、码数均为单选题且点一下种类，选择一个选择项后，没法取消选中情况
- 多联点一下选择符：多联选择符是通过两个以上以上无线中继器加工而成，挑选某一无线中继器后，会让第二个无线中继器进行分类，在鞋品的选择上，色调、码数遵循着多联选择符规范和标准，选色或码数某一选择项，会挑选出也有商品库存选择项。
- 步进电机选择符：在总数选择时各个平台都采用了步进电机选择符
1.3.3 不一样适用场景面板差别
以前勾起面板提到，在宝贝详情存有一或二个作用按键都能够勾起挑选面板，面板之间的差别取决于用户适用场景和结构的差异，想“购物车”的用户一般挑选后不想被终断后面实际操作，因而面板上正确引导用户开展“明确”，完毕挑选步骤；但对于提交订单的用户则正确引导用户开展“选购”，开启后面购买过程。
不论是用户在哪个情景，都应正确引导激励用户推动过程的再次，如淘宝根据领券购买鼓励用户提交订单，维品会券前券后不一样作用按键和POPOVER提示，多种形式激励用户购物车。
二、挑选面板的控件标准分析
2.1 控件设计原理
根据竞争对手的总结归纳及尼克森的好用性原则，商品规格选择符的原则主要有以下几个：
通俗易懂性：
- 文字描述通俗易懂：在选择器中，不管色彩和码数都需要通俗易懂，有一些产品的色调具备晦涩难懂的四字成语（如荒漠天上），造成用户务必关键点放大图访问才可以确立产品色调。选择符文字要短且准，不必要情景***好不要应用ICON。
- 挑选情况通俗易懂：有很清楚的表明来说明色彩和码数的选中状态、未选中状态、不可用状态，而且确立表明这里可以选择。
- 挑选次序通俗易懂：包含商品规格和平台服务以内，用户***适用场景没法了解主要内容和难以抉择的情形下，应是用户给予通俗易懂的挑选手册，让用户高效率来选择。
- 挑选意见反馈通俗易懂：每挑选一类特性，都应该有明确的挑选意见反馈，让用户认知挑选结论，协助用户开展选择
便捷性：
某一特性选择的时候实用：会为用户选择标签或步进电机器时，给与适宜的触摸总面积，主题元素标识中间间隔非常，正合适，降低触屏。
不一样特性选择的时候实用在挑选商品规格和判断服务时，不可让用户有不一样的选择差别，主题元素标识视觉冲击要统一，合乎用户的视觉习惯性。
易选择：
商品规格挑选面板既为用户给予属性挑选，更直接关系用户是不是购物车或提交订单，直接影响用户决策心理状态，因而不但要通俗易懂、实用，还需要在多个挑选分辨下鼓励用户管理决策，
- 从创意文案方面，能通过更接地气的形式联接用户
- 从视觉方面，用清楚可见并且具有导向性的色调和图案设计，正确引导用户管理决策，如相同的尺码助手，“得物APP”则采用了和IP品牌形象可视化技巧，让用户更为想要加上码数。
- 从交互方面，能增加所选择的挑战性等
2.2 挑选面板用户感受相关因素
根据对面板的解读，易看出，用户在产品选择时，危害用户挑选感受的三大要素取决于：产品吸引住、挑选得知、情感激励。掌握好这三点则易***提升用户挑选感受。
2.3 挑选面板竞争对手启发
2.3.1 产品展示的多元化
针对选定产品的展示，各个平台也都有不同，除开普遍使用这个小图片头像 产品信息之外，还包含应用大图片和视频展现，更容易产生代入感；及其照片突显式展现，也可以摆脱面板的边界，更动态性；“拼多多平台”和“维品会”都取消照片展示小图片，反而是融合到颜色选择器中，可以让用户在选色时意见反馈更及时。实际应用时要融合商品本身定位和面板主要内容来来设计，总的来说，产品的展览会形象化危害用户对产品选择的冲动，也代表着能否实时的意见反馈挑选。
2.3.2 颜色选择器设计方案
在正常情况下，颜色选择器应图文并茂，可以清楚通俗易懂的展示产品实际效果，并且能在图片上即时反馈，颜色选择通过与商品主图密切相关。
存有以下这些状况：
- 淘宝主图尺寸适度，颜色选择器只有文本信息，选色蜀主图及时更新
- 并没有淘宝主图，颜色选择器文字加图片融合，不用意见反馈，眼见为实
- 淘宝主图尺寸稍小，颜色选择器文字加图片融合
三种方式都各有好坏，第三种正常情况下兼顾到用户的需要，却也更为占有总面积。
2.3.3 码数选择符设计方案
除开淘宝主图-色调将进行关系外，色调-码数也一般会关系，以显示不一样的颜色或不一样鞋号中的库存状态。和服装等东西不一样，鞋品有时候还会区别世界各国鞋号，ECCO选择了按段控件的形式进行挑选，维品会也可通过弹出层（popover）的方式显示全部详细资料。一般鞋号标识一行不得超过6个。
三、“商品规格挑选”面板设计案例
根据上述剖析，共享小编具体一次新项目中的运用，舒识订制商城系统是一个鞋品垂直领域买东西和订制商城系统，因其包括鞋品定制化服务，因而产品选择存有大量要求：
- 区分左右脚鞋号
- 提升鞋宽型号的挑选
- 查询和变更现阶段订制人脚形数据信息
关键应该考虑改善的趋势是
- 提升淘宝主图展示厅：吸引住激励用户对产品来定制或购买
- 提升规格型号选择区：和其它电子商务平台不一样的是，该网站在码数选择上不但应该选择鞋号，还要挑选鞋宽；而且用户能通过关联自已的数据来配对自身的实际码数。因而需要大量选择符和不一样的选择情况
- 授予大量品牌感：根据控件主题元素视觉色彩来构建品牌感
鉴于以上，对于淘宝主图展示厅和规格型号选择区都输出了AB版原形进行评审，***终形成总体方案。
3.1 不可忽视商品主图区
在优化全过程早期，自始至终选用较为传统式主图展现形式，***后审查一致认为在产品选择时，面板身后的蒙层很大程度上会影响到用户分辨，每一个走查者都会遇到回到查询商品主图或点击查看产品角度状况。在图的产品角度上，广泛采用的都是正侧面图，这是因为鞋品侧面图大多数对称状况，但是随着鞋品类型和样式的增加，也出现了许多侧面图漂亮，正面图不好看的状况。
所以我们改变传统，使用了淘宝主图全屏显示的方式，融合45°产品角度，展现不一样的产品视觉效果。***大限度地减少了用户必须回到查询宝贝详情次数，45°角度不但可以展现大量产品信息，也使用户拥有神秘感，吸引住用户在面板滞留，进而做出决定。
因为商品主图区占有规格比较大，同时把原版颜色选择器等比例缩小从120px变小为64px，一行较多展现4种色，大量色调根据泳道滚动挑选，更合理的使用的面积。
3.2 依据实际需要挑选控件
为了能够***大程度地运用面板挑选好几个信息内容，放弃了传统式标签点一下选择符，而是采用滚动选择符，并区别不一样挑选情况。
- 系统推荐关联码数
- 系统推荐的码数无库存量
- 依然坚持找到自己常用码数
- 无关联尺码推荐，用户自己选
科学合理的标准与统一控件的差异情况，进一步提高用户挑选高效率，进而提升挑选感受
3.3 用户情感激励
此次提升从创意文案和视觉效果上都增强了用户的情绪体验，鼓励用户进行数据的关联、提示鞋宽的挑选，在颜色上再次标准与运用了知名品牌色调：订制蓝和活力橙。订制蓝用于说明选中状态和引导点一下，活力橙意味着注重提示。
本文由 @胡昀同学们 原创设计发表于人人都是产品经理。未经同意许可，禁止转载
题图来源于 Unsplash ，根据 CC0 协议书
