Origami Mac版

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

功能介紹

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

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

使用方法

安裝分三步：

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

(2)安裝Quartz Composer;

(3)安裝Origami。

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

Hello Origami

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

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

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

QC中模塊分為以下多種。

圓角是普通模塊。

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

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

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

接下來(lái)，我們做一個(gè)最簡(jiǎn)單的Demo，向世界問(wèn)個(gè)好。

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

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

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

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

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

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

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

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

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