html ui动画效果图,UI设计的动态动画效果是用什么软件做?

【第一】:ae动效demo纯展示用,使用灵活,能做一些纯概念类的展示稿;

【AE:这个不用多说,什么效果都能做,但能不能实现是另一回事】

【第二】:flash可制作含有交互的高保真动效demo,不过想要制作符合实际项目的动效交互体验demo需要掌握as脚本语言,还有一个缺点时flash在Mac端的兼容性不是很友好,可酌情选择;

【第三】再来说说QC,Quartz Composer是强大的动画合成软件,在Apple10.4的开发软件包中自带,最近很多国内UI设计师也在对它进行尝试,很多国内设计师理解为不需要任何程序基础以及编码能力就可以做出非常复杂的动画,当然,这点我不否定,但是QC其实际意义是制作出界面UI工程给开发人员直接使用,如果没有一点代码基础经过一番折腾确实可以实现一些有趣的效果,但是输出产物杂乱,开发人员根本无法使用,这就完全失去了它的意义,目前看到国内大部分使用QC的设计师都是为了炫技而已,并无多大意义,因为QC相对于前两者的学习成本是较高的,如果你只是想去炫技,那么不做推荐;

Apple自己的QC结合FB出的Origami模板很不错:sketch有插件输出到QC里,但QC学起来不是很容易,有代码基础的还好一点,不太适合设计使用,而且可以输出代码

【第四】Keynote:非常容易上手,但一些精细的效果可能做不出来,适合快速展示

【第五】Form:和QC类似,据说更容易,稍微试了下还是喜欢QC+Origami

【第六】Framer:纯代码编辑,更不适合设计了,效果还是不错的

【第七】Principle:和sketch一样的界面,友好清晰,更适合设计师,目前在研究这个,有时间轴和快速布局等,未来估计和sketch很好搭

【其他】Flinto、 processing(这2个没太理解  不说了 又喜欢的可以了解了解)

【惊喜一】再来说两个比较实用的无代码实现交互动效的工具,一个就是hype3,是一个有时间轴操作的HTML5生成工具,可以通过简单的动画设置然后配合工具自带的交互事件制作出可交互的实用demo;

【惊喜二】最后一个就是强烈需要推荐的,最近刚被谷歌收购的还热乎的pixate,这是一个专门只做交互原型的工具,经过不断的更新与创新,现在已经被谷歌收为旗下,这个工具操作简单,内含一些常用的交互事件,用户只需要通过简单的拖拽与设置,便可配合移动端APP实现动效demo实时预览;

还有其他的一些工具不做过多推荐,最后真诚的提醒广大设计师朋友们,我们应该尽量保持平静,在这个浮躁的设计氛围下,尽量保持清醒,放弃一些炫技的个人想法,多去考虑用户,回归设计本身。

(以上不是本人原创,都是在互联网搜集提供!)

以下是一些交互的APP界面,大家可以欣赏下!

bea5ccbc09c1ffdfea986f3918a9eff6.png

65b479226daf1d9ca1ebb7e9768dc1b2.png

2bb698686d34f75cd60720090f2d18e4.png

2208ad21558bfd6317a745c32176464a.png

392994be9fc3ee974c5c1458b0ce528d.png

3f97b2334587cabc57aaf3b5ffeb5567.png

76beff9c55d08911483c73ec3fac16c0.png

b445d14864feb1b90b5df4dc17f32e24.png

4b86515e5ce364aa943a540a23db8721.png

99f072b0e9d50549215157d59aadc771.png

e87d7d14d5654598eceb926d333665b4.png

963648d4f6b21445cac2859cdcfa5fd9.png

a953043e78d64874558aa5a7f54ffce0.png

f592dc75d8b98f3a409c64fecc52c4fd.png

2a4f619299e7f9e4774c49155460eeaa.png

24227cc5ffc9f09222bc170c0e97107a.png

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值