Mac可交互原型設計工具(Origami)

Origami for mac是一款基于Quartz Composer的交互原型設計工具，這款工具可在無需編程的情況下輕松實現與設計原型進行交互。并且Origami無需編程背景，新發(fā)布的Paper從項目設計之初所有的原型設計都是采用Origami來實現。

功能特色：

產品設計中最重要的環(huán)節(jié)是對于想法和細節(jié)的把握，之前只能使用白板或手繪想法，現在Origami能夠幫助快速實現并驗證這些想法。當團隊感覺良好以后，我們會傳播給公司中更多的人，進而改進產品�！�…在使用 Origami 之前，我們需要做大量的靜態(tài)圖來展示想要實現的效果，現在我們可以拿一個和最終產品一樣使用方式的原型來做展示。

Origami的開發(fā)團隊鼓勵開發(fā)者發(fā)揮想象力來創(chuàng)建更多的交互案例，團隊也考慮將Origami所設計的原型跑在平板或者移動設備上，目前在其 Facebook 社區(qū)中已經有大量的第三封案例可以提供下載學習，也許 Origami 會帶來應用設計的革新，引發(fā)“交互設計開源”的潮流，讓我們拭目以待

安裝使用說明：

安裝分三步：

（1）請確保Mac OS X系統(tǒng)版本在10.8以上；

（2）安裝Quartz Composer；

（3）安裝Origami。

安裝QC和Origami都可以在Origami的介紹頁面找到下載鏈接：http://facebook.github.io/origami/。頁面提供的QC的安裝地址因為在Facebook服務器上，所以可能需要“”。如果從蘋果官網下載QC的話，需要使用開發(fā)者賬號。安裝過程很簡單，就不詳述了。

Hello Origami

打開Quartz Composer，選擇新建一個空模板，我們來看一下主界面的功能（如圖1所示）。

首先，我要解釋一下“模塊”（Patch）這個概念。圖1中間的藍色“Clear”就是一個模塊，它的功能是將整個屏幕清空刷新成某個特定顏色。

在QC中，有400多個模塊，每個模塊實現一個小功能，使用QC就是將這些模塊像搭積木一樣拼裝在一起的過程。所有的模塊都可以在主界面頂部工具欄最左側的模塊庫找到。

QC中模塊分為以下多種。

圓角是普通模塊。

四角是尖的模塊叫“宏”（Macro），可以雙擊進入詳細編輯（點擊工具欄Edit Parent返回上層）。

藍色的是輸出模塊，會在查看器（Viewer）的畫布中看到。輸出模塊的右上角有個數字，表示這個圖層的順序，數字越小的圖層越在下面，下面的圖層會被上面的蓋住。

紫色模塊則代表該模塊內部還有其他的子模塊。

模塊的左側和右側分別有一些點，左側的是輸入接口，右側的是輸出接口。將A模塊右側的輸出點連接到B模塊左側的輸入點，即可完成將A的結果傳遞給B的任務。

接下來，我們做一個最簡單的Demo，向世界問個好。

點擊主界面頂部工具欄最左側的Patch Library（快捷鍵：Command+回車，經常用到請熟記），在搜索框輸入“Text Layer”（不區(qū)分大小寫），回車�？梢钥吹疆嫴忌隙嗔艘粋�模塊，這個模塊的作用是在屏幕上繪制一個顯示文字的層。

在Text Layer左側的輸入口“Text”上雙擊，將文字改成“Hello Origami”。

點擊主界面工具欄上的“Viewer”（快捷鍵：Command+Shift+V，也經常用到），可以看到黑色的背景上出現了熟悉的畫面。

搞定！我們已經用Origami完成了一個最簡單的Demo，不過似乎沒有太多成就感呀！別著急，我們再來一個稍微復雜點的，這次我們做一個帶手機界面，并且可以交互的。

1. 首先，我們需要三個模塊來搭建基本的手機框架：Phone、Phone Dimensions、Layer Group。Phone會在屏幕上繪制一個手機，Phone Dimensions控制手機的類型（iPhone/Android Phone/iPad）和手機的朝向（豎的/橫的），Layer Group是一個宏，用來承載屏幕中需要顯示的內容。
2. 將這三個模塊按照圖2的順序依次連接，完成基本框架搭建。此時打開Viewer，發(fā)現已有一個手機顯示了，不過屏幕中間沒有任何內容（隱藏的快捷鍵：按“F”鍵可讓手機屏幕鋪滿全屏）。

3. 接下來我們制作手機屏幕上的內容。雙擊Layer Group，進入內部。在畫布上添加四個模塊（Interaction 2、Fill Layer、Switch、Color Transition），并按照圖3的方式相連。將Color Transition的Start Color和End Color設置為黑色和白色。

4. 搞定。打開Viewer預覽一下，點擊屏幕時，背景色會在黑色和白色之間切換。

恭喜你走進了Origami的世界。