App动效类型,其实就是五部分

App中的动效设计不是具体的需求设计,不能对产品本身产生很大的变化和改进,只是能在设计层面和体验层面为用户创造多一点的价值。所以在做相关设计的时候,不可为做动效而做动效,要把握住动效的“度”,不可华而不实,需要服务于具体的需求和场景。


App中的动效设计不是具体的需求设计,不能对产品本身产生很大的变化和改进,只是能在设计层面和体验层面为用户创造多一点的价值。所以在做相关设计的时候,不可为做动效而做动效,要把握住动效的“度”,不可华而不实,需要服务于具体的需求和场景。

App动效类型,其实就是五部分

App的庞大复杂度和动效的丰富度成反比,App越复杂,其动效也应该轻量化而简洁。App功能越简单,其动效则可以适度丰富,甚至形成与自己App相符合的动效风格。

主要分为以下几部分:

一、控件动画

控件动画,可在动画运动曲线、动画出现方向等方面,进行统一处理。给用户带来顺滑的转场动画,让整个页面更加顺滑,并且有规则。

分为以下6种:

  1. toast 提示条(出现——消失动画)
  2. dialog(出现——操作——消失动画)
  3. 导航/页签切换动画
  4. actionsheet动画
  5. 分享控件动画
  6. 选择控件动画

App动效类型,其实就是五部分

二、加载动画

App动效类型,其实就是五部分
分为以下4种:

  1. 下拉刷新加载:下拉加载一般分为两种形式:动画加文字、纯动画。
  2. 切换新页面数据加载:当切换到新页面时,常常会有加载数据的时候。主要有:转菊花的动画,进度条的动画,百分比的进度动画。
  3. 页面上拉加载:上拉加载的样式不会过于复杂,一般与下拉加载的动画配套来实现,上下尽量保持一致。
  4. 页面局部加载:常见的局部加载场景有视频列表、加载图片的占位图等。

三、细节动画

有以下2种:

1、点赞动画

点赞分为连续赞和单独赞。点赞时为了给用户营造良好的用户体验和心里满足,一般会藏有彩蛋动画,从而刺激用户点击欲。

2、二维码动画

下落收起动画,二维码作为社交app中的个人身份的代表,大多使用card下落又收起的动画。

App动效类型,其实就是五部分

四、功能模块动画

根据各个app的突出特色功能和亮点功能,一体化的设计它那个模块的动画,详细刻画。启动页加载动画。

例如社交类app的寻找好友模块,加好友模块。

例如安全类app的安全扫描模块,安全检测模块。

App动效类型,其实就是五部分

五、彩蛋动画

为了用户营造惊喜,和体现产品设计逼格的地方。在产品关键路线中的一些彩蛋动画设计,能为用户带来较高的愉悦感。在聊天软件中的,关键词彩蛋,丰富聊天情感,增强互动。

例如same app中,随着上拉刷新,鸡的眼神和嘴形都有变化。

例如涂手 app中,随着上拉刷新,手指间的小动作,戳戳手的小互动,让人在等待刷新过程中,更加有情感化和趣味性。

App动效类型,其实就是五部分

除此之外,还有运营动画,各类banner动画。它需要根据各类需求,选择适合的动画。在这里不做统一的划分,它需要结合具体的场景、表达内容点以及传达意图来说。

 

作者:戴维,来自Tencent ISUX的一枚交互设计师, 知乎专栏:戴小维的交互学习小站

本文由 @戴维 授权发布于人人都是产品经理,未经作者许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-06 02:26
下一篇 2017-05-06 04:15

相关推荐

  • 【交互设计方案】记分对比法运用

    交互设计中,为什么需要这种方法? 在交互设计工作中经常会遇到这样的问题,某些位置的设计牵扯到比较复杂的场景,要考虑的因素比较多,这些设计点往往是最容易引起争议的,因为团队成员不一定都能快速了解全部的场…

    2015-10-09
  • 日期选择器设计总结

    本文是作者对时间选择器设计做的一个小总结。enjoy~

    2017-04-27
  • 中国App设计真好!—— 一个美国人到中国当产品经理的心得

    导读:应用软件层出不穷,各个国家的人为自己生活的便利设计出各款的应用。然而,同样的应用,是否会因为中西方文化的差异,或者是生活方式的不同,导致相同应用的设计有所不同吗?是的,有的!Dan Grover 现在是腾…

    2015-02-10
  • 关于微信聊天与朋友圈如何快速切换的小讨论

    用微信时,你是否遇到这样的情况。你正刷着朋友圈,享受着各种鸡汤,这时候,你收到一条微信,一看是女王大人,不得不回。你诚恳的回了一条,等了二十秒不见有什么回应,于是就退了出来,进入朋友圈找到那篇没看完的文章,没看两行字,那边就回复你了,于是你又乖乖地回过去,来来回回,很麻烦!那,为什么聊天和朋友圈间不能有一种更快捷的切换方式呢?其中A代表微信聊天页,B代表微信其它功能页,X代表实现A和B快速、便捷切换的操作或交互方式。我们不妨先来分析一下聊天页面的功能分布和操作特点。以安卓的微信群聊为例(不要为为什么),其它类似,一共可以分为三类,共14种操作,与手指间的交互动作共有5种。定义好问题、了解好现状后,我做了改善的尝试,下面将有可行度的一些方案与大家交流一下。

    2017-06-03
  • 看了都说好!如何建立交互设计自查表?

    强烈推荐!很多同学做设计的时候经常会漏掉这个漏掉那个,等到开发来问的时候才想到。现在有了网易同学自创的自查表,可以把一些问题提前预防起来,文章系统全面,条理性强,是不可多得的实用好文呦。飞灵:对于移…

    2017-08-01
  • 用户体验设计的5大目标

    我们常说产品的用户体验设计很重要,但究竟怎样才算好的用户体验呢?以下5大UX设计目标层层递进,帮你在最短的时间内明确用户体验设计方向,成为一名合格的UX设计师。“我能否以最简单,快捷,直接的方式得到我想要的东西?”最好是“别让我思考”。“我是否享受使用该产品的过程?”“该产品是否有足够的吸引力让我愿意长期使用”,甚至“成为我生活的一部分,让我戒不掉?”“该产品是否能调动我的力量,让我主动加入产品宣传推广的队伍。”

    2017-04-30
  • 尼尔森十大交互设计原则的实际应用解析

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。接下来,作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法。Jakob Nielsen(雅各布·尼尔森)是毕业于哥本哈根的丹麦技术大学的人机交互博士,他拥有79项美国专利,专利主要涉及让互联...

    2018-02-16
  • Axure 原型界的撕逼大战

    最近在交互原型界也有撕逼大战啊,所以任何以收费为目的的网站都是纸老虎。 为了整体交互设计行业发展来看,只有开源分享才是真的有利于交互设计师们。你们说尼? 原文标题:《金乌:你能消停点儿吗?》-小楼一夜听…

    交互设计 2014-12-29
  • 3月19日部分上海实习信息汇总

    2018“猎萝卜”校园宣讲会 松江大学城专场人立方智能科技有限公司时间:3月22日 18:00-20:00地点:上海对外经贸大学 B303上海人立方智能科技有限公司,专注于人工智能与人才招聘,中国人力资源行业领军企业50强。猎萝卜(www.lieluobo.com)是公司创立于2017年的智能猎头招聘平台,服务于互联网、金融这两大领域国际知名客户及500强企业。平台上汇聚上千家优质的猎头公司,通过人工智能算法的引导,精准匹配中高端人才需...

    2018-03-19
  • 为熟练用户设计:如何设计才能帮助用户提高使用效率?

    本文作者将从导航和首页的信息排布、操作时间和快捷键三个方面展开,在通讯产品、办公软件等这类被大量使用场景的产品中,该如何设计才能帮助用户提高使用效率?

    2017-05-19