编者按：本由负责Material Design 动效设计的谷歌设计师撰写，帮助大家深入理解动效作用，才能做出更好动效设计。
时候科技产使用起非常复杂，但其实「复杂」本身好坏之分：不好因处理好这复杂所以产了「混乱」，所以应该被批的不复杂因复杂所产的混乱。——唐纳德·诺曼
△ ：众点；马蜂窝 下：IFTTT（人手类型应用）；Airbnb（彼迎）
一、界面密度高就混乱么？
我们都喜欢追求「极简风格」， 设备/应用看起越「净」越好，但「净」的产品就一好用吗？真的未必，时候反不知道该从何始。盲目追从低密度界面，了简洁简洁也不件好事。密集界面就不好看并且难用么？ 纽约待了八，一直用「净」的手机应用，我以会非常不应内的 APP。然留北京间使用内的应用不但觉得不知道该怎么用反觉得咱们 APP 的功能强且手很，界面绝对不比「净」的界面差。
CJK（中国，韩国，日本）场的 UI界面密相对于欧美 UI界面密会很多，之前看过一个针对 CJK户的调查，里面有一条：「CJK户对密较的界面有非的忍耐。」 之后跟一位中国户体验研究员过这个问题。「为么中国的普遍 UI界面都如此的密集？」 答说：实这仅仅只是一种设计格/上面的一样，有非多的情况都是要满足商方面的需要。在相页面整洁、有设计感，把好一分按钮藏在「汉堡包图标」里，把更多的功放在界面当中往往更为重要。 每一个按钮的背后都是一个团队的努，他们可想因为界面的「整洁」而被放到汉堡包图标或是挤到屏幕方需要户往上滑才看见。这往往是一种商决定，并非设计决定。
Complexity can be tamed, but it requires considerable effort to do it well. （复杂实可被驾驭的，但是驾驭复杂则需要户一定的努。）——唐纳德·诺曼
我个人觉得界面密与「对设计重视与否」并没有那么大的系。当然绝对除 CJK 的户确实对于密的版接受程更，但设计得要听从商要求这是合情合的。 那我们作为界面/交互/效设计师的职责则是降低来自各种密产生的「混乱」，使得户够轻松驾驭界面。
动效设计为用户验里面一个极为重要但是时常又被忽略的部分，有时直到产品快要成型的时才被提，加上动效之很互的漏洞被展现出来，但是又为时已。
很设计师把动效理为一种更高面的设计，即为一个界面内的在即时的和非即时的件之间的一种暂时的行为。（其就是渡）——Isara Willenskomer
早苹果Mac 桌面文件夹的打与关闭，注意打关闭的过程中用户可以清晰的分辨出窗口从屏幕的哪置的。
效实对于户体验这个大专来讲是一种的科，随着我们的设备的硬件条件越来越好，效才被支持。效里有一分可归为传统画，如说图标/插画/载入画。 这些可借鉴迪士尼的十二大画原则。但是另外一分则是扎根于「交互」，Issara Willenskomer 他在户体验领域15年的经验总结了属于 UX效的12大原。
二、动效通过四大块增强可用性
1. 减少预判误差
用户界面中看到一组件的时候，他们会产对这体什么还它的运动方式的预判。设师应该减少的「预判」与「实」的差距。
2. 增加连贯性
这可以涉及到单界面多连环界面。 比如单界面（日历里面建立新的事件）内用户否可以毫不费力的导航以及多连环界面（浏览商品 – 加入购车 – 买单）的用户体验。
3. 强调叙述
一应用的导航过程中，过一系列的操作，用户会脑海里形该应用的信息结构框架，动效把这些环节紧紧相扣并帮用户加速学习该结构框架。
4. 清晰关系
这关系可以指的不同界面之间的以及一界面内不同组件间的空间，主次关系。清晰的关系可以效率的引导用户。
了解了上大后，面我们来看一些例子。
三、帮助用户导航，促生思维模式
最我的同事 Jonas Naimark 在 Medium 上面发表了《Motion Doesn’t Have to Be Hard（效该难）》中总结得特别好，这里给大总结两点。我获得他的允许把这个章翻译了，有兴趣的同可戳标题查看全。
1. 实实在在
家注意到这两后小变化？ 他们完全按照这器的小变的，这给予用户一种「实实打一界面」的感觉。 这种细节其实对于「促思维模式」很帮的，因它把一器（界面）里的内器本身紧密的联系了一起。再看下面的例子，这例子又引出了下一话题。
2. 界面从哪儿？
界来去用户熟悉这个应用不界空关系常要，新界从哪儿来该回哪儿去，界进入以及出去也接暗示了激活该界按钮大概位。设计这块时候不定要按照这个套路，可以研究属于自己运动模，是定要注意运动模致性。
小结：如果的动效连帮用户导航都到，图标/过场动画什么的都得往后排。
四、在设计交互模式的时候
We must design for the way people behave, not for how we would wish them to behave.（我们设计师不能用我们自己思维去用户设计交互模，我们必须根据用户们为去设计。）——唐纳德·诺曼
1. 动效不只是过渡动画，得多思考用户的行为
在计交互的候往往都会以的思维出发，想着用户在执行完一个动作之后就会执行下一个动作，那在这个动作之后会出现这个过渡，下一个动作之后会出现下一个过渡。可是现实完全不是这，用户底会不会按照计的交互套路除非做用户测，否则根本没法知道。
Motiongraphics 里过渡跟动效过渡不样，我们动画师画什么是什么。 在设计个交互动作时，设计师需要思考有没有在动作开始与结束这两发生其他事件可能，并利用动效来教育用户个过渡可以过不动作来激活。用户手指摆位，怎样用起来更加便，减少手指需要移动距离等都应该被考虑到。 然了，不是说个交互转折都死磕，是多思考思考用户为绝没有坏处。
△ Safari关闭网页移动暗指用户也可以过左滑动来关闭网页
2. 颜色，音效有震动
动效不是视觉上，为动效其实是跟用户沟。 另是「小输入，大输出」。想想在苹手上浏览网页，要轻轻在网页往上划，会滑出很长段距离。在设日期，调时时候，手震动以及音效使交互变更加真实。
△ iOS设日时间的时候，自手机的音效震动效果增加了这交互的真实感。
△ 谷歌Pixel 面，用户可以通过挤手机激活谷歌智能手，这不但使得交互变得方便，也一程度增加了互动的趣，甚至让机器「活」了起。所以交互不一都屏幕发。
3. 暂停，变向，返回，取消
面提到了设一交互动作的同时，设师可以思考动作始到结束这两点之间发其他事件的可能，交互动作能不能中途转向？（打视频查看完整操作）
这样一个作就可解决很多问题，执行作与决定一步做么可同时进行，大大增了交互效率，反之如果机器做到允许户在执行当前作的同时做一步决定的话，那么户在执行一个作之前就要做决定，因此降低了互的效率。
装置也应该时刻给用户反应，接下来生什么。
当往下拉动照的同时，白的背渐渐变得透明，暗示用户照果时放手的照被关闭。
4. 给符合现实的思维方式和方式
图标到全屏和开画需的时长肯定一样，屏幕的大小需要被考虑到。
Material 基线效中，从一个从容器件到全屏的画需要300毫秒的时长。
利弹友好的示户已经到达了界面的末端。
直接操作，指尖与触碰容同时移。
小结：想着怎样设计互模式加上动效能使得装置与用户时刻沟通，通不同的感官增加输出，达到人机合一的境界。
五、制作Demo
1. 择适当的参数
根据过渡的「大小」（画占屏幕的大小）和复杂程择适当的速和时长。
虽然都是图标画，但是左边因为复杂程较低，画时长只有100毫秒。而在右边较为复杂的图标画时长则是500毫秒。还有章上面到的从容器件到全屏的效时长为300毫秒。
2. 择正确的缓和效果
缓效果建议使用非对称型缓，比如 Material基线缓。
3. Demo效了，能互动的Demo能明问题
动效设师可以实自交互设师的设，把静态的界面变动态Demo，交互流程一目了然。但时候交互设师们会不自觉受到他们脑海里已形的交互模式的影响，所以如果觉得还什么补充的话，应该主动提出。还可以结合不同的手势，阐述过渡中所涉及到的所可能的参数，置，动，按压以及按压面积多几交互流程方案，然后团队一块讨论，也可以交互设师私底下讨论（根据的作氛围）。
有条件可使 Principle，Framer，Figma，Invision等设计工具直接制作可互Demo，没有么真正使更有说。
4. 在设计过渡当中注意尴尬帧的存在
It’s not the frame rate, it is what in the frame!（别只怪帧频，帧里啥重！）——《Design Fluid Interface》Apple WWDC 2018
更高帧频然有帮助，是视觉变化太大时候，眼睛下子能侦测到这信息缺失。
大家可以看到在右边原型运动过程很明显有处「空缺地」。
帧频变成60帧后确实有好转，是看起来是有不舒服，动效设计师应该注意是这个「不舒服瞬」，这情况下可以过调时长或者利用叠加渐进淡出等来改善过渡。
△ 适时候可以接把那个部分去掉。是要确保这个部件前后样保持致，否则用户容易混淆两者是否是相部件。
新内容会在过渡最快时候进入界。
小结：思考过渡模式的时候把脑子思维，思考各种用户场景以及动效参数，制作给力Demo。注意过渡屏幕里面的细节，记住不帧频的问题，帧中内的问题。
六、与团队合作的时候
动效设师设与实的粘合剂一点也不过，当我们看一系列的静态界面的时候，脑海里浮的各种交互流程，我们得理性。看到一标志，一人的时候，得如何把它们变活并且符合品牌风格，我们得感性。 当我们面对程师们的时候，不但得效的让程师明白一过渡界面中发了什么，还得技允许的范围尽可能服程方满足自设方的求，我们理性加感性。
时刻记住，你是画师。你制作的 Demo 来引发并参与交互设计师，界面设计师的讨论。 平时多跟工程师聊聊，了解当前技术上面的限。因为实现一个效会受到来自代码框架的限，还有产本身的限。有一些过渡被实现是因为进入的界面来自第方产，这样第一方没有办法控制第方页面的结构，无法美的把双方的界面串联起来，那这个时候设计只先屈现实。有时候设计师跟工程师思维的同，会导致他们有时候会想到他的实现方式。 曾经跟一位工程师聊过，我问实现一个组件的代码的书写方式只有一种么？ 答说是，有很多种，但是最有效率的书写方式就那么一种。但是思维方式一样代表好，而且「没有意是坏意」，有时候甚至会因为你的议工程师们会想到的实现方式。你制作的 Demo 如果工程师们达到，并代表后达到，这成为他们之后的目标。
总结
效设计先要解决的问题就是增应的可性，帮助户轻松驾驭应。确保可性之后，在影响户体验的前，天乱坠的特效。
简易的导航，有效的渡以及酷炫的动效最终是服务用户。成功的互能使得「人机合一」，自的互往往成败在细节上，么正细节光参考网站上玲琅满目的素材与案例和学习动画做是不够的，阅读关用户验书籍学习理论识是一大方面，最重要的是人身。所以泛阅读，对比阅读，用户验识完不用从用户验的书中来。
你，是动效计，是一个产品的顶梁柱。一定要积极的参计流程中，尤其是在计产品初期，放开思维张开嘴。
希望以上内容可以让大家进步了解动效设计，那些想学习动效设计又摸不着头脑学大，也现在已经在岗位上动效设计师们些鸡血。
欢迎关注作者的微信公众：「魔瓜」
浙公网安备33011002017549号