Motion 动效

概述

静态元素传递信息,动效则在其之上增强信息的传递与感知,赋予更多的功能。动效在中后台系统中往往被忽视,但好的动效可以帮助用户理解界面、明确逻辑、提升效率。TDesign 动效系统的搭建延续了 TDesign 包容、多元、进化、连接的价值观,在满足中后台场景高效的使用需求下,根据不同元素、不同设备、不同类型的运动制定了动态适应的运动系统,用户可在不同条件下感知统一的品牌体验。

原则

TDesign 动效系统的搭建延续了 TDesign 包容、多元、进化、连接的价值观,并将其延展为动效三个原则「理解、聚焦、共情」。

理解

动效第一原则是辅助用户理解内容,完成操作。生硬的闪现总是让人不明所以,元素将带有生命性的动作融入界面,不会产生反人类感知运动。运动的动线引导用户视觉焦点的转移,为原本生硬的元素转场补间。

聚焦

动态内容总是更容易比静态内容吸引用户注意力,将重点信息动态化呈现,既可以自然地表现元素运动始末轨迹,又可以引导用户注意焦点。

共情

动态的演绎更贴合人类对生命的感知,动效将静态元素连贯叙事演绎,还可以在界面上表达出情绪,不论是跳动的通知还是优雅的下拉,元素都可以与用户产生共情,拉近人与操作界面的距离,更有代入感,符合自然世界认知一致性。


这一切的目标回归到「增强感知」的设计原点。在静态元素之外的助推手。

衡量动效意义

中后台系统动效的添加不是全加,感知不是须知。适量的动效可以增强用户感知,过量的动效造成负担和干扰。我们建立了 动效自查表 方便自查,在为界面添加动效时可供检查是否合理并符合渲染性能。

运动模式

TDesign 动效的运动模式将一切会动的元素划分为微观与宏观两种。元素的微动效和组件宏观的运动由点及面地组成一个运动的世界。

定义

微观内容往往是组件或元素本身微小交互,一般是 icon 或组件内部的动效,如警告、点赞、删除等 icon 动效,或是 Checkbox 勾选、按钮点击状态、输入框抖动等组件动效,他们都是通过运动加强含义的表达。

在此之外都属于宏观内容。它是组件层面及以上的运动。我们将宏观运动归类为三大运动模式:「轴运动、容器转换、淡入淡出」。

如何选定运动模式

运动模式的选择由元素的空间关系或与其他元素的联系性决定。

  • 轴运动 当有空间关系触发时
  • 容器转换 有共享内容时
  • 淡入淡出 前后无逻辑递进性,关联性不大。

轴运动

轴运动用来表现具有空间关系元素的过渡,用来增强元素在空间上的指向性以及起终点关联性。包含三个轴向上的位移、缩放、透明度。

轴运动的方向取决于元素与元素间的空间关系。首先可以作为页面类切换的运动,X 轴多用于具有横向关系的 Tab 切换,Y 轴多用于具有纵向关系的 Tab 切换,Z 轴多用于具有上下层级关系的切换;其次还可用于增强元素与元素或元素与屏幕空间关系的暗示,XY 轴向运动具体根据关联性决定,Z 轴运动多用于弹窗、气泡通知、对话框等。

容器转换

容器转换用来表现具有共用容器时的过渡,通过顺滑衔接的形变来增强元素过渡前后的关联性。

容器转换的共用容器不一定过渡前后是完全形似的,可能出现过渡后为其子级或关系递进的内容,此时视原元素形变是否保持原状及位置关联,若演变为新元素使用容器转换模式,若保持原状原位请参考轴运动模式。

淡入淡出

淡入淡出用来表现元素运动前后缺乏空间、容器关系时作为个体的过渡,通过渐变来提供操作后的关联性反馈,减少观看的生硬感,与无关联性的静态元素作区分。

运动时长

为了平衡不同设备观看距离下的感知差异,TDesign 出于包容的价值观,建议在台式设备和移动设备上区分两套时长以提供一致的感官体验。

根据桌面端和移动端的目视范围,保持统一的知觉恒常性,移动端对比桌面端动画效果需要缩短时效性,目视距离越近则运动感知越强。视力持续时间约为100ms,结合移动端的屏幕尺寸大小特性,从100ms开始计算。桌面端结合目视距离影响,对比移动端接近1倍数的差值,可适当增加动画时长效果,从200ms开始计算。由此可以定义桌面端的峰值时长与移动端峰值时长关系:

桌面端(Laptop和Desktop)= 移动端(Mobile和Pad)× 2

固定时值

针对桌面端( Laptop 和 Desktop )200~600ms 是合适的元素运动时长;针对移动端( Mobile 和 Pad )100~400ms 是合适的元素运动时长。

研究和调研表明,100ms的动画时长是基础认知的开始,低于100ms用户是无法感知运动实效性的,而1000ms则到达用户感知的极限。我们划定了几类观感的运动时长区间。划分的区间遵循等比例增加的规则,符合自然界运动的规律,增加节奏感,类似音乐的时值。

对应不同元素尺寸与适合的运动观感,我们设定了最基本的动效时长 token 。

TokenUsageValue
@duration-mobile-base微观变换和淡入淡出变化100ms
@duration-mobile-moderate折叠面板、弹出框、消息120ms
@duration-mobile-slow选择器、下拉菜单、抽屉、选项卡、弹出层140ms
@duration-desktop-base微观变换和淡入淡出变化200ms
@duration-desktop-moderate锚点、选项卡、下拉菜单、列表click、树240ms
@duration-desktop-slow抽屉、消息通知、全局提示280ms

动态时值

只有针对元素尺寸及运动距离计算当前元素的时长,才是最适合该元素的运动观感。所以我们为不同尺寸的元素运动都设定了时长计算器。

缓动曲线

TDesign 的基础缓动函数都为Cubic,仅卡通插图等非UI元素下使用 Elastic 弹性缓动曲线。对于运动中含有的快速 fading 渐变使用 Linear 线性函数。

TokenUsageCSS Value
@standard easing元素在画面内运动cubic-bezier(.38,0,.24,1)
@ease out元素入画cubic-bezier(0,0,.15,1)
@ease in元素出画cubic-bezier(0.82,0,1,.9)
@linear与其他运动同时进行的渐变N/A

品牌语言的融入

TDesign 置入腾讯的前瞻与科技感的驱动力特征,将前进感与速度感表达在动效中,缓动函数的运动态势体现了速度感,前进感由品牌特色的斜 8 度动画体现。设计师提炼腾讯品牌的斜 8 度特征,将其运用在鼠标点击触发时的动画反馈,在不影响中后台组件功能性的情况下,生动地带入品牌感知,塑造一体化的品牌体验。

运动编排

运动物体的顺序性暗示了元素之间的组织关系,大量同时进行的动画会对信息获取产生干扰,良好的编排可以将元素的运动时序展现出来,表达界面的秩序与逻辑。

路径秩序化

如在容器转换中,内容分为延续性与非延续性。延续性内容的运动路径需要体现平稳的观感,使其符合自然世界物体运动需要克服重力的特征。

XY双轴变化运动

双轴变化运动请不要使用直线行进,而要使用曲线行进。为了克服重力,y轴变化往往以平缓的角度开始加速,以较陡的角度结束运动。

XY单轴变化运动

非卡通类单轴运动请不要使用elastic动画或增加运动轴向。

XY双轴组合运动

九宫格类元素排序时,元素以直线路径补位运动,且层次满足真实整理排列顺序感,不以出画再入画的方式运动

减少不必要的编排

在页面加载的过程中,我们提供骨架屏组件(开发中)来表示加载,我们处于中后台场景的特性,不建议在页面第一次载入时使用顺序动画来表示内容的顺序性,而是直接将页面呈现,或给予淡入淡出动画,以减少页面加载的时长和过多运动带来的注意力分散。

动效自查表

为界面添加动效时,请参考本表对动效必要性作出自查筛选,保证动效合理性与必要性,符合 TDesign 价值观。

我的动效对于界面的意义是?
动效解决了什么问题?是否符合一个或多个价值目标?
是否降低了用户理解成本?
是否未造成系统的熵增?
我的动效能够被明确感知吗?
是否属于微观或宏观中的一类?
是否符合各端基本时长区间?
是否在各端上都可以被察觉?时长或曲线搭配我的元素尺寸若感知不明确,请加强
我的动效优雅而平凡吗?
是否选用了适当的缓动曲线?
我的动效平凡吗?B端场景如果出现过于吸睛的动效,请考虑削弱
我的动效是否过度编排?
如果删除动效是否能静态地传递必要信息?