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

探索更多

一个趋于零的世界

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