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

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

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

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

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

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

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

初步介紹

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

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

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

添加資源

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

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

圓角的是普通模塊。

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

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

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

圖層模塊

圖層是一個顯示類模塊，可在屏幕上顯示。你可以設(shè)置它的 X/Y/Z Position，你可以雙擊輸入數(shù)值，也可以長按后左右拖動變更數(shù)值。同時還可以選擇 Anchor Point（錨點）是左上開始還是居中等。

你也可以點擊 Mask Image，或者改變不透明度，縮放等。