android應用開發-從設計到實現 3-9 Origami動態原型設計

動態原型設計

動態的可交互原型產品，是產品經理和界面設計師向開發人員闡釋自己設計的最高效工具。

開發者不需要猜測設計師要什麼樣的效果，照着原型產品做就好了。

很多創業團隊也發現了產品人的這個剛需，做出了諸如Principle、Axure這類著名的原型設計產品。

Facebook似乎也深諳此道，專門爲安卓和iOS系統開發很有針對性的交互原型設計工具-Origami Studio。

這是一個免費的工具，而且也能和Sketch互通，所以我選擇了它來向大家講解互動原型的設計。

界面介紹

啓動Origami Studio後，可以看到類似如下界面，

1. 懸浮在外的區域是虛擬手機屏幕。用戶可以通過點擊、拖動來模擬各種屏幕操作;

2. 底部的暗色區域是工作區域。用來設置用戶操作屏幕後，界面元素的各種響應方式；

3. 右邊的亮色區域是界面組件區域。展示了組成界面的各個元素，裏面的佈局方式，通過虛擬屏幕實時展示了出來；

點擊虛擬屏幕右上方的攝像機按鈕，可以將屏幕上的內容錄製下來，

創建屏幕界面

對於新創建的項目，整個工程都是空的，

我們可以通過菜單欄的+，爲界面添加各種組件，

也可以直接將Sketch中的圖形，通過複製粘貼的方式，直接添加到組件區域。

1. 通過Phone -> Nexus 5將虛擬設備的屏幕，設置成Nexus 5- 安卓設備；

2. 將組件區域中Color Fill的背景色修改成白色，

然後，打開上一章節中Sketch設計的靜態高保真原型，

1. 選中Weather頁面的展開畫板，使用cmd + c（複製）；
2. 切換到Origami Studio，cmd + v（粘貼）；

整個界面就導入完成了，

所以我之前說，使用Sketch進行界面設計可以事半功倍，它與Origami Studio配合的非常好。

設置滑動區域

當用戶滑動Content區域的時候，該區域要能夠跟隨手指，向上滑動。這裏就有2個要點，

1. 滑動Content區域：要能夠感知到這個區域被滑動；
2. Content區域跟隨滑動：滑動的位移能夠作爲輸入，實時的影響Content區域的位置；

感知交互

組件旁邊有個touch按鈕，點擊後會出現該組件可能會接收到的各種觸控方式。在本例中，我們是需要感知Content組件垂直方向上的滑動，所以選擇ScrollY，

此時，工作區域和虛擬屏幕都發生了變化，

Content區域的位置發生了變化，被“頂”到了整個屏幕的最上面。這是爲什麼呢？因爲Content區域的Y座標被修改成了0。

在紫色的Scroll框圖中，Content Layer被指定成了Content，說明需要關注Content的滑動。Y座標的變化將被輸出到藍色框圖代表的Content區域，修改它的Y座標。

因此，當框圖被這樣組合之後，我們沒有觸控Content區域，Content的Y軸就沒有滑動，因此輸出就爲0。0作爲Content區域的新位置，就將其頂到了屏幕的最上方。

因此，我這裏可以給出一個小技巧來避免這種錯誤的置頂效果，

1. 給Content添加一個殼-Group（+ -> group），將Content包裹在裏面(通過拖動Content到Group中實現)；

2. Group的尺寸從屏幕的頂端開始計算，佔據整個屏幕；

然後再給Group添加響應，

可以看到，現在虛擬屏幕上的界面就沒有變形了。在屏幕上進行拖動，Content區域就可以隨着Y軸的偏移，而實時的修改自己的Y座標，達到互動的效果，

Content滑動的過程中，Weather detail，也需要隨着向上滑動，並隱藏起來。

有了上面處理Content的經驗，我們就知道需要如何處理Weather detail的滑動了。

1. 給Weather detail添加一個殼-Group，將Weather detail包裹在裏面；

2. Group的尺寸從屏幕的頂端開始計算，佔據整個屏幕；

3. 鼠標按住紫色框圖Y字符的位置，拖住不放，連接到組件區域上方的Y座標處，

   工作區域就會自動添加紫色框圖到新Group的連接，

注意：這種拖拽端點到屬性值的方法貫穿了使用Origami Studio的各個地方，是非常核心的操作方式。

此時滑動界面的時候，Weather detail也會跟着滑動了，

這時可以看到，狀態欄被擋住了。解決的辦法很簡單，只要在組件區域，把Statusbar拖動到最上面的位置就可以了，

標題的變化

現在開始加入標題-成都的變化。

把成都從Weather detail中剝離出來，便於全局的控制，進行如下設置，

在界面滑動的過程中，字體的大小和X Y座標都要發生變化，說明需要找到內容區域Y軸滑動時的比例，然後讓成都元素的對應屬性發生變化。

滑動變化有自己的百分比：（當前值-原始值／變化範圍）* 100% = 變化的百分比

原始值：0 變化範圍：-245（245是Weather detail的高度）

成都文字的屬性變化範圍是：

屬性	屬性起始值
X座標	24 -> 16
Y座標	244 -> 38
字體大小	34 -> 20

在Origami Studio中確定變化範圍，需要使用Progress patch（到底什麼是patch，會在後面介紹）。

在工作區域雙擊，彈出patch選擇框，找到Progress，

修改Progress patch的Start value爲0，End value爲-245，

開始修改成都文字的Y座標。

1. 在Progress path之後，添加一個Transition patch；
2. Start爲244，End爲38；
3. 將Transition patch的輸出，通過拖拽的方式，連線到成都元素的Y座標值的位置；

開始修改成都文字的X座標。

1. 在Progress path之後，添加一個Transition patch；
2. Start爲24，End爲16；
3. 將Transition patch的輸出，通過拖拽的方式，連線到成都元素的X座標值的位置；

開始修改成都文字的字體大小。

1. 在Progress path之後，添加一個Transition patch；
2. Start爲34，End爲20；
3. 將Transition patch的輸出，通過拖拽的方式，連線到成都元素字體大小的位置；

---

至此，我們可以看到滑動時，標題變化的雛形了，

滑動的範圍

上下滑動時，內容是收到了侷限的，只能在一定區域內滑動。所以要給目前的設計增加一個滑動限制。

1. 添加一個叫做Clip patch過濾器；
2. 將它允許輸出的最小值Min設置成-245（也就是Weather detail的高度）；將允許輸出的最大值Max設置成0；
3. 修改框圖的連接方式如下，

滑動的保持

現在滑動虛擬屏幕的時候會發現，當鬆手之後，原來滑動到的位置會自動還原，但實際上我們希望它能夠保持當前的狀態。

1. 將Content所在的Group向下移，放到Weather detail所屬的Group的下面；
2. 修改該Group的大小爲1000；

---

至此，動畫的效果就基本完成了。

尾巴

這裏留下了一個小尾巴：滑動的過程中，狀態欄的顏色也是需要變化的，從#3F51B5逐漸變化到#303F9F。

經過前面的實踐，我想大家應該已經知道了實現的要點，那就開始自己嘗試着做做吧。

提示：通過Color to HSL patch Transition patch與HSL Color patch的配合，來修改狀態欄背景元素的顏色屬性。

整個工程的源文件，我放到了這裏，供大家參考。

回顧總結

通過具體的案例，我們初步瞭解了Origami Studio的用法，對實現動畫的方式也有了概念。

一切的動畫效果都是通過下面幾個步驟來實現的，

1. 感知觸發動畫的事件，點擊、滑動等等；
2. 把觸發事件後產生的數值，交給一個個串聯起來的patch進行處理，獲得新的數值；
3. 利用新的數值來修改某個界面元素的屬性，比如文字的大小，文字的位置，文字的透明度等等；

知道了這樣的套路，以後遇到其他動畫就可以依葫蘆畫瓢來操作了。

至於什麼是patch，我相信一步步做到這裏，也都可以心領神會了吧。

另外，處理虛擬屏幕，Origami Studio產生都可交互原型，也能在手機設備上運行，前提是在設備上按照對應的應用Origami live。希望進一步瞭解的同學，請移步這裏，有更爲詳盡的信息提供給你。

---

本文是《從設計到實現-手把手教你做android應用開發》系列文檔中的一篇。感謝您的閱讀和反饋，對本文有任何的意見和建議請留言，我都會盡量一一回復。

如果您覺得本文對你有幫助，請推薦給更多的朋友；或者加入我們的QQ羣348702074和更多的小夥伴一起討論；也希望大家能給我出出主意，讓這些文檔能講的更好，能最大化的幫助到希望學習開發的夥伴們。

除了CSDN發佈的文章，本系列最新的文章將會首先發布到我的專屬博客book.anddle.com。大家可以去那裏先睹爲快。

---

同時也歡迎您光顧我們在淘寶的網店安豆的雜貨鋪。店中的積木可以搭配成智能LED燈，相關的配套文檔也可以在這裏看到。

這些相關硬件都由我們爲您把關購買，爲大家節省選擇的精力與時間。同時也感謝大家對我們這些碼農的支持。

最後再次感謝各位讀者對安豆的支持，謝謝:)