基于人因的用户体验设计课
刘石
前华为用户体验设计系统部部长,新中国成立 70 周年用户体验设计 70 人之一
7027 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 34 讲
开篇词 (1讲)
基于人因的用户体验设计课
15
15
1.0x
00:00/00:00
登录|注册

20|基于人因的动效设计:动效背后的物理认知

你好,我是 Rocky。
从今天开始,我们开始进入高级篇的课程了。这节课我们先来谈谈动效设计。
首先我们来看下迪士尼动画制作的 12 个基本原则。下图里的这 12 原则让卡通形象用夸张手法遵循物理学基本定律,并在此基础上去呈现角色的情感表达和魅力。这 12 个基本原则特别经典,几乎被所有卡通动画制作借鉴,被称为动画圣经。至今仍然有非常多的原则,可以直接沿用到动效设计中。
当然我们今天重点聊的不是动画制作,而是动效。动效是用来表达界面元素在交互事件下的行为关系的运动手法。
和交互有关的动效分为两类,第一类是实时性动效(也就是跟手动效),第二类是非实时动效(也就是交互完成才开始播放的动效)。动效有三点好处:
更清晰地体现内容元素之间的逻辑和层级关系;
提供当前的状态反馈,加强用户对操作行为的感知,给用户以可控的感觉;
通过动效设计可以辅助视觉元素更好地传达产品品牌理念。
我接下来分别从人的维度和自然物理世界的维度,分别和你聊聊动效设计。

人的维度

动效的表象是用视觉表现手法填充时间。那么首先需要回答的问题就是:多长时间的动效设计是合理的呢?

人对动效时间的感知

动效分为实时动效和非实时动效。这两种动效对时间的要求不同。
我们在09中聊过可见并能对我们产生影响的视觉刺激最短时长是 5ms,对应的帧率是 200 帧。所以跟手的实时动效只有快到低于 5ms,人才感觉不到延迟。如果要谈实时动效,那么时延比时长更有意义。下图是不同时延的视觉感受,如果你仔细观察,其实 10ms 的时延你还是可以感知出来的。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

动效设计是一门高级课程,涉及物理认知,不仅仅是动画制作,更是表达界面元素在交互事件下的运动手法。本文从人的维度和自然物理世界的维度,探讨了动效设计的原则和技巧。在人的维度中,重点讨论了动效时间的合理性、视觉深度感和动效对注意力的吸引。在物理世界隐喻的维度中,对经典力学的模拟和材质的理解是关键要点。文章通过详细的分析和举例,为读者提供了深入的动效设计知识,使其能够更好地理解动效设计的原理和应用。 文章首先介绍了缓动的概念,强调了缓动比匀速更为符合自然规律,需要根据实际情况选择加速、减速和加减速并存的动效。接着讨论了惯性运动,指出在列表的滚动过程中,惯性作用需要考虑滑动速度和停止时间的关系。此外,文章还提到了挤压和变形的应用,以及抛物线运动在动效设计中的例子。最后,强调了动效设计需要统一的动效语言,不宜混搭和滥用。 总的来说,本文通过对动效设计的多个方面进行深入探讨,为读者提供了全面的动效设计知识,涵盖了从人的认知维度到物理世界隐喻的多个方面,使读者能够全面理解动效设计的原理和应用。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《基于人因的用户体验设计课》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(2)

  • 最新
  • 精选
  • 赖静
    老师,时间差开始计算的时间点怎么定义?比如实时是手指开始移动时开始,非实时动效是手指离开后开始计算吗,那如果非实时手指离开后需要加载呢,是加载完成后开始计算吗?

    作者回复: 实时动效,是触屏动作开始的那一刻。如果是轻触,就是触碰的那一刻。如果是滑动,就是手指开始在屏幕上移动的那一刻。如果更好的实现这一点,技术上应该有对触屏意图的预判。

    2021-06-18
    2
  • PDTon
    Mac任务栏有类似(滑动变焦)的动效 鼠标滑过任务栏时,当前的图标尺寸为最大,相邻的按距离减少,近大远小
    2021-11-02
收起评论
显示
设置
留言
2
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部