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

相关推荐

  • Axure官方教程中文版第4课:构建交互动作-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(4).MP4 新建文件 1、添加一个按钮和两个文本框 2、禁用第二个文本框 3、设置第一个文本框不可点击 4、设置第二文本可用 5、将第二个文本框设置获…

    2015-01-26
  • 情绪板的制作方法:写给设计师的全方位使用指南

    在设计上图片比其他要素更容易让人理解,所以我们可以利用情绪板(英: Mood Board),来使设计工作更加流畅,缩短制作的时间、改善工作流程。

    2017-05-11
  • 制作在线UX作品集的四个步骤

    本文作者将帮你系统梳理一下创建一份作品集的全部步骤,让你明白UX作品集的常规创建流程。

    2017-05-02
  • 我为什么喜欢sketch?

    数十万互联网从业者的共同关注!作者:luffy微信公众号:麒麟设计中心(ID:luffydesign)作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com文章底部可以评论留言啦,欢迎大家赞同质疑或吐槽。积极留言的同学,注意关注小编的回复,不定期送互联网畅销书以感谢你们的支持,么么哒!Adobe XD出来了,第一时间试用,感觉除了repeat grid和hotspot好像没什么亮点。笔者是一名无线U...

    2018-04-09
  • 【用户体验】“跳一跳”游戏的体验

    伴随着微信的升级和重点推荐,小游戏“跳一跳”一夜成为中国互联网的全民爆款休闲游戏。不仅周围的同事、连身在老家七八线小县城的小学同学都在乐此不彼的刷屏和相互竞技。如此如火如荼的燎原之势,除了有微信这个强大的平台效应之外,当然也有一些“跳一跳”自有的吸引力蕴含其中。今天,就和大家一起来聊一聊“跳一跳”中的游戏心理学。第一,尝鲜心理。追求新鲜事物,是人类的天性。任何时候,人类都从未停止过尝试新鲜事物的脚步。而微信,作为一个8亿+的社交平台,“...

    2018-02-26
  • “用户体验”3.9万油电混合植保机演示视频

    植保季就快来到,很多植保团队以及飞手非常关注行业植保机的动向,不仅因为飞机本身的性价比高而且续航时间和作业效率同样是大家非常关心的事情。因为对于植保作业来说,作业效率关系着成本和收益,同样的植保机在单位时间内所节省的时间相当于是多出来的利润,这也就是为什么油电混合植保机能被大众所看中的缘由。近期在无人机网(www.youuav.com)发布的这款3.9万油电混合植保机一经亮相之后在植保行业中引起了足够的重视,很多朋友对其抱有足够的兴趣,...

    2018-04-24
  • 【干货知识】最全面的交互设计原则和理论汇总(上)

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】文章包括:格式塔心理学原则、尼尔森可用性原则、尼尔森F视觉模型、Heuristic Evaluation十原则、费茨定律、席克定律、7+2法则、2秒原理、2/8法则、3次点击法则、界面黄金8法则、jakob nielson原则、KANO模型、0123简单法则、MVP法则、婴儿鸭综合症、包豪斯理念、泰思勒定律、防错原则、奥卡姆剃刀原理、maya法则、信噪比法则、序列效应、功能可见性原则、成...

    2018-04-16
  • 【干货】在考虑入行交互设计之前,你必须搞清楚这些

    本篇文章来自知乎专栏:设计史论与设计哲学https://zhuanlan.zhihu.com/sheji-history-theory作者:乐可柯产品与交互设计师,设计史论学者现任阿里巴巴集团交互设计师毕业于同济大学设计创意学院设计学硕德国奥芬巴赫设计学院交换生今年,O’REILLY公司对全球范围内的“交互设计行业”做了一次调研,收集到了来自25个国家、1000多名设计师的反馈,虽然量不大,但其数据显示的结果可以作为参考,一窥整个交互设...

    2018-01-31
  • 转行学设计?新手必读的五大误区+三大秘籍

    经常看到一些讲如何学习设计的文章,坦白讲感觉有些千篇一律、且不痛不痒,都说要看点书、学点画、练软件、多观察……唉,练软件这事还要说么,难道你还需要告诉一个人学开发是需要学习编程语言的?

    2017-06-03
  • sketch都能设计海报了?PS爸爸慌了...

    sketch只能做界面设计?曾经我也这么觉得,自从我知道了他的这款插件——looper惊!呆!了!大写的“服”,sketch你越来越接地气了,废话不多说了,让我们先欣赏一张我用这款插件做的一张海报:不得不说,他打破了我对sketch的偏见,对线条的处理过渡很自然到位,我做的时候只花了5分钟,没错!5分钟搞定!所以重点来了:如何用looper做到这张海报的效果呢?第①步1.下载安装包2.双击  looper.sketchplugin完成安...

    2018-03-09