@Lenciel

Quartz Composer和Origami试玩

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

动态设计,也就是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 ComposerOrigami的组合自从Facebook的Paper推出之后在网络上被风风火火的讨论了一把,然后不久Facebook就开源了后者

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

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

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

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

Don't touch meDon't touch me

Tricky Bugs are tricky

最近接连遇到非常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,我们的蔡天王在写代码的过程中发现表单被填了怪怪的内容,如下图:

chrome auto fill

他检查了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:

1
2
3
4
5
6
7
8
9
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'
)

更多的相关信息(我希望你知道怎么翻墙),可以看看这里1,或者这里2,或者这里3