赞助商
立即赞助

为你揭秘 Google的动效设计师是怎么制作 UI 动效的

UI设计3年前 (2021)发布 流光
9.7K 0 0

我一篇文章《动效设计没那么难!谷歌动效设计师带你门》当中,已经通际的案例,分享动效设计并不难的原因。我们着力推动 Material Design ,也希望计能够更好地使用所熟悉和喜爱的 Material 动效理,来计出更好的产品。为了更好地计动效,队使用 Adobe After Effect 作为计动效的主要工。因此,在今的文章当中,会享的工作流程、巧和计的方法。

为你揭秘 Google的动效设计师是怎么制作 UI 动效的

先下载我的 AE 文档

下载我所准备这个基本 Sticker Sheet 文档,你能够看到我是如何使用简化后工作流来完成项目(下是概述)。它含组 Material 组件,基准 UI 组件和导航转场动画。

戳这下载 ? 提取码:cyw5

将素材导入到 AE

首先,需要制作动效的相关素材。队中绝大多数的视觉计都喜欢使用 Sketch 来计 UI,而这款 UI 计工默认是不支持 AE 的。值得庆幸的是,Adam Plouff 制作了一款通款工的插件,戳这获取。借助这款插件,可以将的 Material 组件从 Sketch 导入 AE 当中。这些素材,你可以在之前所提供的 Sticker sheet 组件文件夹中找。

创建 UI

有了库中的这些基础组件之后,你可以通过拖拽快速构建 UI ,并且将它整进新的 AE comp 当中去。

下面的案例就是将 Sketch UI组件直接拖拽到一个 AE comp 当中。

为你揭秘 Google的动效设计师是怎么制作 UI 动效的

自定义组件

这些基准组件为你提供了良好的基础,现在你可以拿它来创建各种 UI。这是 AE 中主属性(Master Properties)这一功能最令人侧目的地方。这一经常被忽略的功能,其实可以快速创建出高度可复用的个组件素材,创建好了之后就无需来回复制始的素材了。它在功能上,非常近 Sketch 中的符号(Symbols)的使用方式。举个例,APP 的底部菜栏是最常见的UI组件,它经常会随着 APP 的变化而出现图标、色彩、阴上的变化。考虑这一点,直将这三个属性添加为主属性。

为你揭秘 Google的动效设计师是怎么制作 UI 动效的

△ 使用主属性快速调整组件的示例

通向每个组件添加主属,我就能将 UI 界面快速地转化为成组的动画。同样的,你也以在 Baseline UIs 文件夹中找到素材。

为你揭秘 Google的动效设计师是怎么制作 UI 动效的

使用主属自定义组件,来创建 UI 动效合集。

动画转场过渡

现在,我们已经建立创建 UI 动画的一个基的工流,接下来我们就以动画效果。在 Navigation Transitions(导航转场渡) 个文件夹当中,有详细的范例,演示何在 AE 中使用 Material Design 的运动模式。果你对种运动模式感兴趣,以详细阅读一下前一篇文章《动效设计没么难!让谷歌动效设计师带你门》。

为你揭秘 Google的动效设计师是怎么制作 UI 动效的

△ 使用Material 运动模式所的导航转场渡效果

在开始的时候,有的属性都是没有缓画的。然后,父合成组通过时间重映射和设置键帧的持续时长来实现缓的效果。这个时候可非轻松快速地调整缓和持续时长,因为为了控制整个转场过渡的效果,只需要映射两次键帧就够了。而这是将缓曲线应到有元素的画当中的一种简单的方法。这样一来,有的的元素都会具有相似一致的规律。离开界面的元素随着速曲线离开 UI 界面,而进入界面的元素则随着曲线减缓而进入 UI 界面。你可在「Complex choreography」(复杂的画编)这一节当中阅读更多的相容。

为你揭秘 Google的动效设计师是怎么制作 UI 动效的

这种方法可应于几乎有符合 Material 规律的过渡效,创一致的视觉体验。当然,这套方法是没法处更复杂或者格的画效果和流程的,但是这种情况并见。

AE 一非常灵活的具,因此我们也很难某动画效果的制作流程绝对确的,但目,我们借这套流程可以非常高效制作动画效果。每设师都独特高效的动画制作方法,我希望我的方法能够帮一效率高的动效设师。

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

相关文章

写这篇文章也是总结了以前刚接触的时候遇到的问题,还有来自其他朋友的提问。关于切图的命名规范给人的第一印象就是全英文,...
切图工具
消费升级伴随着越来越多服务型产品在当今时代竞相绽放,产品所提供的服务怎样能更好地满足用户的胃口?产品定义初期设计者们...
服务设计
编者按:文章总结了想要提高审美和设计感,设计师必须要了解的美术基础。 一、美术的重要性 任何类别的设计师都需要有一定的...
历史
@Fornever :光涧实验室 Do It Today 第12期活动,尝试了用 Design Workshop 产品设计的方法来解决困扰创业公司的招聘问题,...
产品设计方法
@Daidai丶呆 :许久没发文(虽然距离上一篇文章不过 20 天时间),这阵子,我依旧把工作之余的所有时间都放回在了阅读上。18 ...
经验分享
为什么会有语音交互?它适用于什么场景?不适用于哪些?文章为你解读。 一. 什么是语音交互 在没有机器之前,人类最早的交互...
界面设计
这是一个什么都在变快的时代。在互联网上,一切都开始动起来,短视频开始流行,而 Gif图早就已经像病毒一样占据了网络的每个...
gif动画
找图标这个事情,对于设计师而言,其实都不是太大的问题了。不仅有大把的网站提供免费的图标下载,而且设计师自己改和设计都...
ICON