动态设计原理：从卡通动画到UI动态总结UI基于静态页面进行设计，通过跳转进行页面切换。 在设计过程中，设计师非常重视单页面的视觉效果，却往往忽略了界面跳转的处理。 这些未处理的重定向经常让用户感到困惑，因为它们没有提供足够的期望。 相反，在卡通领域，由于使用了足够的动画效果，用户可以非常轻松地理解某个动作，即使夸张也没有问题。 尽管UI设计和卡通动画之间存在差异：卡通更注重娱乐，而用户界面是严肃的交互工具。 但我们仍然可以借鉴卡通动画的优点，从情感和认知层面将两者的优势结合起来。 UI、动画效果、卡通 1、UI界面VS卡通 大家都知道，UI界面一般都是基于静态页面来设计的——无数的页面组成了一个软件。 通常，视觉设计师开始直接设计静态页面，很少考虑如何在它们之间切换。 用户常常会感到害怕，因为他们不希望界面相互关联。 用户总是摸不着头脑，试图了解界面之间发生了什么。 （我们的应用程序由很多页面组成。由于用户对界面之间的连接没有期望，因此他们常常会感到害怕或困惑。图片来自：/2014/06/19/-app---as-shoe /）当用户无法感知页面之间的关系，说明页面之间的因果关系不够清晰。
用户了解页面之间的关系至关重要，这直接关系到操作效率。 在没有辅助说明的情况下，用户只能通过体验来理解。 这是一次非常令人沮丧的经历。 例如，如果我们的任务是：打开我的电脑中的D盘“ ”，则过程是这样的：此时第一步的元素是图标，第二步的元素是扩展名窗户。 界面之间的跳转非常突然和直接，没有任何上下文。 如果用户是第一次使用，这样的界面跳转需要理解一段时间。 （在 中，图标和窗口之间的跳转非常直接，第一次使用会让用户感到困惑）用户倾向于通过经验来克服这些问题。 前几次的体验是最糟糕的； 最终用户了解机器的行为方式，以便有效地与其交互。 尽管可以通过重复使用来提高对这些界面的认知，但认知负荷仍然很重。 例如，用户知道点击图标会打开一个窗口，但突然的变化（突然从图标变成窗口）也会让用户犹豫。 动画片中的动画效果非常擅长为观众提供足够的信息来理解。 动画中的一些令人费解的行为不会让用户感到困惑； 动画人物不会突然消失又出现； 当形状发生变化时，动画非常自然。 动画提供了理解动作前后发生的情况所需的视觉提示。
它不像 UI 那样需要大量的认知，并且严重依赖经验，并且还将理解界面的责任放在了用户身上。 动画使用真实的运动来显示对象变形，使其更易于理解。 从认知和情感的角度来看，将动画融入界面转换中都是有益的。 通过解释系统，动画允许用户继续思考任务，而无需回忆以前的操作。 由于没有突然的视觉变化，动画减少了用户被 UI 界面吓倒的机会，从而减少不安全感。 因此，使用动画不仅可以帮助用户理解界面，还可以提高使用效率。 这也使得界面的体验更加愉快和舒适。 2、UI界面中使用动画的几种方法多年来，动画师们研究了很多动画设计方法。 以下是一系列与 UI 和动画相一致的设计原则，并展示了如何将它们应用到 UI 设计中。 我们从拟物化、夸张化和增强现实三个维度来讨论。 本节提到的所有动画设计原则均来自《：生命之光》。 2.1 拟物化 将 UI 中的元素视为真实的、有重量的对象。 在动画片中，人物和元素是真实的、有重量的物体。 他们每次搬家，都感觉就像生活在现实世界里一样，非常真实。 这种拟物化不仅仅是填充一个像素区域那么简单，这些物体的运动是通过增加惯性来实现的。
动画的所有原理，比如：慢进慢出、跟随、弧线运动，以及后面所有的讨论，都是基于这个原理，它们都是有质量的物体。 （所有元素都是有重量的物体，这是一切动作的基础。图片查看：/@/--- ）将UI界面中的元素变成与背景不同的独立物体，并让它们具有动作惯性就是很重要。 在UI界面中，元素应该被绘制为三维对象，用户可以连续稳定地操纵它们。 仅仅对元素进行拟物化还不够，还需要进行性能优化。 为了保持运动的错觉，物体运动时的帧速率必须足够高（当动画达到每秒24帧时，人眼看到的是正常速度运动）。 由于性能下降可能会导致移动延迟，从而导致卡顿。 这样，用户很容易分心，体验也会受到影响。 2.1.1 拟物化方法一：运动模糊拟物化、不卡顿只是最基本的要求。 如果用户大幅移动对象，例如从左到右穿过屏幕。 由于挥之不去的效果，用户在屏幕上看到超过 2 个对象。 眼睛对两个瞬态物体的呈现也称为视觉暂留效应。 动画师在面对这个问题时，使用了一个经验法则：如果一个对象在任意两帧之间移动超过对象本身大小的一半（或更大），则添加运动模糊效果。
使用运动模糊来填充新旧位置之间的间隙，使眼睛更容易接受移动的物体。 虽然归根结底是抗锯齿，但运动模糊确实是一种低成本的解决方案。 （在 中，可以将鼠标指针设置为运动模糊，方便用户跟踪鼠标指针）动画师发现有两种不同的运动模糊方式可以使用。 最简单的是使用半透明条纹。 这种条纹像尾巴一样跟随图标，利用透明条纹来模拟真实的物理效果，产生非常逼真的效果。 另一种方法是在单个帧中插入多个图像。 例如，当手臂快速来回摆动时，单个帧会显示多个手臂，每个手臂都呈现在不同的位置。 这个技术可以有效提升帧率，非常有说服力。 （运动模糊的全帧效果可以通过每帧显示多条垂直线来达到增加帧数的效果）运动模糊的效果表明运动不仅仅是静止图像的集合。 它会给用户一个模糊的线索。 这种感知来自于人类视觉系统的工作原理。 卡通动画师经常使用运动模糊，即使是粗略的渲染也足以创造快速运动的错觉。 在App设计中，由于手机尺寸的限制，一般不会出现超远距离的拖动，但在大屏幕的电脑上就会遇到这个问题。 2.1.2 拟物化方法二：出现和消失 除了移动之外，元素不规则的出现和消失也会给用户带来混乱。
UI设计中，消失效果的表现有三种方式：移入、擦除、模糊消失。 它们的动作快速而连续，为用户提供必要的视觉提示以了解正在发生的事情。 （从左到右的运动效果是移入、擦除、模糊消失） 2.2 夸张 通过夸张“”的真实性，设计往往可以达到事半功倍的效果。 夸张的卡通表演更加真实。 比如迪士尼的《白雪公主的小矮人》中的小矮人就非常不现实：他们的脸和身体都巨大，动作也大而夸张。 相比之下，只有白雪公主的比例是真实的。 她看起来更像是一个真人而不是一个侏儒。 因此，白雪公主这个角色因为更贴近现实而被渲染成一个比较平淡的角色。 白雪公主是用来搭配小矮人的。 相反，矮人看起来更现实。 这种夸张的方式凸显了动画本身。 这个原理说明，无论是身体特征、动作特征，还是肢体特征，某些方面都可以加强，使之更加突出。 这样，观众可以更好地理解角色和动作。 例如，每个小矮人和白雪公主都有一个经常与他们的名字相呼应的特征（迟钝、脾气暴躁、打喷嚏）。 这些特征是如此强烈，以至于即使没有名字作为额外的线索，人们也可以通过每个矮人夸张的身体特征、动作和行为来记住某个角色。
（白雪公主被渲染成一个比较平淡的角色，因为它更接近现实。白雪公主被用来搭配矮人。每个矮人都有一个特征，这往往与他们的名字（呆滞、脾气暴躁、打喷嚏）相呼应距离，而白雪公主没有明显的特征。图片来自：D）因此，夸张的表达手法可以突出一些被忽视的细节。 在动画片中，动画师可以通过夸大细节来吸引更多的注意力。 也许这些细节很难用心去察觉。 就像卡通一样，UI界面必须让用户理解，并在必要时突出一些细节。 夸张是为了让UI界面中的某些对象更容易理解、更真实，从而使UI界面更具吸引力。 （在图片社区项目中，我们对通知使用动态效果，由于通知入口是一个细节，在没有通知的时候，只保留一个图标，不吸引用户的注意力。当有新消息时，使用2.2.1 夸张法一：给用户足够的期待 在动作发生之前，最好给观众一些提示。 当动作发生时，观众已经做好准备，不会对动作感到惊讶。 （其中，当鼠标移动到某个功能时，图标会跳转，提醒用户点击后会有变化）像期望一样的夸张技巧，它们可以让用户更容易理解界面。 他们不断地为用户解释或暗示接口之间的继承关系。
如果没有这些线索，用户将很难理解这些界面。 2.3 增强现实 ( ) 所有动画技术都会增强现实。 有些可能非常极端，例如在某些动画中，角色高速移动并变成一束光线，掠过屏幕。 事实上，这是一种非常隐蔽的做法。 观众并不认为这些影响被夸大了。 他们只是感觉超现实。 这些夸张的效果都经过精心处理，让观众不会被这些夸张的效果所迷惑。 本节讨论的是，通过增强现实技术，弥补动画片与观众的关系，或者说UI与用户的关系。 2.3.1 增强现实方法一：慢进慢出如上所述，卡通人物移动时，非常拟物化。 然而，这个动作并不像在纸上画一些等角字符那么简单。 动画师在绘制动作时经常使用缓入和慢出效果：角色慢慢地走出屏幕，然后是快速运动，最后的结束运动非常缓慢。 这种方法有助于在角色移动时赋予他们更多的身体素质。 此外，在快速动作之前会出现缓入和缓出效果，这使得观看更加舒适。 如果没有它，动画中的运动会感觉不自然，并且诸如缓入和缓出之类的细节会极大地影响动画的质量。 （使用了慢进慢出的效果后，界面感觉舒服多了。查看图片：/@pasql/--） 2.3.2 增强现实方法二：弧线运动 还有一个原理经常运行在人们的潜意识里，那就是弧线运动。
当物体沿弧线移动时，它们是间接移动，而不是沿直线移动。 类似于卡通人物。 圆形路径的运动给人一种更有吸引力、更活泼的感觉，而直线运动则更简单。 （在Mac OS X中，最小化窗口采用弧线，更加生动） 2.3.3 增强现实方法三：跟随运动 增强现实的最后一个方法是跟随运动。 在现实世界中，当主要物体移动时，与之相关的物体也会跟随移动。 动画师在动画中使用这种观察结果。 当动画中的主要对象停止时，其他细节仍然可以移动。 包括身体、衣服以及一些局部的运动处理，使其动态效果更加极致。 （在iOS中，移动应用程序位置是典型的跟随运动效果。当应用程序插入新位置时，其他应用程序位置也会跟随位移。）构建幻觉是一件非常脆弱的事情。 有些动画的细节对最终效果影响很大。 这些动画效果虽然没有在漫画中使用，但并不会破坏整体的世界观。 但添加这些效果会让动画更加生动、更加真实。 最终，它可以使故事更有说服力，更容易让人们理解，也更容易让用户参与其中。 3. 为什么要使用动画 为什么要在UI中使用动画？ 动画有两个特征解释了它在 UI 设计中的价值。 首先，因为动画片具有艺术性，所以具有超越现实的能力。
这种能力可以更有效地传达信息。 UI界面也需要清晰、清晰、简洁地传达信息。 其次，卡通创造了一个虚拟的世界，很容易让观众沉浸其中，这样UI也能变得有吸引力。 通过动画充分吸引用户进入他们的世界。 然后让他们全身心投入到工作中。 让用户不觉得自己在操作一个界面，而是让他们更直接地接触到任务。 4、使用UI动效时的注意点 在UI界面中使用动效是有好处的。 但用户界面并不卡通。 它们之间最重要的区别之一是卡通是一种被动媒介，而用户界面是交互式的。 界面中的动画应该以用户感觉不到的方式设计（足够快、足够有吸引力、足够干净。让用户在不知不觉中意识到这一点）。 用户可能希望在上一个动画结束之前继续进行下一个操作。 在这些情况下，应给予用户最直接的控制权。 但界面设计的原则仍然应该得到动画技术的支持。 卡通和用户界面之间的另一个区别是它们的使用目的：卡通纯粹是为了享受和娱乐，而用户界面是为了完成事情。 由于作品的严谨性，漫画中的娱乐元素需要排除。 卡通往往是古怪和愚蠢的，如果这种怪癖足以让用户理解用户界面的作用，那么这种怪癖就可以保留。 例如，当用户第一次打开软件时，可以使用动画给用户带来惊喜。
通过预测用户的动作，希望通过这个动作给用户一些惊喜。 UI 是用于完成任务的工具，动画应该尽可能快，同时保持清晰度。 例如，当动画作为时尚元素时，动画必须速度快，以减少用户执行和理解的时间。 5.总结 在UI中使用动态效果有以下优点： 动画显示效果远远超过静态显示，甚至比静态显示更直观地说明界面。 动画不必很慢，也不必分散用户的注意力。 通过仔细调整，动画可以使界面易于理解且引人入胜。 同时使用的体验是愉快的。 参考文献： ：来自给用户。 在 UIST '93：用户和 , , GA, 3-5, 1993。第 45-55 页。 新的用户体验。 经过 。 。 作者：德席尔瓦。 在用户界面中：. 由V. 视频：与 . 作者：德席尔瓦。 ＆。 丹尼. : 生命的他。 作者：腾讯ISUX（/20122.html）人人都是产品经理（）中国最大、最活跃的产品经理学习、交流和分享平台
