新版Material Design 官方动效指南

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

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

为什么说动效很重要?

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

动效可以做到:

  1. 不同视图之间的焦点引导。
  2. 当用户完成了一个手势后,提示用户将会发生什么
  3. 明确元素之间的层级和空间关系
  4. 当程序在后台运行时,分散用户的注意力(例如获取内容或载入下一个视图)
  5. 润色整个app:个性化、令人愉悦

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

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

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

1. 响应式的

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

新版Material Design 官方动效指南

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

新版Material Design 官方动效指南

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

新版Material Design 官方动效指南

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

2. 自然的

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

新版Material Design 官方动效指南

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

新版Material Design 官方动效指南

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

新版Material Design 官方动效指南

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

3. 可察觉的

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

新版Material Design 官方动效指南

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

新版Material Design 官方动效指南

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

新版Material Design 官方动效指南

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

4. 有引导意向的

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

新版Material Design 官方动效指南

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

新版Material Design 官方动效指南

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

新版Material Design 官方动效指南

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

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

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

1. 动效是很快的

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

新版Material Design 官方动效指南

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

新版Material Design 官方动效指南

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

2. 动效是明确的

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

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

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

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

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

3. 动效是统一的

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

新版Material Design 官方动效指南

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

动效的意义

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

新版Material Design 官方动效指南

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

新版Material Design 官方动效指南

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

 

原文地址:google.com

译者:@平行煎餅

 

 

系列文章直达电梯

1)新版Material Design 官方动效指南

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

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

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29251/

(0)
CatherineCatherine
上一篇 2017-05-23 16:28
下一篇 2017-05-23 18:16

相关推荐

  • 用户体验三大评估指标优劣势分析:CSAT、NPS和CES

    作者:TASKUS |  翻译:Cecilia喵酱(在魔都破壳的用盐新人),校审:Baozhu如今市面上有很多不同的用户体验(抑或客户体验、服务体验等)评估标准,我们要如何抉择?用户满意度(CSAT)是B2C企业的一个关键绩效指标,然而现有的用户服务评估标准很多,让人很难分辨哪一种是评估用户真实感受的最佳方法。此文会帮助你了解目前最流行的评分系统的利弊,从而帮助你做出选择。用户满意度(CSAT分数)CSAT是一个广义的概念,描述了许多不...

    2018-02-03
  • 如何利用人工智能提升用户体验?

    如果你现在在科技领域工作,那你对人工智能(AI)或用户体验(UX)肯定不陌生了。随着人工智能的不断进步,人工智能越来越不局限在开发者或数据科学家的领域。作为设计师/技术爱好者/企业家/创业者,开始或继续思考我们目前使用的设备是很重要的。为了改善生活,我们不应该局限于现状。我们应该从每件事物中寻找灵感,并把生活看做一个界面。Airbnb当你想到人工智能时,你第一个联想到的不只是出租房间或公寓。随着人工智能和数据驱动文化的发展,Airbnb...

    2018-02-24
  • 全新用户体验+500多项升级功能,IFS Applications 10正式发布!

    ↑关注IFS软件获取最新资讯  ↑IFS Applications 10令人惊叹的视觉效果和全新的互动模式让用户在提高工作效率的同时更喜欢通过这款系统来办公创新的新功能 —— 包括AI 聊天机器人、增强的以服务为中心的功能以及所有解决方案领域的数百项功能优化和升级IFS始终尊重客户的选择:IFS Applications 10同时支持云端和本地部署全球领先的企业级应用软件提供商IFS(艾菲诗软件)宣布,全新版本的企业应用系统套件IFS ...

    2018-05-04
  • 听说,昨天网上打了这么一场营销+公关大战~

    你喜欢我们这些文字的话就推荐给更多的人吧。姐姐先行谢过了!我们公众号是:Aioued,记得分享哦,么么哒! ----------------------------我是一条分割线,你看不见我!-------------------- 正文: 这件事的起因,…

    2014-10-30
  • 掌握这5个方面,让你具备真正的交互设计思维!

    Z Yuhan(英国约克大学人机交互硕士):交互思维是什么?网上的搜索结果大多是一些交互设计 的方法。但是我这里要讲的,是真正做交互设计 所具备的思维方式。交互设计在国内发展的并不成熟,还有很长一段路要走。很多人,甚至包括交互设计师自身,对这一工作的性质和价值都未必有足够的了解。

    2017-08-21
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 6个问题,带你全面了解交互设计

    随着行业的发展,只会图形 UI 设计和只会交互设计的设计师职业生涯都会遇到瓶颈。1. 什么是交互设计
    2. 当今UI 设计师的能力要求
    3. 交互设计主要做什么工作内容
    (1)产品UI框架设计
    (2)产品UI风格设计

    产品UI 框架选择
    简单式(单一内容)
    翻页式(多页内容)
    宫格式(较多入口)
    上导航
    下导航(4-5大类+分支内容)
    舵式
    抽屉侧边栏(1个重点+其他次要内容)
    隐藏式

    4. 线框原型图绘制方法

    方法一:黑白灰+色块
    方法二:黑白灰+高保真图形
    方法三:黑白灰+突出色+高保真图形

    5. 交互流程图绘制
    6. 动态交互原型设计

    2017-05-11
  • 给设计师的网页动画设计基础指南

    挤压和拉伸
    预期
    登台
    连续动作和姿态对应
    缓进缓出
    弧形运动
    次要动作
    时序
    夸张
    立体刻画
    吸引力

    2017-05-27
  • 十种数字字体免费下载

    当你数字和文字融合时,让数字脱颖而出是很重要的。 这些数字可用来吸引用户的眼球。在广告或打印使用创造性的数字字体和颜色,它们将脱颖而出。 国外设计师Heather Moritz跟大家分享了十种免费数字字体,这些字体仅…

    2015-01-20
  • 设计干货|聊聊设计师玩转Sketch的那些事儿

    点击蓝字关注GOMEOS用户体验设计1调整组内图层父级变换属性新的调整大小选项可以帮助我们更灵活地调整对象与子层之间的响应:1. 默认属性下的成组放大缩小变化,内部的图标跟随组的缩放比例进行变化.2. 锁定图标的固定宽度&固定高度,成组的缩放比例不会影响到图标的比例与尺寸.3. 当锁定上部及右部间距时,成组缩放比例时,图标距离组内上部及右部的距离保持不变.2嵌套样式这个十分强大的功能使得symbols的复用更加的强大,可以同一内容复用多...

    2018-04-04