引导用户,增强产品功能认知
- 2018-08-24 14:45:00
- 应变
- 原创 50
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也是在相互建立与培养感情,让动效自然的融入产品,当动效设计在恰当的交互情景中,屏幕上单调的数字信息反馈会变得更生动,给我们带来高效且印象深刻的体验。