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

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

文章目录[隐藏]

动效设计的物理法则

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

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

动效设计的物理法则

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

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

动效设计的物理法则

(一)牛顿第一定律

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

 

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

动效设计的物理法则

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

相关推荐

  • 苹果再次更新《App Store审核指南》,新增内容多达25处!

    近日苹果再次对《App Store审核指南》进行了更新!(这是苹果今年第三次更新《App Store审核指南》,前两次更新的时间分别是6月13日和4月19日)。 对比此前的版本,此次的修改和完善不仅涉及了SiriKit(Siri开发包…

    iOS 2016-09-23
  • 交互总结篇(一):框架与布局

    上篇文章里面简单介绍了一下关于交互设计分析的三维度,即框架、流程和状态;这里就不做特殊介绍了,详细内容请见《三个维度,解析产品的交互设计》。而本文作为交互设计总结篇的第一篇——框架布局篇,主要是系统地整理一下交互框架设计所需要考虑到的方方面面。框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法。

    2017-04-28
  • 清晰、高效、一致、美观 – 关于设计原则的优先级排序

    我们在Salesforce的产品设计团队当中有个不成文的规矩: 无论谁拿出一份什么清单 – 功能列表、研究报告,或者哪怕只是体恤衫名录 – 无论什么,只要是清单的形式,肯定会有人出来问一句:“按优先级排过序吗?” 有时…

    UI设计 2016-04-26
  • 如何实现一份设计稿支持多个尺寸?

    移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是…

    2015-11-17
  • 【交互设计】怎么让引导页不再是无用小透明?

    前言在接触一款新应用的时候用户常常会看到一些引导页,但在操作的时候直接当透明的就快速滑过或跳过了,这种时候,大家一定会有“这些引导好无用啊”的无力感,目前甚至有着“如果一个产品需要引导,说明该产品缺乏友…

    2017-08-04
  • Apple Watch超细致的硬件交互设计?什么!硬件还有交互设计?

    阿西导读:交互设计在任何有与人产生交互的设备|系统中,人机交互的范围很广,但交互设计的目的是为了提升整体的用户体验. 冷锻不锈钢,炼就强韧与魅力。 产品的用途,决定产品所用的材质。Apple Watch 设计的初衷是为…

    2015-01-26
  • 交叉学科-交互设计春季周末班课程计划

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

    2018-04-11
  • 四步解说,搞定吸引人的移动端详情页设计

    本文依然是关于详情页设计,涉及到了排版/构图/色彩/氛围点缀/字体等多个方面。以下是我总结了可以让你的详情页脱颖而出的四个系列的套路,兴许对你们有用!enjoy~

    2017-08-04
  • 微信交互设计

    微信交互设计看点01一:交互设计(Interaction Design简称ID)在使用网站(软件、产品、各种服务)的时候,使用过程中的感觉就是一种交互体验。情感化交互设计意义:人机交互的发展趋势,会让用户感到更加亲切,自然.体现:交互界面(视觉),交互功能特质(感情),交互操作方式(惊喜)二:温暖感诉求(孤独和希望的对比||现实和理想的对比)登录页面====用心经营,寻找温暖感发现页面(朋友圈、扫一扫、摇一摇、附近的人)简单感诉求联系老...

    2018-03-17
  • 用户体验促进销售,因为专业,所以放心!

    在激烈的市场竞争中,如何突破胶着的态势,是每一个经销商必须面对的考验,过去的数年我们迎来了婴幼儿纪念产品行业大发展,同时伴随着发展也出现了许多行业的问题,如粗制仿冒产品、过度的市场开发、价格战等,在多年的市场摸索中,我们认为只有坚持品质领先、积聚品牌内涵才能构筑核心竞争能力,才能在激烈的竞争中赢得用户长久的信赖。好的品牌形象与产品如何能让用户充分感知呢?增强用户体验是重要的方法。面临市场上如此多的商家和产品,用户的取舍关键因素在哪里呢?...

    2018-04-18