設計師新寵！交互神器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?上編寫的。

神器推薦：
《PHOTOSHOP玩膩了！這10個圖形編輯神器你知道嗎？》
《讓網頁舞動起來！25個免費的視差滾動插件》
《高端干貨！PHOTOSHOP實用腳本大合集》

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

Origami官方網站下載頁面：http://facebook.github.io/origami/
如果不能訪問Facebook，請在這里下載：微盤下載

在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制作出很多神奇動效的方法。

原文地址：mued.sohu
分享人：@陳澤濤

【優設網 原創文章 投稿郵箱：2650232288@qq.com】
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量63萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：