IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

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

Catherine • 2017-05-12 02:45 • 交互设计

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

文章目录[隐藏]

  • 一、加载动画存在的意义
  • 二、加载动画的使用场景
    • 1. 下拉刷新加载
    • 2. 切换新页面数据加载
    • 3. 页面上拉加载
    • 4. 页面局部加载
    • 5. 启动页加载
  • 三、前端开发实现动画的方法
    • 1. 调取系统自带样式
    • 2. 设计师直接提供gif动图
    • 3. 前端自己将动画用代码写出来
  • 四、工作中输出加载动画的方法与步骤
    • 1. 确定使用场景与实现方法
    • 2. 设计师制作下拉刷新动画,并透彻理解动画机制
    • 3. 输出加载动画的规范
  • 五、制作加载动画时的注意事项
  • 六、加载动画的流行趋势

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

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

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

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

大纲如下:

  1. 加载动画存在的意义
  2. 加载动画的使用场景
  3. 前段开发实现动画的方法
  4. 工作中输出加载动画的方法与步骤
  5. 制作加载动画时的注意事项
  6. 加载动画的流行趋势

一、加载动画存在的意义

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

一个好的加载动画分为两个层次:

  • 第一个层次是满足用户的基本心理预期,缓解等待的焦虑;
  • 第二个层次是要给出用户一定的惊喜,甚至让用户对加载动画抱有期待、好奇的心理。

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

二、加载动画的使用场景

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

加载动画的常见使用场景一共分为以下5种:

  1. 下拉刷新加载
  2. 切换新页面数据加载
  3. 页面上拉加载
  4. 页面局部加载
  5. 启动页加载

我们还是一个一个来了解:

1. 下拉刷新加载

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

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

如下图:

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

2. 切换新页面数据加载

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

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

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

3. 页面上拉加载

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

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

上拉加载的样式不会过于复杂,一般采用比较简单的转圈动画来实现。

4. 页面局部加载

常见的局部加载场景有视频列表、加载图片的占位图等,如下图:

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

5. 启动页加载

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

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

三、前端开发实现动画的方法

1. 调取系统自带样式

系统自带样式比较简单,iOS系统的样式是一个菊花,安卓系统的是一个转圈的圆线。

2. 设计师直接提供gif动图

这种提供gif的方法,一般适用于比较大场景的加载动画,如启动页。

需要注意的是原生系统是不支持gif控件的,iOS需要调取网页的gif,而安卓需要调取播放器才能实现动动画的展现,所以如果不是特殊场景,一般不推荐使用gif控件来实现动画。

3. 前端自己将动画用代码写出来

最常用的一种方式就是让前端哥哥自己将动画写出来,当然这时候你还是要做出一个示范动画, 并告知动画的规则是怎样的(下文会详细说明)。

四、工作中输出加载动画的方法与步骤

讲了这么多内容其实只是让大家对整个加载动画的全局有个认知,在执行过程中有理有据,避免无从下手的情况出现。换句话说,在了解以上内容后,至少我们知道了某种场景下该做什么,至于怎么做,我用一个下拉刷新的动画实例来具体讲解一下输出加载动画的过程。

1. 确定使用场景与实现方法

  • 使用场景:下拉刷新
  • 实现方式:前端代码实现

2. 设计师制作下拉刷新动画,并透彻理解动画机制

动画如下图(参考QQ邮箱下拉加载):

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

制作过程中,我们可以优先考虑加入品牌元素在动画中,如品牌logo、品牌颜色、品牌名称,这些都可以融入到加载动画当中。

3. 输出加载动画的规范

如下图:

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

首先你需要将动画本身的规则写出来,如我们目前制作的这三个小球,一个循环内平均有6个关键节点,每个节点需要0.3秒,也就是循环一次需要1.8秒,我们将其动作全部分解输出给开发,并将圆球的大小、颜色等信息注明,这样开发看到规则后就会一目了然,保证动画的还原度。

然而这仅仅只是做了动画本身的规则,我们还需要考虑动画与页面间的关系,例如下图是一个下拉松开手指后,页面正在加载的状态,我们不仅要考虑正在加载的状态,还要考虑其下拉过程中可能会发生的情况。

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

总的来说,我们需要标明动画加载时,动画与导航栏的间距,与内容区的间距,且下拉过程中哪个间距是可变的、哪个间距是不可变的等等,甚至还需要考虑可拉动的最大距离是多少,当然拉动时的弹性是系统自带的,一般不予考虑。

只有将这些内容全部考虑清楚并输出规范,才算是一个合格的下拉加载动画。

这里我举的例子是动画中没有文案的情况,当有文案时,考虑的内容会更多,如:一个下拉过程可能会有“下拉加载”、释放加载、正在加载这三个状态,而当加载完成后,还需有反馈状态告诉用户有多少条新的信息,如新闻类的下拉刷新。如下图:

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

大家有兴趣可以自行了解一下,这里就不予过多解释了。

五、制作加载动画时的注意事项

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

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

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

六、加载动画的流行趋势

对于加载动画的流行趋势,不论是交互还是视觉,国外很多主流app都是非常简洁并且无文字提示的,下面是部分截图:

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

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

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

以上就是目前阶段我对于加载动画的一些总结与分析,希望能对于你有一点启发作用,如果你有不同的见解,欢迎与我一起交流,大家共同进步。

很荣幸之前的几篇文章相继被《人人都是产品经理》、《IXDC》、《优设网》、《简书》、推荐至首页及公众号传播,让我有了很大的动力。为了让所有关注我的人得到实实在在的收获,我会对自己出品的文章愈加要求严格。

 

作者:菜心(微信号:410628210  微信公众号:菜心设计铺),华为ITUX用户体验设计师(主视觉),3年工作经验,参与华为Welink、3MS、连长社区等多个项目的用户体验设计工作。欢迎大家互相交流关注。

本文由 @菜心 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25702/

appioslogoPSUX交互交互视觉产品产品经理体验设计分享加载动画动画场景微信沟通用户用户体验用户体验设计用户体验设计师知识体系经验经验分享视觉视觉设计视觉设计师设计设计原则设计师资料转载饿了么
赞 (0)
CatherineCatherine
0
生成海报
设计师进阶:从UED向UXD转型
上一篇 2017-05-12 01:45
一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点
下一篇 2017-05-12 03:39

相关推荐

  • 微信热点

    UX小白 | 不谈它?算什么用户体验设计?

    这其实只是个引你进来的标题,我今天真正想说的事情其实是它——你在做一款产品的时候考虑过它的无障碍性(Accessibility)吗?无障碍性(Accessibility):在图形交互界面为基础的交互方式中,无障碍性也往往被称为可访问性。“无障碍性(accessibility)意味着产品设计应用时应考虑到,无论是因为年龄、事故或疾病而有认知、感官或者移动障碍的人,还是没有此类障碍的人,都应能够有效使用这个设计。”——《About Face...

    2018-01-31
  • 微信热点

    用户体验对于SEO而言有多重要?

    用户体验对于SEO而言有多重要?SEO优化无论是针对资讯类的门户站,还是原创文章的撰写,都是非常重要的,SEO优化能够帮助网站更合理的定位,能够更好的展现在最重要、最关键用户体验对于SEO而言有多重要?SEO优化无论是针对资讯类的门户站,还是原创文章的撰写,都是非常重要的,SEO优化能够帮助网站更合理的定位,能够更好的展现在最重要、最关键的位置,也是现在最具潜力的网络营销方式之一。我们先来了解一下:在百度算法中,如何判定一个页面是否有价...

    2018-02-28
  • 微信热点

    Sketch迎来重大更新,叫板PS爸爸?

    11月8日晚,Sketch 悄悄的更新至 Sketch 41。至此3X系列已经离我们而去,4X系列正式到来!在此次更新中,还是有不少惊喜的。今天一一做个盘点。全新 LogoSketch 拟物化黄色钻石 Logo 已经成为历史。新Logo 顺应了设计潮流,简化色彩并弱化光影关系。不过有一点令我很在意,就是新Logo的倒角处理(面与面之间的接缝)。之前的Logo倒角很锋利,有种割破手的感觉,典型的 2D 图形拼接效果;新Logo倒角光滑,做...

    2018-04-26
  • 译文|「设计师学习商业」中「Why」与「How」的问题 交互设计

    译文|「设计师学习商业」中「Why」与「How」的问题

    Airbnb、Pinterest、Kickstarter、小米等一系列的创业企业有什么共性?他们都有设计师作为创始人,在创始团队中就加如了设计的基因。商业决策者们在努力地把商业策略融入到产品设计的内涵里,而你——一名设计师,又是否了解商业呢?今天我们分享两篇文章,分别讨论了「设计师学习商业」中「Why」与「How」的问题,希望你能有所启发。

    2017-05-25
  • 设计如何操纵人的想法—来自于Google的设计伦理学家

    作者:Tristan Harris 译者:@Steve-Mr 与 @WayneMaa 和 Oscar Wei   愚弄人们,要比让人们相信自己被愚弄了简单。 我十分了解科技如何劫持我们心理上的弱点,这也是过去三年,我在谷歌研究防止上亿人的心智被科技…

    交互专题 2017-08-07
  • iOS和Android规范解析——标签导航和分段控件 交互设计

    iOS和Android规范解析——标签导航和分段控件

    从今天开始,将介绍iOS和Android设计规范中关于导航的部分。今天要介绍的两个控件,经常容易混淆以至于用错。请各位读者仔细阅读,防止以后用错。

    2017-08-04
  • 交互设计基础 | 聊聊移动APP中反馈提示的设计方法与实例 交互设计

    交互设计基础 | 聊聊移动APP中反馈提示的设计方法与实例

    给用户及时、恰当的反馈,是交互设计非常重要的一项原则。由搜狐新闻客户端团队撰写的《设计之下》一书中,对操作反馈从形式、内容、位置几个方面做了非常详细的总结,满满干货。今天@青溪Joanna 这篇读书笔记提取了书中的要点并配上实例,分享给大家。

    2017-05-31
  • 微信热点

    用户体验设计师是做什么的

    用户体验设计师的责任UX设计师如何每天工作?这个问题的答案,正如许多问题一样,是:这要看情况而定。用户体验设计师的职责从公司到公司,甚至同一公司不同项目各不相同。尽管角色各不相同,但有一些职能是期望用户体验设计师去做的,这与他们所工作的公司无关。下面为总结的用户体验设计师的6个主要职责:1.产品研究产品研究(包括用户和市场研究)是每个用户体验设计师的用户体验设计项目的出发点。它为伟大的设计提供了基础,因为它允许设计师避免假设和做出信息驱...

    2018-03-03
  • iOS和Android规范解析:警告框(Alerts) 交互设计

    iOS和Android规范解析:警告框(Alerts)

    规范是最标准的情况,场景是千变万化的,具体运用的时候还是需要根据场景来灵活应用。警告框是一种紧急的打扰(提示),以告知用户一个发生了的情况。警告框传达了你的应用或设备某种状态的重要信息,并且常常需要用户来进行操作。

    2017-05-04
  • 微信热点

    联想实习 | 手机事业部招聘交互设计实习生

    公司简介联想是一家营业额达460亿美元的《财富》世界500强公司,在全球消费、商用以及企业级创新科技领域居领先地位,为用户提供安全及高质量的产品组合和服务,当中包括个人电脑﹙经典的Think 品牌和多模式YOGA品牌﹚、工作站、服务器、存储、智能电视,以及一系列移动互联产品如智能手机﹙包括联想和摩托罗拉品牌﹚、平板电脑和应用软件等。招聘岗位手机事业部-交互设计实习生岗位描述1. 参与联想ZUI手机操作系统的交互设计;2. 参与产品的规划...

    2018-04-21
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress