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

最近大熱的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ì)師開始尋找簡(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è)工具開始火熱起來(lái)了。

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

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

初步介紹

打開 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)）是左上開始還是居中等。

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

按住 command + enter 鍵，可以查看 Quartz Composer 的各種庫(kù)，包括了 Origami 庫(kù)。

選擇 Interaction 2號(hào)，交互2號(hào)。我們可能會(huì)奇怪這個(gè)「2號(hào)」怎么來(lái)的，但是你搜索的時(shí)候就明白了，QC 本身就有一個(gè) Interaction，就好比在 Mac 系統(tǒng)里，你復(fù)制一個(gè)同名同類型的文件，為了避免重復(fù)，就變成了「交互2號(hào)」會(huì)自動(dòng)加上（2）一樣。

交互2號(hào)的含義是： – Down 點(diǎn)擊，鼠標(biāo)按下。 – Up – Tap 輕拍，輕觸 – Drag 拖拽

如果需要圖的過(guò)渡變化，就需要用到過(guò)渡模塊了。

過(guò)渡模塊

取一個(gè)0-1之間的數(shù)值，并將其轉(zhuǎn)換為由開始值和結(jié)束值之間的范圍內(nèi)的一個(gè)數(shù)值。通過(guò) Progress 輸入口數(shù)字的變化，輸出一個(gè)在 Start Value 和 End Value 之間的對(duì)應(yīng)值。

在這我設(shè)置的起始值為1，結(jié)束值為 0.4，和官網(wǎng)稍稍有些不同。官網(wǎng)默認(rèn)是看到縮放了的居中的圖片，而我設(shè)置的是默認(rèn)在有圖有文字的頁(yè)面，這也方便各位去琢磨對(duì)比過(guò)渡模塊的用途。

添加動(dòng)效

在圖片縮放的時(shí)候，其實(shí)有一個(gè)動(dòng)效，Pop 動(dòng)效。 現(xiàn)在就讓我們來(lái)添加這個(gè)動(dòng)效。

有個(gè)快捷方式是，你鼠標(biāo)懸在圓點(diǎn)處，然后按鍵盤上的 A，就可以出來(lái) Pop Animation 了。

但是問(wèn)題仍然在，圖片縮放后無(wú)法保持縮放后的狀態(tài)，所以我們需要一個(gè)開關(guān)進(jìn)行狀態(tài)切換。

Switch 開關(guān)

一個(gè)開關(guān)可以記住一個(gè)狀態(tài)。它工作的原理和點(diǎn)燈開關(guān)有些類似，一開始是關(guān)著的，如果你按一下，他就變成開了，然后你再按一下，就變成關(guān)了。舉個(gè)例子，如果你想輕觸一個(gè)圖片時(shí)，它會(huì)縮小而且當(dāng)你松開手指的時(shí)候，他會(huì)保留這個(gè)狀態(tài)。

Flip 端口對(duì)對(duì)稱式的交互式很有用的，比如說(shuō)你重復(fù)點(diǎn)擊一個(gè)圖片，讓它從縮放從小到大。舉個(gè)例子，在一個(gè)編輯窗口，你可能會(huì)有一個(gè)編輯按鈕來(lái)打開這個(gè)開關(guān)（在窗口動(dòng)效）以及在窗口中的「取消」和「確定」按鈕來(lái)關(guān)閉這個(gè)開關(guān)。

快捷鍵：Shift + ??

添加過(guò)渡

添加 Chrome 圖片（圖片名叫 Chrome，并不是指 Chrome 瀏覽器）

為含有評(píng)論的 chrome 圖片圖層添加透明度的過(guò)渡，并將過(guò)渡模塊的 progress 輸入口與 Switch 模塊的 On/off 連接起來(lái)。

OK，大功告成，第一個(gè)視頻里的 Demo 已經(jīng)完成了。另外在說(shuō)一句的是 QC 里的圖層順序。

Layer Order 圖層順序

數(shù)字越大，優(yōu)先級(jí)越高，越靠前。

開始把玩

最后，下載一個(gè) Origami Live，把 iPhone 和 Mac 連接起來(lái)。這樣，你就可以在盡情的玩耍了。

說(shuō)下@大蔚陳 的使用體驗(yàn)：

無(wú)需網(wǎng)絡(luò)，就可以在移動(dòng)端上展示，并且移動(dòng)端與 QC 的 Viewer 的交互是同步的。

想想一下這個(gè)場(chǎng)景：

會(huì)議室坐著老板，研發(fā)，運(yùn)營(yíng)，銷售還有一系相關(guān)人等。

你開始慷慨激昂地演講，談市場(chǎng)，說(shuō)前景，講情懷，簡(jiǎn)直是口吐蓮花到口舌生瘡。

可因長(zhǎng)期畫大餅，兄弟們都已經(jīng)餓的不行，昏昏欲睡，你改變世界的 idea 居然無(wú)人關(guān)心！

「哎，世人笑我太瘋癲，我笑他人看不穿」，你輕閉眼睛笑了笑，然后「咳咳」干咳兩聲「給大家展示下高保真交互原型」。

說(shuō)時(shí)遲那時(shí)快，Mac 早已連上投影儀，Quartz Composer 也已就緒，在1秒鐘之內(nèi)把 iPhone 6 Plus 數(shù)據(jù)線接上電腦…

Duang！Duang！Duang！

動(dòng)效如絲般順滑，又如墨水滴入水中蕩開，激起會(huì)議室加起來(lái)好幾百歲的人內(nèi)心的漣漪。

這時(shí)，老板說(shuō)話了「扶我起來(lái)試試」，老板在手機(jī)上把玩著，幕布上都仿佛有一雙眼睛散發(fā)著光芒，越發(fā)專注…

「不錯(cuò)，就這么做！」老板一錘定音的同時(shí)仍舊把玩著。

「呃，這個(gè)，不好實(shí)現(xiàn)吧，還需要調(diào)那么多參數(shù)…」黑框眼睛近視近500°的滑板鞋程序猿臉上有些難色。

「沒(méi)關(guān)系，哪能讓你們那么辛苦。我把所有參數(shù)都調(diào)好了，你直接用就可以」，你輕輕點(diǎn)了一下“Code Export–>iOS”，小伙伴們頓時(shí)都驚呆了！

「Facebook 的動(dòng)畫引擎 POP 是開源的，這里的動(dòng)效都可以實(shí)現(xiàn)」你又順勢(shì)補(bǔ)了一句。這時(shí)大家開始無(wú)情地贊美你，你的才華仿佛橫溢到滿地流淌…

Origami Live 充分利用了全屏，即使你在接電話時(shí)打開，也可以看到正常效果，而不是頂部有個(gè)通話條。

正經(jīng)點(diǎn)地說(shuō)，也有缺點(diǎn)。

不比用 Xcode 的 Auto Layout 可以適配各款機(jī)型，Origami 還是需要選擇一個(gè)機(jī)型，然后用此機(jī)型打開 Origami Live 進(jìn)行演示。否則你就會(huì)看到錯(cuò)亂的布局。iPhone6 的機(jī)型，在 iPhone5 上打開 Origami Live 是會(huì)顯示不完整的，如下圖：

另外對(duì)設(shè)計(jì)師與工程師之間的合作，從已有的功能上來(lái)看，設(shè)計(jì)師可以把展現(xiàn)層調(diào)試好，然后交予工程師進(jìn)行開發(fā)，這也可以讓工程師更專注于程序邏輯的實(shí)現(xiàn)。