软件攻略宝典之Origami

2014-05-06 Bingo 十分钟

手机同质化越来越严重的今天,手机App的同质化也越来越严重,但是就在今年1月31日,Facebook推出移动新闻阅读应用Paper却让人们眼前一亮。这款软件被许多设计师称为“最美的应用”,尤其是它全新动人的交互动画让人们类此不疲的玩弄着这款App。(36氪的相关报导:http://www.36kr.com/p/209515.html?vt=0)

在Paper的交互动画背后有一款软件起到了重要的作用,就是接下来我们要讨论的交互神器“Origami”。事实上,在 Paper 上面看得到的每个打动人们的动画效果都是先由设计师们在 Origami 上成型后再由程序员们在 App 上编写的。

设计师们大多通过After Effects来制作这些交互动画,制作过程往往漫长而且艰辛,因此Facebook基于Quartz Composer开发的插件Origami,为设计师提供了许许多多的交互动画预设,无论是一个具有真实光阴的翻页效果,还是一个有弹簧的按钮,都可以在它的资源库里面找到。

背景介绍完了,心里是不是有点痒痒的,那么下面就开始摸摸这款神秘的Origami吧。


硬件要求:Mac 一台

软件要求:Mac OS X (10.6及上)+ Xcode + Quartz Composer+Origami

Xcode: Xcode是苹果公司向开发人员提供的集成开发环境(非开源),用于开发Mac OS X,iOS的应用程序,其运行于苹果公司的Mac操作系统下。

Quartz Composer: 它是一款图形化的编程工具,专门用来生成各种动态视觉效果,包括可交互的界面原型。安装完Xcode之后,在/Developer/Applications/Graphics Tools/ 这个路径下可以找到这个工具。

Origami: 本文的主角,Facebook基于Quartz Composer开发的插件

教程君已经为大家打包上传至度娘云盘,下载地址:http://pan.baidu.com/s/1hqA7PLM





安装完成之后在Dashboard上就可以看到这个图标: 这样安装的过程就大功告成了。

装完这些软件之后就可以打开QC(Quartz Composer简称,下文都使用之代替),今天就为大家简单的介绍一下软件的界面,下一篇教程带着大家做一个点击图片用来放大缩小的案例。

首先:打开QC,可以选择第一个Basic Composition(后面的几个模板我们暂时用不到就不用管了),也可以点击Open an Existing File选择已经有的文件,这里我创建一个新的文件,点击Basic Composition。

接下来进入主界面:

注意:请看一下最顶上的一栏,如果出现倒数第二个小折纸纸鹤的图标,也就是Origami(中文的意思是折纸)这个插件,表示你之前的安装都是对的,如果有的同学没看见这个,那就请检查一下是不是有漏装的。

工具栏:

下面一大块就是工作区域,放置Patch(我意译成控件,这个是所有功能实现最重要的小东西,也是最重要的概念,第三讲里面我会详细讲Patch的分类与应用)的地方。


请点击一下工具栏的Viewer,就会弹出一个窗口显示输出的内容:

出现Viewer窗口:

因为工作区里面就一个叫“Clear”的控件,所以输出就是黑乎乎的一片。

点击Patch Library,出现控件库:

控件库里面提供了丰富多样的空间,以供大家调用来创造出好玩,有趣儿的效果,里面的详细内容第三讲里面会详细说明。

这里我们用底部的Fiter(过滤器)搜索出三个控件,分别是Phone Dimensions、Render in Image、Phone,然后把它们拖到工作区,顺便把Clear删掉。

下面是Phone搜索的案例:

下面就是控件拖完之后的效果:

但是这些控件现在都是孤立的,没有联系,没有联系就没法工作,我们要做的就是给他们联系,给他们联系很简单,把他们连起来就好啦!链接就是要记住一点,从输出连到输入。具体操作就是点击控件右边的小点,就会出现一跳黄色的线条,连到接收这个输出的控件左边的小白点上。(期间你并不需要长按住鼠标左键,那个线跳会随着你的鼠标移动。)

如下图连接好相应的点:

(控件Phone Dimensions的Pixels Wide和Pixels High链接对应到控件Render in Image的Pixels Wide和Pixels High,控件Render in Image的Image链接到控件Phone的Screen Image)


好,今天我们就学到这里,此时你应该发现,这些控件颜色是不一样,而且有的是直角矩形,有的是圆角矩形,是不是有点儿晕了,没关系,下一讲里面,我们继续上面的步骤做完一个案例深一步了解这款软件。




咱们十分钟也有自己的Q群啦!

群号码是:46903030


1.如果你喜欢本文,请点击屏幕右上角“。。。”,分享给你的朋友或者朋友圈。如果你不喜欢本文,也请告诉我们为什么,这样“十分钟”才能不断进步;

2.每天晚上9点-12点不定时回复你的疑问,注意,问题的内容请尽量具体一些,否则我们将很难回答。

举报


当前位置: 传送门 ›› 十分钟UI设计