【案例】体感桌面轮盘动画的设计和实现

项目背景

搭载于安卓体感机顶盒，在常规安卓TV桌面的基础上增加一套的体感桌面，提供新交互的彩蛋体验。

业务逻辑

1. 抬起右手，唤起体感桌面；

2. 通过手势选择和翻页；

3. 放下手3秒后退出体感桌面。

初选方案：

这一版主要缺点是与当前桌面功能并行，相当于是桌面2.0，，不适合传达“别有洞天”的世界观。

第二版低保真交互稿

重新思考这个场景，其实应该用一种“玩”的心态来做，格局可以更简单，甚至可以直接不要导航栏，只保留一个选择app的功能，可以尝试一下不那么像阳间的感觉。

用户抬手进入时，使用推拉壁纸的桌面转场：

手部失去锁定，item呈现浮游状态，3秒后退出。重新锁定时item迅速恢复原状，增添互动的趣味。

由于整个交互过程都是动态的，大致在sketch排好布局之后，剩余的设计工作，就是直接在Protopie做原型了！

唤起：

壁纸使用推拉式，衔接2个模式，item弹起制作视差效果，增强层级。目前壁纸比较偏文艺，色调上需要再找找方向

焦点：

焦点排斥效果

翻页：

翻页用protopie暂时只能做这种非圆环形式的效果，以直线路径运动

全局演示效果：

替换了更有科技感的壁纸

整个场景设计过程推进得很顺利，但圆环翻页动画似乎还可以再研究一下。是否需要再尝试一下圆环动画？和开发探讨了一下两种方案的实现逻辑和细节：

都有一些未确认的技术难点，但比较下来圆环的可实现性可能更高

用AE制作第二种圆环动画：

动画模型交付输出

右下角的体感提示小动画可以用Lottie交付，但翻页、焦点、唤起的动画还是需要在终端手写，为了统一语言，期间于开发小哥进行了缓动函数、模型结构的沟通。输出动效开发文档如下：

圆盘模型

桌面唤起动画模型

体感状态提示说明

Thinking……

Next is the best，多个方案的探索，客观上可以更充分地挖掘产品需求；

为了让开发理解动效模型，在输出demo的同时，也进行了模型可视化设计，将元素拆解、时间轴、缓动函数用通俗易懂的方式呈现，良好的内部文件也能提升团队沟通质量。

Thanks for watching！