设计干货收藏|UI动效的必备原则总结

高度总结动效设计的基本原则,有大量的案例分析。动效设计在用户体验的提升中到底有没有用呢? 我们在下面讨论的是为什么要应用动效,以及在那些时候动效,动效的特性等等。


高度总结动效设计的基本原则,有大量的案例分析。动效设计在用户体验的提升中到底有没有用呢? 我们在下面讨论的是为什么要应用动效,以及在那些时候动效,动效的特性等等。

设计干货收藏|UI动效的必备原则总结

作为一枚不会敲代码的设计师,我们不太可能让自己的设计真正“活”起来。如果没有动效设计,那总是需要很长时间去给程序员解释点击这个按钮后会发生什么。所以设计师们需要通过动画版本高保真原型(包括动效设计)去解释交互效果。

设计干货收藏|UI动效的必备原则总结

目前的UI动效包括系统动效都在尝试从各种不同角度解释动效设计的作用。而很多开发团队根本就不重视这些细枝末节的东西,他们认为只要掌握好几本用户需求,就可以把产品继续做下去。

设计干货收藏|UI动效的必备原则总结

在国内(CHINA)目前的各类APP中,拥有优秀统一的视觉效果的应用比例少之又少,更别说流畅的动效效果了。

好多设计师或者产品经理根本就不知道哪些地方该动,哪些地方不该动。那么 ,动效设计在用户体验的提升中到底有没有用呢?

我们先暂且相信它有用。我们在下面讨论的是 动效的基础理论知识,为什么要应用动效,以及在那些时候动效,还有动效对用户体验提升的作用。

关于动效的基本属性

关于动效的基本属性我喜欢科幻电影,而科幻电影的一个问题是–故事发生我根本不了解的宇宙时空中。电影里有N多件事(包括故事背景 时代背景 等等),电影在放映时我只有两个小时的时间去了解。(图片截自我最爱的普罗米修斯系列)

设计干货收藏|UI动效的必备原则总结

那优秀的科幻电影导演是怎么解决这个问题的呢?

  • 他们专注于主角而不是遥远的宇宙空间。他们在没有让我们落后的情况下,将一个虚构的世界历史放进了主角的故事主线中。
  • 他们通过遵循观众熟悉的真实世界物理定律和一些真实的物理细节来使虚构的宇宙像真的一样。
  • 最后,他们通过故事的感染力和真实感让故事显得非常美好又值得回忆。

与此相似,在UI设计中,我们想在很小的屏幕上展现一个交互的“故事”。我们的“主角”是设计的界面元素,我们的“虚构宇宙”就是UI架构。而且我们没有两小时,在用户失去兴趣和产生疑惑之前,我们最多只有一秒的时间。

设计干货收藏|UI动效的必备原则总结

我们可以确定动效的三个重要特性(侧重类型):功能性Functional,物理性Material,趣味性Delightful。动效可以帮我们提升UX(用户体验),使UI界面显得更加一致和真实,并给整个产品带来创新的感觉

功能性

  • 优化用户对界面的感知,使其感到更轻快更全面。
  • 引起用户的注意。
  • 提供(用户操作后的)视觉(功能)反馈,并为下一步的跳转做准备。

物理性

  • 在一致的动画原则和物理的(符合物理定律的)UI模型基础上构建动画。
  • 定义屏幕和UI元件之间的空间相对关系,他们的相对高度,权重以及速度。

趣味性

  • 在上面两个部分都满足的情况下,加入一些有趣的动画。
  • 使它感觉独特,能在诸多动画中能让人眼前一亮。
  • 娱乐用户,并让他们一想到动画就能想到该产品或者反之。

下面展开讲述每个类型。

功能性动画Functional animation

设计干货收藏|UI动效的必备原则总结

我见过的第一个动画就是MS-DOS命令提示符中不断闪烁的光标。这个动画很友好并温馨—像是在说“来吧,写点东西”。同时它还是功能性的–如果停止闪烁,那这就意味死机并“可能起火”。我花了很久才知道这小动画的意思—动效对交互引导和了解系统状态都很重要。

UI界面的切换(特别是网页)通常都是直接硬切,使用户很难进行跟进。在认知科学的领域里这种情况叫做变化盲视——视觉刺激的突兀变化会阻止用户注意到新的信息。

“功能动效能够补充理解能力的差距。”

功能性动效可以让用户跟着你的应用程序的流程走的同时不会落后(即从哪来到哪去)。帮助人们在界面中定位并建丽视觉关系。我们的大脑和眼睛会快速注意到移动的目标–这是一个反射。动效可以帮助眼睛注意到新的目标出现或者一个目标的隐藏。

设计干货收藏|UI动效的必备原则总结

设计干货收藏|UI动效的必备原则总结

例如,输错密码后摇动的动画貌似比立即显示一个错误徽章要更长的时间。

但是在现实中,用户可能需要进一步的确认错误徽章信息,而不是看到动画瞬间就明白是什么意思。

一个好的动画比任何文字和插画都能快速表达一段故事。动画是语言是世界通用。你没必要把动画翻译成英语或日语。正确的界面转换动效可以让你用户快速养成使用习惯。设计师要经常思考真正的用户体验,而不是抽象的“点击次数”或“左滑右滑”。

物理动效Material Animation

物理动画其实被很多人误解了。它其实不是google的东西,GOOGLE只是起了一个MD这个名字来表达他得统一设计规范而已。物理动画的真正意思是,让你UI符合空间逻辑并根据物理定律做动画。当你的动效考虑到像重力和惯性,速度和刚性,它就显得很真实,用户会觉得更加自然,当然就有助于快速形成使用习惯,因为这些动效都是熟悉并可预知的。但是,如果动效看起来不真实,会显得你的网站和APP都显得很俗气,并导致用户完全不信任你的内容。

设计干货收藏|UI动效的必备原则总结

“物理动效能使UI转场更加可预测并使浏览有了连续性。”

作为一个设计师。你有无数种办法在应用程序或者网站里建立一个虚拟的世界。每个UI“世界”拥有自己独特的地图。你的菜单可能隐藏在浮动的按钮里或者在画板下面,你也可以放在抽屉菜单里或做成轮盘。但是无论选择哪种方式,你的动效一定要有逻辑性和真实性。

设计干货收藏|UI动效的必备原则总结

用户第一次到我们所创造的UI虚构世界里面——需要开拓并从头开始学习。他们需要了解界面从哪到哪,这样他们再次找到就很容易,但这个转场不适合硬切换,因为真实世界中是不存在硬切换的。

UI动画的另一个问题就是坏品味。品味是主观的,但总体说来它和美学相关。而人类的美学是基于我们周围的世界。如果你以力学,动力学和光学原理为基本线,那么创建有品位的动画就是一件很简单的事情。

趣味动效Delightful animation

当然,动效最重要的还是上面两种。

但是人类不仅有理性,还有感性。我们喜欢好玩的东西。

我们希望网站和应用程序能够和用户建立联系,而趣味动效可以让用户体验变得真正愉快和难忘。

设计干货收藏|UI动效的必备原则总结

“让动画成为你的品牌的一部分。”

动效细节原则总结

动效细节原则总结今年早些时候迪斯尼动画师Glen Keane和R/GA的设计师Rebecca Ussai在Medium上发了一篇文章UX Choreography,首次尝试通过12个原则和5个规律来总结UI动效的一些要求。他们总结的很好,不过只是主要涵盖了功能性动效,没有去真正考虑“物理性”和“趣味性”。

从我的观点上来看,12个原则可以完全应用于UI动效。我重新整理了这些规则归类进了上面的三种动效中。

下面让我们看看这些原则是如何单独应用到UI动效的,并分析他们的相互关系。

设计干货收藏|UI动效的必备原则总结

实体绘图Solid drawing

基本的物理设计原则。主要是遵循三维空间的规则,通过给对象赋予重量和容积来得到适当维数。实体绘图需要动画师熟悉基本的三维形状知识–结构,重量,平衡,光和阴影。迪斯尼动画师希望动画片看起来真实,希望观众能够和动画角色关联起来。他们以前叫SOLID DRAWING。今天在动效设计领域称之为 MATERIAL DESIGN。

设计干货收藏|UI动效的必备原则总结

有两种办法画出动态效果:逐帧画 / 直接画每个不同状态。动画师根据复杂程度和转场的状态使用不同的技术手段。而动效跟我们用户的联系决定于我们要用XCODE还是CSS还是用其他编程语言来实现。

如果动效很简单,你只需变化一个单一的参数,比如说对象的位置或者缩放,可以创建两个关键帧来直接实现相对线性的过渡。

而如果你的动画是独特复杂的,有很多变量,那么你应该制作逐帧动画或者使用AE等软件制作出来。

设计干货收藏|UI动效的必备原则总结

挤压和拉伸Squash and stretch

用来描述目标对象的刚性和质量,定义对象的物理属性。作为设计师你应该定义UI的属性:固定架构,刚性表面,以及快速准确地动作;还是更有机,具有柔软可弯曲的表面以及流体动作。这是你的动效品牌感:你的动画风格和给人的感受。

设计干货收藏|UI动效的必备原则总结

同样,弧线(曲线)也有助于定义动画的本质。像汽车自行车火车等机械产品倾向于沿着直线轨迹运动,而有机体,如植物,动物,和,嗯…我们,往往沿着弧形轨迹移动。所以问问你自己,你的UI是机器人还是人性化的?这一原则,以及挤压和拉伸和直线等结合就能创建更真实的,有机的,令人难忘的动效。

设计干货收藏|UI动效的必备原则总结

分级强调主要强调动效的中心思想(分清主次),能使用户见到动效就一目了然。一个分级较好地过渡动效可以把用户的注意力吸引到正确地位置—到重要的建议内容或交互重点上。大多数用户界面缺乏强有力的关注点,结果新用户浏览各种界面时通常一头雾水。即使你的UI没有重要关注点,你可以给动效进行分级,让用户真正注意到重要的部分。

设计干货收藏|UI动效的必备原则总结

时间可能是最重要的原则之一。无论你在用什么做动画,你的时间序列定义了用户对动效的感知和理解程度,包括制作主要和次要动画以及缓入缓出等效果。

动画合成需要技巧和练习。时间的控制主要是速度曲线。AfterEffects 的一些脚本或者自带的关键帧辅助功能都提供一些基本曲线(EASE IN / EASE OUT)。

设计干货收藏|UI动效的必备原则总结

标准缓动曲线查询网址:http://easings.net/zh-cn

如果你刚开始接触缓动曲线,那么应该多去锻炼,找到动画感觉,达到能够快速分辨出动画的缓动方式的水平就可以了。

设计干货收藏|UI动效的必备原则总结

跟随和重叠原理是和同时发生多个动画有关的。好多东西都不是一致性的运动,有些动画比其他动画更加引人注意。

跟随原理的意思是 要让属于大的对象的部分跟随其“父级” 有机和真实的运动。而 重叠 可以确保这一切同时发生。跟随原理 可以提现UI构件之间的层级关系,并给动画设置优先级,同时重叠原理 可以使动画保持一致并在可控范围内协调运动。

设计干货收藏|UI动效的必备原则总结

辅助动画原则和上面的原理很像。它可以帮助你确定哪些需要放在用户眼前,哪些需要隐藏。选择对用户理解最重要的动画为优先的,并用辅助动画进行润色。

设计干货收藏|UI动效的必备原则总结

缓入/ 缓出 是引起用户注意的基础效果,同时能让动画感觉顺畅和真实。这个原则,和时间+跟随重叠原理结合,可以制作很自然且有层次感的动画。

从物理性角度讲,缓动动画遵循的是 惯性定律——物体运动不会突然停止和瞬间加速(都有加速和减速过程)。动画遵循物理定律可以让用户更加舒服。从功能性角度,不断减速的物体会吸引人们的注意力,不断加快速速度的对象会失去注意力。比如说 进来的动画要先快后慢,出去的物体要先慢后快。

设计干货收藏|UI动效的必备原则总结

预判是可以在动画的开始或结束阶段都可用的原则。首先,它对预备一些要动的对象以及编排场景的部件,流露一些动画的“线索”。预判效果的最简单的实现办法就是缓入。第二个预判方法就是在动画转场后提供手势辅助,比如说出现“右滑菜单进行选择”等提示语。

设计干货收藏|UI动效的必备原则总结

夸张 可以让动画变现得活泼有趣。不夸张的动画有时会显得精确,不过在有些场景中会很无趣,机械和僵硬。可以根据你对用户体验的感觉和要求程度确定该不该做夸张地动画以及夸张地程度。动效的目标是让你的按钮/面板/菜单/内容和用户交互后的效果显得更加生动。

设计干货收藏|UI动效的必备原则总结

感染力 是最为神秘的原则之一。我们每天都接触N个APP和网站,他们解决着各种人的各种需求。而真正留住用户,增加用户粘性的却没几个。真正能够留住用户的不仅有好的用户体验,还能使用户对产品产生感情。

把动效做的统一又有感染力,需要在设计动画时不仅让用户感觉真实,还要有自己的独特风格。

结论

  • 功能性:确定你的动效能够解决用户需求
  • 物理性:设计高度统一的,能够制作有空间意义转场的用户界面
  • 趣味性:给你的动画一些关爱(趣味),让用户爱上你的产品。

 

展示中的动画作者(DRIBBBLE): Leo Leung,superwhite, Eddie Lobanovskiy, Isil Uzum, Rebecca Ussai, Anish Chandran, Jason Teunissen, Łukasz Frankiewicz, Sergey Valiukh, Konstantine Trundayev, Jelio Dimitrov, Ramotion, Jakub Antalik, Pavel Proshin, Kreativa Studio, Justin Ruckman, Nikita NIKI, xjw, Zee Young.

翻译自:Jedi Principles of UI Animation,MEDIUM.

译者:@敖厂长UX .微信公众账号:交互动效设计dribbble BUCKETS: https://dribbble.com/AOreal/buckets/321029-UI-UX

本文由 @敖厂长UX 授权发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30419/

(0)
CatherineCatherine
上一篇 2017-05-28 19:39
下一篇 2017-05-28 21:56

相关推荐

  • APP常用导航总结

    虽然我承认导航这种东西在现在的app非常常见,但是实际上,这种东西也不是必须存在的。如果应用够轻,比如雅虎每日新闻News Digest就不存在导航这种东西。只有当app的架构扩大到一定的程度,当内容繁杂到无法展示在一个页面中,这时候才需要用到导航。

    2017-05-31
  • 国内11个HTML5平台的星级评测

    本文以HTML5工具专业性为主要指标,不以名气论高低,内容多以企业网站介绍为依据,辅以使用体验。四个指标,功能是H5工具使用的基础,模板属于工具适用性的象征,定制服务能体现平台的生态性,易用度则是用户友好范畴。

    2017-05-30
  • 2016年最值得关注的移动端APP设计趋势

    不论移动端网页和APP之间有着怎样的争论,移动端APP的快速发展都是不争的事实,各种客户端的开发和接入已经成为常态。用户对于自己喜欢的品牌和服务,总期待官方能推出客户端,也正是在这种期待和需求之下,催生出越来越多的APP。

    2017-05-30
  • 日照这家单位招人啦!提成、五险一金、带薪培训、年终奖、节日福利···

    关于我们与其说我们是一个团队,我倒觉得我们更像一个温暖的大家庭。工作上我们团结协作、互相体恤,生活上我们互相帮助、彼此鼓励,家人遇到困扰,我们会拧成一股绳共度难关,家人有喜事有收获,我们会由衷的祝贺!我们每一个人都在用真心去经营我们的置业网大家庭,所以我们无比珍惜和感恩,也希望你和我们一样将它视如珍宝……公司简介日照置业网传媒有限公司主要经营各类广告的发布代理及各项活动策划,各类网站制作管理维护与设计,目前经营包含日照置业网等6家网站,...

    2018-04-08
  • 乐观派UI:真实的谎言

    我真诚地希望,这篇文章能帮助你理解乐观派UI设计背后的核心观念。乐观主义,形容词,对于未来充满希望和信心。

    2017-05-15
  • 如何制作高段位的交互输出物?

    如何制作具有全局把控和细节专注的高段位交互输出物是交互设计师一直需要淬炼的能力。今天阿里的同学把多年的经验写出来,内容超多,全是干货,来收。 交互设计师在项目体验设计过程中常常担任着承上启下的至关重要…

    2015-10-14
  • 简单好上手!帮你快速做出高质量交互原型的ProtoPie

    编者按:近年来,交互设计被越来越多的提及,并且还产生出了新的工作岗位「交互设计师」,而且交互设计在产品设计中所占的地位也越来越重要。我也是一直想转交互,了解过Flinto、Principle、Framer、Origami等等,但不是原型保真度不满意,就是学起来太难,或者就是各种代码表达式,很难上手。

    2017-11-09
  • 【用户体验】Chiphell论坛网友Raise3D N2打印体验实录

    以下是来自Chiphell论坛的一位@xm79 网友的使用Raise3D N2 3D打印机后的体验分享帖。让你看到Raise3D N2 3D打印机最真实的一面。之前用了好一阵工作室的makerbot 之后,也想着买一台自己的。主要每次打都要排个队,十分麻烦。而且每到出图季就要没日没夜的看守在打印机旁,通宵不起了。思量着买一台放家里吧。本来考虑着买makerbot的,因为速度是真的快,软件算法比用ultimaker系的快了一倍。但是问题就...

    2018-02-05
  • 按钮的优先级选取与用户体验最佳实践

    通常带有明确指向性和说明的标签(按钮内容,文本)会比通用的“OK”或者“确定”要更好。
    尽可能使用动词,而不是OK,因为前者意义会更明确,用户不会断章取义从而作出错误的选择。

    OK/[Do it]/Yes
    [Don’t do it]/No
    Cancel

    2017-05-23
  • 初级交互设计师的自省:基础知识能力很重要

    在交互设计师参与的各个阶段都会有不同的挑战和着重的考察点,希望大家都能打好基础,不要让基础的知识能力的欠缺影响甚至阻碍我们综合设计能力提升。

    2017-05-16