专栏名称: 91产品
91产品致力为产品新人、产品经理等广大产品爱好者打造一个全方位的学习交流平台,分享产品设计、交互设计、产品运营干货。
目录
相关文章推荐
91产品  ·  Taxofit 品牌传播规划方案 ·  13 小时前  
三节课  ·  一文讲清DeepSeek的三种模式(基础模式 ... ·  2 天前  
三节课  ·  DeepSeek基础对话的5个黄金法则(附1 ... ·  3 天前  
人人都是产品经理  ·  DeepSeek的“服务器繁忙”让所有人抓狂 ... ·  3 天前  
51好读  ›  专栏  ›  91产品

App动效类型大梳理

91产品  · 公众号  · 产品  · 2017-02-23 20:42

正文

91运营社群招募中,勾搭小编微信号:dayuhai123入社群

  • 每周91公开课,91风暴,全员参与,实际案例实际分析

  • 问题答疑,你提问题我解答

  • 行业专场,互联网金融,电商,新媒体运营等专场

  • 各地分站交流

  • 资源及人脉共享

  • 其他的。。。。

欢迎各行业互联网运营达人加入我们91运营大家庭,会运营的人都来这里了!

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

正文

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

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


主要分为以下几部分:


一、控件动画


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


分为以下6种:

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



二、加载动画


分为以下4种:
1.下拉刷新加载
下拉加载一般分为两种形式:动画加文字、纯动画。

2.切换新页面数据加载
当切换到新页面时,常常会有加载数据的时候。主要有:转菊花的动画,进度条的动画,百分比的进度动画。

3.页面上拉加载
上拉加载的样式不会过于复杂,一般与下拉加载的动画配套来实现,上下尽量保持一致。

4.页面局部加载
常见的局部加载场景有视频列表、加载图片的占位图等。



三、细节动画


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


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



四、功能模块动画


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

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

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



五、彩蛋动画







请到「今天看啥」查看全文