Origami Studio——Facebook設計部門更新的原型神器有多神？

01-31

使用Origami作為我的原型設計／動效軟體已經有一年多時間了，因為它的邏輯性和廣泛適用性所以即使有一些難度也堅持在學習使用。很早之前就知道Facebook設計團隊在規劃新版本，但是當新版本發布時，真的是比想像中更加驚艷。

新版本更名為「Origami Studio」，不再作為插件依附蘋果的Quartz Composer，而是Mac上的獨立應用（不用燒Mac了??）。除了延續之前的Patch連線的使用邏輯外，還增添了sketch聯動、調用基礎介面（如攝像頭！）等極為實用的功能，比之前的Origami上手難度也降低了一大截。

隨著移動互聯網發展，更多從業人員進入這個行業。原型設計軟體也是雨後春筍，不過身邊經常聽到設計師朋友說交互設計對於這種技能的掌握可有可無，對於這種想法我不能評價，但是放眼美國矽谷，編程已經成為一項設計師的基礎技能了，Google等大公司對於設計部門的職能劃分越來越趨向於統一而不是細分，而且操作過實際項目的設計師應該了解視覺稿和可用原型之間體驗的差別還是很大的，這種原型軟體或者說視覺化編程已經為設計師參與到更廣泛更便捷的互聯網產品開發全流程中提供了途徑，何樂不為？

至於在紛繁的原型軟體中用哪一個，每個人需求不同會有所差異。這次我把我用的OrigamiStudio做一個介紹和一個快速上手的教程，以供你在選擇時參考。

使用邏輯／設計師最熟悉的圖層

Origami Studio刻意追求與Sketch一致的使用邏輯，在畫面的右邊你的每個設計元素都是一個Layer（圖層），所有的交互動作在這些layer的基礎上開展。Origami Studio準備了非常實用的iOS和Material Design預置圖層，可以調用幾乎所有的基礎組件如甚至包括攝像頭、高斯模糊！也就是說你可輕易的實現一個具有錄像功能的交互原型，聽起來是不是很cool！

如果你們團隊都在使用Origami Studio，它也支持你在上面儲存自己產品的組件庫。

Origami Studio中最基本的元素就是Patch（模塊），通過連接不同功能的patch使你的設計可以交互。Layer本身也是一種Patch，首先你要把你的視覺稿切片也就是layer放到畫布上，如果你使用sketch，那麼你就可以很方便的複製元素到Origami Studio中，它會自動變成一個整體的切片。

接下來你就可以開始對layer進行交互操作了，在Patch Editor（模塊編輯器）中，你可以挑選你想要的interaction（交互動作）、animation（動畫效果）、behavior（反饋行為）連接到你的layer上。

下面做一個簡單的示例，企鵝FM上線的新功能——「跟我跑」跑步電台，點擊開始後有倒計時的動效，如下（gif圖請點開觀看）——

第一步-導入素材

這一步如果你用sketch的話就很簡單，在sketch裡面複製，再到Origami Studio裡面粘貼就自動在。如果你是用別的軟體做的，你需要先倒出切片，然後拖進來就可以了。

第二步-設定動作

在每個layer上都有一個「touch」，這個代表的是你將要用什麼手勢操作，裡面有點擊／向上滑動／向下滑動／雙擊／長按······在我們這個案例里，只需要點擊操作——tab。

選擇之後就會自動生成一個interaction patch，這也是所有的動作的第一步。

第三步-設定變換數值並連接到變化的因素

在我們的操作里，點按卡片之後，應該出現高斯模糊頁，那麼高斯模糊頁的 透明度 應該 從0到1 。所以在畫布中添加一個transtion patch（數值變化組件）——

然後設定start為0，end為1，然後把連接到「高斯模糊頁」的透明度上去——

這樣，點按卡片就會出現高斯模糊效果了。

第四步-添加動畫效果

單純的圖層變化十分生硬，我們的app在設計的時候一定會加入緩衝和動畫效果。在Origami Studio中有Pop Animation（流行動效）與Classic Animation（經典動效）等6種動畫patch可以選擇。只要把動畫patch加在interaction和transtion之間就可以了。

這裡要提醒大家，如果希望點按之後只有一次效果即可那麼你需要在interaction之後加上switch開關，不然的話每次點按，效果都會重複一次，但往往我們的App都是線性操作，需要加入switch來進行控制。

接下來的素材，按照這個流程一一設定就可以了。

至於你想要實現的效果需要使用哪些patch，你可以在他們的官方文檔中查看，在patch editor中，也都有注釋。大的分類有動畫／色彩／功能（包括調用攝像頭、麥克、瀏覽器···）／反饋效果／函數／邏輯／循環／數學／形狀／效用。

不要害怕，雖然他提供了很多patch，但你常用的比較固定，多用幾次就很熟練了，遇到什麼不會的你也不用著急看文檔，可以先看看官方示例庫裡面有沒有，實在不行到fb的群組裡面或者私信我也可以。

動態演示／與原生App無差別交互

當你在搭建你的原型時，你可以實時在你的手機上查看並進行交互，當你製作完成準備給leader與開發人員展示你設計的應用時，你可以發送到你手機上，你就可以很輕便的帶著ta去與所有人交流。這些操作只需手機中下載一個Origam Live。

忘了說一句，Origami Studio所有的相關應用都是全免費的（親親??FB??爸爸）。

超實用的輔助功能

錄屏：可以錄製並剪輯操作視頻
分享：你可以分享Oriagmi文件給朋友，這樣無需你在場ta也可以自行體驗原型
Origami Community：Origami Community是Origami Studio在Facebook上面的官方群組，你的所有問題都有工作人員為你解答，你也可以與其他使用者交流。
教程：官方網站上有許多實用教程，都是基於facebook和instagram的真實案例

取消了代碼導出功能

新版本發布後，Community中很多用戶在問為什麼之前備受關注的code export功能取消了，facebook design的設計師是這樣回復的：

在實際使用過程中我們自己用的次數也很少，同時本身他們導出的代碼能夠適用的範圍有限。我們相信真正能實現一個好產品的途徑並不是一鍵代碼，而是設計師與開發人員真誠的交流。同時我們並不是放棄這個功能，這一期沒有上線是因為我們在尋求更好的方式。

在之前的版本裡面，Origami是可以導出代碼的，但是需要開發人員裝Facebook的動效庫，推動這件事並不是只靠我一個設計師能夠推動的，所以我們要靠「真誠的交流」，以後還原的時候請彼此真誠一點。??其實我有給他們提意見，他們可以生成一張以時間軸為坐標的可視化圖表，感覺這樣開發人員看得更明白，希望他們可以早日開發出新的功能來幫助我們設計師與開發交流。

結語

很感謝FacebookDesign勇於在設計師的工具領域嘗試，我也始終相信彼此的初衷，工具對於效率的提升只是表象，珍貴的本質在於它能讓設計師的思維更新換代，而Origami Studio就是這樣一款讓設計師具有更加動態與縱深感思維的優質原型軟體。

我自己的案例涉及公司產品就不放出來了，結尾準備了一份官方教學視頻送給不能翻牆的同學們??

Getting Started！Origami Studio - 騰訊視頻 https://v.qq.com/x/page/k0350157dnd.html

Stay hungry，stay foolish，請多指教！

註：Origami安裝文件 https://share.weiyun.com/ff0c2eee0f873c534c10f4748a76186e