阅读时长：15分钟

适宜：交互设计师 UI设计爱好者

分类：软件技巧 原型设计

今日之应用需要更多的人性化，而应用的人性化，主要取决于应用的反馈和交互模式。通过iOS7，苹果意图为移动设计引入动效元素，从而达成更好的情感联系。那么应该如何让创意“动”起来呢？答案是使用Quartz Composer，结合Facebook Origami工具包。

Facebook Origami 为Quartz Composer提供了很多附加功能模块，能够快速的创建高保真模型，提供交互动画和动效。对于Quartz Composer,我们可以这样理解：这是一款图形化的编程工具，而不是像PS、Sketch那种绘图工具。

和其他原型工具，Quartz Composer的优势是什么？通过Quartz Composer，你可以快速的调整原型创作，迭代创意。

应用图标

Quartz的操作环境

1. Editor (编辑器，快捷键 ⇧⌘E)

这是Quartz最精华的部分，你的主要操作将集中于此。能够修改动效的具体数值。可以说，这里就是原型设计的“工作台”，在这一操作区域，你可以添加很多模块，然后进行连线。这里可以打开很多附加功能，比如说顶部栏的“查看器”和“参数”。

编辑器

2. Patch Library (模块库，快捷键 ⌘⏎)

原型设计就好比盖房子，框架完成后，就需要添砖加瓦。而模块就是这些砖瓦。只需要双击或者托移模块，就能放到编辑器中，然后连线，就能开始创作。

可用模块库

3. Parameters/Patch Inspector (参数，模块检测器，快捷键 ⌘I)

在模块检测器中，你可以修改特定模块的具体参数。例如bouncy animation （弹性动画）模块，你就可以修改Friction(摩擦系数)

4. Viewer (查看器，快捷键 ⇧⌘V)

能够预览你在编辑器中构建的作品

查看器

两个模块相连的操作体验很棒

一些优秀的资源

下面我将提供一些学习Quartz的优秀资源:

Origami简介

官方Origami案例

Facebook Origami官方小组

Quartz Composer 如何入门？

三分钟，Origami入门：构建一个iPhone弹性缩放动效

第2弹：带有弹性的滚动视图

第二部分

大家好，我又回来了。在第一部分中，我们基本了解了Quartz Composer。现在，第二部分，我将向大家展示如何设置基本模板，并提供几个案例，大家耐心看完本文，便能学会用Quartz Composer为产品添加动效。

应用的动效设计，就跟写PPT/Keynote一样，在于精而不在多。在开始设计之前，你应该对自己的产品有着充分的了解，能够清楚的知道用户需要怎样的动效，能够了解怎样的动效能愉悦用户。简单、易懂、愉悦、符合物理规律。这样动效就能触发用户的情感。伟大的产品和优秀的产品，差别就在于情感。

如何组织简洁的工作流程？

为了避免繁复，先坐下来，思考5分钟，琢磨一下产品加入怎样的交互动画。

为每一个交互动画都单独创建一个文件，这样会避免繁乱。

为每一个交互动画都单独创建一个文件

案例 #1.首先使用作图软件，导出一些图形素材。可以是高保真模型，也可以是很潦草的草图（当然，如果你能够用动效很清晰的传达意图，草图也没什么不可以）。如下图，我找到了3个素材：1张iPhone列表界面截图，1个加号，一个对号。

素材还包括了一些UI元素：加号、对号

基本文件和图像放置

下面开始添加基本模板，这里下载。打开后，你发现是一个iPhone屏幕模板。在蓝色Phone模块中，你可以修改参数（下图）。

左面和右边的圆角矩形，都是很常规的模块。中间的锐角模块（代表“图形渲染”）是一个宏模块，宏模块中包含很多基本功能。通过连接接常规模块与宏模块的对应功能，能够实现很多交互。你可以双击宏模块，看看里面。

这便是我们的基文件。你需要处理的，主要是Render in Image这个模块，双击进去。

此宏模块的主要作用是，添加背景颜色，重新渲染图像，这样便能减少错误。在模块检测中可以修改背景颜色。现在拖移图像入窗口。

通过拖移添加图像

很完美！模块中的列表立即自动填充。但是显示中我们可以看到加号和对号处于屏幕中间，有点怪。

Quartz中的坐标关系

Quartz的位置和坐标关系和我们日常使用的软件略有不同——以屏幕中心做为坐标轴的原点。但是不必担心，你很快就能掌握。屏幕中央便是原点，上为y+，右为x+。在模块检测中修改坐标参数。我把加号放在了x:268 y:260。多尝试尝试，你就能了解Quartz的坐标系统。

添加需要的模块，连线

我们要做的动效非常简单——当我点击加号的时候，加号消失，对号出现。我们可以通过缩放比例来实现：加号：1->0 对号：0->1。我们打开模块库（cmd + enter），需要以下模块：

Hit Area x 1(通过此模块可以定义可点击区域)

Interaction 2 x 1(定义可点击、拖移的对象)

Switch x 1 (点击是否可以打开/关闭)

bouncy animation x 1 (弹性动画)

transition x 2 (定义开始和结束值，让动效平稳转移)

下图我添加了所有的模块，连线也连好了。

具体连线

别忘了在模块检测器中修改弹性动画的参数。

最终产出的交互动画。