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

2018-08-24 14:45:00
应变
原创 50
摘要:“ 还在随波逐流的疯狂给App增加动效吗?” “ 你的App还没动效吗?” “ 那些酷炫的概念动效我都会!用户还是不喜欢呢?”

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时, 可交互式的引导动效更能吸引用户,完成整个产品介绍的体验。根据产品的需求在可交互式引导中采集用户喜好,建立贴心印象。

1.1 欢迎动画

 

初次使用功能提示案例:

动效公号图1

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

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

 

\\ Date Entry //

AIUX | Prototype 

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

1.2 数据输入

 

\\ Navigation //

AIUX | Prototype

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

1.3 导航

初次使用功能提示案例:

动效公号图2

中心蓝色小球箭头向上滚动,引导用户阅读头条新闻(左)

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


2.日常使用

功能传达,及时反馈

 

\\Feedback//  

AIUX | Prototype

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

2.1 反馈

 

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

2.2 反馈

 

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

2.3 反馈

 

反馈案例:

动效公号图3

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

导航切换时Icon抖动,告诉用户现在在哪,现在已经转场(右)

 

动效公号图4

系统收到到截图后操作后,给予反馈(左)

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

 

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

 

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

 

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

过时案例 2

 

 

 

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

过时案例 3

 

 

 

 

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

 

3.品牌强化

保持趣味,触发情感

 \\ Loading //

AIUX | Prototype

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

3 加载

 

案例:

3.1 滴滴闪屏20k 3.2 推特

 

 

 

 

 

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

3.3 网易美学147k 3.4 推特点赞25k

 

 

 

 

 

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

 

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


发表评论
评论通过审核后显示。