新版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

相关推荐

  • 十大真实Axure基础案例分享

    小编有话说:本文是我是UE网专栏作者 Wiki 跟大家分享的十个Axure基础案例,另外还赠送大家一个关于axure函数的文档,哈哈,希望对大家的交互设计学习有所帮助。 学习中如任何有问题,可在交互设计IxD学堂群(Q号:…

    交互设计WiKi 2015-05-27
  • 光鲜背后:Pokemon Go的用户体验现状

    今天,我像往常一样走路去上班。但我不是孤身一人。在我周围,从店铺与餐馆门口的人行道,到城市公园里的绿色草坪,人们举着手机四处徘徊。小巷和公园入口这样的普通场所,聚满了人,在计算机算法作用下随机地聚集起来。这就是Pokemon Go。

    2017-05-21
  • 交互设计 — 专业四大方向解读

    随着大众对设计概念的认知不断提升,互联网行业和智能科技的发展,以及社会创新、生态环境、跨界实验、用户体验发展问题的突出显现,交互设计专业已然成为了出国留学的热门选择。无论是否为设计背景出身,是否掌握了对应的技术软件,是否对交互的原理有明确的概念,是否在产品运营和商业分析的行业中有一定的工作经验,大众都觉得自己已经熟知了交互设计专业。但实际上,尽管检索了不少学校的官网,查看了交互设计以及跨界行业运用的专业介绍,浏览了知乎网站和各类信息资源...

    2018-03-19
  • 这个简单粗暴的设计为何是“好设计”?

    作者:UX沐沐(公众号:Liveux)   20世纪著名建筑师史密斯.德罗在总结他成功经验时说“魔鬼藏在细节中”,面对一些习以为常的设计,设计师能否洞察背后的不寻常? 今天想探讨一个我们每天都能见到数十次的“寻常”设计…

    交互专题 2017-08-07
  • 产品经理黑魔法 | 自启动与后台

    最近写黑魔法上瘾了,每天稍微有点空闲,Glen都在思考互联网行业都有哪些黑魔法。有机会大家还可以探讨一下魔咒课、魔药课、占卜课等哈利波特魔法课程。

    2017-06-03
  • 扛住100亿次请求 如何做一个“有把握”的春晚红包系统?(腾讯官方内部技术PPT下载)

    羊年春晚摇一摇活动已经落下帷幕,现在回过头来看看这一全民参与的有趣的活动背后,有着怎样的后台系统?这个系统又是如何被设计与实现出来的?   作者:张文瑞 iotazhang  腾讯 WXG 技术架构部,本文提供PPT…

    2015-11-10
  • 游戏交互设计心得分享:从代入感与反馈感入手提升打击体验

    前言经常听到一些设计人员、产品经理、甚至是一些交互体验”大师“的言论——【这个操作太麻烦了,需要操作好几步,体验太差了!】亦或者【这个功能藏的太深了,你有考虑过用户体验么?】之后不知怎么的,设计游戏或者软件的人员经常会把这几句话挂在嘴边。无论做什么,3句话里面保准带一句上述“金句“。所以近段时间,你会发现打开一个游戏或者软件,第一眼的界面,功能堆积,眼花缭乱,不知从何下手。我觉得,经常拿着两句话一刀切的人太幼稚,太低级了。所以我今天斗胆...

    2018-02-20
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16
  • 体验的情感之谈

    来源:Johny Holland Magazin 当体验设计的范畴在不断延展的时候,也正是其面临着一种设计挑战的时候,即体验设计师希望给用户传递一种可独立于情境或频道、具有相关性(延续性)和一致性(稳定性)的设计。 如同在…

    交互设计 2015-10-20
  • 【优秀作业展示】交互设计基础(三)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第三期陆晗产品设计15201高铁购票界面设计搜索目的地如果没有没有您想要的目的地可以选择搜索功能选择日期如果选择三天以后出...

    2018-05-08