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

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

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

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

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

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

好的，廢話不多說(shuō)，看干貨。

初步介紹

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

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

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

添加資源

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

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

圓角的是普通模塊。

藍(lán)色的是輸出模塊，會(huì)在 Viewer 中看到。

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

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

圖層模塊

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

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