• 思缘论坛首页
  • 论坛搜索
  • 下载记录
  • 每日签到
  • 设计软件,PS下载
  • VIP素材区预览
  • VIP素材区下载
  • 缘分币充值
发新话题
打印

[心得技巧] 设计师详解设计界面动画时的运动原理

设计师详解设计界面动画时的运动原理

千库网


迪士尼的12部动画原理是考虑传统动画时不可估量的指南之一。它是奥利约翰斯顿和弗兰克托马斯在他们的书 - 《生命的幻觉》中提出的。这些原则最初是为角色动画等传统动画而设计的。但是,这些原则仍可用于设计界面动画。因此,这只是在设计界面动画时将一些原则联系起来的奇怪尝试。

迪士尼的12个动画原理

压缩和拉伸

在动画中,压缩和拉伸表示物体的重力,质量,重量和灵活性。一个场景中的弹跳球在它撞击地面时伸展,是压缩和拉伸的。

在界面中,压缩和拉伸可以很容易地与按钮相关联。按钮的按下状态是压缩。通过控制压缩和拉伸,我们可以轻松地为按钮定义一个状态。除按钮外,它还可以应用于界面中的任何交互元素。



按钮在相互作用时挤压和伸展。



压缩和拉伸应用于侧边栏。

预期

预期告诉观众将会发生什么。它先于下一步发生的行动。一个人在释放标枪之前将他的手臂拉回来是一种期待。

在界面中,悬停状态就是很好的例子。每当我们悬停在元素上时,某些元素会对它做出反应,表明它是可点击的,点击它就会发生一些事情。



悬停的相互作用通常告诉我们接下来会发生一些行动。



涉及水平滚动的界面通常倾向于显示滚动/滑动时出现的下一个元素的一部分。这是预期的一个很好的例子,因为它揭示了关于下一件事的信息。

定时

在传统动画中,时间通知如何绘制帧。帧越多,动画越平滑,越慢。时间也给对象带来情绪和特征。

时序是任何界面动画的基本方面。时间和缓和功能在运动编排中起着重要作用。漫长的过渡会让你的用户等待太久。另一方面,如果你的动画太快,用户可能会遗漏某些内容。通常,大多数界面动画介于200-600ms之间。像悬停和反馈这样的交互大约是300毫秒,过渡的动作大约是500毫秒。你可以参考Material design(材料设计),它可以很好地解释每种动画的持续时间。

一些设计系统(如碳和闪电)已将运动视为一个重要方面,并为每种类型的过渡制定了规格(时间,缓和等)。



右侧的过渡使用户等待时间过长。

慢进来和慢下来

现实世界中的大多数物体都遵循缓和的运动。也就是说,物体的运动并不突然。一个自由落体的物体开始缓慢然后获得动力。



左边的卡片没有缓动。你可以看到右边的过渡似乎更自然。

为界面元素添加缓动可以提供更长的使用寿命,并使它们看起来更自然。单独定时和缓和可以有效地用于定义你的运动系统。

表演

舞台编排舞蹈。也就是说,如何将对象放置在场景中,每个动画的发生方式和时间等等。它将注意力引向场景中最重要的对象。

在接口中,分段决定元素的放置位置以及交互发生时如何编排元素。它将用户的注意力引导到预期的元素。



考虑一个根据我们的兴趣推荐音乐的音乐应用。因此,应用程序必须做的重要事情是,如果用户想要收听类似的歌。因此,有必要将LIKE动作与其他编排元素分开。



从高处抛出的球遵循抛物线路径。弧形使事物更自然。

在界面中,跟随对角线路径的元素可以通过跟随弧线而变得更自然。当你想要突出显示元素的路径时,可以使用圆弧。



你可以看到弧后面的元素看起来比对角线更好。

辅助动作

在动画中,辅助动作用于支持或增强对象的主要操作。行走时角色头部的动作是次要动作。

在界面中,可以使用辅助操作使主要操作更加突出。这些在元素需要向用户提供反馈的地方非常有用。所有微观互动都基于次要行动原则。



颗粒的二次反应增强了主按钮的作用。

夸张和情趣

场景中的重要角色必须具有吸引力,同时,某些动作可能会被夸大以获得更多关注。

在界面中,可以夸大重要的交互以获得用户的注意。材料设计中的FAB就是一个很好的例子。FAB本身的静态状态很吸引人,因为它具有强调色,并且还浮在所有元素之上。当发生任何交互时,可以夸大FAB的动画以占据整个屏幕以使其更具吸引力。



FAB在互动上被夸大了。



主要操作被夸大的付款应用上的互动。

跟进和重叠动作

考虑一只兔子从高处跳跃。当兔子开始运动时,它的耳朵可能会以身体的偏移开始。当它落地时,它的耳朵仍然在运动。前者称为重叠动作,角色的不同部分以不同的速率运行。后者称为“ 跟随”,即使在角色停止后角色的某些部分仍然处于运动状态。

在界面中,可以使元素在停下来之前超过(跟随)它们的位置以使它们感觉更自然。



一个模式窗口展示跟进。它超越了它的位置然后稳定下来。



滚动时,图像卡片和文本以不同的速率开始,表现出重叠动作。

界面中的每个交互都必须使用正确的上下文精心制作,以使体验更加身临其境。在正确的位置使用这些原则可确保你的交互与你的界面不同。

其中许多原则正在以不同的形式和方式用于今天的数字产品中。

来源:站酷    作者:木梓设计

TOP

发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz Copyright © 2005-2019 www.MissYuan.com All rights reserved.站长QQ8713688 邮箱8713688@qq.com