当前位置:首页 > 日记 > 正文

材料设计文档动画学习笔记

材料设计文档动画学习笔记
今天,带给你一份学习笔记,材料设计文档动画。作者是个大人物,这是个大错误。让我们看一看。
你好,我是大E。这是一个材质设计文档动画学习笔记,题目是我编的,看看我高中时做了50张好牌的原谅我。胡结束,下一个是身体:

总结:
材料设计动画交互

动画速度的3个原则

3互动的方式

如何设计有意义的动画
动画动画细节
1 |材料设计交互动画

谷歌的最后一代设计语言是卡片设计,这一代是卡片的延伸。材料设计以纸和墨为灵感。由纸和墨构成的设计隐喻贯穿于材料设计的各个细节。动画设计也不例外,它反映在哪里别担心,先生,请允许我说:

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

动态效果可以有效地提示用户操作。

动态行为的目的是为了吸引用户的注意。

动画的传输应该是高效和清晰的。

以上是道,什么是艺术

3原则2 |动画速度

1,动画应该是快与慢,我们已经意识到,线速度将使用户感到累了。(我不会给浅层和深层,九例自己的经验(他'_ `)(t_t))

这是如何快速而缓慢地做的。

2,速度应遵循快速进入和减速的原则,快速进入,轻柔移动,使用户有一种愉悦感,速度控制如下图所示:
请这样做。很明显,这个绿色球快而慢。
请不要那样做!红球进出是一种速度,不和谐。

3,不同的组件,动画的速度应该是不同的,遵循现实世界的物理规律,小部件可以在短时间内完成加速和减速,而大的部件会用更多的时间完成加速和减速,浅层可以理解为快慢。

3 | 3相互作用类型。

我认为,用户每次操作应反馈。当用户得到一个非常漂亮的和逻辑的动画效果,用户会很高兴的。(我的猫:铲屎,我来快乐RARR;_rarr;),这会鼓励用户进一步探讨软件:如果这会发生什么我在做另一个。

谷歌正式推出了三个交互实例:

1,表面相互作用设计(表面反应)
表面交互设计是最常见的交互方式,最古老的应该追溯到悬停/点击链接变色。在材料设计中,墨水的隐喻是覆盖在每一张纸上的表面现象。所以当点击时,它就像覆盖一层墨水,谷歌的一个优雅的例子就是点击波纹效果。
这里的细节之一是波纹的中心,中心始终是手指点击的点,或者鼠标移动到的点。
2,对象本身的反馈(物质反应)

表面反应来自于墨水的隐喻,但是材料中的元素,如按钮,也可以做出反馈,例如显示一个隐藏菜单:
正确的方法是,物体从触摸点出现,可以直观地看到弹出菜单和按钮之间的视觉连接。
蝴蝶!在中间,切断接触点的接触。

再次,触摸上升效应:
你必须发现很多在日常应用的交互作用可以分为对象本身的反馈。像WeChat点,爱情变得larger.micro-blog点,大拇指强反馈可以给身体带来快乐。

3,放射性效应(径向作用)

用户的操作行为有一个中心点,通过它用户进入系统的用户的操作意图。与用户的输入点强烈的视觉连接,让用户更清楚的知道他做了什么,无论从手指触摸屏或从麦克风。在屏幕上的动画效果,应该从中心点的距离增加,向前来触发动画,比如创建一个涟漪动画。上面的文字是我的副本,简单的栗子:

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

我们设计交互式动画,在白色中我们指导以下三个元素:

这是进入组件可以直接添加或从其他地方,这些元素都有自己的方式被引入或再造。

左侧组件:不再与新内容相关的元素必须以适当的方式删除。

共享组件:从动画开始到动画结束的元素,可以是小图标图像或大图像,可以通过动画改变屏幕大小。

国旗:诙谐的朋友,看下面的例子Ceres说他们是什么
我知道旧的潮湿:

输入组件:歌手背景照片,专辑信息,播放按钮,专辑曲目,返回按钮,黄色转移动画。

离开元素:汉堡包图标,黄色转移动画

常见的组件:专辑封面,歌曲播放控制,搜索,更多的目录

得到这一点,下一组合作伙伴可以在分析动画时分析三个维度。

小心 uff1a

在设计动画时,请注意以下几点:
你认为应该如何引导用户的注意力哪些组件或动作可以帮助实现这一目标在动画制作过程中,如何强调或弱化进入、离开、共享的元素

在设计图片时,我们考虑动画前后的状态,并通过渐变过程中的色彩和共享元素寻找机会创造视觉关联。

仔细考虑动作:考虑如何通过移动组件使动画的过程更加清晰流畅。
作为下面的示范:
请用弹出式动画,如幕布,触摸点与新场景建立视觉关系。
蝴蝶!没有动画的过渡,新场景的出现是无法形容的。

2种有效方法:

1,类时间差:
更层次化的显示动画,可以引导用户的注意力,区分初级和次级。

2,一致性的方向:
创建视觉联想,动画效果清晰流畅。

5 |动画细节

创意动画细节将取悦用户:谷歌提供的图标细节的两个例子:
这些细节的创造需要灵感,灵感需要积累。在你创建它之前,欣赏是很重要的:

capptivate:capptivate是一个网站,汇聚应用动态设计模式

littlebigdetails:litterbigdetail是一个网站,总结了微观设计

一个著名的设计师的网站:

Behance:同上。

(完成)

学习资料 uff1a

眉目传情的材料设计繁体中文版
极客学院的材料设计
谷歌官方文件(英文版)
还有几句话:小英文只有4多,官方文件很难看到,这里有一份干货推荐书。

在gitbook,那里是一个传统的中国版的台湾众包翻译。它的流利度和质量不比大陆的许多版本要好得多,所以建议阅读。

极客学院的课程是视频,听大叔的声音咸,不闷。

但上述数据的内容是不完整的,因为谷歌的文件将随时更新的内容,所以本文中的例子是英文版的最新例子。但官方布局确实是最好的,因为有些大陆翻译文档的排版错误,导致海。所以最好学会比学习。
PS:官方演示视频在WebM格式。因为站酷和不支持,我用GIF相反,一些色彩偏差,请不要在意这些细节。请打开谷歌官方文档(英文版)享受原始视频。

相关文章

ps制作了一个逼真的黑白围棋游戏。

ps制作了一个逼真的黑白围棋游戏。

围棋,逼真,黑白,游戏,电脑软件,本教程是介绍一个朋友到PS,使现实的黑白走的方式。本教程制作的围棋非常逼真,介绍非常详细。建议你喜欢你的朋友一起学习。 ps是一个功能非常强大的图像处理软件。萧边是一个软件,最近一直在自学。虽然只是一个…

2015选择滑稽的个性签名和笑个性签

2015选择滑稽的个性签名和笑个性签

选择,个性签名,滑稽,电脑软件,原谅别人就是为了旋转而在你的心里留下空间。 四油腻歪歪扭扭:没人来邀请,BB没人叫,媳妇不吵,吵得要穿套。 恨,可以拾起争端,爱,可以掩盖一切过错。 不管是男人还是事物,包括爱,它可以简单而简单,但它不可能是随意的。 …

用户界面设计中三色搭配原则的详细

用户界面设计中三色搭配原则的详细

用户界面设计,详细说明,原则,电脑软件,今天我们带来了一个UI设计的三色配色原理文章,教程很不错,让我们看看吧。 在设计中,色彩应保持在三种。Shio,一个梦想的画家,认为31不是三,但我们仍然可以用三种以上的颜色装饰设计,只要主色不超过三。…

两级或三级联动效应

两级或三级联动效应

效应,三级联动,两级,电脑软件,在城市和城市地区的联动效果下降是在Web中的广泛应用,特别是在一些会员信息系统和电子商务网站。开发商普遍使用Ajax来实现无刷新联动下拉下来。这篇文章将告诉,使用jQuery插件,通过读取JSON数据,实现两(三)非级联动…

最新非主流人格签名非主流

最新非主流人格签名非主流

非主流,人格,最新,电脑软件,非主流是现象,不同于主流的生活方式,西方国家的名字,特别是在音乐领域,但后被送到中国,只有学到的外观,但没有得到真正的内涵,中国的非主流体现在照片PS成蓝色,黑色等暗色调,抑郁的,声明除了人物的头发,姿势往往同样的风格…

jQuery中DOM事件冒泡的实例分析

jQuery中DOM事件冒泡的实例分析

实例分析,事件冒泡,电脑软件,jQuery,DOM,本文对jQuery中的DOM事件气泡进行了分析,供大家参考,具体分析如下: 什么是泡沫 页面上可以有多个事件,多个元素可以响应同一事件。假设网页上有两个元素,其中一个元素嵌套在另一个元素中,所有元素都绑定…

如何把照片上传到QQ空间QQ技巧

如何把照片上传到QQ空间QQ技巧

空间,照片,技巧,电脑软件,QQ,QQ空间(Qzone)是腾讯公司开发的个人空间2005。它有博客的功能,已被许多人自世界。在QQ空间里,你可以写日志,上传个人图片的用户,听音乐,写心情,让自己以各种不同的方式。此外,用户还可以设置空间的背景、小衣架等根据个…

QQ空间喜欢QQ空间的唯美与伤感

QQ空间喜欢QQ空间的唯美与伤感

空间,唯美,伤感,喜欢,电脑软件,深爱是无声的,感觉是怀旧的,不是只有彼此,生活,不仅为Haikudanlan的灵魂,真正的爱是语言,灵魂的爱,不旺三千,但不是为了爱情,一心一意,轰轰烈烈,但从未放弃生命,心,爱,你是唯一什么,也是快乐的,幸福的人,人们可以享受,幸运的话,…

悲伤、感情、感情、签名和签名的感

悲伤、感情、感情、签名和签名的感

感情,悲伤,感觉,电脑软件,一、有些人,只想念,不联系;只关心,不打扰。 第二,当你不能用嘴来解释心碎时,眼泪是唯一能用眼睛表达感情的方式。 三,不要过于担心前途不明朗,正如现在清楚地作出努力一样。 四,我们最大的错误是把最坏的脾气和最坏的一面给…

浅谈Javascript中的闭包

浅谈Javascript中的闭包

闭包,浅谈,电脑软件,Javascript,很长一段时间,人们不了解封锁,然后了解行动的范围,以及有关的问题。 闭包,也是一个常规的面试问题,简单点是函数嵌套函数。 函数作为返回值: 函数(){ var a=1; 返回函数(){ ++; console.log(一); } } var =美孚(); AAA();2 AAA();3…

CorelDRAW印前排版的技巧和注意事

CorelDRAW印前排版的技巧和注意事

注意事项,印前,技巧,电脑软件,CorelDRAW,本教程介绍朋友到CorelDRAW印前排版技巧及注意事项。这个教程很实用。建议喜欢的朋友一起学习,希望能对你有所帮助。 CorelDRAW是一个功能强大的综合性软件包,具有许多功能,如图形绘制、图像处理、网页…

如何进入每周Word2010教程Word2010

如何进入每周Word2010教程Word2010

教程,电脑软件,有时你需要在Word2010安排旅行一周。你不需要在任何时候每周输入小时。您只需要一个安装程序,然后返回到完成。它简单快捷。这里有一个看看。 1、word文档、桌面空白的单机鼠标右键、word文档。 2、双击打开,在空白处点击鼠标…