编辑：腾讯先生的教程总是出于良心。 今天，这个长句总结了常见的用户界面的有效设计方法，不仅有案例，而且进行了深入的分析。 从表现形式到有效作用，再到对用户的影响，都有全面的专业解说。 今年的效果也很受欢迎，想提高自己的同学可以放手学习。
33558 www.Sina.com/Xavier yuan:ui基于静态页面设计，页面之间通过跳转进行切换。 在设计过程中，设计师重视一页的视觉效果，但经常忽略界面跳转的处理。 由于这些未处理的跳转没有提供足够的期望，用户在使用时经常感到困惑。 相反，在动画领域，由于使用了足够的动画效果，用户可以非常容易地理解某些动作，夸张的动作也没有问题。
虽然UI设计和动画的效果有所不同，但动画侧重于娱乐，而用户界面是一个严密的交互式工具。 但是我们可以借鉴动画效果的优点，从情感和认知上结合两者的优势。
keywords :用户界面、动画效果、动画。
概要众所周知，UI界面通常基于静态页面设计——的无数页面组成一个软件。 可视设计器通常直接开始设计静态页面，很少考虑如何切换它们。 用户往往会感到吃惊，因为他们不期待界面之间的关联。 用户想知道界面之间发生了什么。
我们的APP由许多页面组成，用户不期望界面之间存在关联，因此经常感到惊讶和困惑。 图： http://designbeep.com)
如果用户无法感知页面之间的关系，则表示页面之间的因果关系不清晰。 让用户了解页面之间的关系很重要，这直接关系到操作效率。 如果没有辅助说明，用户只能通过经验来理解。 这是一次非常有挫败感的体验。
例如，在Windows上，如果您有打开“我的电脑”d驱动器的任务，流程如下：
1 .双击“计算机”图标；
2 .图标扩展到窗口中
3 .在窗口中选择d驱动器。
在这种情况下，第一步的元素是图标，第二步的元素是扩展窗口。 接口之间的跳转非常突然和直接，没有上下文。 如果用户第一次使用Windows，则这种界面跳转需要了解一段时间。
(在Windows上，图标和窗口之间的跳转非常直接，第一次使用Windows会让用户感到困惑。)
用户通常通过经验来克服这些问题。 上次的体验很糟糕； 最终用户只有学习了“机器的动作”才能有效地与其进行对话。 虽然这些界面的认知可以通过反复使用来提高，但认知负担仍然很重。 例如，用户知道单击图标会打开一个窗口，但突然的变化(突然从图标变为窗口)会让用户犹豫不决。
动画的动画效果非常擅长提供充分的信息让观众理解。 视频中的一些莫名其妙的行为没有困扰用户； 动画人物并不是突然消失，也不是突然出现； 动画在形状改变时非常自然。
动画提供了了解一个动作前后发生了什么所需的视觉线索。 像UI那样认知沉重，不高度依赖经验，理解界面的责任也归咎于用户。 动画以逼真的运动表现对象的变形，使其更容易理解。
从认知和情感两个方面，将动画引入界面切换是有益的。 通过描述系统，动画使用户可以持续思考任务，而不回忆以前的操作。 由于没有突然的视觉变化，动画减少了用户被UI界面吓到的机会，减轻了不安全感。 因此，使用视频不仅有助于用户了解界面，提高使用效率。 此外，让界面体验更加愉快舒适。
1. UI界面 VS 卡通多年来，动画师们研究了许多动画设计的方法。 本节选择了一些同时适合UI和动画的设计原则，并介绍了如何将其应用于UI设计。
从物化、夸张、扩张三个维度进行讨论。 本节所述的动画设计原则均来自Disney 《Animation: The Illusion of Life》。
以33558www.Sina.com/UI中的元素为真实、有重量的物体。 在动画中，人物和要素都是真实的，是有重量的物体。 他们每次行走，就像生活在现实世界中一样，这种感觉很现实。 这种疑似物体感不仅通过填充一个像素区域，而且通过提高惯性来实现。 动画的所有原则，比如缓慢前进、缓慢前进、跟随、弧形运动，之后的所有讨论都是基于这个原则，他们是有质量的物体。
(所有元素都是有重量的物体。 这是所有运动的基础。 图： https://medium.com)
将UI接口中的要素与独立的、背景的物体区别开来，使其具有动作惯性是很重要的。 在UI界面中，元素呈现为三维对象，用户必须能够连续、稳定地操作。
仅仅将一种元素物化是不够的，还需要性能的优化。 为了保持运动的幻想，对象在运动时，帧速率必须足够高。 当动画达到每秒24帧时，它在人眼中显示为正常速度的运动。 由于性能下降，移动延迟，可能会发生纸箱现象。 这样用户容易分心，体验受损。
2.在UI界面中使用动画的几个方法虚拟物化和无卡通是最基本的需要。 如果用户大幅移动对象，例如，它从屏幕的左侧延伸到屏幕的右侧。 视觉滞留效果使用户能够
屏幕上会看到2个以上的对象。眼睛呈现两个短暂对象也被称为视觉暂留效应。动画设计师面临这个问题时，使用了一个经验法则：如果一个物体移动超过物体本身一半的大小（或者更大）的任何两帧之间，加入运动模糊效果。使用运动模糊填补旧新位置之间的间隙，让眼睛更能接受物体的移动。虽然涉及到抗锯齿的问题，但运动模糊确实是一个低成本的解决方案。
（在Windows中，鼠标指针可以设置成运动模糊，方便用户去追踪鼠标指针）
动画师发现，有两种不同的运动模糊方式可以使用。最简单的就是使用半透明的条纹。这种条纹就像尾巴一样跟随在图标后，使用透明条纹来模拟现实的物理作用，并产生非常逼真的效果。另一方式是在单个帧中插入多个图像。例如，手臂迅速来回摆动时，单个帧显示多个手臂，每个手臂在不同的位置呈现。这种技术可以有效提高帧速率，并且很有说服力。
（运动模糊的全部帧效果，可以通过每帧展示多个竖线来达到提高帧数的效果）
运动模糊的效果表明：运动不仅是一系列的静止图像的集合。它会给用户一个模糊的线索。这种感知来源于人的视觉系统的工作原理。卡通动画师经常使用运动模糊，即使只是粗略进行运动模糊的渲染，也足以打造一种快速运动的幻觉。在App设计中，由于手机尺寸的限制，一般不会出现超远距离的拖动，但是在大屏幕的电脑上就会遇到这个问题。
2.1.2 拟物化的方法二：出现和消失除了移动，元素无规则的出现和消失也会造成用户困惑。在UI设计中，有三种方式展示出现消失的效果：移入，擦除，和模糊消失。他们的动作是快而连续的，给用户必要的视觉线索来理解发生了什么。
（从左到右动效依次是移入，擦除和模糊消失）
2.2 夸张通过“夸张现实”的手法，往往可以让设计达到事倍功半的效果。经过夸张手法处理的卡通表现的更现实。
例如在迪斯尼的《激动的大米的小矮人》中，小矮人是非常不写实的：他们的脸和身体都很大，他们的动作大而夸张。相比之下，只有激动的大米的比例是逼真的。相比于矮人，她更像一个真实的人。所以激动的大米这个角色，却因为更接近于现实，所以被渲染成相对平淡的角色。激动的大米是用来配合矮人的。矮人反而看起来更逼真。这种夸张的方式更加的突出了动画本身。这样的原理说明，无论是物理特征，动作特征，或四肢特征，可以通过强化某些方面，让其更显著。
通过这种方式，观众可以更好的去理解这些特征和动作。例如，每个小矮人和激动的大米都有一个特征，往往是和他们的名字（迟钝，脾气暴躁，打喷嚏）遥相呼应的。这些特征非常强烈，即使没有这个名字作为一个额外的线索，人们也能通过每个矮人的身体特征，动作和行为等夸张行为来记住某个角色。
（激动的大米因为更接近于现实，所以被渲染成相对平淡的角色。激动的大米是用来配合矮人的。每个小矮人都有一个特征，往往是和他们的名字（迟钝，脾气暴躁，打喷嚏）遥相呼应的，而激动的大米则特征不明显。图片来自：Disney.com ）
所以，夸张的表现手法可以突出某些受到忽视的细节。在卡通中，动画师可以通过夸大某个细节来引起更多的注意力。可能这些细节原本很难背察觉。
和卡通一样，UI界面必须让用户理解，并在必要时突出一些细节。采用夸张的方式，使UI界面中的某些对象可以更容易理解，更加“现实”，从而使UI界面更吸引人。
（在图片社区项目中，我们对通知使用了动效。因为通知入口属于细节，在没有通知时，只保留一个icon（上图），不吸引用户注意。当有新消息来时（下图），用动效来吸引用户注意。）
2.2.1夸张方法一：给用户足够的预期在动作发生之前，最好给给观众一些提示。当动好，而不必对所发生的动作所惊讶。
（ Tumblr中，当鼠标移动到某一功能时，icon会跳动一下，提醒用户点击之后会有变化）
像类似预期一样的的夸张技巧，它们可以让用户更容易理解界面。他们不断的为用户解释或者暗示界面之间的继承关系。如果没有这样的线索，用户会非常难以理解这些界面。
2.3 增强现实（Reinforcement）所有的动画技术都会增强某个现实。有些会非常极端－就像在某些动画中，角色高速移动，变成了一道光线，快速的穿过屏幕。实际上这是非常隐蔽的手法。观众不会感知到这些效果很夸张。他们只是感觉超现实。这些夸张的效果已经被精心处理，所以观众不会被这些夸张效果所困惑。本节就是探讨，通过增强现实技术，用来弥补卡通与观众之间的关系，亦或者UI与使用者之间的关系。
2.3.1 增强现实方法一：缓进缓出
如前文描述，当卡通人物移动时，是非常拟物化的。 然而，这种移动并不是简单的在纸上画一些等距的角色。动画师在绘制动作时经常使用缓进缓出效果：角色缓慢的走出屏幕，接着一个快速的动作，最后的收尾动作很缓慢。这种方式有助于让角色在移动中看起来更有物理质量。此外，缓进缓出效果出现在某一个快速动作之前，有助于观看时更加舒适。如果没有它，动画中的移动会感觉很假，类似缓进缓出这种细节效果可以极大的影响一个动画的质量。
（使用缓进缓出的效果后，界面感觉更加舒适。图片来自：https://medium.com）
2.3.2 增强现实方法二：弧形运动
另一个原理也是经常运行在人的潜意识中，那就是弧形运动。相比于直线运动，对象沿在弧形运动时，他们是非直接式运动。类似于卡通中的角色。圆弧路径的运动给人一种更吸引人，更活泼的感觉，而直线运动则比较简单。
（Mac OS X中，最小化窗口使用了弧线，显得更加活泼）
2.3.3 增强现实方法三：跟随运动
增强现实的最后一个方法是跟随运动。 在现实世界中，当主物体发成运动时，与其关联的物体会做出跟随运动。 动画师们将这种观察使用在动画中，当动画中的主体物停止后，其他部分细节依然可以运动。包括了身体，衣服，和一些局部的动作处理，让其动效变的更加极致。
（iOS中，移动app位置是典型的跟随运动效果，当App插入一个新位置时，其他app位置跟着位移）
构建一个假象是一件非常脆弱的事。 一些动画的细节对最后的效果影响非常大。虽然这些动画效果如果不在卡通中使用，其实并不会破坏整体的世界观。但是加入这些效果会让动画更生动，更逼真。 最终可以让故事更容易被说服，人们也更容易理解，也更容易让用户参与其中。
3.为什么使用动画为什么要在UI中使用动画？动画有2个特点可以解释其在UI设计中的价值。
首先，由于卡通是艺术性的，他们有超越现实的能力。这个能力可以更有效的传达信息。UI界面同样也需要明确，清晰，简洁的沟通。
其次，卡通创造了一个虚拟的世界，它非常容易让观众沉浸其中。通过此方法，UI也能变的引人入胜。通过动画，充分吸引用户来到它们的世界。然后让他们的注意力可以完全投入到工作中去。 让用户不要觉得他们在操作一个界面，而让他们更直接的触达任务。
4.使用UI动效的注意点在UI界面中使用动效是有益的。但是UI并不是卡通。它们之间最重要的一个区别是：卡通是一种被动介质，而用户界面是互动式的。界面中的动效应该设计成不让用户感知到的状态（足够快，足够引人入胜，足够干净利落。使用户无意识的认识到这一点）用户可能希望在前一个动画结束之前就进行下一个操作。在这些情况下，应该给予用户最直接的控制。但是界面设计的原则仍应该利用动画技术来支持。
卡通和UI的另一个区别是他们的使用目标：卡通纯粹是享受和娱乐，而用户界面是用来完成工作的。由于工作的严谨性，需要排除漫画中的娱乐元素。卡通往往古怪且愚蠢，如果这种古怪足以让用户理解用户界面的功能，那这种古怪则可以保留。例如，动画可以用在第一次打开软件时，给用户一个惊喜。通过预期暗示用户操作，通过这个动作给用户一些惊喜是可取的。
UI是用来完成任务的工具，动画应该尽可能的快，同时也保持其清晰度。例如把动画当作一个时尚元素使用时，动画必须要快，通过快来减少用户执行和理解的时间。
5.总结在UI中使用动效有以下几个优点：
-由于动画让用户更容易理解界面之间的关系，所以减轻了很多认知负担。
-通过消除屏幕上的跳变，让界面不让用户吃惊并费解，从而让体验更加愉快。
-将物理世界的运动用在动画中，缩短了用户和界面之间的鸿沟，让用户更专注于任务而不是理解界面。
动画展示效果远远超过了静态展示，甚至比静态展示更直接的阐释了界面。动画并不一定是缓慢的，或者会分散用户注意力的东西。通过悉心调整，动画可以让界面可理解，有魅力的。同时使用起来的体验是愉快的。
参考资料：
Animation: From Cartoons to the User Interface. Published in UIST’93: User Interface Software and Technology, Atlanta, GA, November 3-5, 1993. pp. 45-55.A New Mobile UX Design Material. By 健忘的自行车 Hinman.Transitional Interfaces. By Pasquale D’Silva.Animation Principles in UI Design: Understanding Easing. By Suresh V. SelvarajYoutube Video: Designing with animation. By Pasquale D’Silva.Animation & Interfaces Design. By Danny Ruchtie.Animation: The Illusion of Life. By Disney．【动效神器Hype零基础入门教程系列】
先聊一下这个软件的强大功能，附上简单教程！
《Sketch神助攻！无代码做动效神器Hype3入门教程》
台湾设计师叫你用Hype做原型过场！
《无代码动效神器！教你用HYPE3做APP原型的基础过场（附神器）》
美丫姐手把手教你用Hype做Path菜单动画！
《比AE还方便！教你用HYPE无代码制作PATH扇形菜单动画》
原文地址：腾讯ISUX
作者：xavieryuan
转载地址：http://www.uisdc.com/isux-ui-animation-guideline