赞助商
立即赞助

动效到底有哪些作用?来看高手的全面总结!

UI设计3年前 (2021)发布 流光
4K 0 0

编者按:本由负责Material Design 动效设计谷歌设计师撰写,帮助大家深入理解动效作用,才能做出更好动效设计。

时候科技产使用起非常复杂,但其实「复杂」本身好坏之分:不好因处理好这复杂所以产了「混乱」,所以应该被批的不复杂因复杂所产的混乱。——唐纳德·诺曼

动效到底有哪些作用?来看高手的全面总结!

△ :众点;马蜂窝 下:IFTTT(人手类型应用);Airbnb(彼迎)

一、界面密度高就混乱么?

我们都喜欢追求「极简风格」, 设备/应用看起越「净」越好,但「净」的产品就一好用吗?真的未必,时候反不知道该从何始。盲目追从低密度界面,了简洁简洁也不件好事。密集界面就不好看并且难用么? 纽约待了八,一直用「净」的手机应用,我以会非常不应内的 APP。然留北京间使用内的应用不但觉得不知道该怎么用反觉得咱们 APP 的功能强且手很,界面绝对不比「净」的界面差。

CJK(中国,韩国,日本)场的 UI界面密相对于欧美 UI界面密会很多,之前看过一个针对 CJK户的调查,里面有一条:「CJK户对密较的界面有非的忍耐。」 之后跟一位中国户体验研究员过这个问题。「为么中国的普遍 UI界面都如此的密集?」 答说:实这仅仅只是一种设计格/上面的一样,有非多的情况都是要满足商方面的需要。在相页面整洁、有设计感,把好一分按钮藏在「汉堡包图标」里,把更多的功放在界面当中往往更为重要。 每一个按钮的背后都是一个团队的努,他们可想因为界面的「整洁」而被放到汉堡包图标或是挤到屏幕方需要户往上滑才看见。这往往是一种商决定,并非设计决定。

Complexity can be tamed, but it requires considerable effort to do it well. (复杂实可被驾驭的,但是驾驭复杂则需要户一定的努。)——唐纳德·诺曼

我个人觉得界面密与「对设计重视与否」并没有那么大的系。当然绝对除 CJK 的户确实对于密的版接受程更,但设计得要听从商要求这是合情合的。 那我们作为界面/交互/效设计师的职责则是降低来自各种密产生的「混乱」,使得户够轻松驾驭界面。

动效设计为用户验里面一个极为重要但是时常又被忽略的部分,有时直到产品快要成型的时才被提,加上动效之很互的漏洞被展现出来,但是又为时已。

很设计师把动效理为一种更高面的设计,即为一个界面内的在即时的和非即时的件之间的一种暂时的行为。(其就是渡)——Isara Willenskomer

动效到底有哪些作用?来看高手的全面总结!

动效到底有哪些作用?来看高手的全面总结!

早苹果Mac 桌面文件夹的打与关闭,注意打关闭的过程中用户可以清晰的分辨出窗口从屏幕的哪置的。

效实对于户体验这个大专来讲是一种的科,随着我们的设备的硬件条件越来越好,效才被支持。效里有一分可归为传统画,如说图标/插画/载入画。 这些可借鉴迪士尼的十二大画原则。但是另外一分则是扎根于「交互」,Issara Willenskomer 他在户体验领域15年的经验总结了属于 UX效的12大原。

二、动效通过四大块增强可用性

1. 减少预判误差

用户界面中看到一组件的时候,他们会产对这体什么还它的运动方式的预判。设师应该减少的「预判」与「实」的差距。

2. 增加连贯性

这可以涉及到单界面多连环界面。 比如单界面(日历里面建立新的事件)内用户否可以毫不费力的导航以及多连环界面(浏览商品 – 加入购车 – 买单)的用户体验。

3. 强调叙述

一应用的导航过程中,过一系列的操作,用户会脑海里形该应用的信息结构框架,动效把这些环节紧紧相扣并帮用户加速学习该结构框架。

4. 清晰关系

这关系可以指的不同界面之间的以及一界面内不同组件间的空间,主次关系。清晰的关系可以效率的引导用户。

了解了上大后,面我们来看一些例子。

三、帮助用户导航,促生思维模式

最我的同事 Jonas Naimark 在 Medium 上面发表了《Motion Doesn’t Have to Be Hard(效该难)》中总结得特别好,这里给大总结两点。我获得他的允许把这个章翻译了,有兴趣的同可戳标题查看全。

1. 实实在在

动效到底有哪些作用?来看高手的全面总结!

家注意到这两后小变化? 他们完全按照这器的小变的,这给予用户一种「实实打一界面」的感觉。 这种细节其实对于「促思维模式」很帮的,因它把一器(界面)里的内器本身紧密的联系了一起。再看下面的例子,这例子又引出了下一话题。

2. 界面从哪儿?

动效到底有哪些作用?来看高手的全面总结!

界来去用户熟悉这个应用不界空关系常要,新界从哪儿来该回哪儿去,界进入以及出去也接暗示了激活该界按钮大概位。设计这块时候不定要按照这个套路,可以研究属于自己运动模,是定要注意运动模致性。

小结:如果的动效连帮用户导航都到,图标/过场动画什么的都得往后排。

四、在设计交互模式的时候

We must design for the way people behave, not for how we would wish them to behave.(我们设计师不能用我们自己思维去用户设计交互模,我们必须根据用户们为去设计。)——唐纳德·诺曼

1. 动效不只是过渡动画,得多思考用户的行为

在计交互的候往往都会以的思维出发,想着用户在执行完一个动作之后就会执行下一个动作,那在这个动作之后会出现这个过渡,下一个动作之后会出现下一个过渡。可是现实完全不是这,用户底会不会按照计的交互套路除非做用户测,否则根本没法知道。

Motiongraphics 里过渡跟动效过渡不样,我们动画师画什么是什么。 在设计个交互动作时,设计师需要思考有没有在动作开始与结束这两发生其他事件可能,并利用动效来教育用户个过渡可以过不动作来激活。用户手指摆位,怎样用起来更加便,减少手指需要移动距离等都应该被考虑到。 然了,不是说个交互转折都死磕,是多思考思考用户为绝没有坏处。

动效到底有哪些作用?来看高手的全面总结!

△ Safari关闭网页移动暗指用户也可以过左滑动来关闭网页

2. 颜色,音效有震动

动效不是视觉上,为动效其实是跟用户沟。 另是「小输入,大输出」。想想在苹手上浏览网页,要轻轻在网页往上划,会滑出很长段距离。在设日期,调时时候,手震动以及音效使交互变更加真实。

△ iOS设日时间的时候,自手机的音效震动效果增加了这交互的真实感。

动效到底有哪些作用?来看高手的全面总结!

△ 谷歌Pixel 面,用户可以通过挤手机激活谷歌智能手,这不但使得交互变得方便,也一程度增加了互动的趣,甚至让机器「活」了起。所以交互不一都屏幕发。

3. 暂停,变向,返回,取消

面提到了设一交互动作的同时,设师可以思考动作始到结束这两点之间发其他事件的可能,交互动作能不能中途转向?(打视频查看完整操作)

这样一个作就可解决很多问题,执行作与决定一步做么可同时进行,大大增了交互效率,反之如果机器做到允许户在执行当前作的同时做一步决定的话,那么户在执行一个作之前就要做决定,因此降低了互的效率。

装置也应该时刻给用户反应,接下来生什么。

动效到底有哪些作用?来看高手的全面总结!

当往下拉动照的同时,白的背渐渐变得透明,暗示用户照果时放手的照被关闭。

动效到底有哪些作用?来看高手的全面总结!

4. 给符合现实的思维方式和方式

图标到全屏和开画需的时长肯定一样,屏幕的大小需要被考虑到。

动效到底有哪些作用?来看高手的全面总结!

Material 基线效中,从一个从容器件到全屏的画需要300毫秒的时长。

动效到底有哪些作用?来看高手的全面总结!

利弹友好的示户已经到达了界面的末端。

动效到底有哪些作用?来看高手的全面总结!

直接操作,指尖与触碰容同时移。

小结:想着怎样设计互模式加上动效能使得装置与用户时刻沟通,通不同的感官增加输出,达到人机合一的境界。

五、制作Demo

1. 择适当的参数

根据过渡的「大小」(画占屏幕的大小)和复杂程择适当的速和时长。

动效到底有哪些作用?来看高手的全面总结!

虽然都是图标画,但是左边因为复杂程较低,画时长只有100毫秒。而在右边较为复杂的图标画时长则是500毫秒。还有章上面到的从容器件到全屏的效时长为300毫秒。

2. 择正确的缓和效果

动效到底有哪些作用?来看高手的全面总结!

缓效果建议使用非对称型缓,比如 Material基线缓。

3. Demo效了,能互动的Demo能明问题

动效设师可以实自交互设师的设,把静态的界面变动态Demo,交互流程一目了然。但时候交互设师们会不自觉受到他们脑海里已形的交互模式的影响,所以如果觉得还什么补充的话,应该主动提出。还可以结合不同的手势,阐述过渡中所涉及到的所可能的参数,置,动,按压以及按压面积多几交互流程方案,然后团队一块讨论,也可以交互设师私底下讨论(根据的作氛围)。

有条件可使 Principle,Framer,Figma,Invision等设计工具直接制作可互Demo,没有么真正使更有说。

4. 在设计过渡当中注意尴尬帧的存在

It’s not the frame rate, it is what in the frame!(别只怪帧频,帧里啥重!)——《Design Fluid Interface》Apple WWDC 2018

动效到底有哪些作用?来看高手的全面总结!

更高帧频然有帮助,是视觉变化太大时候,眼睛下子能侦测到这信息缺失。

动效到底有哪些作用?来看高手的全面总结!

大家可以看到在右边原型运动过程很明显有处「空缺地」。

动效到底有哪些作用?来看高手的全面总结!

帧频变成60帧后确实有好转,是看起来是有不舒服,动效设计师应该注意是这个「不舒服瞬」,这情况下可以过调时长或者利用叠加渐进淡出等来改善过渡。

动效到底有哪些作用?来看高手的全面总结!

△ 适时候可以接把那个部分去掉。是要确保这个部件前后样保持致,否则用户容易混淆两者是否是相部件。

动效到底有哪些作用?来看高手的全面总结!

新内容会在过渡最快时候进入界。

小结:思考过渡模式的时候把脑子思维,思考各种用户场景以及动效参数,制作给力Demo。注意过渡屏幕里面的细节,记住不帧频的问题,帧中内的问题。

六、与团队合作的时候

动效设师设与实的粘合剂一点也不过,当我们看一系列的静态界面的时候,脑海里浮的各种交互流程,我们得理性。看到一标志,一人的时候,得如何把它们变活并且符合品牌风格,我们得感性。 当我们面对程师们的时候,不但得效的让程师明白一过渡界面中发了什么,还得技允许的范围尽可能服程方满足自设方的求,我们理性加感性。

时刻记住,你是画师。你制作的 Demo 来引发并参与交互设计师,界面设计师的讨论。 平时多跟工程师聊聊,了解当前技术上面的限。因为实现一个效会受到来自代码框架的限,还有产本身的限。有一些过渡被实现是因为进入的界面来自第方产,这样第一方没有办法控制第方页面的结构,无法美的把双方的界面串联起来,那这个时候设计只先屈现实。有时候设计师跟工程师思维的同,会导致他们有时候会想到他的实现方式。 曾经跟一位工程师聊过,我问实现一个组件的代码的书写方式只有一种么? 答说是,有很多种,但是最有效率的书写方式就那么一种。但是思维方式一样代表好,而且「没有意是坏意」,有时候甚至会因为你的议工程师们会想到的实现方式。你制作的 Demo 如果工程师们达到,并代表后达到,这成为他们之后的目标。

总结

效设计先要解决的问题就是增应的可性,帮助户轻松驾驭应。确保可性之后,在影响户体验的前,天乱坠的特效。

简易的导航,有效的渡以及酷炫的动效最终是服务用户。成功的互能使得「人机合一」,自的互往往成败在细节上,么正细节光参考网站上玲琅满目的素材与案例和学习动画做是不够的,阅读关用户验书籍学习理论识是一大方面,最重要的是人身。所以泛阅读,对比阅读,用户验识完不用从用户验的书中来。

你,是动效计,是一个产品的顶梁柱。一定要积极的参计流程中,尤其是在计产品初期,放开思维张开嘴。

希望以上内容可以让大家进步了解动效设计,那些想学习动效设计又摸不着头脑学大,也现在已经在岗位上动效设计师们些鸡血。

欢迎关注作者的微信公众:「魔瓜」

动效到底有哪些作用?来看高手的全面总结!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

导语 动画可以辅助视觉制作焦点,引导注意力的方向,越来越为广大视觉设计师青睐。从设计工具上来看,既有Framer.js、Origami...
AE动效
如何在一个快速发展的领域不断成长?这可能是每个设计师都需要思考的问题。了解新的设计趋势,学习新的设计技术,磨练手艺,...
动效设计
MG 全称是 Motion Graphic(动态图形),是一种现在非常流行的动画分支。它更像是介于平面设计与动画片之间的一种产物。动态...
MG动效
编者按:UI中动效设计本没有那么玄乎,作为 Google 旗下 Material Design 团队中动效设计的负责人之一,Jonas Naimark 对于动...
AE动效
Motion Graphic 也称为 Mg 或者 Mograh,通常翻译为动效或者动态图形。 动效是什么? Motion Graphic 也称为 Mg 或者 Mogra...
AE动效
一、可用性价值 动效很容易被象成某种增强愉悦的东西,自身并不具备什么价值。常常被当做可有可无部分,通常作为最后一步点缀...
交互设计
功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味,本文就来谈谈这四种功能性动效在移动端的使...
AE动效
写这篇文章的起因是前段时间在 Meidum 上读到的一篇驳斥 Dribbble 发展现状的文章。文章发表在 16 年,其中提到:「我不认为 ...
AE动效