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

相关推荐

  • 10分钟科普!那些不明觉历的“交互设计方法论”到底是什么?

    @戴小维Saki :为什么要学会方法论 ?身为交互设计 师,行走江湖,怎么能没有一两个贴身护法傍身?!

    2017-05-21
  • 交互设计七大定律之The Law Of Proximity 接近法则

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 同学进了大公司的UED部门,我想一部分原因是…

    2017年开年,已经陆续有毕业生提前找实习工作了,在与一位成功入职的新人设计师交谈中,有一个重要发现:交互设计越来越受重视了。这位计算机专业的小伙伴,机缘巧合接触了设计,从此一发不可收拾,短短不到一年时间就熟练掌握了PS、AI、AE等软件,还自学了手绘技能。不过即使如此,她的求职仍困难重重。不是985 重点大学/非视觉传达专业/只会画图标界面等等,都成为用人单位将她拒之门外的理由。虽然要求有点苛刻,但站在公司的角度,想要在浩浩荡荡的求职...

    2018-01-31
  • 淘宝UED的设计流程

    国内知名 UED 团队的设计流程是怎样的? 淘宝 UED 的设计流程图 <img src="https://pic4.zhimg.com/75bcc954c5e1695eeeeb1710eb62c947_b.jpg" data-rawwidth="4000" data-rawheight="1678" clas…

    2016-06-01
  • 设计产品的第一个环节:定义方向策略,有理有据做设计

    本文作者将来聊聊设计产品的第一个环节——定义方向策略,这是后续设计的大前提和指导方针。我们需要从老板、产品/运营、用研及设计团队分别获取有效信息,进行分析整合,以得到正确、完善的方向策略定义。

    2017-05-13
  • APP切图命名规范:介绍一种通用的命名规则

    今天菜心要分享的内容是关于切图命名的规范,由于最近正在总结这一部分内容,所以拿出来和大家一起分享探讨一下。组件_类别_功能_状态@2x.png模块_类别_功能_状态@2x.png

    2017-05-10
  • 设计师的文化消费分类:钱花哪里去了?

    媒介与内容从来都不是同质平等的,按照题材来分类书籍与电影,就是以「文化消费品」的眼光来看待不一样的文字。然而不同类别比特本就具有不一样的价值,对于设计师,我觉得文化消费应该分为四类,它们可能占据着我们生活的1/3的时间,需要我们认识并好好分配:

    2017-05-28
  • PC端产品的三种姿态

    这篇依旧是读书笔记,只不过记录的不是整本书,而是《About face 3交互设计精髓》中的一个知识点,这个知识点非常重要,重要到需要单独提出来记录一篇。 在《About face 3交互设计精髓》一书中,将PC端应用分为了3…

    2016-06-01
  • 苹果旧金山字体的秘密

    iOS 9如今已公开发布。带来了一些细微的变化,但iOS 9的系统字体变成了苹果新推出的旧金山字体,代替了之前用的Helvetica Neue。

    2017-06-03
  • 2015年移动端UI/UX设计风格报告与2016年仍会持续火热的5大UI/UX设计趋势

    概述:随着响应式Web设计的持续升温以及Google移动友好性的提升,2015流行的一些UI/UX设计趋势将会在新的一年里持续升温。本文就来预测下2016年仍会持续火热的5大UI/UX设计趋势。 预测:2016年仍会持续火热的5大UI/…

    2016-01-03