影视动画
当前位置: 主页 > 影视动画 >

App加载动画知识体系:交互、视觉都需要掌握!

发布日期:2020-07-16 11:48

 

  我大胆预测了一下,以后App的加载动画都应该遵循越来越简洁的设计原则,突出内容,去掉无用的、过渡的形式设计。也许无文字提示的加载动画确实是一个流行趋势!

  对于视觉设计师来说,其实我们有很大的优势,如果我们的思维逻辑清晰并且乐于总结,那么我们总结的内容将不仅仅只是一个大的分类总结,还能够提供一些具体的执行方法,并且将执行过程中踩到的坑和大家一起分享讨论。

  今天我要分享的是关于加载动画的知识体系及简单的制作方法,至于特殊场景总结不全之处,还请批判指正。

  众所周知,app服务器在加载数据的时候需要用户等待一段时间,为了缓解用户等待过程中的焦虑情绪,设计者可以采用加载动画的方式来缓解用户的等待时间,使整个等待过程变得更加友好、流畅。

  这里我们暂时先只讨论第一个层次的内容,因为这已经能够满足大多数app的需求了。至于如何做出让用户惊喜的加载动画(如饿了么、京东的加载动画),我们可以另外讨论。

  查阅大量关于加载的资料后,发现很多教程与文章都是从样式的维度来分类的,今天我们换个维度,从使用场景出发,来打造属于我们自己的加载动画设计体系。

  下拉刷新可以让用户在看到本地数据的同时去重新加载数据,以确保用户可以看到最新的内容。

  下拉加载一般分为两种形式:动画加文字(如今日头条下拉加载样式)、纯动画(如网易邮箱)。

  当切换到新页面时,常常会有加载数据的时候,这也是加载动画使用最多的场景,市面上的加载样式也是多种多样,如:白屏加载、toast加载、进度条加载、导航栏加载等等。

  当一个页面数据量过大时,服务器不会一次性将内容全部加载,而是加载一部分,只有当用户向上拉动页面时,才会加载更多,如下图:

  为了缓解用户启动app时的等待时间,有些app会将启动页设计成一个加载动画,如京东、等,不仅使等待时间变得有趣,并且增加了品牌记忆,达到了一箭双雕的效果。

  系统自带样式比较简单,iOS系统的样式是一个菊花,安卓系统的是一个转圈的圆线. 设计师直接提供gif动图

  1. 不论你的动画有多好看、多吸引眼球,如果成本太高或者过于复杂都是无法落地的,所以我们要遵循简单实用的原则来进行设计,不要过度设计。

  2. 其实在开发哥哥那里,他们的时间计算单位是毫秒(1秒等于1000毫秒),也没有动画里“帧”的概念。所以,如果你能用代码的语言(毫秒)与开发哥哥沟通,他会更喜欢你的,万一是个开发妹妹,你懂的!

  3. 这一条我相信不只是在做加载动画时需要考虑的,所有的交互视觉场景,都需要考虑这条原则:任何交互动作所导致的状态都需要考虑正常状态与异常状态。拿加载动画来说,我们需要考虑加载成功的反馈与加载失败的反馈,并将之注明在输出规范中(虽然有些场景的加载的确没有反馈状态,但是在考虑全局时,这些都是我们前期必须思考的内容)。

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理()是以产品经理、运营为核心的学习、澳门赌场,交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。