江苏龙网

  1. 首页 > 资讯 > 科技 > >

|APP动效设计解析：从目标到落地


编辑导语：随着市场上出现了越来越多的APP ， 用户对APP的要求也在不断提高 。 这就要求APP在各项设计上都要符合用户的需求 ， 提升体验感 。 由此 ， 动态设计的重要性也大大提升 ， 本文作者针对APP的动效设计 ， 从目标到落地进行了详细的分析 ， 快来一起思考学习吧 。
|APP动效设计解析：从目标到落地
本文插图

随着移动互联网的普及和技术的发展进步 ， 用户使用到越来越多 ， 体验也越来越优秀的产品 ， 对于产品的感知变的更加深入 ， 挑剔程度也在变得更加严格 。
越来越多的产品都在努力提升自己的产品体验 ， 尝试通过不同的方式来打造产品的差异化 ， 动效设计在这一过程中开始扮演越来越重要的角色 。 尤其是拟物设计逐渐被摒弃之后 ， 动效作为模拟物理世界运动规律的一种形式 ， 让冰冷的屏幕更接近真实世界的触感 。
动效设计作为一种设计师必备的技能 ， 越来越被重视 。
接下来通过动效设计的分类、目标、原则、落地实现这几个方便来系统性跟大家聊聊 ， 并结合工作中的一些真实项目 ， 让大家了解动效的原理以及我们围绕动效在产品的整个生命周期中可以做哪些事情 。
一、动效设计的分类
互联网产品的动效 ， 从整体上来说可分为两种：交互动效和MG动画（图形动画） 。 如果继续细分 ， 还可以按场景和功能分为转场动效、导航动效、加载动效、展示动效、引导动效、反馈动效 。
1. 转场动效
转场动效是一类比较常见的动效 ， 让页面之间有更顺畅的跳转连接 ， 同时也可以更好的体现页面之间的层级关系 ， 让用户更容易理解页面结构 ， 给用户更好的使用体验 。
比如下面这个登录的动效 ， 点击登录按钮时 ， 底部背景的斜线一边变直一边向上运动且伴随颜色变化；同时具体登录信息通过不透明度动画出现 ， 同一辆车在两个场景之间运动 ， 车用户会清晰地感知到这两个场景之间的强关联 ， 过渡也很自然 。
|APP动效设计解析：从目标到落地
本文插图

2. 导航动效
导航动效也是见的比较多的一类 ， Path是最早开始尝试这种创新的交互形式的 ， 把不同的功能收纳在“+”中 ， 点击“+”这些图标会旋转着弹出 ， 提高操作效率的同时又可以给用户带来操作的愉悦感 ， 设计者的用心用户还是能够充分感受到的 。
随着底部菜单栏中被加入更多的功能 ， 现在这种形式被用的越来越少了 ， 但他仍然还是有很大的使用空间和借鉴意义 。
|APP动效设计解析：从目标到落地
本文插图

（此图片来源于网络）
3. 加载动效
由于网络等原因在数据传输过程中无法即时加载完成时 ， 会出现等待时长 ， 加载动效的意义在于缓解用户等待的负面焦虑情绪 ， 提升产品的使用体验 。
|APP动效设计解析：从目标到落地
本文插图

4. 展示动效
展示动效作为纯展示出现的机会不是很多 ， 通过展示表达信息 ， 不承担引导和交互行为 ， 比如天气情感化动效展示 。
|APP动效设计解析：从目标到落地
本文插图

5. 引导动效
引导动效的意义在于引导用户行为 ， 把流量引导目标场景 ， 从而提升目标场景的点击量 ， 比如常见的金刚区图标加上MG动画以后 ， 引导用户点击 。
6. 反馈动效
尼尔森十大可用性原则的第一条是状态可见原则 ， 应该让用户时刻清楚当前发生了什么事情 ， 也就是快速的让用户了解自己处于何种状态 ， 需要在合适的时间给用户适当的反馈 ， 防止用户使用出现错误 。


推荐阅读


上一篇：|抢先布局百元级5G手机，realme产品更清晰，动作会更大

下一篇：厂探零零发|超级蘑菇工厂的演变，背后的专业精神，可见一斑