6T迈凯伦定制版交互设计

2016年,我们开始设计开发海外社区App

OnePlus在2018年10月30日在伦敦迈凯伦总部发布定制版,定义快速度的10G内存,全新的包装盒AR玩法。平台内部代号为Bruce项目组。当时我们做完6T系列的后,接到了该需求,说要在接下来一个月完成该项目的营销上市准备。

项目挑战上时间很短,同时我们计划改变过去的交互形式,为明年全新的7系列准备的一些做法放到McLaren定制版上。因此建议了该项目全程封闭式的快速冲刺解决。

交互设计第一次主导产品详情页的设计。

 

最终Demo速览

工作内容上,需要进行预热的设计和产品详情页面设计。我们先看下做完的高保真Demo。

预热

预热的Desktop端采用了横向滑动的形式。融合了McLaren的速度的元素和品牌元素。首次在OnePlus官网的页面中,使用了大量的动效。在整个后续的19年,我们竖立了OnePlus官网动效非常好,属于一流页面的概念。

手机详情页

页面内容不多,同时6T已经发布,开发资源完全足够我们做不同的尝试。因此,第一次尝试文件流的形式来做详情页,为下一代新品做准备。

开发用来进行开发的交互Demo,素材部分使用的是假素材,如渲染图、3D旋转,包装和视频等等。直到最后上线前拿到最终版素材后,在进行处理。

迈凯伦页面设计过程

设计过程如下图。

设计研究:确定方向,进行情绪版制作,视觉启动KV画面设计,交互制作草稿Demo,视觉接手草图Demo,视觉开始设计页面,交互设计拿到视觉稿完整最终高保真原型,开发开始设计。开发过程中视觉和交互均优化细节。

设计方向

首先需要充足的内部访谈,以清晰内部团队的诉求和资源支持情况、各个模块的决策负责人等信息。获取到早期资料、样品机器、包装信息、进行产品讲解、对迈凯伦历史和合作的细节解释等等。同时,对设计内容、方向、目的、原则等达成一致。如:

· 使用速度概念进行设计和情绪版

· 色调采用橙色

· 使用Mclaren的橙线元素做拓展

· 预热页面,突出双方文化的契合感

· 详情设计上,突出产品外观细节,包装信息

· 使用文件流形式的页面

情绪版

交互设计师和视觉设计师同步启动了情绪版的制作。运动、速度感、文化底蕴是我们想要表达的概念点。以下是我们部分情绪版的截图。

信息结构设计

情绪版确认后,需要进行交互设计。再次强调下信息结构的一切都与内容相关。对内容结构的调整,一定要多找人进行内部的可用性测试,以及组织必要的专家评审。

预热页

当然画过多个版本的草图,下图是最终版本的结构草图,视觉设计就是按该结构进行设计。

手机页

该版本的结构,后续沿用了多代。KV画面后跟随主要卖点,而后是产品视频。

Demo设计

我们需要预先能考虑后续的效果,所以我们会尝试非视觉版本的交互效果,以感受动态结构。

两种方向的预热

最终我们选择了下图第二个视频的方案。

手机详情页-Demo草稿

三个开场

说实话,都挺普通,但是当时的前提是要最快速和简单的方式实现。最终选择的这个,动态线是一张图的拉伸变现实现的。以下视频可以点击全屏观看。

预热中的运动概念

点击查单时,拉伸整个背景到运动模糊,文字的黄色线。

游戏的Demo

说实话,都挺普通,但是当时的前提是要最快速和简单的方式实现。最终选择的这个,动态线是一张图的拉伸变现实现的。

结语

迈凯伦设计到开发的成功,促使平台设计和开发部门接受了全新的设计和开发形式。比如引入3D形态,使用文件流和动态效果。你可以看下OnePlus 7Pro,网站设计的标杆。OnePlus设计流程调整前的最好作品。

开启高帧率时代,网页设计的标杆之作

探索更多

一个趋于零的世界

当下在进行的是,物质世界的数据化进程。衔接人工时代与智能时代的最重要环节——构建计算机能理解的世界。

Read More »