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