美文网首页
【案例】体感桌面轮盘动画的设计和实现

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

作者: Storm_s_end | 来源:发表于2020-08-17 13:48 被阅读0次

项目背景

搭载于安卓体感机顶盒,在常规安卓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!

相关文章

网友评论

      本文标题:【案例】体感桌面轮盘动画的设计和实现

      本文链接:https://www.haomeiwen.com/subject/iefsrktx.html