交互设计工具的选择心得

"QuartzComposer并没有传言中那么方便，FramerJS更令人惊喜。"

最近在负责一款SpyCamera的设计和交互，因为本身这款软件是一个非常小众而又轻量级的小应用，在众多竞争者中除了核心的功能安排外，能够进行差异化设计的就只有视觉设计和交互设计了。 在视觉设计这部分我把ICON和UI视觉全部重构了一遍，在重构的过程中由于需要去贴合安卓5.0的设计规范来获得谷歌一定的推荐流量，所以把整个视觉设计的相对轻、薄、简，这时一个优秀又有特色的交互就显得更有吸引力了。

加之之前看过一些关于QuartzComposer的介绍，总算找到一个机会好好花点时间来琢磨一下交互设计的实现部分。 首选当然是已经让我激动已久的QuartzComposer ，上手还真不轻松，在网上搜集了一些资料，然后一步步的安装和尝试。

资料传送：

官方资料 (图片演示和DEMO文件下载)

CSDN较为详细的介绍和说明 (比较细致的中文说明)

苹果官方的指导文档  QuartzComposerUserGuide.pdf

豆瓣上的新手上路

Github上的新手上路  quartz-composer-and-origami-tutorial-button-animation (英文)

知乎上 几款 高保真交互设计软件的对比

关于QC，网上好评很多，绝大部分都在赞赏这种模块相互链接的无须代码基础的操作方式以及可以导出代码到 ANDROID,IOS,HTML5 的功能上。 但是实际操作过程中发现，导出代码并没有实际价值，无论你的项目做了什么样的内容，最终导出的文件都是一样的。

下面是导出到IOS的代码：

<!--StartFragment -->
#import "ViewController.h"
#import &lt;POP/POP.h&gt;
#import &lt;POP/POPLayerExtras.h&gt;@interface ViewController ()
@end@implementation ViewController// Utilities

而且在学习过程中，入门门槛高到不行，虽然不用去学习怎么编程，但是需要记住大量的模块分别属于什么，分别有什么用处，而且还有他们对应的英文单词。 想要通过这些模块相互的组合以及叠加来设计出优秀的交互效果，想必是要花一番功夫( 在熟记各种单词上 )。而且当你界面元素多一点，想要做一些精密一点的动效的时候，恐怕看到这个界面你就要蒙Bi了！ 什么功能都没有添加的时候，只是把需要做交互效果的元素列出来，就已经惨不忍睹了。

{QC.jpg}

然而即使如此，也并没有帮助你解决代码实现这方面的问题，只是花了很多时间去设计了一个可以交互的好看一点交互效果。  如果是这样的目的，那替代品就太多了( 最简单的恐怕要属FLASH+代码片段 ) 虽然已经花了一些时间来了解QC，但是如此之陡的学习曲线还是让我喜爱无能，还是看看其他的交互软件罢。

相类似的Form也被我PASS掉了。 虽然功能强大，但是多数没用，需要熟记大量功能效果和单词，果断放弃。

QC之后，第二个接触的是Framer Studio 这是一款在官网售价 $ 79.99 的 需要一定编程基础的 实时可视化交互设计软件,前身是Framer.js，售价作为一款小软件，谈不上贵也不便宜。

最吸引我的点还是要数他的 PSD , Sketch 文件的导入功能，有一个需要注意的问题是，Framer的导入要求最小单位是 Group 也就是说无论你是个什么图形还是智能对象，想要被Framer导入进去，必须要给他添加一个分组，而且你需要对他进行一个非常好记，标识明确的组名，看看下面图中 homeguidelinelayers1.XXXXX  这里的 XXXXX就是我的组的命名，如果随便起一个名的话，这里可就悲剧了。

官网： framer.js

由于官网上的教程简单明了，整个软件的上手难度也比较低，虽然需要学习一些语言，而且还需要一定的手动写代码。 好在我有一定的网页设计和前端开发基础，所以这种程度的代码还是比较容易接受的。

把PSD导入到Framer里面，最方便的地方在于我不需要去找元素的位置，程序默认会按照PSD的定位写好，这一点让我很愉快。  反过来，QC是需要每加一个模块都需要手动去调整数值，非常让人头大。

{framer.jpg}

总体而言，Framer算是一款比较不错的备选，如果没有门槛更低，操作更简单的软件，接下来就要好好学习和尝试一段时间了。

第三款软件：Pixate

http://www.pixate.com/

这款软件也是一个让人有不小惊喜的软件，友好的软件界面，清晰的结构，直接在手机上测试等等。 同时这也有一些不爽的点，比如说WEB端的编辑器，虽然说这样跨平台，但是也意味着必须联网才可以进行工作。

其次测试不能在网页端进行，也就是说要一边设计交互一边用自己的手机不停的刷，来回倒腾挺让人烦的。 特别是当你的手机APP打开出现问题，或是一直打不开的时候，你恐怕会有杀人的冲动。