Material Design 之运动(Motion)– 实体运动

实体运动

在Material Design的世界中,运动被用来描述实体空间关系、应用模块功能以及美和流畅的象征。

为什么运动是至关重要的?

运动是一个应用去展示其系统完整性以及其所提供的功能的最好方式。

运动提供如下:

视图间焦点转换的引导

在用户完成一个手势操作后提示其将会发生什么

元素之间的层次关系和空间关系

转移后台进程的视线(如抓取内容或加载下一个视图)

特征化,更优雅,使人愉悦

实体是如何运动的?

实体环境从现实世界的作用力中汲取灵感,如重力和摩擦力。而这些作用力则反映在了用户输入动作对屏幕上各种元素的影响以及元素如何进行相互反应的方式上。

实体在运动中有如下特征:

响应性

实体本身充满着能量。其能够快速准确的在用户发起输入事件的地方进行响应。

移动设备中比较大的动画大概有300-400ms,比较小的动画大概为150-200ms。动画如果比上述较长会显得应用整体比较缓慢而如果比上述短则会使用户很难跟随。

由用户触摸点立即向外扩散的水墨波纹用以确认用户的输入事件,卡片的升降则表明着实体的激活状态

显示新的元素表面同创建它们的元素或动作之间的关联

自然

实体的运动轨迹受启发于真实世界中的作用力。

在现实世界中,一个元素加速或减速的能力受到其重量和表面摩擦的影响。同样的,在Material Design中,开始和停止也不是瞬间发生的。

真实世界中的作用力,比如地心引力,会导致元素以弧线形式而不是直线形式来运动。

实体对象的变幻同样遵循这个弧形运动轨迹。

影响

实体会受周围环境的影响,包括用户以及其它实体。它可能会被其它元素吸收以响应用户的意图。

当一个元素转换为视图时,其本身和其周围的环境应该被以一种可以定义它们之间关系的方式精心设计。

当一个元素接触到其它元素时可能会吸引其它元素甚至加入融合其它元素。

一个实体可以将其它实体推离其位置。

意图明确

运动中的实体要在正确的时间体现出正确的焦点。

转变有助于用户清楚明了的进入一个交互的下一步

动画可以将用户的注意力集中到需要用户集中的地方去

运动可以传递不同的信号,如动作是否可用等

如何设计一个优秀的转场?

成功的运动设计具有以下特征:

运动应该是迅速的

一个交互不应该使用户等待的时间超过必要的时间。

正确

动画快速完成,这样用户就不必等待动画完成。

错误

过多的元素以及过度缓慢的运动会导致整个交互的时间变得很长。

运动是清晰的

转换应该是明确的、简单的、连贯的。应该避免一次做太多。

正确

在进入下一个视图时保持一个清晰的路径,即使这样做可能会使元素被编成一个组。

错误

当多个项目需要朝不同的方向或交叉路径移动时,转换会变得混乱。

运动是紧密结合的

实体元素可以通过它们的速度,响应以及意图等被统一起来。在一个应用程序中的任何自定义运动设计经验都应该是保持一致的。

当应用包含很多功能时,相似的动画效果会使它们看起来是相关的。

运动的启示

关于运动模式的好处在以下两个例子中可以很好的体会的到,其中的一个应用很好的遵循了上述运动的特征,另一个则没有。

正确

在转换过程中,用户被引导到下一个视图。信息表明转换为沟通层面。加载在后台进行,以减少延迟感知。

错误

这种情况下比较不清楚新视图与旧视图是如何关联的,因为没有转换发生,也没有清晰的焦点。任何层次感都没有被传递,并且圆形加载器的显示也更突出的加载过程。