编者按:动效化显然已成为移动互联网产品的新趋势,如何设计出有趣且吸引人的动效已成为设计师们的新课题。不同的产品适合不同类型的动效,有些产品适合炫酷的动效,有些则不适合。切记不要把动效设计成华而不实的花架子,而应该将其视为提升用户体验的新方法。

移动互联网时代已经到来,APP已如天空的繁星,数也数不清。随着手机硬件的不断升级,实现炫酷且流畅的动效不再是遥远的梦想。如果你是APP达人,喜欢试用各种APP,你肯定会发现越来越多的APP开始动效化。

一个真正的美女一定是同时兼具外在美和内在美,评价一段动效也是如此。一段真正“美”的动效需要同时具备两个条件:首先它需要是生动且有趣的,既好看又流畅;再次它不是可有可无的,需要具备优化交互和提升体验的作用。

一、APP动效的外在美

一段动效首先需要是生动且有趣的,不仅要有好看的外观还要有流畅的体验。要做到这点,需要赋予动效以生命力,具体有如下几种方法:

1.1模拟惯性

现实中物体的运动是有惯性的,比如公交车突然刹车时乘客会突然往前一倒。仔细观察下面3段动效,图像在变化(放大、缩小和翻转)的末端都会“超出”一点再立即“反弹”回来,如此的处理方法使得整个动效充满活力,显得生动有趣。

1.2模拟重力

与惯性一样,重力也是现实中存在的现象,所有物体在无向上的支持力的情况下都会下坠,比如倾倒垃圾。一般APP删除卡片的动效就是横向滑动直至消失,但是下面这段动效却加入了重力效应。即卡片在横向滑动的同时也在翻转并下坠,就像现实中往垃圾桶中倾倒垃圾一样。在使得整个动效生动有趣的同时也便于用户理解操作含义。

1.3均匀变速

一个优秀的动效肯定不会是匀速运动的,匀速运动的物体显得生硬和死板,就像机器人一样。要想让一个图像运动的有活力,就需要对其运动的速度进行“设计”。仔细观察下图所示动效,虽然界面中不同元素的运动速度不尽相同,但其运动均遵循一定的原则,其中之一就是均匀变速,切记“急起”。就是说界面元素在运动时的初始速度要为0,以匀加速开始运动,而在运动结束阶段往往是可以急停的。

1.4碎片化运动

使一款应用变得个性十足的一个好方法就是给它加上炫酷的动效,而使一个动效炫酷的常用方法就是碎片化运动。简单说就是把界面中的图像拆解成一个个碎片,然后让它们进行不同步的运动,利用时间间隔和变速产生炫酷的效果。就如下面一则动效,图像中的不同元素有节奏的呈现,利用时间差来制造效果。

二、APP动效的内在美

真正优秀的动效不是只有漂亮外表的花瓶,还得具备优化交互和提升体验的作用。下面总结了3个动效的“内在美”,分别为引导、简化和增强反馈。

2.1引导

图形界面本是难懂且抽象的,增强引导是降低软件操作难度和提升用户体验的好方法。

2.1.1动态聚焦

通过动态化的处理引导用户聚焦界面的关键部位,以使体验更加的流畅。青蛙能够快速捕捉移动中的物体,人眼也具有相似特征,运动中的物体总能引起下意识的关注。如下图所示动效,屏幕上方的数字不是直接显示一个数值,而是从0迅速递增到该数值,特意表现一个动态的效果,目的就是为了吸引用户的目光,起到聚焦的作用。国内的支付宝钱包APP也利用了此类特效。

2.1.2示意过渡

过渡动效就是给界面的变化加上流畅的过渡,目的是引导用户理解到底发生了什么,而不会使其不知所措。如下图所示动效,添加卡片的过程进行了生动的模拟,让用户很轻易地理解发生了什么。试想一下,如果该页面没有滑动效果,而是直接生硬的跳转,是不是差劲很多?

2.1.3空间转场

转场动效是被设计师所普遍重视的一种特效,它的作用也是引导用户,让用户更好地理解页面跳转,知道自己身在何方。下图所示一则动效就是一个漂亮的转场动效,为了避免两个页面之间的跳转过于生硬,利用动效填补上了页面跳转的中间过程,使得体验更加流畅和自然。

2.2简化

有时优秀的设计就是出色的简化。简化界面信息和交互层级可以降低操作难度和提升用户体验。

2.2.1隐藏二级操作项

利用动效可以使界面中的部分信息隐藏,当进行某些操作后隐藏的内容会动态展开,从而达到简化初始界面的目的,使界面简洁大气。

2.2.2 按钮动效化

使按钮动效化能够让界面重要信息动态浮现在同一按钮上,使得用户的目光紧紧盯着按钮,弱化了页面跳转带来的干扰,使体验更加流畅。

2.3增强反馈

软件的反馈对于体验的提高来讲至关重要,增强反馈可以起到更好的提示作用,使体验过程更加轻松和愉悦。抖动是增强反馈的方法之一,用动效反馈替代图形文字的静态提示,更加自然和引人注目。下图所示动效出自苹果的Pages软件,当进入编辑态后待编辑对象进入不断的抖动状态,起到很好的引导作用。

总结

动效化显然已成为移动互联网产品的新趋势,如何设计出有趣且吸引人的动效已成为设计师们的新课题。不同的产品适合不同类型的动效,有些产品适合炫酷的动效,有些则不适合。切记不要把花架子,而应该将其视为提升用户体验的新方法。

原文地址:mux.baidu

介绍简单实用APP动画效果的两个关键相关推荐

  1. html遮罩层动画制作,flash简单制作遮罩动画效果

    flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图 ...

  2. Android 动画介绍及自定义3D动画效果的基本使用

    导语 Android的动画框架包括帧动画.视图动画(又叫补间动画).属性动画.在Android3.0之前,视图动画一家独大,但随之后属性动画框架被推出.相比属性动画,视图动画一个非常大的缺陷就是不具备 ...

  3. Android 简单的3D动画效果

    在Android Api11之后,加入了属性动画,参加我的另一篇博文:Android Property Animation 属性动画 也加入了一些View的属性和对应的操作方法: iv.setTran ...

  4. 这两天老是有兄弟问到Vue的登陆和注册,登陆成功留在首页,没有登录回到登录页面,现在我用最简单实用的方法实现(两分钟技就看懂)...

    其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用 核心就是用localStorage存.取数据,这 ...

  5. Android实用技巧.动画效果(二)

    LayoutAnimationController实现子布局进入动画效果 以listView为例设置item进入动画: 首先设置list界面 <?xml version="1.0&qu ...

  6. 【简单实用】一台主机两个人使用,互不影响~~~

    当你只有一台主机,而且有两个人想同时使用电脑的时候,按理说一个人用一台电脑,另一个人只好坐在一旁默默地等待着......遇到这种情况的时候,怎样才可以达到一台主机两个用呢??? 今天本人就分享一款软件 ...

  7. 人人都学会APP开发 提高就业竞争力 简单实用APP应用 安卓浏览器APP 企业内部通用APP制作 制造业通用APP

    安卓从2009年开始流程于手机.平板,已经是不争的非常强大生产力工具,更为社会创造非常高的价值, 现在已经是202X年,已经十几年的发展,安卓平台已经无所不在. 因此建议人人都学学APP制作,简易入门 ...

  8. css3实现简单的文字动画效果

    随着css3的主键强大,以前很多用javascript写的特效好多都能用css来写了,这里给js不好的同学带来的很多方便, 话不多说,直接来上一个demo. html部分 <div class= ...

  9. vue 渲染的list 数据交换顺序,简单就可以实现动画效果

    这是由vue渲染的数据,想要实现的效果是,当右侧的数据发生变化的时候,排序发生变化时,可以有一个数据上下交换的效果 不需要写js,只需要在html和css上动手脚就好. html 将循环遍历的list ...

最新文章

  1. 21个深度学习调参技巧,一定要看到最后一个
  2. “看墙之外” ——遮挡下的人体姿态估计
  3. 城市中的像素灯塔-前海数据中心,深圳
  4. WM的Image格式分析
  5. ie浏览器升级_微软呼吁用户停用IE浏览器 2020年将不再更新升级
  6. html5里面em是什么单位,HTML5中单位em的理解
  7. 写论文的第三天 自建zookeeper集群
  8. python 实现的huffman 编码压缩,解码解压缩
  9. 基于微信小程序开发——音乐播放器
  10. 2022大众点评商家数据
  11. Tesseract-OCR 4.0LSTM训练流程 (Windows环境下)
  12. 2019年南京大学计算机考研分数线,南京大学2019年考研复试分数线已公布
  13. 天干地支与阴阳五行的关系
  14. flex布局小案例——制作骰子
  15. 如何设置计算机玩游戏不卡,win10电脑怎么设置玩游戏不卡?
  16. PTA 7-256 五分制成绩(函数实现)
  17. 哪款护眼灯最适合学生?教育部入围护眼照明品牌
  18. everything changes so quietly
  19. 群星闪耀,OpenStack技术峰会后援团深度曝光
  20. 常见电路结构分析三:自锁控制

热门文章

  1. 使用animation实现拍照时,画面闪一下效果
  2. 程序性能分析工具—gprof
  3. MySQL数据库mycat读写分离
  4. uni-app项目 发布为安卓 app
  5. Ubuntu设置和查看环境变量—笔记4
  6. 通过Intent.ACTION_NEW_OUTGOING_CALL拦截电话拨号
  7. C 语言字符串 将一行字符串I am a student。逆序输出student。a am I;
  8. HDG2L-IOT-EU V2.2核心板 wifi STA模式测试
  9. Windows实现grep
  10. vue 上传文件到华为云obs