2016-11-10 用心設計
如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里
來源：UI中國
Origami 的教程已經出到第六期了，前5期都是基礎，而第6期開始，會慢慢復雜，同時也會加大學習量，加油～共勉!
請打開教程文件同步進行學習。
學前思考
先忽略動效，提出幾個問題，大家可以嘗試以前面學習的經驗來思考一下。
OK，如果僅前2個問題來說，用“笨”方法都是很簡單，到第3之后，就有點坑了，是要復制N個重復Patchs？簡直要瘋掉有木有～ 當然Origami 沒這么傻，是有專門的Patch 解決這樣的情況的，這就是今天學習的重點，Loop 系列的Patch，效果類似 Craft 的 Duplicete
教程文件理解
大家可以看到這次教程文件除了Origami文件，還有2個文件夾，有什么用暫且不說，教程詳細會告訴大家有什么用。
Origami文件里面，Notification文件夾是主要操作對象，其他可以不用太在意，會一步步講解。
Step 1：添加Loop patch
搜索Loop 并添加，然后連線到Notification 文件夾的Y軸，為啥是Y軸，因為是要重復循環(huán)往下面復制，然后修改Count數值為6，看下圖：
然后此時你會發(fā)現Notification 不見了，別擔心，只是被Top Bars 擋住而已，看一下Notification 的Y軸坐標就知道了。此時的Patch已經表示復制了6個一樣的Notification，看下圖，你可以看到有6行數據，左側的0~5代表的是復制后每個列表內容的序號，右側分別代表了復制后的每個個體所處于的Y軸坐標，如下圖：
添加 X patch， 乘以80，也就是Notification 的高度，這里可以自己調整數值來熟悉這個屬性，此時看Y軸坐標，已經都是乘以80之后的結果，所以此時你在預覽應該能看到列表的出現，如下圖：
此時還有一個問題，就是默認的坐標還是不對，應該是位于Top Bars下才對，怎么辦？其實也很簡單，主要是思路要對。從前面的教程中，大家也知道元素界面在Origami中排版的方法，那在這種場景下原理也是一樣的，都是要讓Y軸坐標在Top Bars下，也就是Top Bars的高度值116。
思路清晰，怎么達到，也簡單，在 X patch后面再添加一個 + patch即可，看圖：
到這里，界面的第一階段結束，我們從1個現有的List樣式，復制了多個。希望大家不要囫圇吞棗，要理解和明白其中的原理，以此舉一反三，類似Loop中Count 的數值也是可以由外部輸入控制數量，等等等等。
Step 2：更替元素
好，目前看預覽，美中不足的就是每個內容都是一樣的，從模擬真實體驗來說，簡直是災難。這時候教程文件中的文件夾就得出場了，先更替頭像，直接把Profile Pictures文件夾拖到Origami 的界面中，如下圖：
此時你發(fā)現Origami 已經自動把文件夾轉換成Loop Builder patch，里面有好幾張不同的頭像。然后，我可以比較遺憾地告訴你，這個操作Sketch中拖過去是沒用的，不過不知道以后會不會有。點擊 Images 可以看到每張圖片對應的序號，一般不用管，理解即可，請看圖：
然后就是連線，找到Notification文件夾中的Profle Picture，連線到屬性中的Image ，完事，在預覽中立即看到變化了，簡單的操作，這里就不貼圖啦。
Step 3：依次更替元素
替換完頭像，依次還有小圖標Timestamp Glyph，標題Notification Text，時間Timestamp Text，3個內容也是需要替換的，其中小圖標和頭像一樣，請看圖：
標題 & 時間是文案，需要改變Loop Builder patch的屬性，右鍵 > Type > Text，在這里按住”ALT+左鍵”拖動復制Loop Builder patch即可，最后如下圖：
里面的文案我提供給大家：
標題
時間
界面部分結束，下面開始制作相關的動效。首先大家要理解，Loop的目的在界面搭建而言不是純粹為了方便，更重要的是為了方便動效的統(tǒng)一處理，還有后期針對動效方面做不同狀態(tài)的處理，后面就是動效部分，請大家好好理解。
在制作之前，請先把Top Bars 和Notification 合成到一個文件夾，并命名為Screen 1，方便后面我們做效果。這里要注意一下在合成文件夾時前面的Loop自動加了一個patch，導致List的坐標錯亂了，刪掉即可。
Step 4：添加基礎動效
首先添加最基礎的效果，當點擊列表內容，背景 & 標題發(fā)生顏色變化，表示信息已讀，都是簡單的動效添加，請大家自行設計，過程就不啰嗦啦，參考如下圖：
Step 5：Loop中的指定項交互
通過上面簡單的動效添加，大家在預覽中可以體驗到每一個Loop的內容都是一樣的交互效果。那我想指定第2個內容有不一樣的交互呢？這個時候怎么辦？
插個題外話，這個時候大家也許已經在預覽中操作過了，點擊Restar按鈕就可以回到原始狀態(tài)，如下圖：
OK，回到主題。在這里定義的交互為，當點擊第2個內容時，頁面進行跳轉，大家留意一下圖層列表中的Screen 2，這個就是我們要跳轉進來的頁面，此時X坐標為360，所以屏幕中是看不到的，可以改為0看看里面是啥，哈哈
不廢話，先搜索并添加Loop Select patch，并連線，看下圖：
修改，Index Loop的值為1，不是說好的第2個內容嗎？為啥不是2？額，不是我懵逼，因為我們的序號都是從 0 開始的，這個大家要記住，不要搞錯了以為交互無效。
然后，接下來又是比較常規(guī)的動畫交互，Screen 2的X坐標從360 到0，然后為了增加動效的豐富性，把Screen 1的尺寸從1 到0.94，因為都是常規(guī)動效，相信大家從前面的教程里面應該都比較熟悉，在這里就不一一強調過程了，基本上最終的連線Patchs如下圖：
上圖中有個Interaction 是跳轉頁面然后返回的，在Screen 2的文件夾里的Back，添加Tab交互，然后連線到Turn off 即可，都是很簡單的操作，也不啰嗦囖。
教程到此為止，大家在預覽檢查一下，沒問題的話，恭喜你，再次學到了新東西。
看看最后的全部Patchs:
學習總結：
強調聲明，教程僅僅是提供了學習和思維，是本人學習官方案例后的總結。希望大家在實現自己實際的案例過程中，從學習過程中能攝取到新知識，從而舉一反三能有更加好的解決方案，共勉～！
藍藍設計( m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務