Origami Mac版

Origami Mac版是一款Mac OS平臺上基于Quartz Composer的交互原型設(shè)計工具，軟件功能強(qiáng)大，操作簡單。Origami Mac版這款工具可在無需編程的情況下輕松實(shí)現(xiàn)與設(shè)計原型進(jìn)行交互。并且Origami無需編程背景，新發(fā)布的Paper從項目設(shè)計之初所有的原型設(shè)計都是采用Origami來實(shí)現(xiàn)。這是一款非常實(shí)用的原型設(shè)計工具，有詳細(xì)的教程教你很容易就能上手。而且軟件體積很小，不占資源。歡迎來9553免費(fèi)的下載使用。

功能介紹

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

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

使用方法

安裝分三步：

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

(2)安裝Quartz Composer;

(3)安裝Origami。

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

Hello Origami

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

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

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

QC中模塊分為以下多種。

圓角是普通模塊。

四角是尖的模塊叫“宏”(Macro)，可以雙擊進(jìn)入詳細(xì)編輯(點(diǎn)擊工具欄Edit Parent返回上層)。

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

模塊的左側(cè)和右側(cè)分別有一些點(diǎn)，左側(cè)的是輸入接口，右側(cè)的是輸出接口。將A模塊右側(cè)的輸出點(diǎn)連接到B模塊左側(cè)的輸入點(diǎn)，即可完成將A的結(jié)果傳遞給B的任務(wù)。

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

點(diǎn)擊主界面頂部工具欄最左側(cè)的Patch Library(快捷鍵：Command+回車，經(jīng)常用到請熟記)，在搜索框輸入“Text Layer”(不區(qū)分大小寫)，回車。可以看到畫布上多了一個模塊，這個模塊的作用是在屏幕上繪制一個顯示文字的層。

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

點(diǎn)擊主界面工具欄上的“Viewer”(快捷鍵：Command+Shift+V，也經(jīng)常用到)，可以看到黑色的背景上出現(xiàn)了熟悉的畫面。

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

1. 首先，我們需要三個模塊來搭建基本的手機(jī)框架：Phone、Phone Dimensions、Layer Group。Phone會在屏幕上繪制一個手機(jī)，Phone Dimensions控制手機(jī)的類型(iPhone/Android Phone/iPad)和手機(jī)的朝向(豎的/橫的)，Layer Group是一個宏，用來承載屏幕中需要顯示的內(nèi)容。

2. 將這三個模塊按照圖2的順序依次連接，完成基本框架搭建。此時打開Viewer，發(fā)現(xiàn)已有一個手機(jī)顯示了，不過屏幕中間沒有任何內(nèi)容(隱藏的快捷鍵：按“F”鍵可讓手機(jī)屏幕鋪滿全屏)。

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

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

恭喜你走進(jìn)了Origami的世界。