工具介紹，最近大熱的Origami 2.0介紹及教程

來源：未知作者：大蔚陳學習：3450人次

最近大熱的Origami 2.0，同學們應該都有所耳聞了，今天@大蔚陳帶來一個入門的介紹+教程，附上使用體驗，感受下

隨著互聯(lián)網(wǎng)尤其是移動互聯(lián)的急劇發(fā)展，設計變得更受重視，于是越來越多的產(chǎn)品經(jīng)理和設計師開始尋找簡單好用的工具。

2014年可謂是原型工具爆發(fā)的一年，各類工具層出不窮。我也嘗試用過很多種，從代碼級別的 Framerjs，到 Quartz Composer，當然我最喜歡的其實還是 Xcode 和 Keynote。

Origami 是 Quartz Composer 的一個庫。Facebook 的設計團隊在設計過程中就是用它來進行設計的。前不久 Origami 2.0 的發(fā)布，大大降低了學習難度，而且還可以在手機上實時交互，讓這個工具開始火熱起來了。

Facebook 官方也發(fā)布了 Origami 2.0 的樣例和教程，本篇主要源自于 Introduction to Origami 的視頻教程，所以我自己做了一遍，另外增添了一些內(nèi)容。

好的，廢話不多說，看干貨。

初步介紹

打開 QC，創(chuàng)建新 Origami File。

左邊是編輯區(qū)，右側是 Viewer，可以點擊 Resize to third 三分之。

在編輯區(qū)的右側有 Viewer Patch（模塊）

添加資源

先簡單介紹一下模塊的概念。QC 中模塊分為幾種：

方角的，四角是尖的稱之為 Macro（宏），可以雙擊進入詳細編輯，類似于程序中函數(shù)的概念（函數(shù)是由事件驅(qū)動的或者當它被調(diào)用時執(zhí)行的可重復使用的代碼塊）。你在這個 View （視圖）里，還可以包含其他的 View（視圖），實在不理解，就把他當做圖層組吧。你可以雙擊進入詳細編輯，在工具欄中點擊向上箭頭哪個按鈕（底部寫著 Edit Parent）可以返回上一層。

圓角的是普通模塊。

藍色的是輸出模塊，會在 Viewer 中看到。

紫色模塊則代表該模塊內(nèi)部還有其他模塊。

添加資源很簡單，只需要把對應的圖片文件拖到 Editor 區(qū)域中即可，會自動創(chuàng)建一個圖片模塊以及圖層模塊。