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

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

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

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

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

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ū)動的或者當它被調(diào)用時執(zhí)行的可重復(fù)使用的代碼塊）。你在這個 View （視圖）里，還可以包含其他的 View（視圖），實在不理解，就把他當做圖層組吧。你可以雙擊進入詳細編輯，在工具欄中點擊向上箭頭哪個按鈕（底部寫著 Edit Parent）可以返回上一層。

圓角的是普通模塊。

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

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

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

圖層模塊

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

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

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

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

交互2號的含義是： – Down 點擊，鼠標按下。 – Up – Tap 輕拍，輕觸 – Drag 拖拽

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

過渡模塊

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

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

添加動效

在圖片縮放的時候，其實有一個動效，Pop 動效。 現(xiàn)在就讓我們來添加這個動效。

有個快捷方式是，你鼠標懸在圓點處，然后按鍵盤上的 A，就可以出來 Pop Animation 了。

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

Switch 開關(guān)

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

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

快捷鍵：Shift + ??

添加過渡

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

為含有評論的 chrome 圖片圖層添加透明度的過渡，并將過渡模塊的 progress 輸入口與 Switch 模塊的 On/off 連接起來。

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

Layer Order 圖層順序

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

開始把玩

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

說下@大蔚陳 的使用體驗：

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

想想一下這個場景：

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

你開始慷慨激昂地演講，談市場，說前景，講情懷，簡直是口吐蓮花到口舌生瘡。

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

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

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

Duang！Duang！Duang！

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

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

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

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

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

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

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

正經(jīng)點地說，也有缺點。

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

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