当前位置:首页>ps入门教程>ps基础教程>设计知识>教程内容

经验分享!如何准确的向工程师传达动效设计?(2)

来源:阿里高级视觉设计师 作者:TCWison 学习:2929人次

对于我这种以AE作为动效设计起始的人来说,这点太重要了。它意味着无需任何重复劳动,只需要在Flash中添加一些基于AS3.0的交互代码,就可以完成原型的制作,并保证自己最初的设计思路在原型阶段不打折扣的实现。

经验分享!如何准确的向工程师传达动效设计?

(Action Script是可视化很强的一门语言,结合AE的素材,你设计的动效基本可以完美复现)

优势2:可以导出.apk或.ipa的安装包,共享给任何有手机的人。

由于本人的工作经常需要异地沟通,原型的可传递性就是个很关键的需求了(总不能把电脑快递过去给人家看吧…)。Flash的打包发布功能,这时就派上了用场。做好的原型通过Air for Android打包一个apk文件,邮件发过去安装在对方手机上,轻松又愉快。

经验分享!如何准确的向工程师传达动效设计?

(左一就是通过Flash打包生成的.apk文件,可以直接复制到手机上安装)

另外一些可关注的工具,还有Pixate和Form,它们都可以通过共享工程文件的方式远程传递,还能通过官方App将原型投射在手机上实时预览,缺点是只能做一些基础的效果,创新一点儿的就搞不定了,不过他们都在不断地迭代更新,尤其是后者,刚被Google收购,未来说不定会有快速的发展。

我个人的第二个工具选择,是Framer Studio。当我把制作好的原型拿给工程师看的时候,经常被问到这样一个问题:“能不能把源码给我们看一下?”这时气氛通常会比较尴尬,因为Flash也好Form也罢,它们制作的原型只能起到演示的作用,而无法直接生成对开发有帮助的代码。此时,除了报班现学Android或iOS开发外,还有没有别的办法呢?答案是:“有!” Framer Studio给了我们一线曙光。

Framer Studio是一个纯编程实现的原型制作工具,有很强的动效实现能力,它的语言是基于Javas cript衍生出的Coffees cript。虽然语法与AndroidiOS有不小的区别,但仅就动效这块,很多逻辑是可以共通的。

经验分享!如何准确的向工程师传达动效设计?

(Framer的界面,左侧是代码区,右侧可以直接看到实现效果,很方便)

当然,它的学习成本也会高一些,不过当你拿着一段Framer的源码给工程师看的话,当中的一些动画参数和实现逻辑,多少能给到他们些实际的帮助,所以付出和回报还是成正比的。

另外,如果你专注于iOS平台,也可以直接尝试一下Origami,这是个由Facebook团队开发的原型工具,通过链接节点式的操作,无需自己写代码,在它最新的更新中,已经支持导出可供iOS和Android使用的代码

经验分享!如何准确的向工程师传达动效设计?

(Origami最新版支持代码的导出,虽然可用性还有待提升,但绝对值得持续关注)

三、协助开发:参数文档

有了视频Demo,有了交互原型,相信工程师们已经理解你要做什么了,那他们是否就可以愉快的把动效实现了呢?答案是:不一定。一些简单的动效,工程师或许可以凭经验搞定。如果你的动效设计很复杂,涉及众多的参数与速率变化,那仅凭你的描述与工程师肉眼的感觉,恐怕要出偏差。这时,就需要参数文档的帮助了。

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!