基于JavaScript的原型工具：Framer.js
Framer.js 是一个可交互原型框架，基于JavaScript，较为诱人的有以下几点：支持手势、动效、状态、基于网页、容易实现、可在任何设备上浏览。最近，我们用Framer.js制作了 Aurora的应用原型。
Framer是一个开源项目，一个基于JavaScript的原型工具，专为设计师打造。现在的应用更注重交互设计，它可以让你效率更高。项目地址http://www.framerjs.com，使用Framer包括4个步骤：
- 用Photoshop设计原型图
- 用Framer.app从Photoshop中导出设计图
- 在app.js里写视图展示及交互代码，可以加各种特效
- 用浏览器打开index.html文件就可以查看和调试了。
Framer项目的代码结构是这样的：
/ app.js //【重要】用来写视图和交互代码 framer/ //Framerjs的框架，app.js里用到的功能都是它提供的 framer.js //framer核心文件 framerps.js //根据views.app.js生成frame对象 views.app.js //根据psd文件的结构导出的文件，用来记录图片属性和图层关系(用json格式表示)，app.js中要用到 images/ //从photoshop导出的图片都在这里 index.html //预览时的首页
Framer可以说是由三部分组成：
图片导出工具
这里从photoshop导出设计图。实际上是使用了Adobe ExtendScript脚本。Adobe ExtendScript脚本语言可以操纵photoshop执行一些自动化操作。Mac下作者用Framer.app包装了脚本代码，windows下则直接提供了脚本(http://www.framerjs.com/static/downloads/FramerPS.jsx.zip)
导出工具不仅导出了图片，还生成了一个上面目录结构的完整工程，用浏览器打开index.html就可以了。
在原型设计的过程中，可能会需要多次导出图片，而导出工具不会覆盖app.js文件，所以不用担心你写的代码会被覆盖。它只会在没有文件的情况下才自动生成。
JS类库
这里提供了View(视图),animation(动态特效),event(事件绑定)等类，可供使用者调用。详见最后一部分介绍，或直接至官网查看。
app.js
Framer默认生成app.js文件。在使用Framer的过程中，除了用Photoshop设计原型图之外，这里也是花时间最多的地方。前面准备的素材就看你怎么组织了。视图的创建、切换、动态特效、手势、事件绑定，都可以在这个文件里完成。
Framejs框架介绍
它包括View(视图),animation(动态特效),event(事件绑定)。下面的代码可以在线修改，马上就能看到效果。
View：
基本视图 http://www.framerjs.com/editor/index.html?path=lessons/views.js
切套视图 http://www.framerjs.com/editor/index.html?path=lessons/hierarchy.js
其他视图类型 http://www.framerjs.com/editor/index.html?path=lessons/viewtypes.js
特效：
http://www.framerjs.com/editor/index.html?path=lessons/animation.js
支持的手势：
https://medium.com/building-potluck/2e405d50b600
事件绑定：
http://www.framerjs.com/editor/index.html?path=lessons/events.js
结语：
Framer拉近了设计师与开发者的距离，从另一个层面来讲，我觉得设计师也在逐渐侵入开发者的领地，要抢饭碗的节奏。Framer目前只侧重于前端展示，如果加上数据处理，那么一个完整的Html5的应用开发框架就成型了。