控件|优化“商品规格选择”面板，需要注意这几点( 三 ) 关键词|搜索|护肤类|小伙伴|小

查看和更改当前定制人脚型数据

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

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

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

文章插图

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

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

合理的规范和统一控件的不同状态，大大提高用户选择效率，从而优化选择体验
3.3 用户情感激励这次优化从文案和视觉效果上都增加了用户的情感体验，激励用户进行数据的绑定、提醒鞋宽的选择，在色彩上重新规范和应用了品牌颜色：定制蓝和活力橙。定制蓝用来表明选中状态和引导点击，活力橙代表强调提醒。

文章插图
本文由 @胡昀同学原创发布于人人都是产品经理。未经许可，禁止转载
题图来自 Unsplash ，基于 CC0 协议