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

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

文章目录[隐藏]

动效设计的物理法则

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

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

动效设计的物理法则

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

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

动效设计的物理法则

(一)牛顿第一定律

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

 

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

动效设计的物理法则

应用到网页设计中,为了实现过渡效果,我们必须模拟出页面区块的位移-时间曲线,对于运动拆解分析得到的分段曲线,可以运用计算机图形图像造型的基本工具——贝塞尔曲线绘制出来,调用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

相关推荐

  • 加拿大皇后大学开发出一款柔性全息交互式概念手机

    硬件设计师和制造商一直梦想着把全息移动设备带到现实生活中来,不过来自加拿大皇后大学的一支研究团队,却已经拿出了一款名叫HoloFlxe的设备。顾名思义,它同时具备“柔性”(Flexible)和“全息”(Holographic)两种…

    2016-05-11
  • 交互进阶!如何扫除交互设计路上的3大障碍?

    Echo  :目前网上基本没有对做交互设计 师的难点进行系统的归纳和总结。基于这个原因我总结交互设计 师的三大障碍以及如何扫除交互设计 师路上的3大障碍。

    2017-09-14
  • 掌握这六步,每个人都可以是体验分析专家

    随着体验经济的到来,体验成为商业的驱动力。那么当我们进入一个行业、拿到一个产品,如何从体验角度去分析和判断进而从体验角度进行驱动?莫急!! 本文简单总结作者多年奋战在体验第一线的理论和实战经验,送给大家一套清晰简便的分析方法。

    2017-05-25
  • 联想实习 | 手机事业部招聘交互设计实习生

    公司简介联想是一家营业额达460亿美元的《财富》世界500强公司,在全球消费、商用以及企业级创新科技领域居领先地位,为用户提供安全及高质量的产品组合和服务,当中包括个人电脑﹙经典的Think 品牌和多模式YOGA品牌﹚、工作站、服务器、存储、智能电视,以及一系列移动互联产品如智能手机﹙包括联想和摩托罗拉品牌﹚、平板电脑和应用软件等。招聘岗位手机事业部-交互设计实习生岗位描述1. 参与联想ZUI手机操作系统的交互设计;2. 参与产品的规划...

    2018-04-21
  • 免费电话你用了吗?

    随着微信电话本1.0.0版本登录苹果和安卓应用商店,这款智能通讯增强软件也引起了一场热议。在这小编也亲自体验一下并与大家分享,欢迎拍砖~ 安装并打开微信电话本,如图: “免费”二字相当醒目,但真的是免费吗?其…

    2014-11-13
  • 交互与时间:大幅菜单的0.5秒等待时间

    在大幅菜单中,鼠标经过区域的响应时间会很大程度的影响用户的使用体验,那么在现在具体的网页设计中体验时间都是怎么设计的呢?文章分享了几个实例,一起来看看。

    2017-04-28
  • 交叉学科-交互设计春季周末班课程计划

    开课时间:本周末4.14日开课,可预约免费试听。请单独联系教务老师。联系方式:教务老师微信二维码上课地址:北京海淀区北四  环保福寺桥南  恒兴大厦10层E室

    2018-04-11
  • 谈谈用户体验与风控的平衡性

    先翻翻旧文从反反鸡汤谈过犹不及从受众目标,再谈过犹不及其实今天是这两篇的引申。之前我说过很多创业者容易犯的错误,过度理想主义,把用户当作好人,我说过一个关键词,不能说坏用户一定很多,可能坏用户真的只有1%,但很可能一个坏用户的破坏,可以抵销一百个好用户的创造,这是很常见的创业的困境,因为很小的疏忽,导致极大的损失。所以,一些毫无经验的创业者,要有这方面的意识,至少思想上要有风控这个概念,要知道如何规避和防范坏的事情,不要过于理想主义。但...

    微信热点 2018-05-04
  • 2018年用户体验趋势(二)

    2017年,我们见证了很多。在与全世界的189489位设计师策划并分享了1926条链接后,我们从行业内的所写、所说和所想中,预见了几个趋势。以下就是2018年用户体验的预期。#4每个界面都是一个故事设计世界中的讲故事和写作从未如此现实过。随着客户的体验旅程越来越碎片化,我们要确保在不同渠道中讲述连贯的品牌故事,并且这些故事清晰、有趣、富有人性。有段时间,大概是几年前,我们听说过显微术语。但是到了2017年,业内人士发现,不仅要重视在设计...

    2018-03-02
  • 产品体验分析之7步走(附PPT下载)

    我最近一直在做新产品的策划,方案一个又一个的被毙掉,方向一次又一次的调整,PPT一遍又一遍的改,交互一稿又一稿的画,所以我还在继续努力中,也深深的感受到产品「从0到1」的不容易。产品经理在日常生活中将发现的问题记录下来后经过分析转化为可落地的产品方案,这个过程很复杂,也很容易出错,原因就是思维的过程是不可控的,也就是没有一个相对的衡量「标准」,导致一个现象是想法人人都有,却不一定人人都对,所以产品策划「从0到1」的整个过程十分考究产品经理的功力。

    2017-05-31