腾讯同学的教程一向都是良心之作，今天这篇长文收罗了常见的UI动效设计方法，不仅有案例，而且分析透彻入微，从表现形式到动效的作用，对用户产生的影响，都有全面专业的解说。今年动效也是一大热门，想自我提升的同学可以放手来学习了。 概要 xavieryuan：UI是基于静态页面来设计的，页面之间通过跳转切换。在设计过程中，设计师很重视单页的视觉效果，却经常忽略了对界面跳转的处理。这些未经处理的跳转由于没有提供足够的预期，所以用户在使用时经常会觉得困惑。与此相反，在卡通领域，由于使用了足够的动画效果，用户可以非常容易理解某个动作，即使夸张的动作也没问题。 尽管UI设计和卡通动效之间存在差异：卡通更侧重于娱乐，而用户界面却是严谨的互动式工具。但是我们还是可以借鉴卡通动效的优点，从情感和认知层面上将两者的优势相结合。 Keywords：UI、动画效果、卡通。 1) 当用户感知不到页面之间的关系时，就说明页面之间的因果关系不够清晰。让用户理解页面之间的关系至关重要，这直接关系到操作效率。在没有辅助解释的的情况下，用户只能通过经验去理解。这是一个非常有挫折感的体验。 举例来说，在Windows中，如果我们的任务是：打开“我的电脑”中的D盘，那流程是这样的： 1) 把UI界面中的元素变成独立的，区别于背景的物体，并让其拥有动作惯性是非常重要的。在UI界面中，元素应该被绘制为一个在三维中的对象，用户可以连续并稳定的操作他们。 光是把一个元素拟物化还远远不够，性能优化也是必须的。为了保持移动的假象，对象在运动时，帧速率必须够高(当动画达到每秒24帧时，人眼看到是正常速度的运动)。由于性能下降可能导致移动延迟，从而造成卡顿的现象。这样用户容易分心，体验就会折损。 2 ) 所以，夸张的表现手法可以突出某些受到忽视的细节。在卡通中，动画师可以通过夸大某个细节来引起更多的注意力。可能这些细节原本很难背察觉。 和卡通一样，UI界面必须让用户理解，并在必要时突出一些细节。采用夸张的方式，使UI界面中的某些对象可以更容易理解，更加“现实”，从而使UI界面更吸引人。 (在图片社区项目中，我们对通知使用了动效。因为通知入口属于细节，在没有通知时，只保留一个icon(上图)，不吸引用户注意。当有新消息来时(下图)，用动效来吸引用户注意。) 2) 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 Rachel Hinman. Transitional Interfaces. By Pasquale D’Silva. Animation Principles in UI Design: Understanding Easing. By Suresh V. Selvaraj Youtube Video: Designing with animation. By Pasquale D’Silva. Animation & Interfaces Design. By Danny Ruchtie. Animation: The Illusion of Life. By Disney.
温馨提示：答案为网友推荐，仅供参考