联系信息
ShenZhen
Colin.w@aliyun.com
Ph: 18688414288

OnePlus TV交互设计

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

一加电视项目背景说明

OnePlus TV 是2019年在印度发布的首款Iot产品。第一次进入手机以外的领域,因此整个团队属于初次磨合,经历了非常多的挑战。最终获得了内部项目金奖。

挑战包括:如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项目获得金奖时候的照片

探索更多

本网站针对PC端设计,移动端请不要访问

zh_CNChinese