材料设计文档动画学习笔记
你好,我是大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相反,一些色彩偏差,请不要在意这些细节。请打开谷歌官方文档(英文版)享受原始视频。