当前位置:首页 >UI学院 >学院新闻

对于APP来说,什么时候需要动效设计呢?

爱撒娇爱乐曲作者:爱撒娇爱乐曲 发布时间: 2024-03-18 08:40:12 浏览量:357次

这个强调个性的信息年代,一成不变的设计已经很难满足我们挑剔有品位的用户了。

那些有炫酷动画效果和体验丰富的APP也更受广大用户的青睐。

早期的APP因为设备内存受限,网络流量的制约,要在手机里搞个动效,那会卡到黄花菜都凉凉了。

如今随着技术和硬件设备性能的提升,由静态界面转变成动态效果就像巴啦啦小魔仙施展魔法般简便。

动画效果如今已经深入到一款APP应用的每个角落。

一款APP内的动效一般用在哪,用来干嘛呢:

【使用场景1】:  闪屏、LOGO字体动效

在APP开屏界面和下载宣传页就能给用户初步印象,让产品品牌更立体。也让用户更直观的了解一款产品的核心特征、用途、使用方法等细节。

对于APP来说,什么时候需要动效设计呢?

对于APP来说,什么时候需要动效设计呢?

【使用场景2】:  Loading加载,数据刷新

一个动态的加载动画相比机械性的系统文字“正在加载”,更能拉进与观者的距离。要是再加些趣味性在里面,一个有趣的loading多看几遍都不觉得枯燥呢。

对于APP来说,什么时候需要动效设计呢?

对于APP来说,什么时候需要动效设计呢?

【使用场景3】:  展示交互原型,概念动效

在APP前期的立项阶段,做一些功能展示的概念动效是很有必要的。很多时候设计师不能光靠嘴去解释你的想法给产品经理听,静态的设计图也不见得能让程序伙伴一目了然。

所以才会有高保真Demo,这样就节约了很多团队间的沟通成本。一些优秀的UX设计师会针对界面内元素主次,做出有节奏有层次的动效诠释,下面列举较常见的一些动效处理:

【3.1】列表滚动】

对于APP来说,什么时候需要动效设计呢?

第一个案例展示了和列表交互的动画,左边的列表只是单纯的滚动,而右边的则明显的加入了渐进的动效,模拟现实中拉动卡片的微妙动作。

【3.2】列表和详情页之间的过渡】

对于APP来说,什么时候需要动效设计呢?

上面的案例当中,左边只是简单的左右切换过渡,而右边则带有放大和转变的过渡,不仅让动效的指向性更为明显,而且更加富有动态。

【3.3】侧边栏菜单】

对于APP来说,什么时候需要动效设计呢?

概念动效往往会力图让最常规的交互效果更加生动,比如侧边栏展开这样常见的操作。

【使用场景4】:UI界面转场动效

当一款APP正式立项进入设计阶段时,转场动效在UI界面中无疑是显著的。相比于静态的界面,动态的转场动效更符合人类的自然认知体系,弥补两个界面直接的差异所带来的用户感知落差

对于APP来说,什么时候需要动效设计呢?

对于APP来说,什么时候需要动效设计呢?

【使用场景5】:  点击反馈,手势交互

在用户体验界面设计中,将功能需求情感化也是不错的体验,这种拟人化的动效让界面充满了真实的质感,信息的反馈也更直觉化。

【5.1 出错的时候给用户以反馈】

对于APP来说,什么时候需要动效设计呢?

下面的案例就相当典型,一个简单的左右晃动的特效给用户一种界面“正在摇头”的感觉,让他们明白所输入的内容并不正确。

【5.2 通过反馈告知用户目标达成】

对于APP来说,什么时候需要动效设计呢?

当用户操作完成之后,结果信息不是生硬的二次弹出,而是在原按钮上做出回应,如案例中信息输入完整时按钮变红按钮上文字变化,用自然的过渡来呈现。

“展现,而不是单纯的告知”。动效赋予了单击操作一种轻松写意的感觉,是一种让用户欣赏甚至沉迷的细节体验。

【5.3 手势交互】

对于APP来说,什么时候需要动效设计呢?

手势交互改变了我们和界面交互的方式,而随之而来的语音交互也正在逐步成熟,借助AR技术,我们具备了和虚拟对象交互的可能性。我们在APP中的交互会越来越自然多变。

【5.4 交互焦点】

对于APP来说,什么时候需要动效设计呢?

当用户执行了某一操作后,动效是一个非常好用的反馈机制。通过动效的适当运用,用户可以清晰感知到自己操作的反馈,让用户知道自己做了什么。

火星时代教育-AI变现资源包
火星时代教育 影视学院刘老师,为你解答
  • 相关推荐
  • 人气推荐
  • 教程分享
  • 相关标签

优秀作品赏析

  • 2101期学员李思庭作品

    作 者:李思庭

    所学课程:2101期学员李思庭作品

  • 2104期学员林雪茹作品

    作 者:林雪茹

    所学课程:2104期学员林雪茹作品

  • 2107期学员赵凌作品

    作 者:赵凌

    所学课程:2107期学员赵凌作品

  • 2107期学员赵燃作品

    作 者:赵燃

    所学课程:2107期学员赵燃作品

  • 微信扫码入群领福利

    扫码领福利最新AI资讯

    点击咨询
    添加老师微信,马上领取免费课程资源

    1. 打开微信扫一扫,扫描左侧二维码

    2. 添加老师微信,马上领取免费课程资源

    ×

    同学您好!

    您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
    确定