OnePlus8 网页交互设计
至此，我们从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的，文案是自己瞎填。等制作完成，交付给视觉去完善后续以及对接供应商。
上稿我们在2019年11月中下旬完成，下图是2020年3月，设计稿和素材补全之后的版本。
屏幕部分
屏幕部分是我们最重要的卖点，但用难回。用我自身使用数月的经验来看，一加8系列的确非常惊艳和再也不想用其他手机。所以果断淘汰掉我的iPhone X，全面使用Andriod机器的顶级旗舰——OnePlus 8Pro；
实际上，2K+120Hz的确比90Hz要让人视觉更加惊艳，尤其是对色彩清晰度很敏感设计师，简直就是一眼就是见到女神的那种惊艳之感。
回归正题，既然难以表达，所以直接就是文字表达了….硕大的90HZ和120HZ。
下图依旧是设计稿，最终稿完成稿，大家线上去访问吧。
性能
还是依旧巨大的文字，和3D旋转 。
相机、设计、系统
OnePlus 8采用了一致的设计，镜头拉近，展示类似3D的效果。在设计上，8使用了很多的旋转。8Pro就是简单的图片展示。
导航
导航是最后改进的，为此还做了个简单的可用性测试。
artifact
虽然不想讲，但还是提一下，毕竟工具也隐射了设计思路。
用户调研工具——Hotjar；
Click on the test tool - Chalkmark.
White mold and rendering -- Keyshot;
视频素材制作和压缩——Adobe After Effects +Media Encoder ；
Demo制作工具——Principle+AE；
下图视频是Principle的Drivers，滚动控制每个素材进行变化。
总结
效果看起来依旧是非常炫酷，可能依旧是业内最用力做的。整个team都为此付出了巨大努力，从运营、到区域、到开发人员、视觉设计师、交互设计师、创意部门。
我们交互设计team，在中间扮演的是用户研究、内容框架、交互效果制作，以及动效处理。
反思一下的话。有非常多的不足之处。
· 我们的流程和信息传递链条比以往任何时候都要长，以至于我和我的team进行完成调研、框架、出完白模效果就抽身了；该给的方案和建议都给了，至于扯皮的事情你们自己去搞。
· 视觉设计和用研/交互设计，从来没有这么艰难的合作过，一是信息完全被屏蔽；二是传递到开发那的意见向左，摆出调研意见抵不过视觉设计师个人想法。
· 方案最终看起来，用研部分的结论没有做到位，社交部分（媒体、意见领袖）、更生活化的表达、服务和配件推荐、降跳出率的手法、没有用进去。
· 可以预见会更加拉高跳出率。2018年11月-2019年5月间，我们的跳出率访问时长曾经独领风骚。
· 效果并不统一，渲染图出现了两种质量。
· 交互效果上面，节奏感实现的不太好，比如放大、素材细节对位等等有小问题。
所以，要做好一个设计项目，需要：
· 专业的小团队做事情，参与的人一多 ，就不务实和非专业性意见的拖累。
· 信息沟通的流畅性和透明度。
· 抓到专业专业的人…
勾搭我们
English 
Chinese