运动 材料运动

材料运动

运动中的材料被用来描述空间关系、功能以及优雅流畅的交互。

为什么运动如此重要? 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

运动向用户展示了应用的组织结构和功能。

运动可以:

  • 引导用户在视图中的视觉焦点
  • 告诉用户放手之后将会发生什么
  • 暗示元素间的等级和空间关系
  • 让用户忽视系统层面的任务(比如加载内容或页面)
  • 个性、优雅、愉悦

材料如何运动? 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

材料环境中拥有现实中的力学,比如重力和摩擦力。这些力显示了用户如何与屏幕上的元素交互,以及元素之间的相互影响。

运动中的材料有以下特性:

反应敏捷

材料通常充满了活力,它可以快速准确的对用户输入的位置做出响应。

在移动设备上,稍长点的动画大概是在 300-400ms。短一点的在 150-200ms。太长或太短的动画会让用户觉得迟缓或无法理解。

更信息请参考 常用的持续时间.

当用户输入的时候会立即出现墨水波纹,从用户的触控点向四周扩散。浮起的卡片也指示出激活状态。

更多详情可参考径向反应.

展示出了新建的元素和创建者之间的联系。

更多详情可参考创造

自然的

在现实中的力的作用下,材料会很自然的移动。

现实中的物体加速度和减速度会受到物体自身的重量和表面的摩擦力影响。因此在 Material Design 中,物体不会突然开始运动,也不会突然停止。

更多详情可参考自然缓动曲线.

现实中的力,比如重力,通常会影响物体的运动轨迹,更多的时候呈现的是曲线而不是直线。

更多详情可参考移动.

材料的形变也遵守曲线的运动轨迹。

更多详情可参考材料转换

有意识的

材料可以感知到周围的环境,包括用户和其他材料元素。元素之间会相互吸引,以此来响应用户的意图。

更多详情可参考更多编排.

当元素转换到视图中时,它和周围的其他元素会通过某种方式编排在一起,以此来定义它们之间的关系。

物体可以把其他的物体挤出视图。

元素之间会吸引,并且可以加入最近的元素成为一个新的元素。

有意义的

运动中的材料会指引用户在正确的时间聚焦于正确的位置。

更多详情可参考连续性

行为转换可以指引用户前往下一个需要交互的地方。

移动可以传达出不同的信息,比如说操作是否可执行。

动画可以引导用户注意到某些信息。

什么是好的行为转换? 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

成功的运动设计需要遵守以下规则:

迅速运动

每一次交互都不应该让用户等待太久。

动画通常都很迅速,这样用户就不会有等待的感觉。

太多的动画以及缓慢的过渡都会延长动画的持续时间。

清晰运动

行为转换应当清晰、简单并且保持连贯。避免在动画中加入太多效果。

即使下个视图中包含很多元素,行为转换也应当保持清晰的路径。

当元素从不同的方向和路径进入视图时,会让人感觉很困惑。

统一运动

材料元素的速度、响应力度以及意图都是统一的。在应用中使用自定义运动时应当保持这种统一性。

这些应用的功能各不相同,但是相似的动画让人们觉得它们是有一定关系的。

运动的意义 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

从以下两个案例中,可以明显的看出运动所带来的好处:对比一下使用运动和不使用的效果。

行为转换可以将用户引导进入下一个视图,让用户理解应用的结构,与此同时数据加载也在系统后台进行,从而减少了用户能够感知的等待时间。

没有清晰的行为转换,很难看出新的识图与旧视图有什么关联。也无法感知应用的结构,使用圆形图标的加载方式让加载过程显得格外突出。