Material Design学习笔记-Animation

看过几个版本的material Design中文翻译,都不太准确,就没看下去,前几天同事分享了一篇链接,还不错http://www.apkbus.com/design/material-design.html

Animation

个人心得:应用里的每一个控件、列表、视图…都具备物理属性,存在于真实的xyz三维立体空间中。一个应用程序包含状态栏24px 导航栏 标签栏 工具栏。赋予它们体积和质量,加入真实的动作

1、真实的动作

~迅速的加速和平滑的减速动作

~最大的速度进入和最大的速度退出场景

注:不同物体质量不同移动方式不同。例如羽毛和铅球,质量轻速度快,质量重速度慢

2、响应式交互

用户操作任意元素,应该立即得到响应,例如点击button产生的涟漪,左右滑动翻页。响应式交互能够让用户立即感知自己的操作。(icon三态:未选中、按下、被选中)叫做表层响应。强调响应

元素响应:选择或点击,元素本身作出响应,比如按下物体悬浮。当卡片被点击,应该悬浮以表示该卡片处于被选中激活状态。

径向相应:以用户为中心点逐渐散发的径向扩散效果。从中心点展开一连串动作产生的涟漪效果

3、有意义的转场动画

新入场的物体,退场的物体都需要平滑轻快的转场动画。新入纸片应该滑入,字体应该淡入淡出。不要全屏的淡入淡出。

~避免瞬间切屏

~动画需要有层次,连贯。

思考:

~尽量避免线性路径(特殊情况除外)

确保元素移动的方向在整个转场过程中都是协调一致的。避免冲突的动作和重叠的运动路径

是什么在什么的下方运动,为什么?

如果所有运动的元素都在屏幕上按路径移动,看起来是否优美整齐? 这是否能让用户清楚地知道应该看哪里?

通过新旧元素的连贯性的动画来表现空间上的关系

通过和谐一致的动画引导用户的注意力

避免混乱不连贯的动画,元素以随机方向离开或进入等会造成用户的困惑

4、打动用户的细节

从一个图标到一个核心场景的转换动画,从一个播放按钮转换成暂停按钮的小动画细节,能让用户感受得到,这种无缝体验能打动用户。

2017年6月30日

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,789评论 25 709
  • Material motion - 真实的动作 Motion in the world of material d...
    两个朋友指甲阅读 6,167评论 0 3
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,245评论 4 61
  • 未见其人,先闻其声~。寻梦环游记,皮克斯出品必属精品,怀着满满的期待去了电影院。 与其说是寻梦环游记不如说梦想与家...
    靳晓阳s阅读 1,443评论 0 0
  • 文/乔生 杨一生家的中秋节和别人家的过法不同,别人家都是家人们四面八方的聚到一起吃饭喝酒,可是一生的爸爸妈妈却要分...
    乔生不羁阅读 3,043评论 0 2