商品套装组合的交互设计

一、需求说明

OnePlus官网Bundle页面；该页面由运营依据市场策略，制定出组合套装，价格低于单独配件的购买。将多个单品组合为套装后，其中任何单品的规格都可以额外进行自定义。下图为目前最大的Bundle[前往]。

最大的Bundle页面

当前的问题：

1、用户选择单品规格后，图不能表达出已经选择的颜色／样式等规格；

2、产品图展示仅仅靠缩略图中的几个样式，并不全面。如Sandstone的壳+Black的耳机。

也就是说，最大的问题就是体验上的直观性比较差。在这种情况下，用户选择酸枝壳（Rosewood）后，并不知道酸枝壳是什么样的——当然，可以通过详情页来说明，但毕竟体验已经差了很多。

因此，新的方案必须满足如下需求：

1、用户体验上，所见即所得，直观性更强，图展示能够全面；

2、运营必须能够自由配置，或者代价较低的进行配置；——随时可能组合新的套装；

3、开发能够模版化，也就是不能每次上新套装都需要开发介入。

其他注意：默认必须有选择一个搭配推荐，用户可随时添加购物车，移动端体验优先考虑。

二、方案设计过程

2.1 方向

方案一

方案一草图框架

用户操作流线

方案一，套装拆分为单品选择商店时代说的

方案一移动端

方案二

方案二 组合图

将商品图化展示，同时状态文字在底部栏固定展现，用户点击图／底部文字即可进入对应的选择方式。

1、点击图／文字进入编辑；

2、选择单品后，自动跳转入下一个；

3、可以通过底部文字跳转任意单品；

4、可随时提交订单；

5、可随时返回组合图；

方案二 编辑图

方案三

将左图和文字进行关联，选择单品，组合图发生对应的变化。

方案三

可以选择切换单品，且展示各角度细节图。

移动端一次只能进行一次任务，所以不管采用哪种方案，当前都只能进行一次处理。所以需要正价查看大图选项。

移动端

该方案重点在于解决图的组合方式，最佳方案为前端实现每张图的定位，用户选择即更换单品图；后端将组合的任意图压缩为一张图，以便在购物车等后续流程中展示。但如果组合图由前端控制，则很难保证视觉效果。

2.2 方向用户测试

通过率：方案一100%；方案二80%；方案三100%；

倾向性：方案1:方案2:方案3——0:1:4 

按测试结果来看，毫无疑问我们需要按方案3进行后续优化；但需要解决实际落地问题。

2.3 方案实现

1、由视觉设计好组合样式，且将图的位置切好——最大的套装组合各种颜色需要切12张图；

2、前端按顺序叠加图片即可，不需要调整位置；

3、后端将组合图压缩为一张；

组合图由多张位置切好的图叠加而成

2.4 定稿

在方向已经确定后，还需要做出许多的改进。比如

交互方式可否更直观一点，展现上更时尚一些；

移动端能不能体验更好；——毕竟移动端流量超过半数；

移动端

如图所示，移动端调整为更直观的选择方式，用户测试结果该方案比原来方案3的更好；同时，PC端的改进如下图，在保留选择之后大图变化的情况下（Demo演示没做），将列表选项更直观化。

PC端

在解决基本问题后，需要更高层次的体验。

Dome所展示的就是定稿方向了，然后将细节设计补充更完整，如无货状态、不可选择、反馈暗示。

强调下背后的几个原则：

1、图比文字更重要；

2、结构设计比文字说明更重要——用户会很少会看文字，而是按结构去操作。