这篇不是教程，不会讲述怎么安装需要的软件，怎么用它们来做软件原型。只是记录分享一下我对这套东西的感受和评价。

动态设计，也就是Motion Design或者是Motion Graphic Design其实已经火了很长一段时间了：你只要经常去 Dribble 上逛就可以看到很多非常优秀的作品。国内的团队经过一段时间的学习和追赶，目前这方面的水平也很不错：从去年开始，BAT 的大多数 App 的 splash 或者 tutorial 都已经不再是静态的图片而是动态图了。

当然，除开看起来更加狂炫帅富屌的 splash、tutorial，本座看重动态设计的原因其实是它在原型阶段的作用：如果 UX 的团队会制作动态图，就能展示软件实际的操作流程，效果比传统的需要脑补的静态 Wireframe 要好太多。

不过从本座开始关注这种设计方法到现在，主流的动态设计流程一直是先在 PS 里面做静态资源，然后在 AE 里面导入静态资源做动画，最后生成 mp4 格式视频，然后配合 QuickTime 或者别的什么软件生成 gif（比较详细的描述可以看看这篇文章)。

这种方式对本座来说上手就略显太重，换句话说，不是财大气粗的 BAT，需要考虑：

1. PS+AE 很贵
2. 会这两个东西的 UX 人才很贵

接下来事情似乎有了转机：Quartz Composer和Origami的组合自从 Facebook 的 Paper 推出之后在网络上被风风火火的讨论了一把，然后不久Facebook就开源了后者。

在有 Origami 之前，本座就看 Facebook 的设计主管说他们内部用 QC 做原型设计就去学习了一下，结果感觉实在是云里雾里。这次又了 Origami 之后，经过几个小时的试玩，我得到的感受如下。

首先，这套免费的工具非常给力：除开不要钱，不难用之外，给力主要是因为 QC 的 patch 设计带来的高度可重用性：其实 Origami 从根本上来说就是一堆 patch 而已。

其次，这套工具也称不上「photoshop for interaction design」。你仍然需要使用 PS（或者 Sketch 等等做图的软件）做上游，把静态资源做好，然后导入到 QC 里面完成动态效果。这种”设计-切图-导入-动态化”的模式其实还蛮像一度风靡网络的 flash 的制作流程。

最后，如果你是程序员，习惯了写 CSS/JS 来控制界面，要适应 QC 的图形化编程（类似 VB 那样先选控件再改属性然后绑事件）还是蛮蛋疼的。比如它里面的设定偏移量来定位元素的方式，就让本座觉得用起来非常虐心。

最近接连遇到非常 tricky 的 bug。

首先是跟CORS有关的。话说自从 google 被墙，我们使用了 google map 或者 google font 的网站就被客户不停投诉各种打不开。本座只好去找国内可用的 CDN，居然发现360的CDN不但有常用的 jquery 库和 fontawsome 这些资源，还对 google font 做了镜像，于是就用了它。

结果用了 CDN 之后，fontawsome的图标在 firefox 下显示不正常。curl 了一下，发现 360 的基友们没有正确添加”Access-Control-Allow-Origin”的 Header：这就使得像 Firefox 这样的默认不支持 CORS 的浏览器拒绝加载不在网站自己域名下的 CORS 资源。

把 fontawsome 切换到staticfiles的CDN，问题解决了。

接下来的一个更加 tricky，我们的蔡天王在写代码的过程中发现表单被填了怪怪的内容，如下图：

他检查了 js 和 html，发现这些值不是我们处理表单的时候填的，WTF？

专治各种疑难杂症的小弟拿到这个 bug，首先怀疑的是浏览器那些自动填表的插件，比如LastPass，结果用一个禁用了所有插件的 Chrome 重现了，WTF？

于是我尝试着把form和里面的input声明成autocomplete="off"的，结果仍然能重现，WTFFFF？

但是试过了几下变换表单里面的项的位置发现 bug 的行为模式是：

1. password 这个 input 总是会被用户的密码填写
2. password 上面那个 input 总是会被用用户的用户名填写（哪怕那个 input 是别的）

于是就感觉是 Chrome 的 password mananger 在干坏事了。google 了一下，发现这么个消息：

Chrome 34 will now offer to remember and fill password fields in the presence of autocomplete=off.」 That means that if a website turns off automatic password collection, Chrome will offer to do it anyway if password manager is enabled.

古德，瓦力瓦力古德。看了如果一个网站你选择了「记住密码」，Chrome 的密码管理器就会被这个域名下包含了$('input[name=password]')的表单激活。并且它居然蠢到直接去找password上面一个 input 来填入用户名，how convenient…

要 fix 这种行为只能通过在出事的表单里面加上占位用的input来欺骗浏览器。比如我们是在 django 里面使用django-crispy-form生成表单，就可以重载它的 Layout：

    self.helper.layout =  Layout(
        HTML('<input style="display:none" type="text" name="fakeusernameremembered"/><input style="display:none" type="password" name="fakepasswordremembered"/>'),
        'name',
        'email',
        'phone',
        'qq',
        InlineCheckboxes('user_permissions'),
        'password', 'confirm_password'
    )

更多的相关信息（我希望你知道怎么翻墙），可以看看这里¹，或者这里²，或者这里³。