动效意味着充满生命和兴奋，为静态事物增添了生命。然而，在软件方面，动效不仅是为了获得乐趣，而且是为了解决问题。
搜UI SOOUI 带来UI设计动效\动画素材模板，分层分步骤学习动效设计。从可临摹分层模板开始。
1.开始观察
培养动感。如果您看不到事物在移动，则将无法使用它们。在您使用自己喜欢的应用程序时，开始观察事物在屏幕上的移动情况。再看一遍，找到为什么喜欢它，然后尝试查找细节。观察所有变化—形状，大小，位置，颜色。不管是微小还是巨大，都应尝试找出运动在整个合成中所起的作用。
2.动效不仅仅是一层涂料
动效揭示了更深层的含义。作为创作者，您必须从一开始就自觉地考虑动效。如果您处于设计阶段，请对原型进行动画处理以增加时间维度。如果您处于开发阶段，请将代码分成模块化组件，以轻松地在UI中移动内容。
认真思考创作的动画个性将赋予它角色，并帮助您对尝试构建的作品有更深入的了解。
3.思考在产品的哪里引入运动？
可以将运动引入产品的一些简单地方，可能是屏幕正在变化/当用户与元素互动或用户必须等待的时候。
4.Motion UX的类型
您可以将产品中的运动分类为“ 过渡”（内容更改/用户移动到另一个屏幕），“ 微交互”（例如Twitter的“赞”按钮），图形动画（例如，踏板车在Zomato的“订购”应用程序的启动屏幕上跳转）。
5.通过动效提供空间信息
如果UI元素是从屏幕右侧输入的，则用户将在心理上组织该元素的位置在右侧。例如，如果在屏幕的左上方放置了一个菜单按钮，则该菜单必须从左侧进行动画处理。要检查您的动画是否正确传达信息，请向人们展示并听他们说些什么。这是避免任何可能混淆的最简单方法。
6.开始理解诸如持续时间，时序曲线，动画路径，初始和最终值之类的东西
从技术上讲，这些参数构成了动画片段。与他们一起玩耍并掌握这些控件。一旦控制了这些就可以制作优秀的动效。
7.永远不要让人们在流程中间等待
切勿在流程中间放慢节奏，让他们等待动画完成。如果他们真的必须等待，那就用有意义的动画让他们高兴。始终要记住使用动效来解决问题，这是动画加载程序存在的原因。
使动画保持微妙并与产品的故事情节保持一致，以创造令人愉悦的体验。
8. 使用工具
Lottie，Adobe Animate CC，After Effects，Sketch2AE，Framer，Origami，Animatic App，UIDynamics（iOS）是用于动效设计的一些工具。查找它们。
我建议先使用笔和纸开始您的想法。完成此操作后，继续使用任何数字软件。对于本文中的动画，我在Animatic App上绘制了手绘帧。动画有助于使事情简单而集中。
9.捕获并保存您发现有趣的事物
保存您发现有趣的东西。一遍又一遍地看着它们，放慢它们，了解元素如何运动。通过复制学习。我的Mac充满了有趣的GIF动画。您还可以将GIF保存在盘球上。
扫一扫
719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
