赞助商
立即赞助

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

UI设计3年前 (2021)更新 流光
2.8K 0 0

今天这篇文章,讲的又家感趣的动效知识。如今,动效对于品牌的传达变得越越重,所以我尽可能多的去搜集动效相关的资料,家一起,紧趋势,把这块的能力掌握好。

前有篇比较类似文章,《全!动效设计标准与规范》只那篇文章偏重理论,谷歌设计师写的这篇章到的案例会更真实具体。本有很多实的观点,相信希望大读会有收获。

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

效可界面变得更生和易于使。尽管拥有很大的潜,但效设计可是在设计领域中最被人熟练掌握的技,这可是因为效算是在 UI领域里的一个成员。视觉和交互在早期的 GUI中就已经被应,但效只有在硬件设备都跟上来后才会较流畅的被使。

UI动效传统动画之间的关系也很易被混淆。传统动画需去掌握 Disney的《12动效基本原则》,那不意 UI动效同样很复杂,或者对于关键数会拿捏不准?如果让我价的话,动效应用广泛的 UI领域,设应该比较简单的。

一、从哪里开始

动效主的作用通过动态演示 UI元素的变化引导用户操作,动画也能力通过图标,Logo,插图一款应用塑造性格,但不怎样,动画易用性的优先级肯高于增加设创意形式。展示的动画能力之,让我们先回到核的 UI动效基础,去关注 UI中的导航转换。

二、转换模式

当设一导航转换时,简单统一就2关键的点。了实这一点,我们选择了2种类型的动效模式:

  • 基于容器的转换
  • 器的转换

1. 基容器的转换

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

△ 像文本,图标和图片这的素都是被组在容器中

果界面中涉及到一个容器,比按钮、卡或者列表,么转换就是基容器的动画。容器通常很容易根据它们的见边识别出来,但是要住,它们也以是在转换之前不见,就是没有分割的列表一样。种模式程分为三个步骤来做:

先使 Material标准的缓画容器起来(先快速开始,然后缓慢结束)。在面这个例子中,容器的大小和圆角半径发生了改变,从一个圆形按钮变到一个填充屏幕的矩形。

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

容器中的元素适配容器宽进行缩放,元素被固定在顶并隐藏在容器,这样就在容器和元素之间创建了清晰的联系。

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

△ 把画进行慢放,可看清元素在容器是如何隐藏和缩放

转换过程中消失的内元素会随器的加速淡出,当器减速时,新的内元素会淡入。当元素速移动时,通过淡入淡出元素实无缝的转换效果。

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

△ 把动画慢,用明如何使用淡入淡出效果

把这个设计模应用于所有容转换上,将会立致效。它能明确开始和结束关系,为是用容动画进引导。为了展示这模灵活性,下列举了5不组合形:

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

△ 把动画进慢放,以说明容动画是如何过开始和结束来引导用户视线,立连接

有些容器只是使用 Material动画的标准缓动从屏幕外滑入, 它滑动的方向取决于之关的组件的位置。 例如,点击左上角的抽屉导航图标,菜将从左侧滑入容器。

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

如果容器是从屏幕边界进入,则它会淡入并放大。 动画不是从0%的比例开始出现,而是从95%开始,以避免过度弹跳。 缩放动画使用 Material动画的减速规范,这味着它以最大速度开始并轻轻地减速并停止。 当素要退出,容器会在没有缩放的情况下淡出, 退出动画计会比进入更妙,以便让用户将注力集中在新内容上。

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

△ 把动画进行慢放,以说容器是如何进入并进行缓动和缩放的

2. 没有容器的过渡

有些界面并不会基于容器进行转换,例如点击底部导航中的图标,将用户带去一个新界面。 在这些情况下,使用步模式:

  • 开始元素以淡出消失,结束元素以淡入进入。
  • 随着最终素的淡入,它也会使用 Material动画缓动规律进行细的放大。

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

△ 把动画慢可以明器时如何运用缓动缩的

如在开始和结束元素有个很晰空和层级关系,共享动画可以强化这关系。例如,在导航步骤上,开始和结束组件共享个垂滑动动画,这加强了在垂上信息内容。按下步骤下个按钮时,组件元素共享了个平滑动动画,从左右滑动强化了步骤进概念。共享动画也是运用了谷歌 Material动画标准缓动。

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

△ 把动画进慢放以说明平和垂上共享动画

三、最佳实践

1. 保持简单

考虑到导航转换的高频率易用性的特点,导航的切换倾向于引导功能不炫酷的效果。这也并不动画的形式永远都不性化,只确保动画符合品牌风格的。能吸引用户眼球的动画通常都一些小图标,logo,加载状态或者空状态元素中。下面左的简单动画可能不会 Dribbble 得到太多的点赞,但它会使应用变得好用。

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

△ 动画慢后可以看到不同动画形式之间的区别

2. 选择合的持续时间缓动形式

导航的切换需优先考虑功能实用性,所以需优化持续时间,速度一些,但也不到让用户完全注意不到。持续时间根据动画屏幕中所占的置决的。由于导航切换通常会占据屏幕的部分面积,所以根据验建议300ms会一不错的时间选择。相比之下,关这样的小控件使用的时间就会很短,只需100ms。如果一过渡动画感觉太或者太慢,建议以25ms的增调整它的持续时间,直到终达到一比较舒服的状态。

Easing(缓动)描述了动画加速和减速速率,大多数导航切换使用 Material动画标准缓动,这是称类型缓动形。这意味着元素在开始阶段以很大加速度进加速运动,然后再以很小加速度去减速,目是将用户注意力在过渡结束位。这类型缓动使动画看起来常自然,为现实世界物体是不会立即开始或者止运动。如过渡看起来很僵硬、不自然,很可能是为误选择了称性或者线性速率。

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

△ 把动画进慢放,以说明不缓动类型

本文中讲的运动模式和最佳实践,目的在于建立一种实用且致的动画风格。这能适用于大多数的应用,但对于不同品牌来说可能需要一些更加烈的风格去表达。要想了解更多关于个性化的动画知识,可以去歌官方动效规范:https://material.io/design/motion/customization.html。

一旦你开始注意到诸导航的细微动效,就是给你的应用提升亮点特的开始。简单的规范模式并不能完满需求,动画的巧妙创意才是最亮眼的地方。

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

△ 角动画以让错误变得不么沮丧

原链接:《Motion Design Doesn’t Have to Be Hard》  Jonas Naimark

欢迎关注译者的微信公众:「 彩云译设」

谷歌设计师:只要掌握这两个方法,帮你做好动效设计!

图片素作者:laudio Scotto

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在经典的尼尔森十大启发式当中,「系统状态可见性」可以说是如今交互设计领域当中,最为重要的原则之一。通过向用户展现当前...
交互设计
上一篇文章《比阿里犸良还强大!Lottie 动效设计完全指南(基础篇)》已经系统地为大家讲解了 Lottie 动效的基本知识,相信很...
AE动效
大家好,我是彩云。在动画落地的过程中,配合Lottie插件输出JSON动画文件是大家常用的方法。今天这篇分享,将会讲到Lottie这...
AE动效
一直有很多朋友会问一些关于移动端实现动效的方法,平时也会给大家做一些解答,但是可能没有那么系统性,这次抽点时间总结归...
动效落地
@C7210 :这是一篇来自 Google Translate 团队设计师的改版经验分享。 Google Translate改版经验谈 2018 年底,我们上线了...
Google Translate
为您准备了最新的 Material Design设计规范,请伴随笔记一口吃掉。 一、安卓是什么? 想象一下,过年同学聚会上,大家把手机...
Material Design
一、可用性价值 动效很容易被象成某种增强愉悦的东西,自身并不具备什么价值。常常被当做可有可无部分,通常作为最后一步点缀...
交互设计
动效导出类型 一般情况下我们导出的动效可以分为三种类型。 1. 纯矢量图形动效 此类动效常用于图标、加载、启动页等。 2...
AE动效