引导用户，增强产品功能认知

Animation is no longer just for delight; 

it is one of the most important tools for successful interaction.

现如今视觉设计扁平化，让信息传递更直观，使我们在App时有更高效的体验。扁平化使我们在与“Screen”交互的过程中与物理世界脱节、导致“高效”的App上手困难。

而，拉、旋、弹… 这些动态协助视觉设计，动效自然的成为了视觉与交互之间的桥梁。在VR、AR的视觉设计中视觉设计师们也热衷于“Sci-Fi”科技未来的感觉，在这之前我们也可以从APP的设计中为这种趋势过渡做准备。

那这一次，我们聊一聊App设计中如何用动效设计引导用户，增强对产品的功能认知。

下面和大家一起从：第一印象、日常使用、品牌强化。三个场景结合 AIUX | Protoype 和案例来看看如何恰好的运用动效吧。

1. 第一印象

烘托场景，建立关系

\\ First Launch Experience //

AIUX | Prototype

对于用户第一次使用App时，可交互式的引导动效更能吸引用户，完成整个产品介绍的体验。根据产品的需求在可交互式引导中采集用户喜好，建立贴心印象。

初次使用功能提示案例:

引导用户跟着动效贯穿产品功能介绍，吸引用户看完介绍App及功能演示使用场景（左）

在引导动画中有趣的小交互来采集用户需求，为更精准的推荐资讯做准备（右） 

\\ Date Entry //

AIUX | Prototype 

在数据输入时，对用户的操作给予反馈并留下提示。

\\ Navigation //

AIUX | Prototype

第一次使用或产品更新迭代时，主动向用户呈现有效信息，聚焦关注，传达主要业务流程引导使用核心的功能。

初次使用功能提示案例：

中心蓝色小球箭头向上滚动，引导用户阅读头条新闻（左）

个人头像抖动提示点击头像侧拉菜单有更多功能（右）

2.日常使用

功能传达，及时反馈

\\Feedback//  

AIUX | Prototype

在使用时，随着操作的对应变化，用户会感受到空间转变。

合理运用物理世界的操作感知，避免动效误导用户。

核心功能或是新功能介绍时，吸引用户眼流，提醒用户关注的内容和操作。

反馈案例：

选择缓存，选集飞弹到缓存栏，对用户的操作给予反馈并引导协助用户完成任务。（左）

导航切换时Icon抖动，告诉用户现在在哪，现在已经转场（右）

系统收到到截图后操作后，给予反馈（左）

物理世界中随手拨动小卡片的自然交互感知 （右）

说完了上面的设计原则，我们再来看一些过时的动效案例：

为了动效丰富，把功能堆叠到一个按钮，且不易识别。

动效无意义，扰乱眼流，干扰信息阅读，没有传达需要聚焦的信息。

过于精细的表单呈现速度过缓、显得产品反应缓慢。

反复提醒自己，动效需要配合视觉和交互，使用在合适的位置、合适的时间。不经过思考的增加动效，反导会伤害用户体验，让用户感到困扰、盲目、显得产品反应速度缓慢、腻烦。

3.品牌强化

保持趣味，触发情感

 \\ Loading //

AIUX | Prototype

在加载与转场时，合理运用精致动效来提升软件体验同时缓减用户等待时间。

案例：

品牌传达，在开启App闪屏、加载状态都是融入品牌元素的好机会，即能加深品牌印象，增加愉悦性还可以缓解用户等待的焦虑感。

保持趣味，恰当的融入创意设计对用户的操作进行回应和反馈，加深用户与产品的情感保证这个动效不会给用户增加负担。

我们与App也是在相互建立与培养感情，让动效自然的融入产品，当动效设计在恰当的交互情景中，屏幕上单调的数字信息反馈会变得更生动，给我们带来高效且印象深刻的体验。