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-05-19
  • 【交互设计-UX/UE】数据加载

    数据加载是设计中比较容易忽略并且又比较重要的环节,以一种合适的方式告诉用户正在发生什么,将会发生什么,让用户对于加载后的内容有明确的时间预期,减少用户的等待感,尽可能消除焦躁情绪。 一、6种常见数据加…

    2016-08-03
  • 听说微软这次硬了?苹果赶紧发布了个触摸条压压惊!

    #交互学堂# 前天晚上,#微软# 赶在 #苹果新品发布# 会的前头抢先发布了一波硬件产品,出人意料地推出了Surface Studio 一体机以及交互配件 Surface Dial。一时间设计夹小编朋友圈里的设计师们都沸腾了,惊呼 “巨硬…

    2016-10-28
  • 如何量化用户体验并有效执行

    很多人都把用户体验看作是网站或应用成功与否的一个总体衡量标准。分析一个网站或应用在提供好的用户体验方面的效果如何,往往会变成一项很主观的事情,仅停留在观点层面,缺乏客观依据。本文描述了为何量化用户体验这么难,并提供了一个量化用户体验方法,对于网站和应用的过去开发所作努力的快速、客

    微信热点 2018-03-22
  • 腾讯多个品牌LOGO重设之思路

    作者:飛兒     在SNG(腾讯社交网络事业群)品牌系统语言里,LOGO系统承载品牌视觉的最核心容器,是整个品牌视觉系统的灵魂,是品牌的精神文化理念、信誉、服务等特点的浓缩表现,直接影响着社交网络品牌的发展。…

    交互专题 2017-08-07
  • 新知 | 在打造用户体验上,连雷军都要向这家企业学习

    在我们之前发布过的一篇文章《小米八周年:雷军揭秘四大成功之道》中提到过,雷军在创建小米时受到了美国零售连锁超市好市多(Costco)的启发,从价值体系上来看,小米与好市多相同,都是希望用户能以可承受得起的价格享用更好的产品。好市多以优质、低价出名,在全球拥有700多个分店。从2006年到2016年,好市多的市值增长了五倍,如今的市值约为670亿美元。好市多亚洲区总裁张嗣汉在2018零售业年会上分享了好市多的运营模式、会员制度,以及管理层...

    2018-05-04
  • 免费 20个设计优秀的HTML网站模板

    在这个互联网时代,很多企业或是个人都搭建有自己的网站,用于宣传营销或个人网站博客等用途。而对于小企业、个人或不懂设计网站的用户来说使用网站模板将是最好的建站方式,设计达人网致力分享高品质免费素材,所…

    2015-03-17
  • 看似平淡无奇的Icons,到底什么才是它的正确使用方式?

    了解食材是厨师的基本功课之一,了解器材是摄影师的基本功课之一,了解城管的时间表是卖热干面大叔大妈的基本功课之一,了解各个组件的设计模式和属性是交互设计师的基本功课之一。

    2017-05-08
  • 想做动效,可是你的需求写清楚了么?

    精美的动画对于提升产品体验有很大帮助,如促进用户理解功能,缓解用户情绪,调动用户积极心理,为产品提供亮点等等。诸如此类的文章相信各位已经看过不少了,不少人已经开始越来越重视动效在产品中的应用了,还没有看过的同学不用急,谷歌官方的动效指南讲解得很详细,建议只看这个就够了,配合一些动画理解起来更容易。说明:

    1.优化直播间分享面板,增加特效

    2.当用户点击分享按钮时(*包括传统直播间主播面板的分享按钮和上方分享按钮,手机直播间的分享按钮*),从下方弹出分享面板,逐个弹出分享icon,并淡入显示分享奖励。

    3.用户关闭分享面板时,分享icon从右到左依次下落淡化消失
    相关参数:

    1.分享面板减速弹出,运动时间225ms
    2.分享icon从左到右依次弹出,运动时间225ms。带有奖励图标的,当对应分享icon弹出后,分享图标淡入显示(时间225ms),第二个图标比第一个迟100ms开始运动

    eg:如图第一个为qq图标,当用户点击分享按钮,分享面板弹出后,qq图标开始弹出(时间225ms),100ms后第二个图标(qq空间)弹出,当qq图标完全弹出时,淡入显示分享奖励图标,时间225ms。
    3.分享icon从右往左依次收回,分享面板收回,所有运动的时间减少30毫秒,如分享面板收回时间195ms,分享icon收回时间195ms。

    andorid端动画曲线采用系统自带:AccelerateDecelerateInterpolator(在动画开始与结束的地方速率改变比较慢,在中间的时候加速)

    iOS端动画采用系统自带:kCAMediaTimingFunctionEaseInEaseOut (在动画开始和结束的时候速度稍慢些)
    具体效果可参考附件视频

    2017-05-08
  • 走心的收纳设计

    走心的收纳设计

    IxD案例 2017-03-13