赞助商
立即赞助

动效设计没那么难!让谷歌动效设计师带你入门

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

编者按:UI动效设计没有么玄乎,为 Google 旗下 Material Design 团队中动效设的负责人之一,Jonas Naimark 对于动效本身透彻的认知,这也促了今天的这篇文章。动效不难,入门很简单!

动效让UI更加富有表现力更加易用,是不争的。尽管动效拥有巨大的潜力,但是,在很大程度上依是 UI 设计领域当中的边缘学科,难以否认的是,它确是整个设计家族中的新成。视设计和互设计以追溯到早期的 GUI 设计,而今的动效的设计和现很大程度上依赖现代硬件的强大渲染能力来达成。

UI动效和传统动画在「动」这事上叠,使如今个设计领域,在概念和边界上都变模糊不。从传统动画度上来说,你可能终其生才能真正掌握迪士尼所提出12个动画运动规则,是这是否意味着UI动画样如此复杂、需要如此长期展示呢?

有很多人跟我说,UI效很复杂,设计效过程中参数的取非模棱两可。在我看来,并非如此。效设计可很简单,并且应该很简单。

动效设计没那么难!让谷歌动效设计师带你入门

要从哪里开始?

动效主要功能是用来呈现 UI 不元素关系,来帮助用户在界和界进导航。动效可以加持到图标、Logo、插画等元素上,来赋予 UI 以个性,是 UI 本身可用性优先级是定要高于视觉和动效表。在展示探讨借助动效拓展个性和调性前,我们应该优先关注如何借助动效来优化导航和过渡,构强大动效基础。

转场过渡的设计模式

在考虑设计导航过渡效时候,简单性和致性是两个关键属性。为了做好这,我们常会基于两情况来设计:

  1. 基某个容器的转场动效
  2. 不存在容情况下转场动效

基于某个容器的转场动效

动效设计没那么难!让谷歌动效设计师带你入门

文本、图标、图像等UI素被置于一个容器内

 UI 界面当中,如果一转场动效牵涉到诸如按钮、卡片或者列表,那么这种动效通常都会基于这些器行设。很多器控件都清晰的,但记住,动效出之,可以不可见的。就分隔符的列表一样。通常,这种模式下的动效会分三骤:

注:为方便你能看清,动画的展现速度被放慢,际情况下快很。

1、容本身动效使用 Material 标准缓动(这缓动动画效下,启动加速很快,然后速率逐渐缓和减慢)。在这个实例,容发生了尺寸和形状上变化,从个圆形按钮变化为个充满屏幕矩形。

动效设计没那么难!让谷歌动效设计师带你入门

2、UI元素在容内缩放,过程基于宽度自适应调。容内元素被固定在容顶部,会随着顶部延伸而自然延伸,并所有元素都会被遮盖在容内。这样设计,让元素和容相互关系更加晰。

动效设计没那么难!让谷歌动效设计师带你入门

3、在动画变化前个阶段,变化速度逐渐加快。在容变化速率最快时候,含在容内 UI 元素逐渐淡入显示,并变化速率开始减缓。个动效足够快时候,个变化过程会显缝而自然了。

动效设计没那么难!让谷歌动效设计师带你入门

这动效设计规则常晰,如将它应用到个界不控件上,能够立出致动效样。而这样动效在开始和结束过程,有常晰逻辑关系,体变化依靠容链接,为了展示这模灵活性,我们将它应用到 5 不控件上去:

动效设计没那么难!让谷歌动效设计师带你入门

这许多容大都使用了 Material Design 标准缓动动画来呈现从屏幕滑入效。它滑入,取决于这容和相互关联组件位关系。例如,击左上导航菜单按钮,那么菜单展开滑动动效是从左侧进入屏幕。

动效设计没那么难!让谷歌动效设计师带你入门

如容是从屏幕边缘进入,它会逐渐淡入并放大。是,动画所呈现元素大小并不是从0%开始,而是从 95%开始,这和macOS 窗口最小化神奇效是截然不,这是为了避免用户过度关注动画。这个缩放动画使用了 Material Design 减速缓动效,这意味着动效速率开始处于峰值,然后速度逐渐减缓。在退出时候,容会在几乎没有缩放情况下逐渐淡出。退出动画效会比进入更加微妙,这样用户会更加关注新内容,而不是即将消失信息。

动效设计没那么难!让谷歌动效设计师带你入门

不存在容器情况下的转场动效

有很动画效果也是在没有容器的承载下,就开始构建的,比在APP的界面中点击底部的导航按钮,将用户完带到一个新的界面当中。在诸情况下,种动效遵循下面的两个步骤:

1、前个组件或者元素开始淡出消失,随后新组件或元素开始淡入。

2、随着前一个分的消失,后一个组件会使Material Design 中的减速缓效,巧妙地展开呈现来。同样的,明显的缩放仅仅应该应在进入的分,而是消失的组件。

动效设计没那么难!让谷歌动效设计师带你入门

注:为了方你看清,画的展现速被放慢了,实际情况会快很多。

如果开始和结束有着清晰的空间关系和逻辑顺序,那可以使用相似的、共享的动效来化计的一致性。比如下面的个案例,左侧在进行导航操作的候,所产生的动效,在最后淡入的候,都会带有一个垂直方向上的妙运动。而右侧的案例中,新用户入门流程中,所有的操作切换都会带有一个水方向上的缓动。所有的这些都只是使用了 Material Design 中的标准缓动,就足以创造出这的一致。

动效设计没那么难!让谷歌动效设计师带你入门

最佳实践

持简约

鉴于动效的使用频率非常高,它设的可用性密切相关,导航过渡效果的功能性加优先,不风格。当然,这并不它不应该风格化,只确保品牌整体风格一致就可以了。引人瞩目的动效,通常加合小图标、LOGO、加载器空状态元素或者界面搭配。下面的范例当中,动效设的比较简单,这样的设 Dribbble 可能不会得到很多赞,但它们能配各种应用的动效设。

动效设计没那么难!让谷歌动效设计师带你入门

择合适的时长和节奏

诸如导航切换动效转场,所持续时长,应该优先考虑到它功能性,要利落,是也不能过快。太快会让用户感到迷惑。可以根据用户在界留时长来估算动效应该持续时长。根据以往导航过程,用户在导航页所驻留时长来进判断,300ms动效时长,是个值参考和使用时长。相比下,更小UI控件,动效持续时长要短,常100ms 足够了。如你觉某个动效设计太快或者太慢,请以 25ms 为单位,进增速或者减速调,到它到你所预期视觉和体验。

缓本身描述了效的速和减速的速率特征,绝大多数的效可直接采 Material Design 中的标准缓就行了,这是一种对称的缓类,这种缓的特征是开始速快,然后较为缓慢地减速,这样会户更容易注意到整个变的结果。这种缓元素具备了一种更自然的物质感。因为现实世界中的物体通会匀速,它会立刻开始和结束,而缓则会过渡和显得僵硬机械。

动效设计没那么难!让谷歌动效设计师带你入门

本中描述的设计模式和最佳实践,旨在建立真正实的、微妙的效,它们适于绝大多数的APP和页,当然,有一些牌可会需要更强烈的表现形式。想了解更多,可阅读这里的 Material Design 的官方档,了解个性效的设计方法。

一旦完成了基本的转动效的计,你就可以开始考虑更加细化和个性化的计和挑战了。而这个候,才是这些简的动效不能足的地方,更加有趣、多变的动效,在此才应该发光发热。

动效设计没那么难!让谷歌动效设计师带你入门

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

相关文章

头脑风暴能激发设计师创造力,为设计师提供更广阔的思路与发达的思维。那如何在30分钟高效搞定头脑风暴?一起来看这篇文章。 ...
头脑风暴
一、可用性价值 动效很容易被象成某种增强愉悦的东西,自身并不具备什么价值。常常被当做可有可无部分,通常作为最后一步点缀...
交互设计
产品logo 不需要过多的语言来阐述,一个简单的图标就可以代表这个产品。比如:一个被咬了一口的苹果,飘扬的旗帜(微软),一...
logo
@橙子的橙子Mandy :写这篇的动机是因为,有一个朋友拿了他自己做的界面,问我觉得哪里需要球盖,他总觉得哪里不对劲,但是又...
APP
用户调研这个事情能够帮助设计师更好地了解用户,只有同用户进行足够长时间、足够深入的互动,才会真正洞悉需求,作出真正令...
UX设计
每月一次的设计圈超实用干货大合集又来了!这个月的设计素材中,有很多炫酷好玩的新鲜工具,比如可以帮你快速找到符合 CC 协...
前端干货
据 Statista 统计,2018年第一季度,Google Play Store 每天平均发布 6140 个应用。然而,77% 的用户在安装应用程序 72 小时...
游戏化设计
在线下场景中的物料、机具尺寸是依据人体工程学为参考,不同位置、不同距离、不同角度下,物料类型 、版面结构、文字层级、字...
产品设计规范