在交互设计的工作中一直在寻找合适的移动端原型设计工具,在华为大家用的基本都是Axure,不论设计什么平台。Axure在网页原型制作上比较方便,但现在也遇到了问题,比如对于响应式的设计没有解决方法,类似Webflow的在线工具可以实现响应式,但效果非常简单。
至于移动端的原型,在工作中做的不多,Toolbar已经算比较大的项目了,也是用的Axure,效果不好。后来试了Fireworks和Illustrator,虽然可以画的很精细,但是没有交互效果,只能算是Wireframe,不是Prototype。
在网上逛的时候了解了几个在国外很流行的原型工具:Form、Framer.js、Pixate以及Origami。Framer是一个需要写代码的工具,虽然代码比较简单,但学习成本也挺高的,但是它号称可以画出任何原型界面,在手机浏览器中就能查看非常方便,可是要99美元购买,想到还要学习一些代码,就暂时不考虑了。Pixate是一个图形界面的原型设计软件,可以在Android和iOS设备中实时查看效果,学习起来是最简单的,软件下载是免费的,云空间需要购买,但只是制作一个原型的话不需要。
Form和Origami很像,都是模块加连接线的设计模式,好像在被Google收购之后就免费了,Pixate也是Google旗下的,它们两个都在Google Design的网站上被推荐。在了解Origami之前我本来是打算学习Form的,也做了一点练习,但发现它们的教程讲的不是特别详细,有些弄不懂,希望Google能尽快的完善这个工具。
其实Origami很早就出现了,是Facebook在Quartz Composer基础上做的,之前在知乎上看到有关介绍,感觉学习起来挺麻烦的,就丢到一边了。最近又在Medium上看到了一篇文章,说的是Facebook为Origami拍摄手模的事情,他们拍了好多张手模的照片,放在网上免费下载。这篇文章让我又对Origami产生了兴趣,于是去了他们的官网看了一期基础教程,发现比Form好用很多,首先就是Origami可以在Mac上进行实时预览,很像一个iOS模拟器,一个手拿手机的图片上显示你制作的内容,效果非常棒。其次就是Patch的命名更直观,像Scroll、Pop Animation等,很容易理解。于是马上下载,开始我的Origami学习之旅。
Origami的基础教程挺详细的,在网站上都有,还在Facebook上有个小组,非常活跃,学习资源还是挺多的。另外,Facebook还专门做了iOS 9的设计模板,在Medium成立了Facebook Design专页,让我对Facebook的设计部门充满了好感。