現(xiàn)在正式開始學(xué)習(xí)如何使用Origami制作產(chǎn)品交互原型。首先從Origami官網(wǎng)的第一個(gè)視頻Introduction to Origami開始。
打開QC,左上角File-New Origami File。這時(shí),會(huì)看到2個(gè)窗口:左邊的Editor和右邊的Viewer。Editor(編輯器)是用來組織Patch的,而Viewer(查看器)則可以實(shí)時(shí)看到由Patch(在以后的教程中,統(tǒng)一稱為模塊)實(shí)現(xiàn)的效果。在默認(rèn)的情況下,右邊的Viewer會(huì)覆蓋部分Editor窗口,
為了使這2個(gè)窗口在使用的過程中更方便,在上方工具欄選擇Window-Resize to Thirds,就可以使它們一左一右整齊地排列顯示。
Viewer Template(查看器模板)
在新建了Origami之后,左邊的Editor就自動(dòng)出現(xiàn)了3個(gè)模塊。
最右邊的View模塊,作用是繪制Viewer的手和手機(jī)。它的輸入是與之相連的Layer Group的圖片。中間的Layer Group可以放置各種模塊,然后顯示在Viewer的手機(jī)里。最左邊的Viewer Size,可以選擇不同的設(shè)備。雙擊Type旁邊的設(shè)備名,就會(huì)出現(xiàn)一個(gè)列表,可選擇各種設(shè)備,它會(huì)告訴Layer Group屏幕的大小。請(qǐng)注意,如果需要更改任何一個(gè)模塊的參數(shù),都可以雙擊此參數(shù)。而單擊某個(gè)模塊,則是選中此模塊。
Adding Asserts(添加素材)
現(xiàn)在開始為原型添加素材。仔細(xì)觀察會(huì)發(fā)現(xiàn),Layer Group模塊是直角的,而其他2個(gè)模塊都是圓角的。實(shí)際上,直角的模塊是一個(gè)模塊組,可以雙擊它進(jìn)入其包含的模塊。Layer Group里面的模塊直接影響右邊Viewer的手機(jī)屏幕顯示,當(dāng)雙擊Layer Group時(shí),可以看到Fill Layer模塊,它的顏色是黑色,這就是Viewer的手機(jī)屏幕內(nèi)容為黑色的原因。點(diǎn)擊右上的向上按鈕,就返回到了外面。
Layer Patch(圖層模塊)
雙擊Layer Group,進(jìn)入模塊組,從電腦里拖進(jìn)一張圖片到里面。當(dāng)添加了一張圖片后,文檔里會(huì)出現(xiàn)2個(gè)模塊。
左邊是圖片模塊,它與右邊的Layer模塊相連,Layer模塊把圖片渲染到手機(jī)屏幕上,里面每個(gè)屬性的數(shù)值描述了應(yīng)該如何渲染圖片。比如,X Position是0,雙擊“0”,把它修改成“200”,也就是x坐標(biāo)被設(shè)了200,此時(shí)你會(huì)發(fā)現(xiàn),在右邊的手機(jī)屏幕上,圖片往右移了200像素。改變數(shù)值的另一種方法是,在這個(gè)數(shù)字上長按,往左或往右拉,往左拉是不斷減小當(dāng)前數(shù)值,往右則不斷增大。其他屬性的效果,可以自行改變相應(yīng)的數(shù)值,在手機(jī)屏幕上直接看到變化。
Adding Patches(增加模塊)
現(xiàn)在我們有了圖片,需要考慮怎么使用Tap(輕按)手勢(shì)來縮放圖片。Origami有個(gè)叫Interaction(交互)的模塊,可以支持在Viewer和安裝有Origami Live的iOS設(shè)備上使用Tap手勢(shì)。按下Command+回車,打開Patch Library(模塊庫)。在搜索框里輸入“interaction”,出現(xiàn)“Interaction 2”,按下回車,即把這個(gè)模塊添加到文檔里。
Getting Taps(得到輕按手勢(shì))
我們可以看到,Interaction 2模塊有4個(gè)輸出口,首先看第一個(gè)“Down”,它會(huì)告訴我們你的手指是否壓在屏幕上。如果想看到實(shí)際輸出的結(jié)果,我們可以添加一個(gè)Text Layer來觀察。按下Command+回車,打開Patch Library(模塊庫)。(請(qǐng)記住這個(gè)快捷鍵,很常用)輸入“Text Layer”,找到這個(gè)模塊,按下回車,就把它添加到文檔了。這時(shí)可以看到,右邊的Viewer顯示了“Text”字樣。
雙擊Text屬性的右邊文字“Text”,可以更改文字內(nèi)容。如果我們想知道“Down”的輸入是什么,只需要把“Down”端口連接到“Text”端口。
現(xiàn)在我們看到,右邊的Viewer顯示了“0”。這時(shí),如果我們點(diǎn)擊一下Viewer的屏幕,顯示的文本將變成“1”,當(dāng)我們松開手,又變成了“0”。實(shí)際上,“Down”端口的從0到1,如果連接到Layer模塊上的“Scale”端口上會(huì)比較有意義。當(dāng)我們把“Down”連接到“Scale”,可以看到Viewer的圖片完全消失了。聰明的你一定能猜到,當(dāng)我們點(diǎn)擊一下屏幕,圖片又會(huì)出現(xiàn)。顯然,我們需要一種方法,能把這種從0到1的變化轉(zhuǎn)成有用的東西。所以我們需要使用Transition Patch(過渡模塊)。
Transition Patch(過渡模塊)
要添加過渡模塊,同樣可以使用按下Command+回車,打開Patch Library然后搜索、回車得到。同時(shí),也可以使用Origami為常用操作所設(shè)置的快捷鍵。在鍵盤按下“t”,也可以快速地添加Transition Patch。
仔細(xì)觀察一下,它有三個(gè)輸入口,第一個(gè)“Progress”通常會(huì)接收0到1之間的數(shù)值。然后,這個(gè)模塊會(huì)把Progress輸入的數(shù)值,轉(zhuǎn)換輸出一個(gè)在Start Value和End Value之間的數(shù)值。精確地說,如果Progress為p,StartValue為s,End Value為e,那么輸出值y=s+p*(e-s)。
比如,如果Progress設(shè)為0,Start Value設(shè)為100,End Value設(shè)為200,那么輸出的Value數(shù)值為100+0*(200-100)=100。若此時(shí)把Progress改為1,其他不變,那么輸出的Value則為100+1*(200-100)=200。原理就是這樣,非常簡單。
現(xiàn)在,我們來試著使用它。先刪除掉Text Layer,去掉Down和Scale之間的連線。拔掉連線很容易,按住連線的末端那頭拖動(dòng)到在連線以外的地方,然后松手,就成功拔掉了。此時(shí)要注意,Scale的數(shù)值還是之前的0,要改回1。請(qǐng)了解,端口永遠(yuǎn)都會(huì)記住上一次的數(shù)值。
這時(shí),我們希望實(shí)現(xiàn)這樣的效果:手機(jī)屏幕默認(rèn)全屏顯示圖片,點(diǎn)擊屏幕則把圖片縮小到一半來顯示。顯然,需要使用Interaction 2和Transition模塊一起實(shí)現(xiàn)。先把Interaction 2的Down端口連接到Transition的Progress,再把Transition的Value輸出端插到Layer模塊的Scale。按照剛才我們對(duì)Down的測試結(jié)果,沒點(diǎn)擊屏幕時(shí)輸出的數(shù)值為0,點(diǎn)擊屏幕時(shí)輸出的數(shù)值為1。所以當(dāng)沒點(diǎn)擊屏幕時(shí),Progress的值為0,點(diǎn)擊屏幕時(shí),Progress的值就變成了1。
當(dāng)沒點(diǎn)擊屏幕時(shí),我們希望輸出給Scale的數(shù)值是1,這樣才能全屏顯示圖片嘛。根據(jù)上面給出的公式y(tǒng)=s+p*(e-s),也就是1=s+0*(e-s)。這是很簡單的方程,所以s也就是Start Value為1。然后,在點(diǎn)擊屏幕時(shí),希望輸出給Scale的數(shù)值是0.5,也就是0.5=s+1*(e-s)=1+1*(e-1)。所以,e=0.5,End Value設(shè)為0.5就實(shí)現(xiàn)了我們的想要效果。
當(dāng)然,你可以隨意調(diào)整End Value的數(shù)值,把圖片縮放得更好看些。這時(shí),右邊的Viewer默認(rèn)全屏顯示圖片,當(dāng)點(diǎn)擊手機(jī)屏幕時(shí),圖片縮小為原來的一半;當(dāng)松開手時(shí),圖片又變成了全屏顯示。不過圖片放大和縮小的感覺很生硬,因?yàn)闆]有平滑的動(dòng)畫效果。所以接下來,我們就到制作動(dòng)畫這個(gè)讓人激動(dòng)的步驟了。