动画可以使得一个APP充满生名力。动画使得静态元素变得鲜活。说到动效,它不仅仅是为了让用户感到愉悦,更多的是为了解决用户的实际问题。
在人类的主观感受当中,任何动画表现的连贯而且有序,它就会让人感觉活泼而自然。
并且在目前整个行业来说也有非常多的先行者在推动着它的发展。Motion Design,动效用户体验和用户体验动效设计等复杂的词汇正在流行起来。
动效在潜意识中构建了应用程序的个性。在实际界面当中的作用很像布局,间距,排版和颜色。
当你在滚动一个列表的时候,有没有注意到iPhone上的弹性反弹?这些看似微小的细节在形成苹果产品个性方面起着重要的作用。
步入正题,让我来带大家了解一下动效中的9个提升生命力的方法:
1.开始观察
提升对动态事物的鉴别能力。如果你没有这项技能,你也就没有办法把他们应用到工作当中。开始观察你喜欢的App在屏幕上移动的方式。重复几遍,找出你喜欢它的原因并且试着去尝试寻找细节。去观察所有变化 - 形状,大小,位置和颜色。如果它很小或很大,无论如何都不重要,试着找出整个构图中正在播放的最重要的动作。
2.动画不仅仅是单纯的视觉表现
动画显示出更深层的意义。作为创作者,您必须从一开始就有意识地考虑动画。如果您正处于设计阶段,请为原型制作的动画增加时间的维度。如果您处于开发阶段,请将您的代码划分为模块化组件,以便在UI中轻松移动事物。
提示 - 仔细考虑你创作的动画人物并给它一个性格,能帮助你更深入地了解你正在尝试构建的东西。
3.什么样的场景适合引入你的动画?
基本上大多数的场景下都可以,动画引入你的产品的场景可能是当屏幕变化时,用户与元素进行交互时,或者当用户需要等待时。
4.动效用户体验的类型
您可以将产品中的动画分类为转场(内容更改/页面变化到另一个屏幕),微交互(例如Twitter的Like按钮),图形动画(如Zomato的订购应用程序的启动画面上的滑板车跳转)。
5.使用动画提示空间关系和层次结构
如果一个UI元素从屏幕右侧进入,用户会在心理上将这个元素的位置放置在右侧。例如,如果汉堡包菜单按钮位于屏幕的左上角,菜单进入的动画必须从左侧出现。要检查您的动画是否正确传达,需要多向更多的人展示并听取他们的意见。这是避免任何可能混淆的最简单方法。
6.了解持续时间,时间曲线,动画路径,初始值和最终值等内容
这些参数在开发层面上构成了你的动画。了解它们,并掌握如何去控制它。一旦你觉得可以得心应手的去操作,你可以制作非常多优秀的作品。对于具体的指导,Google Material design动效设计指南是非常好的参考。
7.减少不必要的等待
永远不要让用户去等待。如果他们真的需要等待,那么请用有意义的动画来减少过程中的焦虑感。任何时候,都可以尝试去用动画解决问题。此外,不要过度的修饰动画,这不是电影
提示 - 保持动画的细微程度并且符合您产品的整体调性,才能创造更好的体验。
8. 合理使用工具
Lottie,After Effects,Sketch2AE,Framer,Origami,Animatic App,UIDynamics(iOS),Adobe Animate CC,是动效设计中常见的一些工具。尝试找到最适合自己最符合当前项目阶段的工具并且熟练运用非常重要。
我建议动效前期可以先去画一些简单的草图、分镜。完成之后,再回头去使用软件。
9.捕捉和保存你觉得有趣的东西
保存你觉得有趣的东西。一遍又一遍地观察它们,放慢他们并了解每一个元素的运动。通过临摹去学习。我的电脑存满了使我感兴趣的动画。你也可以保存设计网站的作品。
本文翻译来自 Medium
https://uxdesign.cc/motion-in-ux-design-9-points-to-get-started-e891974dc7ee
原作者:Arpit Agarwal
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
阿里动效设计师带你了解更多动效相关知识/软件技能/公开课程: