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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Facebook Paper的动画原型制作工具Origami及实现代码Pop
0.0°
2014-05-09 好文转载 经验/观点 原作者: 超儿 举报 10749 54 24 2

 


 

Facebook的paper几乎是这一年到现在最抢眼的app了。一亮相就用瓷砖式布局(Mactalk语,据说他还考證了這個設計師之前就是搞家裝的)震惊世人:妈蛋还能这么玩啊!

产品角度关于paper的介绍


Paper 是 Facebook 创新实验室的首款产品,其首席设计师之前为智能家居产品做过设计。所以真相是:之前的设计中瓷砖贴多了……


我为了这个免费的app买了8块的vpn一个月,你也可以申请greenvpn的免注册免费200M体验一下。需要美区账号。

Paper by Facebook

懒得弄没关系,这里摘录了你能发现和可能都不会发现的23个细节。

赞!Facebook Paper中的23个设计细节

不光是完全创新的交互设计(现在都敢这么说,真做到的不多),随着功能进一步完善,正在从原来信息聚合逐渐危及到facebook的主功能,莫非要上演F版的QQ与微信?

但是也有说现在paper下滑明显。

总之,关于Paper的交互动画,Facebook公布了这样两个开源资源:

交互动画原型制作Origami

 

 

中文介绍:新闻聚合阅读应用Facebook Paper的幕后功臣Origami

这其实是一个基于Quartz composer(苹果开发工具包里一款制作动画的软件)的库,方便你在QC里可以直接模拟出Paper的动画。

还集成了直接可以切换手机型号(内置了iPhone和htc两款,你可以找到库的位置自己修改一下加上所需手机),介绍,对原有动画的一些包装和拓展等等。

但是由于QC的学习成本有点高(基于流程的处理方式,从思路上就和我们通常习惯的ps式分层的思维方式不同),而且只是针对强交互方式的(弱的基本可以用ps时间线和AE实现),而且,转成代码的重用性得性价比等原因,除非有能力熟练掌握,否则非要用这个实现有点事倍功半的感觉。

三种原型动画制作方法优缺点比较

前面提到了QC实际上是可以和ps时间线配合制作不同需求的动画原型。


  • ps时间线

优点是:上手快。无论是时间轴关键帧的概念还是psd的通用性,都可以稍微学习一下就可以直接拿来设计师的psd自己做做效果玩了。缺点是只能生成gif,5秒左右短动画,很难显示与实际交互的操作。

关于具体怎么做,你可以自己搜搜,也可以等我把关于原型制作的大作写完哈。


  • After effect制作动画视频

优点是:支持矢量,动画可以效果更多更精致,可以生成视频。牛摆设计师都会告诉你用这个,虽然也不能制作交互,但是高级动画都用这个,甚至直接做动画片都没问题了。当年我们就是用这个做视频短片的后期调色渲染的。


  • QC的特点

前面说过了,可以在Mac上完美模拟交互过程,点击滑动拖放等过程的实时动画。缺点其实也在这句话里,就是mac上模拟,不要说windows了,连ios都很难,而且好像必须对方也得装了QC才可以,而且好像只有开发者账号才能下。。。如果不对请指正。

但是iOS模拟交互的过程也被我找到了,就是在mac和iOS上下载liveview,然后在mac上开启互动模式即可!具体看这里第二个回答

LiveView has an "interactive" mode which basically allows you to interact with the mirrored image on your iPhone

Quartz composer相关教程

下载地址

如果你还是铁心要贴近时代的脚步,那么只需看这一个链接就好了:

Quartz Composer如何入门?

里面介绍的资源有很多,我建议顺序是:先看下视频,大概对这东西有个概念,然后做下提供的例子,其中有个图片点击放大的最简单最清晰,主要是看基于流程的思维方式,这和ps分层的方式差别很大(其实在影视后期领域也是这两大流派流程代表的Fusion和层级代表的after effect)。里面提到的一本书一本文档,我都看了没有什么学习空间,参考为主吧。

learning Quartz Composer

Quartz Composer User Guide

中文教程:Quartz Composer完全入门(1)

动画代码Pop

接下来没多久,facebook就开放了代码层面的动画效果Pop。

 

 

 

 

中文介绍:快把Pop动画引擎用到你自己开发的应用中吧

所以就是在苹果现有的动画曲线上加上了两种和用户强烈交互的曲线:


Spring可以让用户触摸的元素能反馈出强有力弹动效果;

Decay则可以让弹起来的元素缓慢的停下。这两种特效都会将用户的手势速率纳入考量范围进而创建出逼真的交互效果。

除了这两种之外,Pop的自定义特性则允许开发者将自己的动画代码插入其中进而创建出独一无二的动画。


探索的空间还是很大的。相关的资源还不多:

关于pop的视频介绍优酷

Tutorial: getting started with Pop

Playing with POP

教程和demo by @jxd001

 

 

 

 

如果你还继续感兴趣可以去关注@唐巧_boy的微博,我关于pop的新东西都是在他那。



更新:2014-05-09

收藏

54人已收藏

MartinRGB

http://www.MartinRGB.com

  • 234

    作品

  • 1.7w

    粉丝

  • 413

    关注

  • MartinRGB.com
  • Icon Freebie - Code
  • 实验系列II —— Music App For Tv/Pad
  • Private Trainer 引导页实现
相关标签
移动应用界面

    猜你喜欢

      2014-05-09 好文转载 经验/观点 原作者: 超儿 举报 10749 54 24 2

      Facebook Paper的动画原型制作工具Origami及实现代码Pop

      0.0°

      你确定要举报Facebook Paper的动画原型制作工具Origami及实现代码Pop

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2014年05月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      24
      54
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录