恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
交互设计师想要认真和你聊聊动效设计
0.0°
2017-12-18 原创文章 经验/观点 举报 6989 170 275 26

这次带来的是WPS邮箱4.0动效设计案例,完整呈现了设计构思-实现-检验的过程。在设计中有独立的思考,也犯了些错误,希望能够给抛砖引玉,激发大家的灵感。

Image title


移动端的动效设计主要分为两种:

页面跳转动画及加载动画

前者的作用是衔接页面间的切换

后者是为了减轻用户等待时的焦躁情绪。

同时,动效设计也是对设计师综合素质的挑战


是你没看错,交互设计师和你聊动效,迎来职业第二春。

前些日子在给WPS邮件做新版本的交互设计,零零散散的工作结束后,看着测试机里APP的界面,发现邮件的加载与下拉动画还使用的是系统动画。

刹那间,使命感油然而生。



Image title



这次的设计流程如下


了解需求-确定方向-着手设计-检验问题 



Step1.了解需求


了解需求后我们可以在目标上和需求方达成共识,出发点一致,目标一致,避免出现不必要的麻烦。这点非常重要重要,效率第一。

 

有了这个想法就去和产品姐姐聊,没想到人家也是这么想的,五分钟友好的交流之后,我大概get到了她的想法:


需求:希望设计出新的下拉加载动画以代替系统默认动画。

 

期望值:动画内容契合列表的下拉刷新操作,与邮箱的线上设计风格一致,同时要求趣味性。



Step2.确定方向


当我设计动效时,我会想到什么?网上有很多炫酷的爆炸的旋转的3D的作品,我们如何在有限的时间里确定设计方向呢?下图是我的思考方式:


Image title



首先,设计本身是一个先做加法再做减法的过程。


加法:

关键词发散是我个人的设计方法,这个阶段,我联想到了现实世界中的很多与邮件相关的词,画了很多草图,也汲取了很多优秀作品的灵感,很多奇奇怪怪的点子在脑海中迸发。


减法:

在需求确定的情况下,可以更加轻松地缩小设计范围。

回想需求,动画内容契合列表的下拉刷新操作。下拉动画的内容需要与操作保持一致,用户在此页面下拉触发的是刷新行为,也就是收取新邮件,这我们需要用动画体现出来。

回想需求again,产品要求与邮箱的线上设计风格一致,WPS邮箱线上发送邮件的按钮样式是一架飞机:


Image title


发送邮件的样式


依据以上思考我的结论是:


下拉刷新=收取新邮件


邮件=飞机


相应的,收取新邮件可以认为是飞机飞入,于是我延续飞机的设计,围绕着邮件与飞机的思路,以飞入邮箱的形式来展现“收取新邮件”的主题。自此动画的大体方向确定了:纸飞机与邮箱。



Step3.确定方向


到这里相信大家脑海中已经有了一个动画脚本:随着用户下拉列表至一定高度,触发动画,飞机飞入邮箱,下拉动画结束后列表收起,DEMO如下:


Image title



这里不讲技术问题,分享一些动画的思路:

 

飞行路线不用太复杂,看着累。

 

速率调整一下,注意透视,近大远小。


随着下拉手势,可以让邮箱门打开:


Image title

邮箱门细节


也可以在飞行的同时稍稍改变一下飞机的角度:


Image title

角度细节


注意下图:较远的火车,看得比较清晰,较近的模糊,这个道理大家都懂。


Image title

飞驰的火车


Image title

模糊细节



Step3.1.立个flag


Image title


结合现实世界:立Flag是生活中存在的一个现实行为,在有邮件放入邮箱时,旗子会竖起来,用来提醒人们查看。于是我们在设计整个动画的时候着重的处理了这个部分,也就是说,这是动画的高潮呢(害羞脸)


Image title

组团高潮


动效的趣味性大部分依靠高潮加分儿,其实这样的弹性动画是不符合物理学原理的,但处理类似细节时,我们不用太考虑牛顿他老人家的感受,生动即可。关于生动,我们可以看看这两篇文章,分别表达了很有趣的看法:


从迪士尼动画原则看设计 

http://www.vccoo.com/v/aaa4bd


以及

 

你的UI不是一部迪士尼电影 

http://zaodula.com/archives/16963.html


看似观点对立,但文章内容详实,能够帮助大家把控移动端动效的设计原则。

翻回头看思考一下,面对需求,我们当然可以从别的作品中寻找灵感,但大概方向一旦确定,应该马上结合产品特征和需求方一起判断方案是否可行,用最短的时间做出最优的选择。



Step4.检验问题


动画制作完成后,感觉很开心

我们需要检视开发可行性,回想上面的动画,你有没有发现什么?

你会发现这个动画没有从交互设计的角度进行设计

加载时,我们要考虑很多问题,无网,弱网,加载时间过长等情况的发生。上面的动画,分为三段,我模拟的是流畅网络下的加载样式:

未触发加载时:用户下拉,但没有拉到触发位置的时候

加载时:飞机飞行时

加载完毕时 :页面回弹结束

如果遇到长时间加载的情况,因为动画形式的制约,我们不可能设计成一架飞机不停向邮箱里飞,旗子立起来自己再放下去,非常不自然。这需要我们让“加载中的动画”和“结束加载的动画”无缝衔接,但实现起来太麻烦了,不仅会影响动画的大小,还需要开发做特殊判断。


留给中国队的时间不多了,怎么逆转局势呢!!!


方案如下:


Image title



现实世界中,收到信件的邮箱旗子会立起来,提醒别人收信,没有信件的时候旗子就会倒下,我们正好可以做一个飞入飞出的循环动画,一直播放,直到刷新成功。加载时间长的时候,就只是播放的时间长一点,短的时候,让开发限定最短加载时间,能够完整播放完一段飞机飞入的动画,这样既减少了开发的工作量,也保证了视觉效果。



最后的最后,说一下另一个重要的问题:

 

文件质量与大小

 

这里的下拉动画的尺寸为1080*210,质量和帧数不用太高,我的上线动画最终控制在22帧左右,所以类似上文说的模糊效果等等实际都不太看得出来,由于开发师傅一般不用gif格式,都用帧序列实现,这就要求我们控制好每一帧图片的大小,能够复用的图片一定要复用。一旦沟通不及时,你很可能会一直返工:


Image title




小结:


我们在各大设计网站上见到很多优秀的设计,但最后都停留在表现层面,因为上线的设计会有收到很多约束,DEMO和上线效果也往往天差地别。设计动效时我们应该思考的不仅仅是动画本身,而是要明确交互上的问题,想清楚可能会出现的情况,从需求开始就不要让自己的想法偏离目标,直至完成设计的过程中都要多去和程序及产品大大交流,因为

我是一个交互设计师

和美工怎么能一样呢



更新:2017-12-18

收藏

170人已收藏

  • 22

    作品

  • 4238

    粉丝

  • 3

    关注

  • 运营设计策略-借鉴方法论
  • 2019上半年作品回顾2_插画篇
  • 2019上半年作品回顾(1)_金山词霸插画篇
  • 所有设计师都应该懂的动效设计

    猜你喜欢

      2017-12-18 原创文章 经验/观点 举报 6989 170 275 26

      交互设计师想要认真和你聊聊动效设计

      0.0°

      你确定要举报交互设计师想要认真和你聊聊动效设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年12月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      275
      170
      26

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录