这是一个翻译系列，原文是谷歌18年所出的材料设计指南（文末有链接），强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇，一共百余篇，欢迎关注哦。
动效可以通过自定义来表现独特的风格和个性。
目录
自定义选项速度移动排序图标和插画精简转换
自定义选项
个性
动效可以通过速度、移动、排序、图标和插画以及收缩转换来自定义。
自定义动效要符合预计的氛围与风格。例如，一个好玩的app可以使用震荡或拉伸效果来营造有趣且吸引人的场面。
使用与app风格相匹配的动画。这个动画logo和卡片振荡效果出现在用户操作的过程中。
动画插图振荡
避免使用与风格相冲突的效果。延时交错与此app强调效率的风格迥异。浮动操作按钮的弹性动画和页面振荡对这款主打生产力的app来说过于活跃。
强调延时动画图标振荡
一致
应该统一运用动画自定义技术，并根据它们出现的场景进行细化。
例如，一个进入界面的元素使用了延时动画，那么此效果也应该统一运用在相似的场景中。
在所有类似场景出现的地方都使用同样的动画。此UI对所有的标签列表选项使用了相同的延时动画效果。
避免在类似界面出现明显不一致的处理方式。Bill中的列表使用了延时动画，而Budgets中的列表是作为一个元素在移动。
关键触发点
在用户使用过程中，自定义的关键点可以创建连接。
一个奖励用户完成任务的动画可以给应用带来趣味性。
频率
在增加自定义效果时要考虑动画的使用频率。自定义应该营造目标氛围，不要干扰用户完成任务。
系统图标动画应尽量精简，避免频繁使用而使注意力分散。
动画图标优化了底部导航栏。
过于频繁地使用高度自定义动画（例如屏幕启动动画）会让人觉得厌烦。可以通过仅首次启动时显示来降低使用频率。
Logo动画的高频率出现降低了用户体验。
速度
标准缓动
标准缓动适用于大部分转换。推荐用于帮助用户完成任务的转换中，例如基础导航。
标准缓动给了这个转换一个功能性的风格。
强调缓动
强调缓动会在动画快结束时加入强调效果。推荐用于放松或紧张等标准缓动难以表现的场景。
强调缓动可以用来烘托紧张热烈的气氛。
强调缓动可以用来表现放松和优雅的风格。
强调缓动比标准缓动加速更快，所以可以较慢地结束移动。
时长
减短动画时长会使其感觉更明显，增加动画时长能表达出放松的感觉。
时长超过400ms时，标准缓动可能会表现不佳，这时可以考虑使用强调缓动。
通过对默认时长的小幅调整可表达出特别的效果。将默认时长从300ms增加到350ms会形成一种放松的感觉，将其缩短到250ms则更加醒目。
避免对默认时长进行大幅度调整。例如将转换放慢到550ms就过于迟缓，加速到115m则会显得不和谐。
移动
运动轨迹
当元素变换时，它所移动的轨迹就称作运动轨迹。
默认的运动轨迹是直线。如果元素改变大小或沿对角线移动，则运动轨迹可能是直线或者弧线。
直线运动
直线运动产生简单的移动，适合大多数转换，这种移动极少分散注意力。
此卡片径直在折叠和展开状态之间转换。
这种变换产生了一个大对角运动，这与其它元素主要上下或左右移动不统一。
弧线运动
弧线模拟自然运动。它们适用于那些需要大幅调整表面纵横比的过渡。
底部动作条通过一个弧线运动轨迹流畅地转换成列表形式。
这个弧线轨迹穿过了它在Y轴上的静止位置。
弧度轨迹有两种可能方向，称为垂直输出和水平输出。垂直输出意味着沿着弧线的元素将以垂直运动来结束，水平输出则表明运动将以水平方向来结束。
通过扩展面的运动来确定要使用的输出方向。弧线应该与UI的主滚动轴吻合。例如，垂直滚动UI中的卡片将使用垂直输出展开。当卡片折叠时则运动相反，先垂直再水平。
沿滚动方向展开表面，然后反方向沿原始轨迹折叠返回。
不要使弧线运动与滚动方向产生冲突。
过冲
过冲是指元素运动超出了其停止位置，就好像被大力推动一样。过冲用于：
为滑动或滚动手势增加冲力感强调重要或时效性信息为小组件传达趣味和能量，如开关
过冲给滑动手势增加了冲力感，使其表现更加自然。
无过冲的手势感觉很机械。
将过冲应用到小组件可以增加趣味性。
此对话框使用过冲来强调入场。
振荡
多次使用过冲会产生振荡。每次额外前后移动都比前一次要小，直到运动停止。振荡可用于创建卡通风格。
使用振荡效果手势营造奇特有趣的氛围。
不要在强调功能和高效交互的界面中使用振荡。
拉伸
拉伸是指沿着单轴增加元素大小。简单的组件，例如开关和滑块，可以通过在它们移动方向上的拉伸来表现速度之快。拉伸可以在水平、垂直或者圆圈上移动时使用。
可以通过改变追踪边缘的延时来自定义拉伸，延时越长，追踪轨迹也越长。
上圆点延时：150ms
下圆点延时：350ms
水平和垂直移动可以使用拉伸。对角移动应使用淡入淡出来替代拉伸。
拉伸为步进选择指示器增添了个性。
该时间指示器在摆动到时钟上的新位置时使用了弧形移动。
避免拉伸非简单形状（圆形、矩形和圆角矩形）元素、对角线运动路径和非正圆曲线。
不要在普通UI组件上使用个性动画，这个浮动操作按钮的卡通样式会让使用此任务性应用时分散注意力。
海拔
海拔是指元素在Z轴上的位置。在转换时，可以对海拔进行动画处理来增加深度和层级感。
视差
视差是指靠近观察者的元素比远离的元素移动更快。视差可以用来表示元素的不同高度和表现深度。
视差使滚动时增加了深度感
视差表明了不同元素所处的位置
比例
尺寸缩小的元素看起来在后退，增大的元素看上去在提升海拔。
背景内容的收缩表明它在向远方移动。
排序
时间偏移
为强调一个元素，可相对于其他元素将其时长往后错开一点。例如，浮动操作按钮可以通过在其它动画都停止后再结束进场来加以突出。
浮动操作按钮动画比其它应用栏动画要长100ms，突出了FAB。
交错
交错指的是按顺序将时间偏移应用于一组元素，如列表。交错营造了瀑布一样的效果，让用户的注意力在每一个项目上都有短暂停留。它可以揭示重要内容或突出组内的功能。
使用交错效果可以优化重要的转换。当用户返回app时，交错使这个变换更加舒适和优雅。
交错暗示组里的每一张卡片都可以单独操作，这种交错动作鼓励与单个卡片进行交互。
避免在频繁交互组件上使用交错效果。同样的效果连续多次出现时，会产生无聊的效果并引起分心。
为提供焦点，元素应该使用短延时来交错，并沿着主轴移动。为了使效果更细腻，应按行或列而不是单个元素来延时。
项目从上到下延时以完成纵向滚动。
项目从左到右延时以完成横向滚动。
不要使用随机交错，会分散用户注意力。
避免在元素间增加延时效果。
图标和插画
图标、插画以及产品logo的细腻动画可以为用户体验增添优雅和趣味。
系统图标
动画系统图标就是添加了细腻动作设计的默认系统图标。它们有助于提升用户体验。
这些图标动画使细节增添了一丝俏皮感。
Owl是一个丰富多彩的教育应用，其图标设计表现出了品牌特色。
产品图标
动画产品图标使UI更加友好和优雅。
钻石logo的3D旋转增加了空间想象感。
logo动画经常从产品设计的形状、线条和图案中找到灵感。这个logo灵感源于纸张的卷曲轨迹。
logo动画可以参考一些与形状相关的行为。这个logo走入视野，反映了它所代表的鸟的动作。
logo可以使用角色动画来塑造特别的风格。
插画
动画插图给用户创造了一个愉快的瞬间。
当未知错误出现时，特色动画可以表达出共鸣。
插画可以指导用户选择通知设置。
精简转换
用法
通过使用较短的共享动作，转换可以被压缩和简化。例如，相对于通过补间动画来改变容器的大小和位置，列表转换使用淡入淡出的移动距离更短。
列表过渡使用了一个小纵向位移，而非大变换。
此列表和焦点元素通过补间大小和位置动画进行转换。元素移动的距离越大，吸引的注意力就越多。
大屏幕
精简转换减少了大屏幕（例如桌面显示器）上因移动而引起的混乱。
Web上照片间的精简转换
原文地址：Material Design
译者：招财鱼
