Origami初學1: 簡易版本的Push Screen View

用Origami製作簡單的iOS常見View轉頁 Push Screen 效果。
利用Sketch設計好的檔案,直接輸出到Origami檔案裡。

Resources Link:
https://www.dropbox.com/s/8388a2lvq23qnly/ogBegin01.origami?dl=0


01: 調整Origami的界面

調整Origami裝置界面

因為Sketch的檔案是iPhone SE的尺寸,所以在Origami相對也調整為iPhone SE。


02: 使用Sketch的圖層檔案匯出至Origami

設計好的Sketch檔如下,列表頁和內容頁。

這裡有個重點是,最好在Sketch用一個Screen的群組把該View的圖層包裝起來,並且給予一個符合裝置尺寸的色塊底圖,在貼到Origami的時候,比較不需要重新對位置,因為透明在Origami是不存在空間的。
sketch 圖檔

直接command+c把圖層複製起來,然後paste到origami。這時候會看到如下的畫面,在Origami的裝置上出現Sketch的設計畫面,然後右邊的圖層區塊也出現跟Sketch一樣的圖層群組。

sketch直接copy圖層到origami

一般因為Origami會不支援一些Sketch所設計的屬性,所以會有一些Warning的提示,但如果影響不大,可以直接點選OK到下一步。

Paste as Image Instead 可以把輸入進來的圖層直接轉成一張圖片。


03: 在Origami中新增一個Screen的物件

add screen object

按+按鈕,往下scroll找到Screen的物件圖層,點擊後圖層就會出現Screen的圖層物件。

Screen主要是用來裝像是一個內容頁或是Pop Out的顯示頁面…等。而Push Screen就是需要用到Screen的物件圖層來處理。

sketch to origami

一樣從sketch的圖層中,選擇要複製的圖層,然後貼到origami中,並且把該圖層移到Screen的物件下。

此時會發現內容頁會不見,主要是因為Screen的內容預設是Dismiss的。

可以點擊Screen的物件圖層,上方會出現該Screen的屬性,其中Enable是讓它顯示或不顯示該物件,Present是讓Screen進場,而Dismiss則是退場,Transition則是設定讓Screen如何進場,有push和modal,分別是從左至右,或是從下至上。


04: 設定觸擊事件

左圖滑鼠移到圖層物件,會看到該列右上方出現Touch的小按鈕,點擊後有些不同的互動選項。選擇Tap點擊功能。

點擊Tap後,會出現互動物件在主界面上,如右圖。


05: 串連互動和物件的機制

Origami的特色就是可以用拉線的方式,建立它互動和物件之間的關係。

滑到互動物件(Interaction)上的Tap小圓點,然後用滑鼠點下然後拖拉到Screen的圖層,然後連結到Screen的Present屬性上,代表當我觸發點擊list物件後,觸發Screen的進場事件。

然後就會看到如上面右圖的連結區塊。這時候當妳點擊左方裝置View中的list後,就會看到內容頁的進場效果。


再來就是當點擊內容頁的back按鈕時,要能返list頁。

一樣在圖層找到back的按鈕圖層,然後點擊它的Touch事件中的Tap。

就會出現如下圖左方,多了一個互動物件,然後一樣將它的Tap連結到Screen中的Dismiss,代表當點擊back按鈕時,觸發Screen的退場事件。

最後會像是下方第三張圖示的互動連結區塊。

這時候當你點擊裝置界面中的back按鈕時,就會看到內容頁退場的動態。


Screen圖層的屬性中,有一個Setting的選項,點擊展開後,裡面會有一個Edge Swipe屬性預設為開,代表開啟Screen透過滑動退場的功能。

06: 新增list view的進退場滑動動態

這裡的進退場動態看起來較平淡,所以會再加上一個動態的互動連結,讓list view的進退場的動態看起來比較活潑。

點選Screen的Touch按鈕,選取最下方的X Offset互動事件。

然後多了Screen的X Offset的事物,然後將它連結到list view的圖層物件,然後跟list view中的Position的X作連結,就會如下方右圖。

當你去拖拉裝置View中的內容頁時,會看到list view的滑動效果,動態效果比剛剛活潑。

這整段的過程中還有很多物件和屬性可以摸索,都可以嘗試,像是讓Screen的動態改為Modal…等。

Like what you read? Give Harry Chuang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.