2016-11-10 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
來源:UI中國(guó)
Origami 的教程已經(jīng)出到第六期了,前5期都是基礎(chǔ),而第6期開始,會(huì)慢慢復(fù)雜,同時(shí)也會(huì)加大學(xué)習(xí)量,加油~共勉!
請(qǐng)打開教程文件同步進(jìn)行學(xué)習(xí)。
學(xué)前思考
先忽略動(dòng)效,提出幾個(gè)問題,大家可以嘗試以前面學(xué)習(xí)的經(jīng)驗(yàn)來思考一下。
OK,如果僅前2個(gè)問題來說,用“笨”方法都是很簡(jiǎn)單,到第3之后,就有點(diǎn)坑了,是要復(fù)制N個(gè)重復(fù)Patchs?簡(jiǎn)直要瘋掉有木有~ 當(dāng)然Origami 沒這么傻,是有專門的Patch 解決這樣的情況的,這就是今天學(xué)習(xí)的重點(diǎn),Loop 系列的Patch,效果類似 Craft 的 Duplicete
教程文件理解
大家可以看到這次教程文件除了Origami文件,還有2個(gè)文件夾,有什么用暫且不說,教程詳細(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 不見了,別擔(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ù)值來熟悉這個(gè)屬性,此時(shí)看Y軸坐標(biāo),已經(jīng)都是乘以80之后的結(jié)果,所以此時(shí)你在預(yù)覽應(yīng)該能看到列表的出現(xiàn),如下圖:
此時(shí)還有一個(gè)問題,就是默認(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è)。希望大家不要囫圇吞棗,要理解和明白其中的原理,以此舉一反三,類似Loop中Count 的數(shù)值也是可以由外部輸入控制數(shù)量,等等等等。
Step 2:更替元素
好,目前看預(yù)覽,美中不足的就是每個(gè)內(nèi)容都是一樣的,從模擬真實(shí)體驗(yàn)來說,簡(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中拖過去是沒用的,不過不知道以后會(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é)束,下面開始制作相關(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ì),過程就不啰嗦啦,參考如下圖:
Step 5:Loop中的指定項(xiàng)交互
通過上面簡(jiǎn)單的動(dòng)效添加,大家在預(yù)覽中可以體驗(yàn)到每一個(gè)Loop的內(nèi)容都是一樣的交互效果。那我想指定第2個(gè)內(nèi)容有不一樣的交互呢?這個(gè)時(shí)候怎么辦?
插個(gè)題外話,這個(gè)時(shí)候大家也許已經(jīng)在預(yù)覽中操作過了,點(diǎn)擊Restar按鈕就可以回到原始狀態(tài),如下圖:
OK,回到主題。在這里定義的交互為,當(dāng)點(diǎn)擊第2個(gè)內(nèi)容時(shí),頁面進(jìn)行跳轉(zhuǎn),大家留意一下圖層列表中的Screen 2,這個(gè)就是我們要跳轉(zhuǎn)進(jìn)來的頁面,此時(shí)X坐標(biāo)為360,所以屏幕中是看不到的,可以改為0看看里面是啥,哈哈
不廢話,先搜索并添加Loop Select patch,并連線,看下圖:
修改,Index Loop的值為1,不是說好的第2個(gè)內(nèi)容嗎?為啥不是2?額,不是我懵逼,因?yàn)槲覀兊男蛱?hào)都是從 0 開始的,這個(gè)大家要記住,不要搞錯(cuò)了以為交互無效。
然后,接下來又是比較常規(guī)的動(dòng)畫交互,Screen 2的X坐標(biāo)從360 到0,然后為了增加動(dòng)效的豐富性,把Screen 1的尺寸從1 到0.94,因?yàn)槎际浅R?guī)動(dòng)效,相信大家從前面的教程里面應(yīng)該都比較熟悉,在這里就不一一強(qiáng)調(diào)過程了,基本上最終的連線Patchs如下圖:
上圖中有個(gè)Interaction 是跳轉(zhuǎn)頁面然后返回的,在Screen 2的文件夾里的Back,添加Tab交互,然后連線到Turn off 即可,都是很簡(jiǎn)單的操作,也不啰嗦囖。
教程到此為止,大家在預(yù)覽檢查一下,沒問題的話,恭喜你,再次學(xué)到了新東西。
看看最后的全部Patchs:
學(xué)習(xí)總結(jié):
強(qiáng)調(diào)聲明,教程僅僅是提供了學(xué)習(xí)和思維,是本人學(xué)習(xí)官方案例后的總結(jié)。希望大家在實(shí)現(xiàn)自己實(shí)際的案例過程中,從學(xué)習(xí)過程中能攝取到新知識(shí),從而舉一反三能有更加好的解決方案,共勉~!
藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專注而深入的界面設(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://yvirxh.cn