9个步骤开始运动设计 开始为您的创作注入生命

2019-12-19  本文已影响0人  JR不会胖

动画意味着充满生命和兴奋。动画为静态事物增添了生命。在软件方面,这不仅是为了获得乐趣,而且是为了解决问题。

作为人类,我们习惯于看到世界在我们周围移动,如果任何软件具有连贯的动画,它就会感觉活泼自然。

该行业的技术领导者正在推动其产品变得更加自然。诸如Motion Design,Motion UX,UX Choreography之类的复杂词正逐渐流行。

切记– Motion在潜意识里建立了应用程序个性。非常类似于布局,间距,版式和颜色

完成滚动后,您是否曾经在iPhone上观察到过弹性反弹?看起来像这样的微小细节在形成苹果产品的个性方面起了很大的作用

酷,让我们开始使用运动

1.开始观察

培养动感。如果您看不到事物在移动,则将无法使用它们。在您使用自己喜欢的应用程序时,开始观察屏幕上事物的移动方式。再看一遍,找到为什么喜欢它,然后尝试查找细节。观察所有变化—形状,大小,位置,颜色。不管是微小还是巨大,都应尝试找出运动在整个合成中所起的作用。

2.动画不仅仅是一层涂料

动画揭示了更深层的含义。作为创作者,您必须从一开始就自觉地考虑动画。如果您处于设计阶段,请对原型进行动画处理以增加时间维度。如果您处于开发阶段,请将代码分成模块化组件,以轻松地在UI中移动内容。有关模块化的更多信息

提示–认真思考创作的动画个性将赋予它角色,并帮助您对尝试构建的作品有更深入的了解。

3。在产品中的哪里引入运动?

可以将运动引入产品的一些简单地方可能是 什么时候 屏幕正在变化,当用户 与元素互动,或 用户必须等待

4。Motion UX的类型

您可以将产品中的运动分类为“ 过渡”(内容更改/用户移动到另一个屏幕),“ 微交互”(例如Twitter的“赞”按钮),图形动画(例如,踏板车在Zomato的“订购”应用程序的启动屏幕上跳转)。

5。通过Motion 提供空间信息

如果UI元素是从屏幕右侧输入的,则用户将在心理上组织该元素的位置在右侧。例如,如果在屏幕的左上方放置了一个汉堡菜单按钮,则该菜单必须从左侧进行动画处理。要检查您的动画是否正确传达信息,请向人们展示并听他们说些什么。这是避免任何可能混淆的最简单方法。

6.开始理解诸如持续时间,时序曲线,动画路径,初始和最终值之类的东西

从技术上讲,这些参数构成了动画片段。与他们一起玩耍并掌握这些控件。一旦控制了这些,就可以制作动作杰作。对于UI,Google有一些不错的指南

7.永远不要让人们在流程中间等待

切勿在流程中间放慢节奏,让他们等待动画完成。如果他们真的必须等待,那就用有意义的动画让他们高兴。始终要记住使用动画来解决问题。这是存在动画加载程序的原因。此外,请勿因移动而使软件过载。这不是电影。

专业提示–使动画保持微妙并与产品的故事情节保持一致,以创造令人愉悦的体验。

8. 使用工具

Lottie,Adobe Animate CC,After Effects,Sketch2AE,Framer,Origami,Animatic App,UIDynamics(iOS)是用于Motion Design的一些工具。查找他们。

我建议先使用笔和纸开始您的想法。完成此操作后,继续使用任何数字软件。对于本文中的动画,我在Animatic App上绘制了手绘帧。动画有助于使事情简单而集中。


9.捕获并保存您发现有趣的事物

保存您发现有趣的东西。一遍又一遍地看着它们,放慢它们,了解元素如何运动。通过复制学习。我的Mac充满了有趣的GIF动画。您还可以将GIF保存在盘球上。此外,要在Mac屏幕上捕获和记录事物,G iphy Capture可以很好地工作。

上一篇下一篇

猜你喜欢

热点阅读