设计的物理定律的动力响应

动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的。

文章目录[隐藏]

动效设计的物理法则

动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的。

首先来一发大师金句,迪士尼动画大师格里穆·乃特维克曾经说过:

动效设计的物理法则

动画制作和动效设计是本质相通的,我们需要为用户建立一种“视觉的真实”,即动作是可信的,我们需要获得的不是照搬线下场景的写实主义,而是“可信度”,要让用户感知到这个动作是成立的。这里,就要搬出高大上的物理学了!

物理学四大基本力——万有引力、电磁相互作用力、弱相互作用力、强相互作用力,我们在现实生活中能够感知到的基本上都源自万有引力(其他三种力咱也分析不出来啥)。换句话说,用户在现实生活中建立的动作经验,皆源于物体的“重量感”。要分析万有引力,就得翻出牛顿大大的课本章节了。

动效设计的物理法则

(一)牛顿第一定律

根据牛顿第一定律——惯性定律,任何物体都要保持匀速直线运动或静止状态,直到外力迫使它改变运动状态为止,说白了,就是不考虑任何力的作用的物体运动,其速度大小和方向是没有任何变化的,用公式表示: 动效设计的物理法则

 

通过以上公式我们可以绘制出匀速直线运动的位移-时间曲线:

动效设计的物理法则

应用到网页设计中,为了实现过渡效果,我们必须模拟出页面区块的位移-时间曲线,对于运动拆解分析得到的分段曲线,可以运用计算机图形图像造型的基本工具——贝塞尔曲线绘制出来,调用CSS3 animation-timing-function 属性中的贝塞尔曲线绘制函数cubic-bezier可以轻松的用程序模拟运动轨迹。

动效设计的物理法则

例如上图所示的贝塞尔曲线可以用四个点来定义,其中P0、P3是固定的点,它们的坐标值是默认的[0,0],[1,1]。P1、P2两点则用来控制曲线的形状和曲率,PS中的钢笔工具的锚点具有相同功能,这两个控制点的坐标值是需要我们通过cubic-bezier(x1, y1, x2, y2)自定义的,范围在[0, 1]。 对于匀速直线运动,将运动时间设置为1s,通过cubic-bezier模拟运动如下:

动效设计的物理法则

 

linear 动画从头到尾的速度是相同的。应用到网页的banner区域切换动效中的效果(动图需加载): 动效设计的物理法则

感觉不是很自然,由于空气阻力的存在,程序模拟的匀速直线运动在现实生活中是很难实现的,因此对于这样一个用户平时很少感知到的运动是很难建立信任感的。这样的匀速直线运动也是我们在进行动效设计时需要极力避免的。考虑到需要分析物体运动的受力情况,我们借助牛顿第二定律来拆解运动。

(二)牛顿第二定律

根据牛顿第二定律——物体加速度的大小跟作用力成正比,跟物体的质量成反比,加速度的方向跟作用力的方向相同。当物体持续受到一个不变的力的作用时,它将做匀加速直线运动,用公式表示:

动效设计的物理法则

 

绘制出匀加速直线运动的位移-时间曲线: 动效设计的物理法则

通过cubic-bezier模拟运动如下:

动效设计的物理法则

ease-in 动画从低速开始,逐渐加速,收尾态速度最快。应用效果: 动效设计的物理法则

开始状态符合静止物体开始运动的物理规律,但是收尾态不太符合,物体在结束运动之前速度是整个运动过程中最快的,这是不合逻辑的。 如果我们让收尾状态符合物理法则,那么就是需要让物体减速下来,匀减速运动的公式如下:

动效设计的物理法则

 

绘制出匀加速直线运动的位移-时间曲线: 动效设计的物理法则

 

通过cubic-bezier模拟运动如下:

动效设计的物理法则

 

ease-out 动画从高速开始,以低速结束。应用效果: 动效设计的物理法则

模拟的是物体收到一个持续时间很短的推力作用后自然滑行并慢慢停止的过程。在本应用场景使用这种效果是比较合适的,banner图片刚开始切换运动时,需要用一个比较快的速度来吸引用户的注意力“嗨!这儿有新的信息!”,在快要抵达最终位置的时候,需要逐渐慢下来,因为此时用户已经将注意力转移到新的banner图上了,用户需要的是这一区块逐渐慢下来好看清楚上面的内容,获取信息。

如果想要让banner图片在起始阶段也是柔和地出现,可以缓入缓出一起使用,位移-时间曲线: 动效设计的物理法则

通过cubic-bezier模拟运动如下:

动效设计的物理法则

 

ease-in-out 动画从低速开始,以低速结束。应用效果: 动效设计的物理法则

切换效果非常的柔和,也就是我们常说的“缓入缓出”。

(三)赋予材质——速度、形变和反馈

好的动效在满足了基本的物理原则之后还有很多“材质”上的细节补充,主要有速度、形变和反馈这三个方面。 如果我们想要给上面的案例加上一点重量感,也就是让物体看上去“有质量”,可以再速度上做一点文章,调节一下运动曲线; 动效设计的物理法则通过cubic-bezier模拟运动:

动效设计的物理法则

 

ease动画从低速开始,动画以低速开始,然后加快,在结束前变慢。应用效果: 动效设计的物理法则

我们可以用这种开始态和结束态绝对值不等的加速度让运动产生“粘滞感”,可以让运动的区块产生更加真实的互动效果。但是另一方面,不对等的加速和减速过程有可能会让动效产生拖泥带水、不干脆的感觉,具体应用还是要具体情况具体分析。

做到对物体运动过程的拆解分析再程序模拟之后,我们还可以对运动物体的形状上花一些小心思,通过物体形变和运动的反馈效果可以为物体赋予“材质”,来看几个不错的Web动效案例。

动效设计的物理法则

采用ease-out的参数设置,使得所有元素迅速进入用户视线,又缓慢到达目标位置,动画流畅自然。

动效设计的物理法则

通过不同区块速度差来实现拉伸页面的效果,但是仔细看每一个区块的运动,发现实际上是没有形变的,巧妙的速度变化也可以让整个页面的切换变得生动起来。

动效设计的物理法则

通过形变的设置,使得不同高度的柱状图形变会显得很有弹性,仔细看该网页表现的都是“Top”的数据,为柱状图赋予弹性效果也是非常符合其所表现的数据“情绪”的,整个页面都会显得趣味生动。

动效设计的物理法则

通过下拉框的反弹效果现实区块的“窗帘”设计,运动反馈也可以为网页元素赋予材质。

本文主要分析的案例集中在网页动效当中运用最广泛的线性运动,对于基本动效的其他动作,如缩放、旋转、不透明度等等效果的变化,其本质上是相通的,结合物理法则的分析实践均可以做出自然流畅的效果, 总结一下应用流程: 1. 分析具体内容区块的运动,结合需求本身绘制出区块运动的运动数值-运动时间曲线。 2. 拆解曲线,运用贝塞尔曲线模拟运动。 3. 通过速度调整、材质形状变化和运动反馈来为区块赋予动效丰富的细节。

来源:阿里巴巴体验中心

动效设计的物理法则

设计的物理定律的动力响应

绝迹

90后,交互设计师,想用户不能想,做用户不能做。

新浪微博 Email

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/2272/

(0)
TinadminTinadmin
上一篇 2014-12-27 01:24
下一篇 2014-12-27 20:09

相关推荐

  • iOS 9人机界面指南(一):UI设计基础

    译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。

    2017-06-02
  • 基于用户体验的污泥脱水干化解决方案

    点击上方蓝字关注“公众号”题  目:基于用户体验的污泥脱水干化解决方案报告人:上海复洁环保科技股份有限公司  许太明  总经理第一部分:背景与缘起各位领导、各位专家、各位同行,中午好。我给大家做的报告是基于用户体验的污泥脱水干化解决方案。作为我们公司来说,主要的产品是低温真空脱水干化成套技术,所以我从这个技术本身给大家分享一下应用性能与效益的评价。主要分三部分,一个是背景与缘起,第二是用户体验与详情,第三个是总结与展望。污泥脱水干化设备...

    2018-04-30
  • 接下来炎热的8月,这3个设计趋势会更加流行

    趋势大多是这样,兴衰随着时间的推移快速的变化。

    2017-06-05
  • 产品细节中的情感化

    今天分享一篇 视觉设计的文章{产品细节中的情感化设计}说的情感,我们每个人都有,什么爱情、亲情、友情…..等等!但是什么是情感化设计呢?一句话:就是你的设计是否能给用户带来惊喜,温暖…等等!下面让我们一起…

    2015-01-25
  • 怎么设计出好的用户体验

    今天跟大家分享的这话题是大家在做产品的过程中可能谈的最多的话题,我一定要有好的产品的体验。首先大家要明白什么叫好的用户的体验,这个一定要有一个定位,所谓的这个用户是真实的使用用户还是你自己。有的时候我们把这个用户简单定义为产品经理或者公司的ceo,或者是公司的负责人。但首先要问一下,你是不是最终的用户,如果只是满足你个人的想法,那这上面会有很多的问题,所以一定要满足真实用户的体验。基于这样的前提下我们再考虑什么叫好的用户体验。我觉得好的...

    2018-02-19
  • 为用户操心!如何用预期式设计保持用户体验简单易行?

    现如今,用户大多深陷于碎片化的时间和过量的信息,所以用户更加青睐简约而现代的网页设计。“少即是多”是这类网站的设计哲学,少而精准的内容设计方式和内容策略让访客从沉重的信息压力中解放出来。 虽然做减法的方…

    2015-11-19
  • 华为朱平:用大服务把用户体验引向极致

    4月12日,华为新旗舰手机P20系列发布,同时还发布了保时捷设计Mate RS,以及多款产品。2018年,是手机市场艰难的一年,4G换机和消费升级带来的市场红利正在逐渐失去,5G尚未到来,市场进入一个相对低潮期。这样一个情况下,众多手机厂商面临了较大的市场压力。在这样困难的市场环境下,华为怎么巩固自己的市场地位,甚至扩大市场?华为一惯的态度就是用产品说话,用大大领先对手的产品来证明自己。其实我关心的是,华为P20
    Pro这样的产品,已...

    2018-04-21
  • 关于Android和IOS交互上那些事

    先说Android平台,自从material design面世以来,市场上很多Android app在设计上参差不齐。可能由于设备及用户使用习惯等各种原因,大多数app都还在以Android 4.0的规范在做设计,当然也有很多app为了省事,直接从iOS上照搬过来。因此,真正以MD为设计基础的应用并不多。下面是一些整体的框架记录,更为详细的交互细节以后再说。

    2017-06-03
  • 设计一个快速提升用户体验度的网站架构

    点击上方“公众号”可以订阅哦渔哥服务☆ 网站建设:网站结构、网站功能、关键字策划、网站SEO、设计与开发。☆ 整合营销:品牌形象文案策划、产品销售概念策划、产品销售文案策划。☆ SEO优化:SEO排名优化、论坛营销、口碑营销、公关活动等病毒传播。☆ 托管服务:市场分析、受众分析、品牌与产品分析、全网整合营销推广。☆ 微信运营:微信公众号开发、朋友圈广告、微信运营活动、微商城搭建。☆ 定制培训:专业施教团队、完整课程体系、实际项目操作、低...

    2018-04-08
  • 我不知道的“用户体验”

    在梁宁《产品思维30讲》的“用户体验”模块共包含5讲,分别是:用户体验的五个层次怎样绘制用户体验地图服务蓝图的核心要素:峰值、终值上瘾机制:用户激励系统名字是你的文化资产作为一名从未系统学习过用户体验和产品设计的PM来说,这个模块可谓干货多多(具体内容请详见下面的思维导图)。先打好理论基础,从用户/人性的角度出发将用户体验分为五个层次;然后抛出两个方法论,一是绘制用户体验地图用讲故事的形式获取用户情绪曲线;二是考虑到资源和成本控制的约束...

    2018-02-20