【第1800期】利用过渡动效打造沉浸式的体验 —【Web篇】

前言

合适的动效会给用户很好的代入感。今日早读文章由@腾讯PPdesign授权分享。

PPDesign：隶属于腾讯互动娱乐发行线下的设计中心，负责为腾讯游戏平台体系和发行业务提供体验和服务设计。

正文从这开始～～

在Web页面中，流畅的过渡动效可以增加用户体验的舒适度，让用户认知过程更为自然，同时恰当的动效也能够引导用户关注重要的信息。在WeGame大屏模式需求场景中，笔者利用这个契机，在开发前期与视觉及动画设计同学沟通，设定好产品过渡动效及实现方式，给用户在体验中营造“沉浸式”氛围。

一．设计过渡动效的建议

想要设计好的页面过渡效果，可以考虑从这几方面着手：

动效的整体性及连贯性

设计过渡动效前需要先整体性的考虑页面框架及交互元素切换时的效果，如同级页面，子级页面、弹窗反馈，菜单的呼出效果。

动效的时间及缓动曲线

动效的时间：Google的Material Design中提到，如动画区域越大，相应的动画响应速度应该更快，由于笔者的需求场景为PC设备界面，因此将动画时长控制在0.3S左右。

动效曲线：自然缓动曲线会影响元素的速度同时可以让你的动画感觉更平滑。可以借助cubic-bezier动画工具设定你觉得合适的动画曲线。

二．过渡动效剖析

效果实现上，我们分为框架过渡效果及元素关联效果：

框架过渡效果

我们常用的框架动画效果有这么几种：渐变、滑动、翻转、缩放、覆盖等效果。

以上的效果可以单独呈现，也可以使用多种效果组合来呈现更为有趣的过渡效果。

我们可以在Web页面开发中快速使用 CSS3 Transition、Animation样式属性即可实现效果。并且我们可以定义可复用的Transition样式及Animaton样式文件，提供给其他项目Web页面使用。

元素关联效果

元素关联的过渡效果就像Keynote中的神奇移动效果，元素始终贯穿于页面前后的切换，能让用户能感知到元素内容的层级关系。元素关联效果无法复用于其他项目，需要根据视觉设计场景进行考虑。

三．实现方案

在Web端如需要落地到业务项目中如何实现并且需要考虑什么呢？Web端的页面与原生桌面程序相比，页面打开时，网络请求，资源下载，页面元素渲染过程都是浏览器必需要经过的步骤。因此Web页面上实现需保证：

原生Web应用实现

业界有像 ANIMSITION.JS 的工具库可以实现在点击触发跳转时先执行动画，同时监听动画播放结束后再进行跳转行为，但因为页面最终还是发生了跳转，因此页面还会产生闪动的感觉。

Vue 路由实现

Vue框架提供了在路由切换时可以使用标签添加路由页面的过渡效果。在开发前期可以规划好路由的结构范围，并定义切换的页面效果即可。

Vue实现的效果

四．体验优化

炫酷的过渡动画和特效带来更好用户体验的同时，也带来了高负荷的资源占用，如果不能采取有效手段，不仅达不到预期的效果，反而会影响用户的体验。

我们可以从以下两方面来优化动画的体验效果：

1、提升页面加载响应速度

页面进入后需加载数据，当数据加载较慢时，会打断过渡动效的平滑切换感，比如说页面加载本地数据及网络数据，就有非常显明的差异感对比；

那假如页面中需要加载网络数据，我们可以采取什么方式来优化或改善页面过渡动效呢？

可以从以下3个方向来解决：

• 减少网络加载数据时长，如页面直出、懒加载、本地缓存策略等技术方案进行尝试；

• 使用骨架屏代替内容进行过渡，在骨架屏过渡完成后在切换成真实的页面；

• 尽可能使用路由切换代替页面跳转，减少页面刷新；

在WeGame的大屏模式需求下，由于Web应用程序打包至本地，因此，我们可以在页面打开时省去了数据加载的时长；由于使用VUE技术栈进行开发，因此我们可以减少页面全局刷新，使用路由进行切换；经过实践我们发现VUE路由的过渡效果能大大满足页面的过渡切换效果；

2、优雅降级

影响Web动效性能的原因有两个：浏览器环境和运行设备；

浏览器环境

动效的呈现效果依赖用户的浏览器内核，浏览器内核越先进，可以实现的动效效果就越多越好。

运行设备

动效在运行时会占用很多的系统资源（CPU、GPU、内存等），当资源占用超过一定的阈值时，会出现卡顿、掉帧的现象，页面运行的设备配置越高，所受到的影响越小。

因此，当你考虑为你的产品添加过渡效果时，需要使用针对不同的设备和环境使用不同的动画解决方案，在高配的设备和环境中使用全动画，中配的设备和环境中使用部分重要动画，在低配的设备和环境中不使用动画，这也就是优雅降级方案。

对于浏览器环境

我们可以通过JS获取到浏览器内核的Navigator 信息，通过对不同的浏览器和版本，进行对应的动画处理；

对于运行设备

在兼容实验室中对不同的设备下进行动效效果测试，对测试结果进行分类总结，找到高、中、低的设备的最优动效效果，然后获取到用户的设备信息进行对比，根据对比结果来决定使用什么等级的动效。

• 运行在浏览器中：IE内核浏览器可以通过ActiveXObject插件来获取，但是对其他的浏览器就无能为力了，只能通过统一处理的方式来权衡动画了。

• 运行在其他客户端中：可以通过客户端获取设备信息，通过接口将信息传递给Web。

在WeGame大屏模式中，模糊背景的实现效果及背景动画均占用了较高的CPU。经过测试，我们与原生客户端同学沟通，返回用户设备硬件等级接口，争对硬件设备性能较低的用户屏蔽动画以保证UI的流畅性。

五．结语

其实过渡动效不止于滑动、缩放、位移等效果的应用，也可以结合SVG的形状变形动画、视频等进行页面过渡，具体使用什么方案还是要取决于产品的形态和需求。

关于本文 作者：@P&Pdesign 原文：https://mp.weixin.qq.com/s/bTWajT3UIm_pGSiDPoyK0A

为你推荐