基于JavaScript的原型工具：Framer.js

Framer是一個開源項目，一個基于JavaScript的原型工具，專為設計師打造。現在的應用更注重交互設計，它可以讓你效率更高。項目地址http://www.framerjs.com，使用Framer包括4個步驟：

1. 用Photoshop設計原型圖
2. 用Framer.app從Photoshop中導出設計圖
3. 在app.js里寫視圖展示及交互代碼，可以加各種特效
4. 用瀏覽器打開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的應用開發框架就成型了。