一、需求说明
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、结构设计比文字说明更重要——用户会很少会看文字，而是按结构去操作。
网友评论