项目背景
搭载于安卓体感机顶盒,在常规安卓TV桌面的基础上增加一套的体感桌面,提供新交互的彩蛋体验。
![](https://img.haomeiwen.com/i169153/dc7de9f4a42700bf.png)
业务逻辑
1. 抬起右手,唤起体感桌面;
2. 通过手势选择和翻页;
3. 放下手3秒后退出体感桌面。
初选方案:
![](https://img.haomeiwen.com/i169153/f5cfd3641cfa10d9.png)
这一版主要缺点是与当前桌面功能并行,相当于是桌面2.0,,不适合传达“别有洞天”的世界观。
第二版低保真交互稿
重新思考这个场景,其实应该用一种“玩”的心态来做,格局可以更简单,甚至可以直接不要导航栏,只保留一个选择app的功能,可以尝试一下不那么像阳间的感觉。
![](https://img.haomeiwen.com/i169153/3717f7d824fc99b9.png)
用户抬手进入时,使用推拉壁纸的桌面转场:
![](https://img.haomeiwen.com/i169153/6c954815126b7820.gif)
手部失去锁定,item呈现浮游状态,3秒后退出。重新锁定时item迅速恢复原状,增添互动的趣味。
![](https://img.haomeiwen.com/i169153/64b1928ebecb0d4f.gif)
由于整个交互过程都是动态的,大致在sketch排好布局之后,剩余的设计工作,就是直接在Protopie做原型了!
唤起:
![](https://img.haomeiwen.com/i169153/6fc18d55d154f543.gif)
焦点:
![](https://img.haomeiwen.com/i169153/0a9a869b09c9d63f.gif)
翻页:
![](https://img.haomeiwen.com/i169153/adfc9278873b2314.gif)
全局演示效果:
![](https://img.haomeiwen.com/i169153/c51b3d069a1a3e08.gif)
整个场景设计过程推进得很顺利,但圆环翻页动画似乎还可以再研究一下。是否需要再尝试一下圆环动画?和开发探讨了一下两种方案的实现逻辑和细节:
![](https://img.haomeiwen.com/i169153/a540b1ae03b806cb.png)
用AE制作第二种圆环动画:
![](https://img.haomeiwen.com/i169153/2620200d1dde46fe.gif)
动画模型交付输出
右下角的体感提示小动画可以用Lottie交付,但翻页、焦点、唤起的动画还是需要在终端手写,为了统一语言,期间于开发小哥进行了缓动函数、模型结构的沟通。输出动效开发文档如下:
![](https://img.haomeiwen.com/i169153/06f604163a84f3de.png)
![](https://img.haomeiwen.com/i169153/1e19994de0c53263.png)
![](https://img.haomeiwen.com/i169153/afee8ef7082270b6.png)
Thinking……
Next is the best,多个方案的探索,客观上可以更充分地挖掘产品需求;
为了让开发理解动效模型,在输出demo的同时,也进行了模型可视化设计,将元素拆解、时间轴、缓动函数用通俗易懂的方式呈现,良好的内部文件也能提升团队沟通质量。
网友评论