
OnePlus TV交互设计
2019年,一加发布第一款电视
一加电视项目背景说明
OnePlus TV 是2019年在印度发布的首款Iot产品。第一次进入手机以外的领域,因此整个团队属于初次磨合,经历了非常多的挑战。最终获得了内部项目金奖。
挑战包括:如Iot项目组没有素材,要临时去截屏,没有完整的功能清单和说明,需要现场去体验然后进行内容结构设计;如视频介绍拍摄的经验太少产出没有通过内部审核,最终无视频素材;如只有一个兼职印度视觉设计师产出一半甩手了。
最后时间非常紧张,每天坐在前端旁边,边做效果边开发。虽然还有很多细节不到位,最终还是如期上线。查看访问OnePlus TV官网
干系人诉求
IoT团队:我们希望是能卖好,整个页面能够充分展现电视机的卖点。升降式音箱、量子点屏幕、杜比视效、运动补偿等等。
运营方:希望效果上要和7Pro一样。
印度团队:移动端效果、静态的亚马逊页面的效果。
品牌:我们使用新的设计风格,我们还在制作KV、我们负责CG渲染、负责拍摄素材,你们有需求就提交我们。
效果Demo预览
这是最终的完成效果,使用Principle制作并录制导出的视频,左边为PC端,右边为移动端。Principle工具介绍The同时录制了一个简单的制作视频,挺业余的,查看优酷连接The
信息框架
这种页面,信息框架程度不多,重点在于效果。



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

按新的KV调整了场景
按浅色调的风格,品牌部门给出了一个KV画面,我们做成了下面的效果。
最终效果
新成立的品牌形象部门,要求统一的KV画面,一再等他们确定最终的KV后,在做最后的调整。这已经是上线前2周,最后的效果如下。
绘制一个纯线框的客厅场景,镜头往前推进,由线框转为真实,最后音箱徐徐下降。下面是Demo稿和最终稿。
QLED量子屏幕的展示效果
下图是设计效果,企图用网格3D旋转,但是项目周期和资源无法支持(哭瞎的小项目~~)

在Demo中的实现,放弃3D,使用展开效果。
最后,使用供应商渲染的如下素材。在真实页面中,我们修掉了色彩边缘的过硬的线,加入了引线和图示。
开发过程的挑战
素材部分
要什么没什么,整个项目组对此毫无概念。
没有UI界面素材,最后通过截图获取。
涉及到的ICON没有,最后要自己去Google TV上去找,由品牌公关的人去确定版权可用否。
界面展示的电影版权不确定,由TV项目组去找印度内容方确认。
渲染图一再推迟,并没有按流程在内部确认需求,老板还问怎么没有旋转效果。
产品介绍视频和CG视频最终没有产出来。
开发部分
其他
结果还是很好的,以下是IoT项目获得金奖时候的照片
