想做动效,可是你的需求写清楚了么?

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

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 (在动画开始和结束的时候速度稍慢些)
具体效果可参考附件视频


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

想做动效,可是你的需求写清楚了么?

你已经有了大致的想法,那么怎么让研发哥哥们实现呢?demo又改怎么做呢?可别说让研发下一个app照着做。

一、工具的选取

目前的动效设计工具非常多,建议使用主流的工具,不仅教程多,后期更新也更方便。我用过主流的有以下几种,各有不同,需要针对彼此的优缺点使用。

1. flinto

这个比较适合做页面跳转,比如从点击一个按钮从一个页面跳转到另一个页面,实际项目中很少用,比较适合一些小项目,上手比较容易。

2. principle

相当于一个轻量级的AE,调节动画非常方面,同步sketch使用,页面跳转或者单页面小元素动画都可以实现,缺点在于复杂的动画难以实现,上手比较容易,可以同步手机演示。

3. origami studio

上手稍微有点门槛,实现动画的方式是节点动画,facebook推出的,前身为quartz composer 可以将动画导出为android和iOS的代码,需要引入的facebook的包,后续推出的origami studio中就不能再导出代码了,另外使用origami studio 做的弹性动画还需要接入pop引擎。综合来说,可以方便地实现一些更复杂的动画,如粘性,弹性,缓动等,不太适合页面跳转。

4. AE

可以是动效设计中的大杀器,你想要的特效都可以做出来,配合一些插件可以做出相当惊艳的效果,缺点就是上手难度大,而且做出的动画不利于交互。最近airbnb推出的lottie可以将AE做的动画转为代码,有兴趣的同学可以保持关注。

对于动效软件的选择,看个人的爱好了,新手比较推荐flinto和principle。

二、设计时的注意点

别以为demo做好了就结束了,接下来才是最麻烦的一步,如何让研发哥哥们实现你的动效。你可别拿着demo就直接丢给研发哥哥了,运动时间,淡化的百分比,运动的形式,这些可别让研发看着你的demo猜。

在写动效需求文档的时候,有这么几个注意点:

1. 运动模式

虽然研发会更喜欢匀速直线运动(毕竟做起来简单),但是让人愉悦的动效应该是模拟现实的,会有对应的减速和加速运动,这一点参考谷歌的动效指南就好,使用系统自带的参数就好,不要再去调整加速曲线了。

想做动效,可是你的需求写清楚了么?

2. 运动时间

要注意研发的单位一般是毫秒,所以你就尽量别写0.03秒这种了。

想做动效,可是你的需求写清楚了么?

3. 动画的实现类

这里就要说到代码层了,不能理解的没关系,看看就好。

iOS 的动画可以被分为两大类:

  1. 系统提供的关键帧动画实现方式:用户指定关键信息,系统实现动画过程,对用户而言操作起来会简单些。
  2. 逐帧动画实现方式:周期性的调用绘制方法,绘制每帧的动画对象。系统操作方法简单,但用户操作的工作量就会大一些。著名的 facebook 的pop动画框架,就是使用CADisplayLink这种逐帧绘制的方式实现的。

如果绘制过程过于复杂,不能在屏幕刷新一帧的时间内完成,可以考虑改为每隔一帧绘制,相当于是 30 FPS的刷新率。不然可能会使动画不连贯,有卡顿感。

采用关键帧的方式来实现动画,要讲的内容相对逐帧的方式就多的多了。

动画过程实际是一个时间的函数,横坐标是时间的变化值,纵坐标是动画属性的变化量。那么我们就可以在一个直角坐标系中,通过作图来画出这个函数。比如匀速运动的图形,就是一条通过原点的直线。

所以这个类的功能就是画出一条曲线,来表示时间和属性变化之间的关系。而画图的方法,是使用的是画贝叶斯曲线的方法。

系统提供了几个常用的函数,比如kCAMediaTimingFunctionLinear就是匀速运动;kCAMediaTimingFunctionEaseInEaseOut就是一般系统动画的默认值,渐入渐出,即在动画开始和结束的时候速度稍慢些。

想做动效,可是你的需求写清楚了么?

Android的动画类

Android:interpolator

Interpolator 被用来修饰动画效果,定义动画的变化率,可以使存在的动画效果accelerated(加速),decelerated(减速),repeated(重复),bounced(弹跳)等。

android中的文档内容如下:

想做动效,可是你的需求写清楚了么?

  • AccelerateDecelerateInterpolator:在动画开始与结束的地方速率改变比较慢,在中间的时候加速
  • AccelerateInterpolator:在动画开始的地方速率改变比较慢,然后开始加速
  • AnticipateInterpolator:开始的时候向后然后向前甩
  • AnticipateOvershootInterpolator:开始的时候向后然后向前甩一定值后返回最后的值
  • BounceInterpolator:动画结束的时候弹起
  • CycleInterpolator:动画循环播放特定的次数,速率改变沿着正弦曲线
  • DecelerateInterpolator:在动画开始的地方快然后慢
  • LinearInterpolator:以常量速率改变
  • OvershootInterpolator:向前甩一定值后再回到原来位置

如果android定义的interpolators不符合你的效果也可以自定义interpolators

三、具体范例

想做动效,可是你的需求写清楚了么?

如图,一个点击分享按钮后,各个分享图标依次减速入场的动画的需求如下

说明:
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 (在动画开始和结束的时候速度稍慢些)

具体效果可参考附件视频

四、Android和iOS可能的区别

1.在研发哥哥写完代码后,检查的时候你会发现andorid似乎比iOS卡了那么一点点,这也是受很多一些因素影响,如果追求体验,可以尝试加快20ms。

2.一些动效,本身就是系统自带的,如果不清楚,建议多阅读官方文档,或者设计前多请教研发吧。

也是学习动效没多久,如果文章中哪里写的不对,欢迎各位指出,共同讨论。

 

本文由 @Placeless 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-08 02:15
下一篇 2017-05-08 04:10

相关推荐

  • 设计中的交互设计——什么是交互设计

    上一篇我们探讨了设计的本质,结论是设计的本质是解决问题,满足人们的需要。有的朋友可能会问:工程学也是解决问题,比如造一座桥,就解决了一条河两岸的交通问题。那么设计和工程学有什么区别呢?这里我想补充一点:设计是漂亮得解决问题,即设计除了需要考虑如何为人们服务,还需要考虑以一种美观的、令人赏心悦目的方式来服务。因此,“漂亮”这个因素,也很必要。既然交互设计是设计学科里的一个分类,那么交互设计一定首先满足设计的本质:漂亮得解决问题。下面我们来...

    2018-03-13
  • 设计基础|设计的7条心理学原则和定律

    译者注:上图的中文版金字塔并非原文内容,找来帮助大家理解。译者注(图中文字):
    费茨定律示例
    它是什么意思呢?费茨定律表明,你应当让按钮和其他界面元素足够大,因为用户点击小按钮十分困难。
    如果你有个小按钮,像【OK】这样,可以增加一些内边距,或者让它更宽:【 OK 】
    如果说网站上有个按钮,让整个按钮都能点击——而不仅仅是文字标签。
    而且,如果你把物体放在很远的地方,最好就要增大它的尺寸作为补偿。

    2017-05-24
  • 从交互设计角度,聊聊Web网站和移动App的六大差异

    做交互设计近4年,参与过Web网站和移动App的设计,前者依托于PC的浏览器,后者则是依托于手机/平板电脑。不同的设备/平台均有各自的特点,以至于在设计这两类产品时也有些许差异。

    2017-05-27
  • 信息与交互设计专业委员会走访北京服装学院艺术设计学院

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn第四站——北京服装学院2017年11月3日上午,信息与交互设计专业委员会卞亚君秘书长及秘书处谢老师、王老师一行三人到北京服装学院艺术设计学院进行了走访。新媒体系主任丁肇辰教授热情地接待了我们,在交谈中丁教授向我们介绍了学院的基本情况以及带学生做的一些研究项目及活动。如《都会寝室》项目,面向20-35岁人群,致力于通过卧室环境控制、健康食物推荐等,改...

    2018-01-31
  • 别闹,你以为学个Axure就算懂交互设计了?

    前些日子在一个产品、交互设计交流群里,有几个初学交互不久的人讨论如何学习交互,不出意外地他们的讨论方向拐到了Axure、墨刀等交互原型制作工具的使用上。从他们的言谈中看得出,他们觉得交互就是做界面原型,做…

    2015-09-11
  • 注重用户体验场景化,不局限于赛事版权的世界杯营销新浪怎么玩?

    缺少赛事版权,是所有互联网公司进行世界杯营销时面临的难题。新浪的做法是,利用社交网络的优势,通过提高用户体验,最终实现成功的营销。距离2018年俄罗斯世界杯还剩不到三个月时间,目前还没有任何一家新媒体平台获得赛事新媒体版权,在此情形下,各大网络平台选择怎样的报道及营销策略,将成为世界杯媒体大战的胜负关键。3月29日下午,新浪在北京总部局举办了体育产业论坛,首席运营官兼总裁杜红分享了体育产业新时代,在用户认知和消费全面升级的趋势下,如何通...

    2018-03-29
  • 如何运用扁平化设计创造极致的用户体验?

    扁平化设计算是秉承了极简主义理念的至亲了——因为它将简洁的思想融入至所有元素的设计。然而,要达成简洁的扁平化设计依旧困难——即需要我们以相同的设计理念为目的,并创造出一套连贯的视觉与功能体验。让我们来了解下,你能够通过扁平化设计为用户做些什么呢?

    2017-05-08
  • Don't make me think 读书总结

       这本书算是一本很入门的交互设计图书,很多内容其实都是通过以前的积累已经知道的内容。我相信对于大家来说,“要记得在每个页面上加导航栏”这种提醒已经不需要了。所以,我在下面列出一些看完过后,觉得可以温习…

    2015-08-20
  • 【用户体验】Smartisan OS 联系人列表多音字

    大家都在讨论用户体验(因为不说显得自己很土),但是这些人是不关心用户体验的,关系是人就会做出下面这种机制的不能理解的举动,例如为了帮助大家解决L代表的罗或刘的姓氏联系人的区分,Smartisan OS的工程师做了…

    交互设计 2015-08-26
  • 【招聘】在专注用户体验的公司上班是什么体验?

    随着艾体验业务范围的逐渐扩大以及合作伙伴不断增长,我司也开始扩充人力啦!我们是谁?艾体验是一家为需求企业提供更具商业价值和科技未来的产品“大设计”服务公司!(base in天府五街菁蓉国际广场)作为一家“大设计”公司,时常需要对外提供高端产品体验咨询服务,创新前沿人机交互解决方案研发,并且不断沉淀分享产品干货。而成为“我们”的将是这样一群人:这群人,热爱互联网和产品,同时也热衷于观察生活,不放过身边的任何一个小细节;这群人,贯彻着生命不...

    2018-02-26