5分钟了解Material Design的动画规范2-交互

再续前文5分钟了解Material Design的动画规范1-运动，之前叙述了Material Design动画的规范，本篇对Material Design的交互做一些论述。

响应式交互，即APP对用户的操作即时、合理和流畅的屏幕反馈，可以激发用户对APP产品更深层次探索的动力。每一个交互可以是面面俱到或是富有创意的，但都需要保证不让用户分心。

Material Design中APP需要对用户的输入进行反馈：

• 用户触屏操作、声音、鼠标操作和键盘操作都是同样重要的输入方式

• UI元素是在屏幕下层可触碰到的。但UI元素和用户之间隔着屏幕，因此视觉和动画需要快速的对用户操作进行反馈，并且表现形式要表现出用户直接操作的影响

响应式交互可以让app从单纯的信息展示功能上升到一种可以通过多种视觉和触觉进行沟通交流体验的产品。

这里通过对比Surface reaction、material responsive和radial reaction三种交互进行对比来看material responsive的特点。

Surface的反馈机制

在Surface的交互中，对一个输入事件，系统会在用户接触的点上给予迅速的视觉反馈：在用户手指触碰屏幕的点、或是从耳机中、或是键盘触碰的特定区域。

Surface交互的核心表现形式是触碰涟漪效果。效果如下图：

Material Response的反馈机制

除了平面的反馈之外，Material材质元素在被触碰时可以被抬起，表示一个被激活的状态。用户可以通过点击、拖动来生成、改变元素或者直接对元素进行处理。

触发点， 当用户触发生成新的材质时，材质应当从输入点开始生成：

下图是错误的：

触摸抬起，当一个卡片或者可分离的元素被激活时，这个卡片或元素需要被抬起表示被激活状态

Radial action的反馈机制

Radial action对用户的响应也是通过涟漪效果展现的，但这种涟漪效果是以触发点为中心向外拓展的。

作为用户关注的中心点，应该绘制一个明显的视觉效果来让用户清晰地感知自己的输入（触摸屏幕、语音输入等）。在用户的操作中心点应该形成一个像涟漪一样逐渐发散开的径向动效响应。

所有输入都有中心点，涟漪效果应从触控点、语音时屏幕上的语音图标、键盘输入时具体的按键点击位置上展开。

这些输入动作产生时都应该在中心点形成一个视觉上的关联，从中心点展开一连串动作产生的涟漪效果。

附上Google Design官方网站：
http://www.google.com/design/spec/material-design/ 大家应该知道怎么看哦~

本文为今日头条首发

请大家关注产品日常的头条号~ 您的关注是日常君更新的动力！！

祝大家圣诞快乐

欢迎大家关注日常君的微信公众号：日常君 chanpinrichang