超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

Origami教程06-列表數(shù)據(jù)循環(huán)生成方法

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)思考一下。

  1. List 不用圖片來(lái)代替,怎么實(shí)現(xiàn)?
  2. 所有List內(nèi)容都不一樣,怎么實(shí)現(xiàn)?
  3.   所有List 都能保持一個(gè)統(tǒng)一的操作,怎么實(shí)現(xiàn)?
  4. …… 

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


Image title


教程文件理解

大家可以看到這次教程文件除了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,看下圖:

Image title

然后此時(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),如下圖:

Image title

添加 X patch, 乘以80,也就是Notification 的高度,這里可以自己調(diào)整數(shù)值來(lái)熟悉這個(gè)屬性,此時(shí)看Y軸坐標(biāo),已經(jīng)都是乘以80之后的結(jié)果,所以此時(shí)你在預(yù)覽應(yīng)該能看到列表的出現(xiàn),如下圖:

Image title

此時(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即可,看圖:

Image title


到這里,界面的第一階段結(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 的界面中,如下圖:

Image title

此時(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)看圖:

Image title

然后就是連線,找到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)看圖:

Image title

標(biāo)題 & 時(shí)間是文案,需要改變Loop Builder patch的屬性,右鍵 > Type > Text,在這里按住”ALT+左鍵”拖動(dòng)復(fù)制Loop Builder patch即可,最后如下圖:

Image title

里面的文案我提供給大家:

標(biāo)題

  1. John Anthony Evans likes your comment: "Loops in Origami Studio are sweet!"
  2. Julius Tarng likes your post in Loop Enthusiasts: "Have you checked out loo...
  3. Kara Fong reacted to your post in Loop Enthusiasts: "Just made this using loop...
  4. Matej Hrescak loves your photo in Infinite Loops: "Did you know you can drag and...
  5. Myles Larson reacted to your post in Puss 'n' Loops: "Cross-posting from Lo...
  6. Shali Nguyen likes your comment "What's the deal with repeating things over and..."

時(shí)間

  1. 8 minutes ago
  2. 16 minutes ago
  3. 2 hours ago
  4. Yesterday at 7:12 PM
  5. Yesterday at 3:19 PM
  6. Yesterday at 11:46 AM

界面部分結(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ò)亂了,刪掉即可。

Image title



Step 4:添加基礎(chǔ)動(dòng)效

首先添加最基礎(chǔ)的效果,當(dāng)點(diǎn)擊列表內(nèi)容,背景 & 標(biāo)題發(fā)生顏色變化,表示信息已讀,都是簡(jiǎn)單的動(dòng)效添加,請(qǐng)大家自行設(shè)計(jì),過(guò)程就不啰嗦啦,參考如下圖:

Image title



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),如下圖:

Image title


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,并連線,看下圖:

Image title

修改,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)槎际浅R?guī)動(dòng)效,相信大家從前面的教程里面應(yīng)該都比較熟悉,在這里就不一一強(qiáng)調(diào)過(guò)程了,基本上最終的連線Patchs如下圖:

Image title

上圖中有個(gè)Interaction 是跳轉(zhuǎn)頁(yè)面然后返回的,在Screen 2的文件夾里的Back,添加Tab交互,然后連線到Turn off 即可,都是很簡(jiǎn)單的操作,也不啰嗦囖。


教程到此為止,大家在預(yù)覽檢查一下,沒(méi)問(wèn)題的話,恭喜你,再次學(xué)到了新東西。

看看最后的全部Patchs:

Image title


學(xué)習(xí)總結(jié):

  1. 初步認(rèn)識(shí)Loop、Loop Builder、Loop Select等幾個(gè)Patchs的用法,觀察彼此的關(guān)系,明白并了解如何在交互過(guò)程中使用;
  2. 加強(qiáng)對(duì)于加減乘除算法Patch的認(rèn)知; 頁(yè)
  3. 面跳轉(zhuǎn)的簡(jiǎn)單實(shí)現(xiàn)方法;
  4. 加強(qiáng)開(kāi)關(guān)Switch patch的使用認(rèn)知;
  5.   合并文件夾時(shí)要注意對(duì)現(xiàn)有patch 排布的影響;

強(qiáng)調(diào)聲明,教程僅僅是提供了學(xué)習(xí)和思維,是本人學(xué)習(xí)官方案例后的總結(jié)。希望大家在實(shí)現(xiàn)自己實(shí)際的案例過(guò)程中,從學(xué)習(xí)過(guò)程中能攝取到新知識(shí),從而舉一反三能有更加好的解決方案,共勉~!


藍(lán)藍(lán)設(shè)計(jì)m.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ù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔