OnePlus 7Pro网站设计

这是我们在2019年的标杆之作

这是个很大的挑战,此前我们交互团队从来没有进行过完整手机专题页面的设计。这里的挑战是前端也是第一次尝试,而且主开发是校招生。

概述

有了迈凯轮的设计经验,我们开始用同样的方式在OnePlus的新品上面。OnePlus 7Pro可以说是当年最佳的手机产品。我们拿到产品的时候,深深的觉得我们 必须要充分的将该产品介绍给用户。

在全面完整的通读了产品功能后,设计了非常大的信息构架,7Pro的每个子页面都很长。

以下链接是最终上线版本,点击即可体验。

页面非常的大,我们先看下开场和屏幕这部分。

很多最喜欢的就是屏幕旋转部分,就先讲这部分。这部分是90张静态图组成的序列帧。我们先用非高清的视频替代着,我们牛逼的视觉设计师再去找供应商提要求,一点点打磨细节,90张序列帧中,过程的图都是压缩的,最后几张图才使用了高质量的图。

我们是需要视频,然后在修图为序列帧,但是这部分我们单独要求供应商给出了最后几帧JPG,完全按CG渲染图渲染的图。

为了保证大小,上线的时候,又逐帧逐帧的把多余部分黑色都裁掉了。

设计过程

我们看下设计过程吧,从上至下,从信息输入明确设计目的后,启动情绪版的工作,在到最后的上线。大概过程就是如此。

早期的信息输入

作为交互设计师,需要得到非常详细的信息,这样我们才能做出更好的设计。这里非常感谢产品运营写出了非常详细的文档。

后续框架内容的构建均以此为基础。

多次的信息输入,是为了让后续的步骤更加快速。尽可能多的和产品经理与需求方讨论是帮助无疑巨大。

 

用户录屏与访谈

想知道过去的用户是如何访问页面的,比如录屏,热力图,点击图,流量漏斗和浏览效率的分配。PS:更多的用户研究并不是专门为这一次项目进行的,而是持续积累的结果。

比如我们定期的去见用户,听客服的录音等等,这些都是极好的方式。每次见用户的时候,我会请求其访问一下我们的网站完成指定任务,这个过程中会进行录屏,如下面视频。

下图是我们在北京和用户进行的活动,图中的妹子是我们的UI设计师。

我们在访谈中会得到很多信息结结论。

如什么属性的用户会重点关注哪些,容易忽略哪些,对信息的看法是怎么样的等等。

这些都是帮助我们决策和设计页面的重要依据。

信息的来源和决策我们只依赖两个部分:用户和市场目标。一定要警惕拍脑袋的决策和基于领导权威性而非专业性的决策(专家决策很大程度上是极低成本的市场研究和用户研究决策,因为专家本身就有丰富的市场经验和用户经验原则的积累)。

 

情绪版和飞机稿

设计师开始协作前,我们一定一定要先进行情绪版的工作,建立基本的审美和创意方向,不然后续比较难以开始。

如下图,强烈的光影、自然、性感的审美倾向。实际上,OnePlus 7系列的专题页就在这个基础上发展过去的。下图你可以看出来,这是一个审美倾向的延伸。

 

信息构架

通读产品介绍文档,和产品运营反复的沟通后,开始进行框架搭建,真的把所有详细卖点都列出来了,除了非常长的概述以外,每个分页面都讲的非常的细。下面展示了整体的内容结构和页面的内容结构。

内容模型图

页面线框图 Wireframe

为了方便,我将信息结构图(Wireframe)和最终的设计稿摆在一起对比看。 我在做Wireframe的时候,最终文案是没有的,依据一个Excel自己先填着。完成这一步之后,组织评审和一些简单的可用性测试。做完之后,立刻交付给视觉设计师进行设计。

Highlight页面

 

这是整个页面的首页,整个页面的重心,从后来的数据来看,50%的用户看到了最后。

交互稿比设计稿要更早的产出,等待视觉设计稿完成之后,高保真Demo才能制作。因此,在这完成了交互稿,我们也会一些草图Demo。下图是一个非常飞机稿和一个中等程度的稿。

结构内容流程的交互稿比设计稿要更早的产出,交付给视觉设计,视觉设计稿完成之后,高保真Demo才能制作。因此,在这完成了交互稿,我们会和视觉一起做一些草图Demo。

在7Pro的页面设计中,我们的项目会每周进行一次中等范围的过稿评审,设计稿完成一部分高保真也跟随完成一部分。

下面展示了最开始的时候的主画面开场。

KV是老板最为关注的,牛逼的视觉设计师依旧去打磨,我们继续深入做下面的内容,最后将最终KV融合在一起就行。

最终的设计稿如下图,点击图片查看长图。

最终的完成如下图,进行了大量压缩,大家将就看吧,或者去线上看最终版本。

各子页面转场

各个子页面入场我们都进行了基本的效果设计。并且采用了统一的动画值。如下图所示。虽然包含了很多子页面,但实际上他们都是一个页面,所以转场才会如此的细腻和没有中断。

 

屏幕

由黑夜到天明的概念设计。

充电

曲线和文字需要高度匹配。

影音和屏幕

后续其实都没什么特别的,对影音部分和文字出场倒是调整了很久,需要视频内容和背景变亮+文字内容的曲线高度一致,使其具有很强的节奏感。

我们用什么工具呢

整个下来,我们花费了2个月时间进行设计,所产生的稿件非常多。各种视频素材的剪辑合成,比如剪辑底部更多导航的底视频,制作了4个版本的KV视频,合成指纹解锁、动态壁纸、截屏素材、游戏、影音的素材等等。

下图是对素材加工的产物,非常多的视频素材。

那么使用什么工具呢,本来不想提这个,作为成熟的设计师,你应该很清楚效果由什么工具来实现。

当然了,工具本身其实是设计思路的体系。我们使用Principle制作低保证和最后的高保真Demo,使用AE和PS对素材加工,使用Sketch进行交互稿的制作。下图是屏幕部分制作的Principle工作窗口截图。Dirvers能很好的模拟文件流效果,前端基本就是一模一样的按照高保真Demo来制作。

最后的建议

这篇文章讲了很多,但是细节永远讲不完。有个小细节一定要说下。

很容易忽略的一步,是上线前对根文件目录中,素材的压缩检查。

这一步做的好,可以节约下一半的素材大小。这意味着我们加载速度更快,而加载速度意味着更好的体验、更好的转化率与流量效率。

下图展示了highlight部分未检查前,大小为27.4M,检查和压缩后为11.9M,而Camera这张图则有611K调整到了108K。所以,检查目录并压缩图片非常非常重要。一张一张的图压缩后进行比对,差异不大就使用更小的。

勾搭我们

Previous
Next

探索更多

性格色彩对产品的影响

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

一个趋于零的世界

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