設計師必備交互神器ORIGAMI

 　　Facebook上周發布的獨立應用Paper今天正式上架蘋果App，該應用看起來相當簡潔，與眾不同，並沒有像Facebook的原有應用產品那樣充斥著各種按鈕和菜單。

　　Paper 的詩意現身，一個叫做Origami的工具功不可沒。Facebook 開發的這款圖像設計動畫合成工具，可以快速構建原型，並在不寫一行代碼的前提下完成對復雜動畫的合成和測試。自上個月發布後，全世界的設計師都可以免費使用。

　　正如 Paper 可能取代 Facebook 本身的 App 一樣， Origami 的出現可能會對 Photoshop 造成威脅。 這個工具讓設計師們給 Paper 原型設計出了許多復雜的動畫, 無論是在一個屏幕裡實現翻頁和切換主題，還是用滑動來移動板塊提取新聞，屏幕和手機永遠處於即時互動狀態，iOS7 的 3-D 效果更給圖片增添了無限立體感。

　　Origami 自九個月前由大名鼎鼎的 Facebook 產品設計師 Brandon Walkin 和 Drew Hamlin 開始，與他們的作品 Paper 同時進行，隨著 Paper 需要承載的功能越來越多 Origami 也在不斷完善其功能。事實上，在 Paper 上面看得到的每個動畫效果都是先由設計師們在 Origami 上成型後再由 Facebook 的程序員們在 App 上編寫的。

　　Origami的意思是折紙(聽起來是由日文翻譯過來的)。它是Facebook的設計團隊花費了9個月時間開發的工具，Origami是一款基於Quartz Composer的插件，安裝Origami之後，Quartz Composer的界面會變得更加友好，更適合於交互設計師操作。

　　在2013年4月份的時候，Facebook在推出Facebook Home的時候，曾力推Quartz Composer，希望它能夠成為一款設計師們都喜歡的高保真動態原型制作工具。然而因為QC的門檻依然很高，推廣沒有成功。

　　這一次，Facebook設計團隊免費公開Origami，這款插件讓QC的使用更加方便，希望能夠借此再度推廣QC。

　　下面簡單介紹一下Origami：

　　大多數設計師在向工程師講解設計想法的時候，都是通過靜態原型圖來完成的，但是現在APP的趨勢是：動態的設計越來越多，設計師們需要更好的交互設計工具，Origami應運而生。

　　怎樣安裝：

　　①你需要一台Mac

　　②安裝Quartz Composer

　　③安裝Origami

　　除了第一條，後面兩個都可以在Origami官方頁面(facebook.github.io)下載到。

　　Origami提供了哪些自定義的控件(Patch)：

　　Switch(開關)：開關就是開關

　　Scroll(滾動)：用來滾動一張圖片

　　Bouncy Animation(彈性動畫)：通過彈簧控制變化參數的動畫

　　Classic Animation(傳統動畫)：傳統的曲線型緩動動畫

　　Transition(轉場動畫)：輸入0-1的數值，輸出開始和結束值

　　Color Transition(顏色轉場)：在兩種顏色間淡入淡出

　　Image Transition(圖像轉場)：兩張圖片間淡入淡出

　　Interaction 2(交互2號)：讓你可以點擊某個層

　　Layer(層)：把圖片顯示在屏幕上

　　Text Layer(文字層)：把文字顯示在屏幕上

　　Button(按鈕)：可自定義標簽和背景，連上“交互2號”使之可以響應點擊

　　Hit Area(可點擊區域)：同樣也要連“交互2號”

　　Phone(手機)：在屏幕上畫一個手機，iPhone、安卓、WP都有

　　Timer(定時器)：設定一個時間，到點了定時器會改變狀態

　　Counter 2(計數器2號)：從一個數值增減到另一個數值，用來實現for循環的

　　Origami給QC帶來哪些變化：

　　①支持Retina顯示器

　　②拖進來一張圖片的時候，自動在外面包一個層

　　③在參數窗口中支持鍵盤上下鍵切換

　　④被禁用的控件顯示為灰色

　　⑤讓查看窗口原生全屏支持

　　⑥當分流器被刪除後，連接線保留

　　⑦其他bug修復

　　好了，趕緊下載一個試一試吧。下載完成後會跳轉到樣例下載頁面，通過4個樣例你可以學習到通過Origami制作出很多神奇動效的方法。