OnePlus 6T交互设计
迈凯伦定制版
OnePlus在2018年10月30日在伦敦迈凯伦总部发布定制版，定义快速度的10G内存，全新的包装盒AR玩法。平台内部代号为Bruce项目组。当时我们做完6T系列的后，接到了该需求，说要在接下来一个月完成该项目的营销上市准备。
项目挑战上时间很短，同时我们计划改变过去的交互形式，为明年全新的7系列准备的一些做法放到McLaren定制版上。因此建议了该项目全程封闭式的快速冲刺解决。
交互设计第一次主导产品详情页的设计。
手机详情页
页面内容不多，同时6T已经发布，开发资源完全足够我们做不同的尝试。因此，第一次尝试文件流的形式来做详情页，为下一代新品做准备。
开发用来进行开发的交互Demo，素材部分使用的是假素材，如渲染图、3D旋转，包装和视频等等。直到最后上线前拿到最终版素材后, 再进行处理。
迈凯伦页面设计过程
设计过程如下图。
设计研究：确定方向，进行情绪版制作，视觉启动KV画面设计，交互制作草稿Demo，视觉接手草图Demo，视觉开始设计页面，交互设计拿到视觉稿完整最终高保真原型，开发开始设计。开发过程中视觉和交互均优化细节。
设计方向
首先需要充足的内部访谈，以清晰内部团队的诉求和资源支持情况、各个模块的决策负责人等信息。获取到早期资料、样品机器、包装信息、进行产品讲解、对迈凯伦历史和合作的细节解释等等。同时，对设计内容、方向、目的、原则等达成一致。如
- 使用速度概念进行设计和情绪版
- 色调采用橙色
- 使用Mclaren的橙线元素做拓展
- 预热页面，突出双方文化的契合感
- 详情设计上，突出产品外观细节，包装信息
- 使用文件流形式的页面
情绪版
交互设计师和视觉设计师同步启动了情绪版的制作。运动、速度感、文化底蕴是我们想要表达的概念点。以下是我们部分情绪版的截图。
信息结构设计
情绪版确认后，需要进行交互设计。再次强调下信息结构的一切都与内容相关。对内容结构的调整，一定要多找人进行内部的可用性测试，以及组织必要的专家评审。
预热页
当然画过多个版本的草图，下图是最终版本的结构草图，视觉设计就是按该结构进行设计。(点击可查看长图)
手机页
该版本的结构，后续沿用了多代。KV画面后跟随主要卖点，而后是产品视频。(点击可查看长图)
Demo设计
我们需要预先能考虑后续的效果，所以我们会尝试非视觉版本的交互效果，以感受动态结构。
两种方向的预热
最终我们选择了下图第二个视频的方案。
手机详情页-Demo草稿
三个开场
说实话，都挺普通，但是当时的前提是要最快速和简单的方式实现。最终选择的这个，动态线是一张图的拉伸变现实现的。以下视频可以点击全屏观看。
预热中的运动概念
点击查单时，拉伸整个背景到运动模糊，文字的黄色线。
游戏的Demo
说实话，都挺普通，但是当时的前提是要最快速和简单的方式实现。最终选择的这个，动态线是一张图的拉伸变现实现的。
结语
迈凯伦设计到开发的成功，促使平台设计和开发部门接受了全新的设计和开发形式。比如引入3D形态，使用文件流和动态效果。你可以看下OnePlus 7Pro，网站设计的标杆。OnePlus设计流程调整前的最好作品。
English 
Chinese