赞助商
立即赞助

基础科普!最常见的四种移动端功能性动效全面总结

UI设计3年前 (2021)更新 流光
3.2K 0 0

功能性动效的主类型页面空间转换、视觉信息反馈、功能操作引导、品牌与趣,本文就谈谈这四种功能性动效移动端的使用。

一、功能性动效的定义

义:功能性动效一种嵌入 UI 设中微妙的动画,明确、合理的目标。

功能性动效主要类型:

  • 页面空间转换;
  • 视觉信息反馈;
  • 功能操作引导;
  • 品牌与趣味。

二、页面空间转换类动效

页空转换告诉用户象和窗口状态是如何变化,防止页转换视盲,在空上也能造更好印象。

1. 使用场景

页空转换动效,主要是为了让用户过理解页空转换动效,了解到界和元素空关系,并随时感知到空元素变化。

2. 使用场景

页空转换类动效,主要使用在轮播banner/页切换/导航菜单切换。

3. 优秀案例赏析

案例1:轮播 Banner 空转换动效

基础科普!最常见的四种移动端功能性动效全面总结

案例2:页空转换动效

基础科普!最常见的四种移动端功能性动效全面总结

案例3:导航菜单切换

导航栏的转换是指 App 中导航菜状的变换,有不同菜之间和同菜之间的转换,解释菜之间的层关系,让用户菜转换的过程中底发生了什,下一步操作体如何去做。

基础科普!最常见的四种移动端功能性动效全面总结

基础科普!最常见的四种移动端功能性动效全面总结

基础科普!最常见的四种移动端功能性动效全面总结

三、视觉信息反馈动效类型

具备良好户体验的产,都应该给户的每一个操作供反馈,无论成功与否,反馈会使户觉得自己与屏幕上的元素进行真实互。即隔着屏幕,户看起来是在直接操作,增操作的可控性真实自然的体感。

1. 要作

视觉信息反馈类效要是为了告诉户目前操作到哪里了,实时状态怎么样,缓解户对应处速的量感知。

具体表:

  • 确认系统接收到户的操作;
  • 确认(或拒绝)用户的行;
  • 明确告知用户前操作进度/状态,缓解用户紧张/焦虑感。

2. 使场景

系统信息示/状态反馈/操作结果反馈/进示/载示。

3. 优秀案例赏析

案例1:系统示反馈

系统反馈,当系统状态发重的变化时,功能性动画也可以用提醒用户,可以给用户一速又简洁的一反馈。例如:短信提示、电提示。

如下图:

基础科普!最常见的四种移动端功能性动效全面总结

基础科普!最常见的四种移动端功能性动效全面总结

案例2:操作结果反馈

基础科普!最常见的四种移动端功能性动效全面总结

案例3:度提示反馈

基础科普!最常见的四种移动端功能性动效全面总结

度条设中,明确告知用户当的具体度状态,让用户随时随知道还需待多久,对当操作环境可控的,不让用户去猜,让用户对当的操作环境不可控。例如:他当下操作的骤;目数据下载/状态的具体执行度,让用户理预。

四、功能操作引导

当用户第一次使用的 app 的时候,如果帮的话,他们可能会不知道如何操作。 我们应该给用户提供一些视觉提示告诉他们哪些操作可行的。

1. 主作用

功能性的动画可以提示用户去注意那些可以完的操作,视觉提示可以给用户告知即将发的事。

2. 使用场景

新手引导/功能操作引导。

3. 优秀案例赏析

案例1:新手引导

基础科普!最常见的四种移动端功能性动效全面总结

案例2:功能操作中的引导

下图例子,是个游戏里小例子,接用动效完美诠释了「手把手教导」,这样用户理解成本常低,根本不用思考,按照引导去做能完成任务。是常高效晰解决问题。

基础科普!最常见的四种移动端功能性动效全面总结

五、品牌与趣味

1. 要作

为了避免与场上很多 APP 同质,千篇一律的户体验,牌画可成为一个产的营销工具,来表现一公司的牌值或者突产的优势,同时给户一种愉快又难忘的户体验。

2. 使场景

载细节/效速感知/效色彩的具体场景中使。

3. 优秀案例

案例1:Uber 启页的打开载效

Uber 的打动效不仅让用户体会到愉悦感,且它的展式动效还很好「控制」了用户眼的视觉焦点。

如下图:

基础科普!最常见的四种移动端功能性动效全面总结

案例2:输入操作动效

下图的例是一个输入账号密码操作的动效,是动效带来趣味体验的典型案例:

基础科普!最常见的四种移动端功能性动效全面总结

当用户输入密码的候,这个动作其实是一个非常隐私的动作,所以现实生活中,输密码的候,都会希望身边的陌生人转身/不要直盯着。

而上面的例子就把护用户隐私为一种生理的能,把种生活中的习惯延续到界面细节当中,当用户输密码的时,输框上面的猫头鹰自的捂住自己的眼睛,向用户传达系统的安之外,也和用户进行一次无声的趣味互动,是一个很的信息反馈的案例。

除了上面的账号输入案例,还有他类似的效例子。例如:很多结果输入的反馈里,如果结果输入错误,那么输入框和字则会来晃,同时输入的字/输入框变红。这个效果会我们联想到日生中的摆手和摇头,而这些都代表着「no」,是一种非自然的效交互逻辑。而正是这些小细节的使,是打良好户体验的键。

结语

实,户我们预想中更注意到页面中的细节,效除了要帮助户快速到他想要的东西,达到他想成的任务,是一种可给户传递情感的交互元素。

用户会拒绝任何产品的添花,功能性动效对于产品讲,满足功能效率的同时,能够多额外的加体验,一种相对比较易引发体验峰的途径,希望家时间可以针对自己产品需求调性体验一番。

欢迎关注里巴巴体验技术团队(TXD)公众号,第时了解更多精内容,有设计职位期待你加入!

基础科普!最常见的四种移动端功能性动效全面总结

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

今天这篇文章,讲的又是大家感兴趣的动效知识。现如今,动效对于品牌的传达变得越来越重要,所以我想尽可能多的去搜集动效相...
UI动效
大家好,我是彩云。在动画落地的过程中,配合Lottie插件输出JSON动画文件是大家常用的方法。今天这篇分享,将会讲到Lottie这...
AE动效
我们在进行设计的时候,往往遇到以下的场景: 这就是信息的无限性和手机屏幕的有限性之间的矛盾,如何把信息合理的展示给...
App设计
一直有很多朋友会问一些关于移动端实现动效的方法,平时也会给大家做一些解答,但是可能没有那么系统性,这次抽点时间总结归...
动效落地
Motion Graphic 也称为 Mg 或者 Mograh,通常翻译为动效或者动态图形。 动效是什么? Motion Graphic 也称为 Mg 或者 Mogra...
AE动效
上一篇文章《比阿里犸良还强大!Lottie 动效设计完全指南(基础篇)》已经系统地为大家讲解了 Lottie 动效的基本知识,相信很...
AE动效
在无限的信息体量和有限的用户浏览范围之间求得平衡,让用户看到全部创作中他最想看到的那一面。 在B端产品的设计过程中,我...
B端产品
如今很多 UI 设计师不是正在做动效,就正在学着做动效。 动效现在已经无处不在了。有的动效可能是一个微妙的悬停效果,使用 ...
UI动效