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设计流程调整前的最好作品。

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

探索更多

性格色彩对产品的影响

thinking design, creative solutions 哈哈哈,henmei OnePlus UXD的工作方式 本文简短介绍以下OnePlus大电商UXD的工作方式。作为OnePlus最直面接触用户和业务的部门,我们需要时刻的保持警醒,让业务具有强大的生命力,让用户觉得我们可信赖。 以最科学合理的工作流程保持我们的竞争力。 “高品质的视觉设计、优秀的交互设计,是OnePlus保持信赖的基石,每次都应以不将就的态度进行产品的设计。全球各区域的视觉风格、信息构架、主要流程、用户体验,需要一致。使全球用户在不同设备、不同语言的环境下保持一致的用户体验。” 我们更倾向定义我们是全功能的设计师。 一、遵循目标导向的设计 艺术创意以情绪导向,以表达“某”的情绪为主。 与艺术创意不同,UXD以商业目标和用户目标为导向,这是我们底层的决策模型和逻辑。满足用户目标,很大程度上就是实现商业目标。冲突往往只在短期业务目标和长期商业目标的冲突。 我们的文化反复的强调以用户中心,满足用户需求才是我们设计的最高目标。 下图展示了我们目标导向设计的方式。 所谓目标导向的设计,就是要非常明确的目标,是设计的底层逻辑和决策依据,我们后续进行情绪版确定设计方向、进行创意脑暴、进行信息结构的构架,甚至画面的表达,都是围绕这个核心。 通过用户研究、数据分析、内部访谈,以获取清晰的用户目标和商业目标; 二、全链路的设计 设计需要从用户研究端到开发实现端,端到端的实现; 岗位上我们只有UX设计师与视觉UI设计师;UX基于用研和交互,需要能胜任部分UI设计的工作;同理,视觉与UI设计师基于视觉设计,也需要胜任部分的用户研究和交互设计类的工作。 由此,1+1组成UXD项目小队,以解决从用户研究,到最终设计实现上,全链路且端到端的设计。 三、用户旅程为蓝本 UXD(UED)需要提供优秀的用户旅程,这个旅程和业务模块高度挂钩,和商业目标贴合,也描述了用户体验和用户目标。 我们任何项目,基本都属于旅程的一环,你解决哪个阶段的问题?会提升哪个商业指标?预估改进什么样的用户体验?设计并不是盲目的设计,而是有依据的设计。 下图就是我们整个旅程的过程(示意图),从未接触到访客、转化为用户到成为会员的全周期。纵轴覆盖到了当前指标情况和该阶段的用户类型占比。 四、可量化的设计反馈 我们既然遵循目标导向的设计,那么验证目标就是最为关键的步骤。何以保障目标的实现,从用户旅程的蓝本就可以看出来,观察指标。 所以了,我们的量化标准就是:客观的指标(互动指标和转化率指标),用户反馈的数值; 五、使设计保持透明 任何以信息优势来保持领导或者权威地位的行为都是不可取。 在设计中,谦虚是必要的品质,能够随时反思和推翻自身专家权威般是非常非常重要的;我们需要把设计稿放出来,以让所有人能够有机会点评,了解他们所顾虑的; 真正的设计专家能够虚心的获取足够的信息,自信的展示自己的方案是深思熟虑、当前情况下的最优解。 基于此,我们的每个设计师,都应该是具有基本面的全功能的设计师,能够坦荡的接受问题,并推动解决问题。

Read More »

一个趋于零的世界

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

Read More »