谢谷歌大神传动画设计30年功力

小编:咱们学UI网上有关于很多Material Design的文章,今天给大家带来的是@大E的关于material design 文档动画部分的学习笔记,之前不是很多小伙伴都在说看不懂,不好理解么?大E的这个学习笔记就很简单,易懂。(标题什么的,请自动忽略,就为博您一看,求见谅。)

Summary:

  1. Material Design动画交互
  2. 动画速度的3个原则
  3. 3种交互方式
  4. 如何设计有意义的动画
  5. 使人高兴的动画细节

1 | Material Design动画交互

谷歌上一代设计语言是卡片设计,而这一代作为卡片的延伸,Material Design 以纸片墨水作为灵感,由纸片与墨水组成的设计隐喻贯穿整个material design 的所有细节,动画设计也不例外。具体体现在哪?客官不急,听我一一道来:

首先,动画设计的出发点,我歌认为每个动画效果应该都是要有意义的。动效的重要性可以简单的体现在这个三个方面:

  • 动效可以有效的暗示引导用户操作。
  • 动效的目的是为了吸引用户的注意力。
  • 转场的动画应该高效,清晰。

以上是道,何为术?

2 | 动画速度的3个原则

1, 动画应该有快有慢,我们要认识到线性的速度会使用户感到疲倦。(我就不举九浅一深的例子了,你们自己体会( ´_ゝ`)(T_T))

那怎么做到有快有慢?

2, 速度应该遵循快入慢出的原则。快速的进入,平缓的移出,会使用户有愉悦感。 如下图所示意的速度对照:

请这样做.可以明显感觉到绿球快进,慢出。

请不要这样做!红球进和出都是一个速度,不和谐。

3,不同的元件,动画的速度应该是不同的。遵循真实世界的物理规律,个头小的元件可以在短时间内完成加速和减速动作,而个头大元件则应用更多的时间完成加速和减速动作。浅层次可以把它理解为小快大慢。

3 | 3种交互方式

我歌认为用户的每一个操作都应该得到反馈的。而当用户得到极具漂亮与逻辑性的动画效果时,用户会产生愉悦。(我家猫:铲屎的,快来愉悦朕→_→)而这会鼓舞用户对软件进行进一步的探索:如果按了这个会发生什么事?我在点点另一个好了。

谷歌官方介绍了三种交互实例:

1, 表层的交互设计(surface reaction)

表层的交互设计是最常见的一种交互方式了,最古老应该可以追溯到鼠标悬停/点击链接变色。而在material design 中,借用墨水的隐喻,墨水是覆盖在每一张纸上的表层现象,所以,点击时,就像盖了一层墨水上去。谷歌实例了一种优雅的做法是点击涟漪效果

这里一个细节是涟漪散开的中心点。这个中心永远都是手指点击的交互点,或鼠标移入的点。

2, 物体本身的回馈(Material response)

Surface reaction 来自于墨水的隐喻。但material 里的元素,如按钮,本身也能做出反馈,如显示隐藏菜单

正确的做法。物体从触控点出现,视觉上可以感觉到弹出菜单与按钮的视觉连接。

雅美蝶!从中间乱入,切断了与触控点的联系。

再如,触控上升效果

细心的你一定发现了,日常APP中的很多交互效果都可以归类为“物体本身的回馈”。如微信点赞,爱心变大。微博点赞,大拇指变大。强烈的反馈能带来身心得愉悦。

3, 放射性动画效果(Radial action)

使用者的操作行为会有一个中心点,透过这个中心点,使用者将他们的操作意图输入这个系统。与使用者的输入点建立强烈视觉连结,可以让使用者更清楚知道他所做的动作,不论是从手指触控萤幕或是从麦克风输入声音。横跨萤幕的动画效果,应该随着与中心点的距离增加,前进式地引发动画,就像建立一个涟漪动画。以上文字是我抄的,简单如栗:

4 | 如何设计有意义的动画

我们设计交互动画,说白了就是在导演下列三种元素

  • 进入的元件:可能是直接新增的元件或从其他位置转变过来的,这些元件有各自被引进或再製造的方式。
  • 离开的元件:与新内容不再相关的元件必须透过适当的方式移除。
  • 共用的元件:从渐变动画开始到结束都持续存在的元件,可能是细小的icon图示或显眼的大型图片,透过动画改变成符合萤幕的尺寸。

立flag:机智的小伙伴们,观看下面谷神的例子说出它们分别是啥?

老湿,我知道

进入元件:歌手背景写真,专辑信息,播放按钮,专辑曲目,返回按钮,黄色转场动画

离开元件:汉堡图标,黄色转场动画

共用元件:专辑封面,歌曲播放控制条,搜索,更多目录

get了这个,下次小伙伴们在分析动画的时候可以从这三个维度进行分析。

注意:

当你在设计你的动画时,请注意以下几件事:

  1. 思考使用者的注意力应该如何被引导?什麽样的元件或动作能够协助这个目标?动画过程中,要进入、离开或共用的元件,要如何安排强调或弱化?
  2. 设计画面时,思考动画前后的状态,在渐变的过程中透过颜色及共用的元件,找到机会创造视觉关联性
  3. 审慎地加入动作:思考如何透过移动一个元件,使动画渐变的过程更加清晰流畅。

如下面的一个示范:

请这样做。通过上下弹出动画,就像幕布一般,触碰点新场景创造了视觉的关联性。

雅美蝶!无动画过渡,新场景的出现显得莫名其妙。

2个可利用的方法:

1, 阶层式的时间差:

更加有层次的展示动画,能引导用户注意力,分清主次。

2, 一致性的方向:

创造了视觉关联系,并且动画效果清晰流畅。

5 | 使人高兴的动画细节

充满创意的动画细节会使用户有惊喜感:谷歌提供的关于图标细节的两个例子:

这些细节的创造需要灵感,而灵感需要积累,在你创造前,欣赏很重要。下面分享几个积累交互灵感的干货资源:

Capptivate:Capptivate是一个聚合APP动效Design Pattern的网站

littlebigdetails:LitterBigDetail是一个汇总微设计的网站

Dribbble:大名鼎鼎的设计师网站

Behance:同上

作者:大E

文章转自:“海上产品汪”微信公众:evanevanxu

(0)

相关推荐

  • 大神告诉你,她是如何完成100天插画设计挑战的?

    在之前的<Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的>那篇文章发出去后,反响很热烈,不少人在公众号后台留言,让我把大神的其他几篇文章也翻译出来,希望能学习到更多.与作 ...

  • 字由怎么用?一款软件管理1594种字体 很多设计大神必备软件

    对于设计人员来说,电脑中经常要安装各种字体.普通的网友一般是在网上找一些自己喜欢的字体来安装,而很多设计师都在用一些比较专业的字体管理软件,一款软件可以管理上千种字体,简直太方便了.今天我们主要分享一 ...

  • 国外大神经验,如何提高插画能力?

    已经连续更新了多篇硬干货了,知识要学,方法同样也很重要,本周一给大家带来一位国外插画大神的成长,希望对你有所帮助. 大神的作品链接和作品截图: 图片来源: 译文部分: 对我来说,生命中最重要的价值观之 ...

  • 美图秀秀蒙娜丽莎大神的微笑恶搞图片

    尽管冒油侵犯肖像权的风险,但我们只是娱乐,仅此而已。  1.在百度中可以搜索到很多和蒙娜丽莎相关的图片,蒙娜丽莎的原版数码照片当然也是少不了的,下载一张,我们在美图中折腾一下可怜的蒙娜丽莎大婶。 图1 ...

  • [视频]大神展示iPad 3的iOS 8.1.1完美越狱 你还会越吗?

    知名 iOS 黑客 iH8sn0w 发布了一段新视频,展示运行 iOS 8.1.1 的 iPad 3 已经完成了完美越狱。iOS 8.1.1 修复了盘古团队使用的3个漏洞,这也使得 iOS 8.x 完 ...

  • 安卓独立游戏十大神作:大叔向前冲上榜,第一名画面十分唯美

    百无聊赖时我们总需要一些东西来打发时间同时带我们体验闲下来的乐趣,这时一款好玩又不烧脑的游戏就显得十分重要.那么,就让小编来为大家推荐几款安卓独立游戏神作以供大家在工作之余放松一下. 1.鲤 01 属 ...

  • PS大神分享如何修图十大秘技《修图十大秘技》

    PS的重要用途之一就是用于图像的后期处理中,我们看到的许多好看的杂志封面.广告图片均是PS后期修图处理的成果.这次给大家分享国外PS大神Tony  Magli的十大修图技巧. 在本PS教程中,我们将主 ...

  • 百度神卡女神卡小神卡大神卡申请入口资费怎么样

    今天来介绍下神卡女神卡小神卡大神卡如何申请和资费介绍,神卡怎么样,都来介绍下 操作方法 01 百度神卡在百度地图上那么我们首先下载一个百度地图,打开百度地图把百度地图的左上角点开,已画出 02 点开后 ...

  • 浇花简笔画设计

    浇花是很多热爱植物的人每天都要做的一件事情,实现这样的一个场景就要水壶.花盆这样的两个重要的元素,我们就一一来绘制. 操作方法 01 用钢笔画出一个水壶的基本轮廓路径,手柄.壶身主体.喷头.水珠这样的 ...