Google 刚发布了新版Material Design 官方动效指南,全文包括三个部分:为什么说动效很重要?如何制作优秀的Material Design动效及转场动画,动效的意义。新鲜热辣收好不谢!

  在Material design的世界中,动效用一种优雅、流动的方式来描述空间关系、功能、和意向。

  为什么说动效很重要?

  动效可以向我们展示一个App 是如何构成和用途。

  动效可以做到:

  不同视图之间的焦点引导。

  当用户完成了一个手势后,提示用户将会发生什么

  明确元素之间的层级和空间关系

  当程序在后台运行时,分散用户的注意力(例如获取内容或载入下一个视图)

  润色整个app:个性化、令人愉悦

  如何制作材料设计的动效?

  材料设计的运动吸取了一些真实世界的力学元素,例如重力和摩擦力。这些力反应的是,用户对屏幕操作的影响,以及这些元素是如何相互反馈的。

  材料设计的运动具有以下几个特征:

  1. 响应式的

  材料设计的动效是充满活力的。它能迅速精确响应用户用户所触发的内容。

  在移动设备上的长动画大约是300-400ms,短动画大概是150-200ms。过长的动画让人感觉迟钝,过短的动画让人觉得难以看明白。

  用户触摸屏幕时,通过漪涟动画能使用户确认输入。卡片上升表示该卡片处于激活状态。

  显示触发元件或动作和创建出的新的卡片之间的联系。

  2. 自然的

  材料设计的动效通过模仿真实世界的力,而展现了自然的运动过程。

  在真实的世界中,一个物体可以被重量、表面摩擦力影响很快的加速或减速。同样的,材料设计的动效也是不会发生突然停止,或者突然启动,都是会有一个加速度或者减速度。(红色没缓动,蓝色有缓动)

  真实世界中的力,例如重力,能使一个元素沿曲线运动而非直线运动。

  材料设计的动效转场是沿着一个弧线的。

  3. 可察觉的

  材料设计的动效是可以被周围环境察觉的,包括用户和周围其他的元素。它可以被物体吸引,并且恰当的回应用户的意图。

  作为过渡元素,他们和他们周围元素的运动是精心安排的,可以通过这个过程看出他们之间的关系。

  卡片可以推动其他卡片,让他们给自己让开路。

  元素可能会吸引其他元素加入,当他们相互接近时合为一体。

  4. 有引导意向的

  材料设计的动效能使焦点在对的时间聚焦在对的点。

  转场动画有助于引导用户进行下一步的交互。

  运动可以传递不同的信号,例如,一个操作是否不可用。

  动画能使用户关注特定对象。

  如何设计一个好的转场动画?

  好的动效设计应该遵从以下几点:

  1. 动效是很快的

  一个交互动作不应该让用户做不必要的等待。

  正确:动画一定要快,用户无须等待动画完成。

  错误:很多元素磨磨蹭蹭很慢的运动,令动画时长延长。

  2. 动效是明确的

  转场动画应该明确,简单,一致。应该避免一次有太多的元素动效。

  由于动图太大,上传到网盘,麻烦大家查看:http://pan.baidu.com/s/1pLGM0en

  正确:保持清晰的路径进入下一个视图,最好元件都编排成一个组。

  由于动图太大已传,单击可见:http://www.uisdc.com

  错误:多个元素移动到不同的方向或者交叉路径,会造成转场动画的混乱。

  3. 动效是统一的

  材料设计的动效是由速度、响应性、和意向所统一的。在App 中的任何自定义动效体验都应该贯穿整一个App。

  即使这些app有着不同的功能,但是他们相似的动画体验让人感觉他们是有关联的。

  动效的意义

  动效的好处可以从以下两个例子中明显看出:其中一个app遵从这些模式,而另一个没有遵从。

  正确:在转场的过程总,用户被引导到了下一个视图。表层的转场清晰的传达出层级关系。loading的过程在后台进行,以减少延迟时间。

  错误:转场的发生点没有一个清晰的焦点,所以看不出来新的页面和旧的页面之间的联系。没有感觉到有任何层级的关系,loading用一个转圈的半圆表现太明显了,令人感到延迟感。

新版MATERIAL DESIGN 官方动效指南(一)的更多相关文章

  1. 新版MATERIAL DESIGN 官方动效指南(二)

    继上一篇,本文继续第二部分,从动效的速度.动态持续时间.通用持续时间和缓动曲线4个部分,教你创建平滑一致的Material Design 动效.再系统的干货都比不上官方的动效指南,西瓜就在这,赶紧来捡 ...

  2. 新版MATERIAL DESIGN 官方动效指南(三)

    运动 Material design 的动效会被类似真实世界中的力的影响,类似重力. 物体在屏幕内的运动 屏幕内物体在两点之间的运动,是沿着一条自然.凹陷的弧线.屏幕上所有的运动都可以使用标准曲线. ...

  3. 【Android】进入Material Design时代

    由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...

  4. flutter学习之二Material Design设计规范

    前言: 最近在自学flutter跨平台开发,从学习的过程来看真心感觉不是那么一件特别容易的事.不但要了解语法规则, 还要知晓常用控件,和一些扩展性的外延知识,所以套一句古人的话“路漫漫其修远矣,无将上 ...

  5. 进入Material Design时代

    ------------------------------------------------------------------------------ GitHub:lightSky 微博:   ...

  6. Google I/O 官方应用中的动效设计

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jILRvRTrc/article/details/82881743 作者:Nick Butcher, ...

  7. 走着官方的教程入门Material Design(一)

    又到期末了,学习下Google的材料设计.写下此文记录自己的同时,分享给需要的同学,若发现文中有什么问题和不对,欢迎指出 使用 Material Design 创建新应用 首先需要使用材料主题 如果是 ...

  8. 官方 Material Design App

    [转]MaterialDesignCenter 发表回复 转: https://github.com/lightSky/MaterialDesignCenter MaterialDesignCente ...

  9. Android(Lollipop/5.0) Material Design(二) 入门指南

    Material Design系列 Android(Lollipop/5.0)Material Design(一) 简介 Android(Lollipop/5.0)Material Design(二) ...

随机推荐

  1. JavaMail API 概述

    JavaMail API提供了一种与平台无关和协议独立的框架来构建邮件和消息应用程序. JavaMail API提供了一组抽象类定义构成一个邮件系统的对象.它是阅读,撰写和发送电子信息的可选包(标准扩 ...

  2. J2EE进阶(十四)超详细的Java后台开发面试题之Spring IOC与AOP

    J2EE进阶(十四)超详细的Java后台开发面试题之Spring IOC与AOP 前言   搜狐畅游笔试题中有一道问答题涉及到回答谈谈对Spring IOC与AOP的理解.特将相关内容进行整理.    ...

  3. 手动添加SSH支持、使用c3p0

    之前做的笔记,现在整理一下:大家有耐心的跟着做就能成功: SSH(struts2.spring.hibernate) *  struts2      *  充当mvc的角色 *  hibernate ...

  4. Windows上C语言实现设置控制台的颜色

    这里设置只要调用system();这个函数就行了,参数是字符串,想要设置终端的颜色,按照以下格式可以设置: //数字表示前景色,字母表示背景色 //color 0=黑色 1蓝色 2 绿色 3湖蓝色 4 ...

  5. 剑指offer面试题3 二维数组中的查找 (java)

    注:java主要可以利用字符串的length方法求出长度解决这个问题带来方便 public class FindNum { public static void main(String[] args) ...

  6. 【Android应用开发】Android Studio 错误集锦 -- 将所有的 AS 错误集合到本文

    . 一. 编译错误 1. "AndroidManifest.xml file not found" 错误 (1) 报错信息 报错信息 : -- Message Make : Inf ...

  7. Cocos2D结合CoreGraphics实现RPG人物中空黑洞吸入效果

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 之前的博文中我们实现了RPG人物的复古效果. 现在我们再完点h ...

  8. iOS中 Realm错误总结整理 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 一.错误信息:Attempting to modify object outside of a write tra ...

  9. javascript之键盘事件

     键盘事件包含onkeydown.onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} document.onkeydown = keyDown; ...

  10. TortoiseSVN服务器ip地址修改后如何使用

    TortoiseSVN是很多人特别是程序员经常使用的工作追述工具,在长期使用过程中难免会遇到服务器迁移ip地址变更的问题.那么在服务器ip地址变化之后,我们要如何继续使用呢?步骤其实非常简单,下面我们 ...