OnePlus8 网页交互设计

Colin
Colin

形以美悦目,意以美暖心

OnePlus 8 已经发布了,我和我交互团队的小伙伴们又一次看到了自己的作品上线。

至此,我们从6T迈凯伦版本第一次介入手机详情页的设计开始,3.5代的手机详情页。

业内没有哪个厂商像OnePlus一样在在专题页上投入这么大资源和精力。大部分厂商都是简单的制作,有点像内容管理系统布出来的。

OnePlus每次的专题页,相对而言,前端需要增加3-4倍左右的投入,设计师精力和之前相比大概提升2倍。

整个页面讲述逻辑:然后顺序是用户研究-页面框架-草图Demo-使用的工具。

用户研究阅读会稍微枯燥,以及保持逻辑的专注,不喜欢的可以跳过这部分。

 

先上连接,大家可以去体验下:

 

 

OnePlus 8 系列

用户研究和页面框架

实际上,我们将用户习惯分为四种类型,我们用颜色标记下的话,就是红色、黄色、蓝色、绿色;

为什么这么分类,能够从用户性格和购物行为上来进行区分,进而对页面结构有更科学的方式来指导设计。而从小白用户、发烧友用户 、极致性价比这种方式分类方式 ,并不适合直到页面的设计。

对于四种类型的用户,我们也进行了一定的访谈。

红色用户是最容易转化的用户,红色与蓝色是基数最大的用户;因此在我们需要在前三屏幕就得突出外观、性能与卖点、购买分期价格;这几个信息,覆盖了绝大多数人群最在意的信息。

在整个结构设计中,优先是红色用户群,其次是黄色和蓝色;

黄色用户,属于利落直接的用户,只要符合需求就买,虽然上面的访谈的描述用户是只在意iPhone,但更多的一加老用户也属于这一群人,同时很多没有iPhone的,类似华为用户也很大部分属于黄色用户,符合需求,直接就买,也不会去看那么多细的参数。

这就是为什么是这个结构的原因。

OnePlus一直想拓展蓝色以外的用户群体,因此,我们企图增加更多的感性因素。比如增加图库相册在专题页中,以外观打动红色用户;比如增加社会化评价因素以打动绿色用户(这一点可惜没有在一加8中融入进去)。

滚动研究的定律中,表明无论如何是无法躲开75%的用户注意力在前2-3屏,对于低质量页面,往往1.5屏就只剩下75%的访客了,必须要保证核心内容在前三屏幕的内容。

另外无论如何,都会25%的用户滚动到最后,这些用户往往都是蓝色用户和回访课为主的人群。

关于完整的滚动定律,可以看这篇文章:

滚动在哪里流失?

基于热力图总结的5个规律

另外,我们对首次开售、日常周期阶段进行了问卷调研,回收了数千份问卷,研究了官网用户群体的特征。比如下图是初次开售阶段的问卷问题之一。

基本上 ,我们的结论:

· 来官网的以90后、00后居多,

· 大多月均收入不足6000,

· 多数职业是学生和白领,

· 产品质量和售后是他们看中官网的原因,

· 其次现货、发货速度、购买简单、优惠额度、分期、用户反馈也是影响他们购买的因素。

 

其内容矩阵如同这个表格

由此,通过前面的研究,我们制作了如下框架结构。页面结构相比7和7系列,精简了很多,没有了二级子页面。

相对同行而言,我们页面结果经过了充分的分析,更加合理,交互效果也处于业内高水平。但是在设计画面和素材质量上,比大部分同行要差很多...

这样的页面,由于极少的和交互动作(没有点击行为),页面的跳出率会下降的很厉害。提出过如下方案。

用户的记忆点,交互行为>动画>人物图片>产品图片>文字,恰当的交互行为能够既增加仔细了解的访客点,能够有效提升流量效率。

Demo的设计

我们开始制作Demo的情况,是在没有情绪版、完整设计稿的情况下开始做的。这么不专业的情况... 很罕见。大家就当成我们最后一次制作OnePlus系列的专题页吧 。

开场以及前三屏

最最重要的是前三屏幕,这里是覆盖了75%的访客都会浏览。

先感受下图的白模版本。在素材都很缺失的情况下 ,当然都是拿假素材堆叠,比如图用7T Pro的,文案是自己瞎填。等制作完成,交付给视觉去完善后续以及对接供应商。

 
8和8Pro在开始三屏,除了开场视频,其他几乎一样。 

上稿我们在2019年11月中下旬完成,下图是2020年3月,设计稿和素材补全之后的版本。

屏幕部分

屏幕部分是我们最重要的卖点,但用难回。用我自身使用数月的经验来看,一加8系列的确非常惊艳和再也不想用其他手机。所以果断淘汰掉我的iPhone X,全面使用Andriod机器的顶级旗舰——OnePlus 8Pro;

实际上,2K+120Hz的确比90Hz要让人视觉更加惊艳,尤其是对色彩清晰度很敏感设计师,简直就是一眼就是见到女神的那种惊艳之感。

回归正题,既然难以表达,所以直接就是文字表达了....硕大的90HZ和120HZ。

下图依旧是设计稿,最终稿完成稿,大家线上去访问吧。

性能

还是依旧巨大的文字,和3D旋转 。

相机、设计、系统

OnePlus 8采用了一致的设计,镜头拉近,展示类似3D的效果。在设计上,8使用了很多的旋转。8Pro就是简单的图片展示。

导航

导航是最后改进的,为此还做了个简单的可用性测试。

工具

虽然不想讲,但还是提一下,毕竟工具也隐射了设计思路。

用户调研工具——Hotjar;

点击测试工具——Chalkmark;

白模和渲染 —— Keyshot;

 

视频素材制作和压缩——Adobe After Effects +Media Encoder ;

Demo制作工具——Principle+AE;

下图视频是Principle的Drivers,滚动控制每个素材进行变化。

 

总结

效果看起来依旧是非常炫酷,可能依旧是业内最用力做的。整个team都为此付出了巨大努力,从运营、到区域、到开发人员、视觉设计师、交互设计师、创意部门。

我们交互设计team,在中间扮演的是用户研究、内容框架、交互效果制作,以及动效处理。

反思一下的话。有非常多的不足之处。

· 我们的流程和信息传递链条比以往任何时候都要长,以至于我和我的team进行完成调研、框架、出完白模效果就抽身了;该给的方案和建议都给了,至于扯皮的事情你们自己去搞。

· 视觉设计和用研/交互设计,从来没有这么艰难的合作过,一是信息完全被屏蔽;二是传递到开发那的意见向左,摆出调研意见抵不过视觉设计师个人想法。

· 方案最终看起来,用研部分的结论没有做到位,社交部分(媒体、意见领袖)、更生活化的表达、服务和配件推荐、降跳出率的手法、没有用进去。

· 可以预见会更加拉高跳出率。2018年11月-2019年5月间,我们的跳出率访问时长曾经独领风骚。

· 效果并不统一,渲染图出现了两种质量。

· 交互效果上面,节奏感实现的不太好,比如放大、素材细节对位等等有小问题。


所以,要做好一个设计项目,需要:

· 专业的小团队做事情,参与的人一多 ,就不务实和非专业性意见的拖累。

· 信息沟通的流畅性和透明度。

· 抓到专业专业的人...



勾搭我们

Previous
Next

探索更多

性格色彩对产品的影响

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

一个趋于零的世界

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

粤ICP备20013807号 © co-ux.cn 2020- | 版权所有 | 本站由 WordPressAvada支持 | 隐私政策