OnePlus TV交互设计

2019年,一加发布第一款电视

一加电视项目背景说明

OnePlus TV 一加电视项目一直是保密项目,仅在印度发售。一加电视属于一加初次进入手机以外的领域,是IoT的首次尝试。该项目最终获得了内部项目金奖。

该项目是我经历过最苦逼的项目,属于紧急接盘兜底在该营销项目成立后,视觉设计师由毫无网页设计经验的印度设计师进行。

最终项目周期面临无法按期上线。接手后做了大量的视觉设计工作和素材加工工作。

虽然还有很多细节不到位,最终还是如期上线。查看访问OnePlus TV官网

干系人诉求

IoT团队:我们希望是能卖好,整个页面能够充分展现电视机的卖点。升降式音箱、量子点屏幕、杜比视效、运动补偿等等。

运营方:希望效果上要和7Pro一样。

印度团队:移动端效果、静态的亚马逊页面的效果。

品牌:我们使用新的设计风格,我们还在制作KV、我们负责CG渲染、负责拍摄素材,你们有需求就提交我们。

 

效果Demo预览

这是最终的完成效果,使用Principle制作并录制导出的视频,左边为PC端,右边为移动端。Principle工具介绍同时录制了一个简单的制作视频,挺业余的,查看优酷连接

信息框架

这种页面,信息框架程度不多,重点在于效果。

开场

开始考虑的方向

最开始,设计上采用的色调全部是黑色的,以更加突出沉浸感。后续因为老板希望使用白色调,于是7T和TV的全系列是浅色为主。

按新的KV调整了场景

按浅色调的风格,品牌部门给出了一个KV画面,我们做成了下面的效果。

最终效果

新成立的品牌形象部门,要求统一的KV画面,一再等他们确定最终的KV后,在做最后的调整。这已经是上线前2周,最后的效果如下。

绘制一个纯线框的客厅场景,镜头往前推进,由线框转为真实,最后音箱徐徐下降。下面是Demo稿和最终稿。

QLED量子屏幕的展示效果

下图是设计效果,企图用网格3D旋转,但是项目周期和资源无法支持(~~哭瞎的小项目)

在Demo中的实现,放弃3D,使用展开效果。

最后,使用供应商渲染的如下素材。在真实页面中,我们修掉了色彩边缘的过硬的线,加入了引线和图示。

音箱效果设计

草图中,企图使用3D+拆解展示渲染图的方式实现。

最终,既然没有素材... 那就线框简版。

其他设计过程没有太多介绍,印度官网查看TV就可以,还原度还相当可以。

开发过程的痛苦

 

素材部分

要什么没什么,整个项目组对此毫无概念。

没有UI界面素材,最后通过截图获取。

涉及到的ICON没有,最后要自己去Google TV上去找,由品牌公关的人去确定版权可用否。

界面展示的电影版权不确定,由TV项目组去找印度内容方确认。

渲染图一再推迟,并没有按流程在内部确认需求,老板还问怎么没有旋转效果。

产品介绍视频和CG视频最终没有产出来。

开发部分
整个开发的最后两周,我一直就是坐在前端旁边,细节一直调整不完,同时还得兼顾7T系列。前端一点一点的调整,同时还得兼顾素材加工部分。

其他

结果还是很好的,以下是IoT项目获得金奖时候的照片,作为平台代表参加进行了合影。

总结

从7Pro之后,我们在无法实现其同等的设计效果。只能保障基本实现和“设计技术”层面不出问题,其原因如下:

1、设计流程的变动:整站页面设计从CG渲染素材、拍摄素材、情绪版制作、设计风格定义、用研和交互设计、效果设计全部在平台设计团队内完成,当前转为CG渲染素材、拍摄素材、情绪版制作、设计风格定义全部由新成立的品牌部门制作,效果决策流程变的非常长,设计风格无法自主,交互和视觉设计师分离。

2、交互团队成为了执行最底层,交互团队负责了官网的用户研究、用户调研、管理站点的热力图滚动图这些工作。设计决策层面从参与到旁听到旁听资格都没有,一个页面结构的变化,需要转手4-6人的传递。

3、一加营销线整体由互联网导向转为营销导向,平台、用户体验、设计部门削弱,区域+电商拥有了最大决策权。

由此很容易理解,由设计师转为“设计技术”实现团队之后,我们依旧使用同样的交互技术和拥有一样的设计人员,却只能做出越来越土味的设计。

探索更多