Mac可交互原型設(shè)計(jì)工具(Origami)

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

功能特色：

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

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

安裝使用說明：

安裝分三步：

（1）請(qǐng)確保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ā)者賬號(hào)。安裝過程很簡單，就不詳述了。

Hello Origami

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

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

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

QC中模塊分為以下多種。

圓角是普通模塊。

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

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

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

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

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

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

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

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

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

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

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

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

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