火星网校
UI动效设计三原则，你真的懂吗？
发布时间：2018-11-17 19:57:24
UI是什么？
首先软件设计可分为两个部分：编码设计与UI设计。而UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。
UI是基于静态页面来设计的，页面之间通过跳转切换。但是在设计过程中，设计师很重视单页的视觉效果，却经常忽略了对界面跳转的处理，即动效。
我们可以确定动效的三个重要特性（侧重类型）：
功能性（Functional），物理性（Material），趣味性（Delightful）。
动效有多重要？
动效可以帮我们提升UX（用户体验），使UI界面显得更加一致和真实，并给整个产品带来创新的感觉。
功能性：
优化用户对界面的感知，使其感到更轻快更全面；
引起用户的注意；
提供（用户操作后的）视觉（功能）反馈，并为下一步的跳转做准备。
物理性：
在一致的动画原则和物理的（符合物理定律的）UI模型基础上构建动画；
定义屏幕和UI元件之间的空间相对关系，他们的相对高度，权重以及速度。
趣味性：
在上面两个部分都满足的情况下，加入一些有趣的动画；
使它感觉独特，能在诸多动画中能让人眼前一亮；
娱乐用户，并让他们一想到动画就能想到该产品或者反之。
下面我们来详述这三种类型：
一、功能性动画Functional Animation
我见过的第一个动画就是MS-DOS命令提示符中不断闪烁的光标。这个动画很友好并温馨——像是在说：“来吧，写点东西。”同时它还是功能性的——如果停止闪烁，那这就意味死机并“可能起火”。我花了很久才知道这小动画的意思——动效对交互引导和了解系统状态都很重要。
UI界面的切换（特别是网页）通常都是直接硬切，使用户很难进行跟进。在认知科学的领域里这种情况叫做变化盲视——视觉刺激的突兀变化会阻止用户注意到新的信息。
功能动效能够补充理解能力的差距
功能性动效可以让用户跟着你的应用程序的流程走的同时不会落后（即从哪来到哪去），帮助人们在界面中定位并建立视觉关系，我们的大脑和眼睛会快速注意到移动的目标——这是一个反射。动效可以帮助眼睛注意到新的目标出现或者一个目标的隐藏。
一个好的动画比任何文字和插画都能快速表达一段故事，动画是语言，是世界通用，你没必要把动画翻译成英语或日语。正确的界面转换动效可以让你用户快速养成使用习惯，设计师要经常思考真正的用户体验，而不是抽象的“点击次数”或“左滑右滑”。
▲
例如，输错密码后摇动的动画貌似比立即显示一个错误徽章要更长的时间。但是在现实中，用户可能需要进一步的确认错误徽章信息，而不是看到动画瞬间就明白是什么意思。
总结：功能性——确定你的动效能够解决用户需求。
二、物理动效Material Animatio
物理动效Material Animation物理动画其实被很多人误解了。它其实不是Google的东西，Google只是起了一个MD这个名字来表达他得统一设计规范而已。物理动画的真正意思是，让你UI符合空间逻辑并根据物理定律做动画。当你的动效考虑到像重力和惯性，速度和刚性，它就显得很真实，用户会觉得更加自然，当然就有助于快速形成使用习惯，因为这些动效都是熟悉并可预知的。但是，如果动效看起来不真实，会显得你的网站和APP都显得很俗气，并导致用户完全不信任你的内容。
物理动效能使UI转场更加可预测并使浏览有了连续性
作为一个设计师，你有无数种办法在应用程序或者网站里建立一个虚拟的世界。每个UI“世界”拥有自己独特的地图，你的菜单可能隐藏在浮动的按钮里或者在画板下面，你也可以放在抽屉菜单里或做成轮盘。但是无论选择哪种方式，你的动效一定要有逻辑性和真实性。
用户第一次到我们所创造的UI虚构世界里面——需要开拓并从头开始学习。他们需要了解界面从哪到哪，这样他们再次找到就很容易，但这个转场不适合硬切换，因为真实世界中是不存在硬切换的。
UI动画的另一个问题就是坏品味，品味是主观的，但总体说来它和美学相关。而人类的美学是基于我们周围的世界，如果你以力学，动力学和光学原理为基本线，那么创建有品位的动画就是一件很简单的事情。
趣味动效Delightful Animation当然，动效最重要的还是上面两种。但是人类不仅有理性，还有感性，我们喜欢好玩的东西。我们希望网站和应用程序能够和用户建立联系，而趣味动效可以让用户体验变得真正愉快和难忘。
让动画成为你的品牌的一部分
动效细节原则总结今年早些时候迪斯尼动画师Glen Keane和R/GA的设计师Rebecca Ussai在Medium上发了一篇文章UX Choreography，首次尝试通过12个原则和5个规律来总结UI动效的一些要求。他们总结的很好，不过只是主要涵盖了功能性动效，没有去真正考虑“物理性”和“趣味性”。从我的观点上来看，12个原则可以完全应用于UI动效，我重新整理了这些规则归类进了上面的三种动效中。
下面让我们看看这些原则是如何单独应用到UI动效的，并分析他们的相互关系。
▲
实体绘图Solid Drawing基本的物理设计原则，主要是遵循三维空间的规则，通过给对象赋予重量和容积来得到适当维数。实体绘图需要动画师熟悉基本的三维形状知识——结构，重量，平衡，光和阴影。迪斯尼动画师希望动画片看起来真实，希望观众能够和动画角色关联起来。他们以前叫Solid Drawing。今天在动效设计领域称之为Material Design。
▲
有两种办法画出动态效果：逐帧画/直接画每个不同状态。动画师根据复杂程度和转场的状态使用不同的技术手段，而动效跟我们用户的联系决定于我们要用Xcode还是Css还是用其他编程语言来实现。
如果动效很简单，你只需变化一个单一的参数，比如说对象的位置或者缩放，可以创建两个关键帧来直接实现相对线性的过渡。而如果你的动画是独特复杂的，有很多变量，那么你应该制作逐帧动画或者使用AE等软件制作出来。
▲
挤压和拉伸Squash and Stretch用来描述目标对象的刚性和质量，定义对象的物理属性。作为设计师你应该定义UI的属性：固定架构，刚性表面，以及快速准确地动作；还是更有机，具有柔软可弯曲的表面以及流体动作。这是你的动效品牌感：你的动画风格和给人的感受。
同样，弧线（曲线）也有助于定义动画的本质。像汽车自行车火车等机械产品倾向于沿着直线轨迹运动，而有机体，如植物，动物，嗯……我们，往往沿着弧形轨迹移动。所以问问你自己，你的UI是机器人还是人性化的？这一原则，以及挤压和拉伸和直线等结合就能创建更真实的、有机的，令人难忘的动效。
分级强调主要强调动效的中心思想（分清主次），能使用户见到动效就一目了然。一个分级较好地过渡动效可以把用户的注意力吸引到正确地位置---到重要的建议内容或交互重点上。大多数用户界面缺乏强有力的关注点，结果新用户浏览各种界面时通常一头雾水。即使你的UI没有重要关注点，你可以给动效进行分级，让用户真正注意到重要的部分。
时间可能是最重要的原则之一。无论你在用什么做动画，你的时间序列定义了用户对动效的感知和理解程度，包括制作主要和次要动画以及缓入缓出等效果。
动画合成需要技巧和练习。时间的控制主要是速度曲线。After Effects的一些脚本或者自带的关键帧辅助功能都提供一些基本曲线（EASE IN/EASE OUT）。
如果你刚开始接触缓动曲线，那么应该多去锻炼，找到动画感觉，达到能够快速分辨出动画的缓动方式的水平就可以了。
▲
跟随和重叠原理是和同时发生多个动画有关的。好多东西都不是一致性的运动，有些动画比其他动画更加引人注意。
跟随原理的意思是 要让属于大的对象的部分跟随其“父级” 有机和真实的运动。而重叠可以确保这一切同时发生，跟随原理可以提现UI构件之间的层级关系，并给动画设置优先级，同时重叠原理可以使动画保持一致并在可控范围内协调运动。
▲
辅助动画原则和上面的原理很像，它可以帮助你确定哪些需要放在用户眼前，哪些需要隐藏。选择对用户理解最重要的动画为优先的，并用辅助动画进行润色。
▲
缓入/缓出是引起用户注意的基础效果，同时能让动画感觉顺畅和真实。这个原则，和时间+跟随重叠原理结合，可以制作很自然且有层次感的动画。
从物理性角度讲，缓动动画遵循的是惯性定律——物体运动不会突然停止和瞬间加速（都有加速和减速过程）。动画遵循物理定律可以让用户更加舒服。从功能性角度，不断减速的物体会吸引人们的注意力，不断加快速速度的对象会失去注意力。比如说进来的动画要先快后慢，出去的物体要先慢后快。
▲
预判是可以在动画的开始或结束阶段都可用的原则。首先，它对预备一些要动的对象以及编排场景的部件，流露一些动画的“线索”，预判效果的最简单的实现办法就是缓入。第二个预判方法就是在动画转场后提供手势辅助，比如说出现“右滑菜单进行选择”等提示语。
总结：物理性——设计高度统一的，能够制作有空间意义转场的用户界面。
三、趣味性Delightful
▲
夸张可以让动画变现得活泼有趣。不夸张的动画有时会显得精确，不过在有些场景中会很无趣，机械和僵硬。可以根据你对用户体验的感觉和要求程度确定该不该做夸张地动画以及夸张地程度。动效的目标是让你的按钮/面板/菜单/内容和用户交互后的效果显得更加生动。
▲
感染力是最为神秘的原则之一。我们每天都接触N个APP和网站，他们解决着各种人的各种需求。而真正留住用户，增加用户粘性的却没几个，真正能够留住用户的不仅有好的用户体验，还能使用户对产品产生感情。
把动效做的统一又有感染力，需要在设计动画时不仅让用户感觉真实，还要有自己的独特风格。
总结：趣味性——给你的动画一些关爱（趣味），让用户爱上你的产品。
分享
上一篇 2011年网页设计趋势全面分析
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
透过浅显易懂的文章，为你揭示火星时代教育提供的附近室内设计课程的魅力，助你实现设计梦想。
-
本文以3dmaya模型培训为基础，详细分解了3dmaya模型培训机构的关键组成部分，同时对火星时代教育进行了精心展示。
-
解析游戏化学习的崛起及影响，同时展望火星时代教育的前景。
-
了解UI设计培训的筛选方法和推荐课程，包括经验丰富的讲师、实战项目经验、就业支持等核心要素，并推荐火星时代教育的相关课程。
-
深入探讨原画设计的基础知识与技巧，引导你步入原画设计的世界。
-
通过3DMax建模设计课程，了解其概念、应用和工作流程，借助火星时代教育提升自身技能，创造出更多可能性。
