【第1510期】动效不该难
前言
昨天的英文版【英】Motion Design Doesn’t Have to be Hard有人看了吗？这次来看看中文版。今日早读文章由@魔瓜翻译授权分享。
正文从这开始～～
文中用到的一些名次先做个小解释：
进入动画: 新的即将进入界面的内容
退出动画：旧的即将退出界面的内容
渐入淡出：内容渐渐浮现和渐渐消失而不是像剪切一样
过渡模式/动效模式：可以在多种交互情景下使用的过渡动作
容器：像是按键，卡片这种有边框的组件
共享动效：新旧内容之间相似的动效
高频动效：会多次出现的过渡动画
非对称缓和：拿AE里的缓和举个例子：incoming 80%， outgoing 40%； 对称缓和则是50%，50%。
所用的动图速度都被刻意降低以便查看，本文动图较多，载入时间有可能会较长，请各位见谅。
动效使得一个应用更有表现力并且容易使用。尽管动效设计的潜能巨大，它也有可能是用户体验学科里面最少被深度了解的一门学科。 这也有可能是因为动效真正开始介入UIUX领域的时间没有那么多。视觉设计还有交互设计在GUIs（Graphic User Interface）早期就出现并且到现在已经相当成熟了，但是因为那时候硬件设备条件根本无法流畅的处理动画效果，所以动效得等硬件设备的条件达到一定程度之后才真正出现用户的屏幕上。 有时候动效设计与传统动画也会被混淆，精通迪士尼的12大动画原理那是一辈子的事儿，因为要让动画逼真但又不缺风格。但是动效设计也会那么复杂么？ 设计师们经常跟我说动效设计太复杂了，选择合适的动效参数也是模凌两可，但是我认为从UIUX整体角度出发，动效设计不但可以不难，而且也应该不难。
从何下手?
动效设计的最主要的功能就是帮助用户不废吹灰之力的在应用里导航，它还能够利用比如说有动效的标示，Logo，插画等来增加一个应用的表现力还有趣味。 但是帮助用户导航，增加应用可用性始终比增加表现力重要。 所以在给应用加入酷炫的人物，载入动画效果等等之前，咱得先建立一个稳定的导航动效基石。
过渡模式
当你在设计导航过渡时，简约性和一致性是关键。 下面让我们用两种不同的过渡模式看看导航过渡的应用。
容器型过渡
非容器型过渡
1.容器型过渡
如果界面当中有容器型部件的话，例如按键，卡片，那我们就要以这个容器为标准来设计过渡。 容器型部件一般很好辨认，因为基本都有边框，但是在个别情况下在过渡开始之前这个容器是“隐形”的，就好像动图（上）中的这个列表。容器型过渡可以被分成三个步骤。
第一步：
从部件起始大小到全屏，利用Material基线动效缓和(起始速度快，终结速度低)。在这个动图中，容器从一个圆形的按键打开变成一个有着圆润边角的‘全屏’长方形卡片。
第二步：
容器内的部件的大小应该跟容器的大小成正比。见动图，这给予用户一种“实实在在打开一个界面”的感觉。
第三步：
需要“退出”屏幕的内容在容器加速的过程中消失。“进入”的新内容在减速的过程中浮现。两者交替的瞬间在过渡速度最高的时候发生。
把这三小步实践在所有导航过渡上来达到一致性。这种模式把过渡前后两点的关系更加清晰化，因为所有的变化，都发生在容器内。 下面的这五个例子就是想给大家展示一下这种模式的灵活性。
有些容器直接从屏幕外滑进界面。它们滑进来的方向也往往暗示了激活该页面的按钮在哪儿。动图例子里：点击屏幕左上方的‘导航栏’标示，导航栏直接从屏幕左边往右滑进。
如果一个容器在界面内直接浮现，它不会从0%的大小过渡到100%大小。而是从95%开始变大并渐入。这样是为了降低过渡的夸张程度，以至于用户不会把注意力都放在过渡动画上。当该容器要退出界面的时候，淡出就好啦，用不着变小。退出动画一般都应该比进入动效柔和，这样用户更能把注意力放在新内容上。
2.非容器型动效
一些界面里没有容器部件，比如点击屏幕底端的导航栏上的一个标示，用户会被带到一个新界面。这种情况下呢，我们可以使用这个双步骤动效模式。
第一步：
退出的界面直接淡出，进入的界面渐入。
第二步：
进入的界面在渐入的同时，还会加入柔和的变大效果，变大效果一般使用的是Material减速缓和(其实为最高速度，然后慢慢减速)。这种缓和只会用在进入的界面上，这样突出新的内容。退出的界面不会没有大小变化，直接淡出。
如果过渡前后的界面有明确的空间或者顺序关系，可以使用‘共享动效’来进一步加强诠释空间或者顺序关系。 举个例子，在一个步进型导航的时候如动图左边，可以用这种垂直滑动的动效来加强这种垂直的空间关系。在看动图右边的例子，点击‘下一步’按键之后，前后界面共享水平滑动动效。 这样也进一步加强了这种‘步骤型’的交互。
动效实践
简约实用
因为导航动效是高频动效，而且直接影响到一个应用的可用性，所以一定要着重功能性。 但也不是说一定不能有“风格”， 还是得根据应用的品牌来调整。 极具表现力的动画效果一般都会使用在Logo，标示，载入过渡等。 请看动图不同风格导航动效例子。
选择正确的时长和缓和
在选择时长的时候，考虑到导航过渡着重功能性，所以一般较快，当然不要快到用户很难辨认界面中发生了什么。 时长需要根据过渡前后占据屏幕的大小程度来调整，从部件到全屏的这种“大”过渡一般会选用300毫秒(甚至可以更长，如果动画复杂的话)。而小的部件，像是开关的话，100毫秒就完全足够了。设计师们可以以25毫秒为单位增量来调整时长，直到达到一个‘正好’的感觉。
缓和效果其实就是指在过渡过程中速度的变化。Material基线缓和是一种‘非对称’缓和。 开始快，结束慢。这种缓和其实是比较自然的，开始快结束慢除了可以让用户更好的注意新进入的内容外，也依照了自然界事物的运动规律，没有啥东西可以突然就动起来或者停下来。 如果一个过渡看起来感觉很僵硬或者机械化，那有可能选择了对称型缓和或者没有缓和效果。
以上动效模式还有实践就是想给大家展示风格较为柔和的实用性动效设计。 它们可以在绝大多数交互情景里应用，如果大家想看更多的增加表现力的动效例子可以复制文章之后的链接，查看Material Design的动效定制内容。
当你导航动效达标，用户可以轻易使用你的应用之后，在不牺牲可用性的情况下，你就可劲儿加酷炫的动效吧！
关于本文
译者：@魔瓜（公号ID：Mograph_China）
译文：https://www.zcool.com.cn/article/ZODI5NjYw.html
作者：@乔纳斯·奈马克
原文：https://medium.com/google-design/motion-design-doesnt-have-to-be-hard-33089196e6c2
最后，为你推荐