次时代交互原型神器Origami档案

特点

对高保真原型工具的需求日益凸显

一直以来，产品经理和交互设计师都在寻找一种既简单又好用的原型工具，从Visio到AI，从Axure到Mockups，不一而足。Mockups能让你在电脑上模拟出手绘纸质原型的效果，Axure则可以让你快速构建出以Web为基础的动态原型，而Visio和AI更以其高度的可定制性深得细节控设计师们的喜爱。但随着iOS 7的推出，扁平化和极简主义设计风格在移动互联网领域流行起来，App动效越来越成为了决定App气质的重要因素，原型的动态保真度似乎成为了阻碍设计师发挥想象力的一道门槛。传统的以点按为主的App设计，逐渐演变成为大量手势交互，这使得Axure类工具表现手势交互显得心有余而力不足。

为了让自己的App从与千万个竞争对手的PK中脱颖而出，开发者必须拥有一款可以制作花哨动效的原型工具。

Quartz Composer浮出水面

2014年4月，Facebook召开了一次隆重的发布会，推出了其专属定制桌面Facebook Home，这款Android Launcher一经推出便以其花哨的动态效果轰动设计界，而Facebook的UED团队在设计过程中所使用的原型工具Quartz Composer（以下简称QC）也开始引起人们的关注。

QC是苹果Xcode开发工具包中的一个重要程序，苹果的初衷是希望它能帮助开发者合成拥有丰富视觉效果的动画，最初经常被用来制作屏幕保护程序。其特点是：无须编写代码，只要将工具所提供的各种功能的Patch（封装好的代码模块）进行连接和组装，就可以输出丰富的动画。

有的人要问了，After Effects也可以制作动画呀？没错，After Effects的动画效果也很强大，但它属于渲染输出类软件，制作出的动画是不可交互的。交互原型若是不能操作只能观看的话，效果绝对会大打折扣。如果直接用HTML/CSS/JS编写呢？那你没准会耗费很多的精力在代码构建和Debug上。

QC提供的动画效果非常强大，iOS下所有的动画效果都可以通过它实现。在用QC完成App的动效设计后，只需将功能模块的连接方式、各模块的详细参数告知工程师，工程师就可以用Xcode将其转化为对应的实现代码。

很多网友开始照着Facebook设计团队在YouTube上发布的教学视频《Building Facebook Home with Quartz Composer》学习QC的使用，但发现并不像想象中那么简单。因为QC不是一款专为移动原型设计而生的软件，繁杂的模块（Patch）让人眼花缭乱，有时为了构建一个移动App中常见的小模块都要大费周折，很多人觉得花费在QC上的时间太多了，高门槛让大多数人望而却步。

Origami进一步降低了QC的使用门槛

2014年初，Facebook重磅推出一款拥有超华丽界面的新闻聚合应用：Paper，它的面世让一个叫做Origami的软件进入了大家的视线（Origami在日文中是“折纸”的意思，所以它的Logo是一个千纸鹤）。在九个月的时间内，Facebook的产品设计师们用它给Paper原型设计出了许多复杂的动画：在一个屏幕内翻页和切换主题，滑动移动版块提取新闻，灵活的互动让用户仿佛感觉不到屏幕上玻璃的存在，富有诗情画意的3D效果更是给App增加了无限立体感。

实际上，Origami是一款Quartz Composer的插件，在安装QC之后安装Origami，会发现QC的界面变得更加友好，更加适合进行移动App的界面设计。

从2013年5月开始，Facebook的产品设计师们就开始开发这款QC插件。Origami的开发过程与Paper一同进行，随着Paper的功能越来越复杂，Origami也变得越来越强大，Paper上的每个动画效果都是由设计师首先在Origami上制作成型后，再由iOS工程师编写的。目前Origami的最新版本是1.2，在GitHub有它的源代码（https://github.com/facebook/origami）。