唯品会|优化“商品规格选择”面板，需要注意这几点( 三 )

2021-09-01

文章插图
2.3.2 颜色选择器设计
在原则上，颜色选择器应图文结合，能够清晰易懂的展示商品效果，且能在图片信息上即时反馈，颜色的选择通过和商品主图相关联。
存在以下几种情况：

主图大小适当，颜色选择器仅有文本内容，选择颜色后主图即时刷新
没有主图，颜色选择器文本加图片结合，无需反馈，所见即所得
主图大小稍小，颜色选择器文本加图片结合

三种方式各有优劣，第三种原则上充分考虑到用户的需求，但也更加占用面积。

唯品会|优化“商品规格选择”面板，需要注意这几点

文章插图
2.3.3 尺码选择器设计
除了主图-颜色会进行关联外，颜色-尺码也通常会关联，以显示不同颜色或不同鞋码下的库存状态。和服装等物品不同，鞋品有时还会区分国内外鞋码，ECCO的选择了分段控件的方式进行选择，唯品会则通过弹出层（popover）的形式显示更多详细信息。通常鞋码标签一行不超过6个。

唯品会|优化“商品规格选择”面板，需要注意这几点

文章插图
三、“商品规格选择”面板设计案例根据以上分析，分享笔者实际一次项目中的应用，舒识定制商城是一个鞋品垂类购物和定制商城，由于其包含鞋品定制服务，因此商品选择存在更多需求：

区分左右脚鞋码
增加鞋宽规格的选择
查看和更改当前定制人脚型数据

主要需要考虑优化的方向是

优化主图展示区：吸引和激励用户对商品进行定制和购买
优化规格选择区：和其他电商平台不同的是，该平台在尺码选择方面不仅需要选择鞋码，还需要选择鞋宽；并且用户可以通过绑定自己的数据来匹配自己的具体尺码。因此需要更多选择器和不同的选择状态
赋予更多品牌感：通过控件元素和视觉色彩来建立品牌感

基于以上，针对主图展示区和规格选择区都输出了AB版原型进行评审，从而形成最终方案。

唯品会|优化“商品规格选择”面板，需要注意这几点

文章插图

唯品会|优化“商品规格选择”面板，需要注意这几点

文章插图

唯品会|优化“商品规格选择”面板，需要注意这几点

文章插图
3.1 不可忽视的商品主图区在优化过程前期，始终采用比较传统的主图展示方式，最终评审一致认为在商品选择时，面板后方的蒙层很大程度会影响用户判断，每个走查者都会碰到返回查看商品主图或查看更多商品角度的情况。在主图的商品视角上，普遍使用的都是正侧视图，这是由于鞋品侧视图大多对称的情况，但随着鞋品种类和款式的增多，也出现了很多侧视图好看，正视图不好看的情况。
因此我们打破传统，采用了主图全屏显示的形式，结合45°商品视角，呈现不一样的商品展示效果。有效减少了用户需要返回查看商品详情的次数，45°视角不仅可以展示更多商品信息，也让用户有了新鲜感，吸引用户在面板停留，从而做出选择。
由于商品主图区占用尺寸较大，同时将原版的颜色选择器等比例缩小从120px缩小为64px，一行最多展示4种颜色，更多颜色通过泳道滑动选择，更加合理的使用面积。
3.2 根据实际需求选择控件为了能够最大化的利用面板选择多个信息，抛弃了传统的标签点击选择器，而是采用滑动选择器，并区分不同选择状态。

系统推荐绑定尺码
系统推荐的尺码无库存
还是坚持选择自己惯用尺码
无绑定尺码推荐，用户自己选择

合理的规范和统一控件的不同状态，大大提高用户选择效率，从而优化选择体验

推荐阅读

上一篇：曝光!维莎原始原素源氏木语家具是一家？有没有实体店？

下一篇：item|推荐策略产品经理实操（三）：推荐系统与搜索系统的区别——整体逻辑流程对比