2016-11-10 用心設計
來源: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軸,因為是要重復循環往下面復制,然后修改Count數值為6,看下圖:
然后此時你會發現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 的界面中,如下圖:
此時你發現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的目的在界面搭建而言不是純粹為了方便,更重要的是為了方便動效的統一處理,還有后期針對動效方面做不同狀態的處理,后面就是動效部分,請大家好好理解。
在制作之前,請先把Top Bars 和Notification 合成到一個文件夾,并命名為Screen 1,方便后面我們做效果。這里要注意一下在合成文件夾時前面的Loop自動加了一個patch,導致List的坐標錯亂了,刪掉即可。
Step 4:添加基礎動效
首先添加最基礎的效果,當點擊列表內容,背景 & 標題發生顏色變化,表示信息已讀,都是簡單的動效添加,請大家自行設計,過程就不啰嗦啦,參考如下圖:
Step 5:Loop中的指定項交互
通過上面簡單的動效添加,大家在預覽中可以體驗到每一個Loop的內容都是一樣的交互效果。那我想指定第2個內容有不一樣的交互呢?這個時候怎么辦?
插個題外話,這個時候大家也許已經在預覽中操作過了,點擊Restar按鈕就可以回到原始狀態,如下圖:
OK,回到主題。在這里定義的交互為,當點擊第2個內容時,頁面進行跳轉,大家留意一下圖層列表中的Screen 2,這個就是我們要跳轉進來的頁面,此時X坐標為360,所以屏幕中是看不到的,可以改為0看看里面是啥,哈哈
不廢話,先搜索并添加Loop Select patch,并連線,看下圖:
修改,Index Loop的值為1,不是說好的第2個內容嗎?為啥不是2?額,不是我懵逼,因為我們的序號都是從 0 開始的,這個大家要記住,不要搞錯了以為交互無效。
然后,接下來又是比較常規的動畫交互,Screen 2的X坐標從360 到0,然后為了增加動效的豐富性,把Screen 1的尺寸從1 到0.94,因為都是常規動效,相信大家從前面的教程里面應該都比較熟悉,在這里就不一一強調過程了,基本上最終的連線Patchs如下圖:
上圖中有個Interaction 是跳轉頁面然后返回的,在Screen 2的文件夾里的Back,添加Tab交互,然后連線到Turn off 即可,都是很簡單的操作,也不啰嗦囖。
教程到此為止,大家在預覽檢查一下,沒問題的話,恭喜你,再次學到了新東西。
看看最后的全部Patchs:
學習總結:
強調聲明,教程僅僅是提供了學習和思維,是本人學習官方案例后的總結。希望大家在實現自己實際的案例過程中,從學習過程中能攝取到新知識,從而舉一反三能有更加好的解決方案,共勉~!
藍藍設計( m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務