編者按:眨個(gè)眼@JingDesign?同學(xué)的投稿已經(jīng)到第三期咯,前兩期認(rèn)識(shí)了Xcode,也用它設(shè)計(jì)了自己的APP界面,今天放大招,直接幫設(shè)計(jì)師同學(xué)零代碼搞定交互動(dòng)畫,方便實(shí)用易上手,繼續(xù)來(lái)學(xué)習(xí)咯。
@JingDesign?:這期的教程隔的時(shí)間有點(diǎn)長(zhǎng),對(duì)不住大家,年末工作多,操心的事兒也多,如果你現(xiàn)在還在繼續(xù)關(guān)注靜電的教程,那我在這里要再次說(shuō)一聲:感謝。Xcode對(duì)于設(shè)計(jì)師來(lái)說(shuō),大部分人可能并不是很感冒,但我想在這里冒著文章點(diǎn)擊量不高,反響不那么好的風(fēng)險(xiǎn),繼續(xù)我們的Xcode教程。畢竟有很多朋友繼續(xù)支持著靜電,讓靜電有動(dòng)力繼續(xù)為大家普及Xcode的知識(shí)。其實(shí),只要你稍微花一點(diǎn)點(diǎn)耐心,那么“看起來(lái)”稍顯復(fù)雜的Xcode界面只會(huì)是一只紙老虎,剝繭抽絲,讓我們一同繼續(xù)來(lái)發(fā)掘iOS開(kāi)發(fā)工具的絕妙之處,特別是對(duì)于我們?cè)O(shè)計(jì)師的。
再次摘錄出第一節(jié)的,設(shè)計(jì)師為什么要接觸Xcode的5個(gè)理由:
- 讓天馬行空的設(shè)計(jì)被工程師打回而感到失望和沮喪
- 更快更高質(zhì)量的完成你的設(shè)計(jì)稿,然后再來(lái)個(gè)錦上添花。
- 每天跟開(kāi)發(fā)工程師開(kāi)開(kāi)心心的配合,成為好基友。
- 如果注定跟工程師成不了好基友,自己搞定那該死的一像素錯(cuò)位,讓他們刮目相看。
- 如果這些還不夠,那還有最后一條。你可能會(huì)因此成為大神,升職加薪,出任CAO,贏取白富美,走上人生巔峰。讓同事刮目相看。
最后再加上一條,學(xué)習(xí)了Xcode之后,你會(huì)不用花費(fèi)一行代碼,就可以生成一個(gè)在真機(jī)上演示的APP,對(duì)于設(shè)計(jì)師來(lái)說(shuō),沒(méi)有比自己的設(shè)計(jì)稿被實(shí)現(xiàn)更有成就感了對(duì)吧?
在第一章和第二章中,我們大概對(duì)這個(gè)新朋友做了初步了解,讓我們可以簡(jiǎn)單的體驗(yàn)到app是如何在模擬器中運(yùn)行起來(lái)的。對(duì),有的小伙伴會(huì)想到那個(gè)稍顯簡(jiǎn)陋的啟動(dòng)界面,但肯定大伙不會(huì)就那么容易滿足于這個(gè)啟動(dòng)界面,可以做更多的事情嗎?沒(méi)錯(cuò),那么在本章中,靜電繼續(xù)為大家介紹Xcode的storyboard,翻譯過(guò)來(lái)就是故事板。先來(lái)看下最后輸出的效果:
前兩章教程:
一、什么是故事板?
Storyboard是一件很奇妙的東西,電影,電視劇等影視劇拍攝的時(shí)候,導(dǎo)演會(huì)在本子上畫類似于連環(huán)畫一樣的圖,也就是分鏡頭,導(dǎo)演通過(guò)這些“連環(huán)畫”來(lái)告訴攝影師,演員,接下來(lái)的故事,你將出現(xiàn)在哪里,角度是怎樣的,如何與周圍的環(huán)境互動(dòng),攝影師需要知道這個(gè)場(chǎng)景要如何拍攝,通過(guò)什么角度來(lái)進(jìn)行拍攝,拍攝時(shí)間,對(duì)白等等。也有人將故事板稱為“可視劇本”(visual script),讓導(dǎo)演、攝影師、布景師和演員在鏡頭開(kāi)拍之前,對(duì)鏡頭建立起統(tǒng)一的視覺(jué)概念。在電影拍攝期間,為了讓一個(gè)龐大的劇組協(xié)調(diào)工作,那么,解釋劇本、解釋導(dǎo)演意圖和工作要求的最辦法就是“看”,當(dāng)一場(chǎng)戲的場(chǎng)景動(dòng)作、拍攝、布景等因素比較復(fù)雜而難以解釋時(shí),故事板可以很輕松地讓整個(gè)劇組建立起清晰的拍攝概念。下圖是《冰雪奇緣》的故事版。
說(shuō)到這里,相信大家一定對(duì)故事版的概念有了大概的了解,那么Xcode的中的故事版是什么呢?我們知道,APP也是由一個(gè)一個(gè)頁(yè)面構(gòu)成,每個(gè)頁(yè)面承載不同的內(nèi)容和功能,同時(shí)這些頁(yè)面又是相互關(guān)聯(lián)和依存的,沒(méi)有一個(gè)界面能脫離其他界面單獨(dú)存在,整個(gè)app界面我們把他理解為上圖的一幅幅的“分鏡頭”,再通過(guò)某種方式組合起來(lái),就形成了一個(gè)完整的app結(jié)構(gòu)。下圖就是靜電在故事版上講的故事。每一個(gè)頁(yè)面就是一個(gè)“場(chǎng)景”,場(chǎng)景之間使用箭頭和連線將一個(gè)個(gè)的故事串聯(lián)起來(lái),形成一個(gè)完整功能的“故事”。Xcode這款針對(duì)開(kāi)發(fā)者的工具中為我們提供了非常友好的可視化界面,讓我們通過(guò)故事版,就可以完成一個(gè)簡(jiǎn)易或者復(fù)雜的功能,一切只需要使用各種組件和連線而已。
二、為使用故事版準(zhǔn)備設(shè)計(jì)稿
首先我們要準(zhǔn)備設(shè)計(jì)稿,準(zhǔn)備一組相互關(guān)聯(lián)的效果圖,以下是靜電準(zhǔn)備的一組設(shè)計(jì),當(dāng)然,推薦使用同樣有故事板的Sketch來(lái)設(shè)計(jì)。從最左邊的分類入口“情感”點(diǎn)擊進(jìn)入“情感”分類列表,然后點(diǎn)擊某一本作品,進(jìn)入作品主頁(yè),在作品主頁(yè)點(diǎn)擊作者頭像,進(jìn)入作者主頁(yè)。整個(gè)流程可以點(diǎn)擊左上角返回按鈕后退。
靜電的Sketch教程合集:
- 《SKETCH設(shè)計(jì)教室!從零開(kāi)始學(xué)APP設(shè)計(jì)利器SKETCH(一)》
- 《SKETCH設(shè)計(jì)教室!從零開(kāi)始學(xué)APP設(shè)計(jì)利器SKETCH(二)》
- 《SKETCH設(shè)計(jì)教室!帶你了解超好用的SKETCH插件》
- 《想要一稿過(guò)不加班?SKETCH絕配神器MIRROR搶先體驗(yàn)》
三、設(shè)定Xcode故事板尺寸
準(zhǔn)備好這些效果圖后,我們接著打開(kāi)Xcode。和第一章的做法一樣,我們要新建一個(gè)工程文件。在Xcode啟動(dòng)后的歡迎界面選擇箭頭所示的選項(xiàng)?;蛘哌x擇屏幕左上角的File>New>Project,同樣可以新建一個(gè)項(xiàng)目。
選擇Single View Application
接下來(lái)我們給項(xiàng)目起一個(gè)名字,product name你可以隨便寫,第二項(xiàng)也可以隨便,第三項(xiàng)默認(rèn),language選擇swift或者object-c均可,設(shè)備選擇iphone,最后的對(duì)勾不用勾選。接著Next
提交后就來(lái)到我們熟悉的界面了,左邊的一列是Xcode自動(dòng)為我們生成的文件,中間最大的區(qū)域?yàn)楣ぷ鲄^(qū),右側(cè)為元素的屬性欄目。是不是跟某些軟件很像呢?
那么Storyboard在哪里呢?眼睛尖的同學(xué)想必已經(jīng)發(fā)現(xiàn),左側(cè)的文件列表區(qū)域有一個(gè)名為Main.storyboard的文件,對(duì)啦,這就是我們今天的主戰(zhàn)場(chǎng),快點(diǎn)擊打開(kāi)吧。
打開(kāi)這個(gè)Main.storyboard文件后,中間的工作區(qū)域與右側(cè)的面板會(huì)發(fā)生變化,如下圖所示。我們發(fā)現(xiàn),中間出現(xiàn)了一塊類似于sketchartboard一樣的東西,對(duì),這就是Xcode中的故事板啦,我們可以在故事板上作畫,但是,這個(gè)畫板的尺寸好像不太合適,我們需要將尺寸改成我們需要的手機(jī)尺寸大小(這里為了簡(jiǎn)單起見(jiàn),靜電先不介紹autolayout,也就是自動(dòng)布局功能,這個(gè)是為iphone6 及plus等更大屏幕準(zhǔn)備的新功能),依次按箭頭點(diǎn)擊,找到use Auto Layout,將前面的對(duì)勾去掉,這個(gè)時(shí)候你會(huì)發(fā)現(xiàn)“畫布”尺寸發(fā)生了變化,好像開(kāi)始正常起來(lái)了對(duì)吧?
親愛(ài)的讀者們,你們手頭是用哪一款iPhone手機(jī)來(lái)調(diào)試呢?如果是iphone5,那么就調(diào)成640-1136大?。ㄈ缓蟪叽绯裕?,如果是iPhone6,或者plus就各自選擇對(duì)應(yīng)的尺寸即可,靜電在這里的設(shè)計(jì)稿使用iPhone5s來(lái)設(shè)計(jì)的,所以這里選擇ip5的尺寸,注意將物理分辨率寬高分別除以二(Xcode中,我們務(wù)必將設(shè)計(jì)稿的尺寸除以2,這一點(diǎn)請(qǐng)務(wù)必記住了)。那么在哪里具體設(shè)置畫布的尺寸呢?請(qǐng)看下圖,上邊的箭頭所指示區(qū)域是一把尺子,這代表著關(guān)于元素尺寸方面的東東,都可以在這里設(shè)置,那么我們點(diǎn)擊然后按自己的設(shè)計(jì)稿尺寸或者手機(jī)物理分辨率尺寸除以2,填寫在下邊的框中。我們的第一個(gè)畫布就這么完成設(shè)定了。
左側(cè)的箭頭表示什么呢?那表示我們現(xiàn)在被箭頭指的這個(gè)是初始界面。
四、了解故事板的構(gòu)成元素——組件
開(kāi)發(fā)人員可以用代碼實(shí)現(xiàn)無(wú)比復(fù)雜的功能,那么作為設(shè)計(jì)師,我們完全可以通過(guò)Xcode找到替代品,如下圖右側(cè)就是各種的組件,我們可以用組件實(shí)現(xiàn)不同的功能,最基本的組件就是最左側(cè)箭頭所示的View controller。這個(gè)組件是做什么的呢?我們可以嘗試拖動(dòng)一個(gè)View controller組件到工作區(qū)的空白位置,發(fā)現(xiàn)了什么?是的,又生成了一張“畫布”!這個(gè)奇妙的功能,我只告訴讀這篇文的同學(xué)啊,很好玩吧?那么View controller左側(cè)的箭頭是做什么的呢?好,我們同樣拖動(dòng)一個(gè)箭頭到一個(gè)VC(view controller簡(jiǎn)寫,下同)上,發(fā)現(xiàn)了什么?箭頭附加到了這個(gè)VC的左側(cè),這個(gè)代表我們的故事是從這個(gè)VC開(kāi)始的,也就是這個(gè)是啟動(dòng)界面完成后第一次進(jìn)來(lái)的界面啦。
靜電在這里準(zhǔn)備了四個(gè)界面,所以,拖動(dòng)四個(gè)VC到主界面上,依次排列好.然后在這里我們還需要了解另一個(gè)控件-image view。由名字可以猜出來(lái),image view是來(lái)展示圖片的容器。但image view必須依附VC存在而不能單獨(dú)存在。
可以這么理解,VC是畫布,沒(méi)有畫布,我們不能在上邊做任何操作。下圖位置的圖標(biāo)就是image view,在每個(gè)VC里都拖動(dòng)一個(gè)image view吧?。ㄕ?qǐng)注意,拖動(dòng)到VC的操作必須在視圖百分比顯示而不是縮放的情況下,且選中VC的情況下才能拖動(dòng),如果你無(wú)法實(shí)現(xiàn)拖動(dòng),記得在主界面右鍵或者雙擊左鍵放大視圖,同時(shí)選中一個(gè)VC,然后再拖動(dòng))
很簡(jiǎn)單對(duì)嗎?完成后,就如上圖所示的樣子,可能有朋友發(fā)現(xiàn)自己的imageview大小不太對(duì),很小。沒(méi)關(guān)系,我們?cè)诤筮吙梢哉{(diào)整他的大小。接著點(diǎn)擊下圖所示的位置展開(kāi)“圖層”,我們會(huì)發(fā)現(xiàn)類似ps里圖層的東西,還有一點(diǎn),image Vew是在VC的下級(jí)里的,也就是被包含的關(guān)系,以后如果我們?cè)赩C里放入其他元素,也會(huì)出現(xiàn)在Vew的下級(jí)。
五、導(dǎo)入圖片資源到Xcode
接下來(lái)我們還卻一樣?xùn)|西,就是設(shè)計(jì)稿圖片了,ok,準(zhǔn)備好本文開(kāi)頭靜電提到的圖片素材(你可以使用sketch或者任何你喜歡的作圖軟件設(shè)計(jì))。接著從最左側(cè)的文件庫(kù)中找到帶有藍(lán)色圖標(biāo)的images.xcassets.打開(kāi)它,我們發(fā)現(xiàn)右側(cè)的主界面發(fā)生了變化。接著點(diǎn)擊appicon,這個(gè)時(shí)候主界面出現(xiàn)了我們很熟悉的東西,2x,3x。
秒懂!是的,Xcode在新版本中為我們提供了這個(gè)images.xcassets功能,我們可以將所有圖片都扔在這個(gè)里邊(當(dāng)然,還有一種傳統(tǒng)的導(dǎo)入圖片方式,就是之間把圖片文件拖動(dòng)到左側(cè)的文件目錄中,這里靜電不推薦.)appicon是程序的圖標(biāo),現(xiàn)在我們可以將制作好的圖標(biāo)文件拖動(dòng)到里邊,如果現(xiàn)在沒(méi)有準(zhǔn)備這個(gè)圖標(biāo),也無(wú)所謂,沒(méi)有他我們可以照樣繼續(xù)工作。待會(huì)兒再做不遲。
把你剛剛做好的設(shè)計(jì)稿拖動(dòng)到第二欄即可。這里為了方便,我們要把文件名加上@2x或者@3x的后綴。這樣X(jué)code可以自動(dòng)識(shí)別該放哪一欄。這樣圖片文件已經(jīng)導(dǎo)入到Xcode工程中了,我們可以在image view里調(diào)用。
六、讓storyboard顯示圖片
返回Main.storyboard文件,選中剛剛拖動(dòng)到VC里的UIimageView,接著我們可以對(duì)這個(gè)容器的屬性進(jìn)行設(shè)置了。
如果imageView尺寸不對(duì),ok,我們?cè)谙聢D的位置更改Width與Height的值,讓其充滿VC(再次強(qiáng)調(diào),這里的數(shù)值是我們實(shí)際設(shè)計(jì)稿的一半,以后都要形成這個(gè)概念,這也是我們?yōu)槭裁匆欢ㄒ獙D片素材做成偶數(shù)像素的原因)。
接著切換到下圖箭頭位置,調(diào)用圖片文件到imageview,如果發(fā)現(xiàn)圖片被拉伸或者壓縮了,可以嘗試調(diào)節(jié)第三個(gè)箭頭所示的縮放模式(如果設(shè)計(jì)稿較長(zhǎng),選擇top比較合適),同樣我們可以調(diào)節(jié)透明度(alpha),其他選項(xiàng)大家可以自行點(diǎn)點(diǎn)看,我們現(xiàn)在暫時(shí)用不到,不再講解。
依照這個(gè)操作步驟,把剛剛導(dǎo)入的圖片賦予每一個(gè)imageview。
七、按鈕——為storyboard加入點(diǎn)擊事件
用過(guò)flash等軟件的朋友一定知道,要讓某些元素相應(yīng)我們的點(diǎn)擊或者其他事件,我們必須把他設(shè)置為按鈕。在Xcode中,這同樣適用。在組件庫(kù)里找到按鈕(button)組件吧,相信你一定可以找到。接著拖動(dòng)到你想要相應(yīng)點(diǎn)擊事件的位置(當(dāng)然必須在vc中),另外,必須保持VC為選中狀態(tài)再進(jìn)行拖動(dòng)哦。
拖動(dòng)按鈕到合適的位置,選中按鈕,同樣在右側(cè)屬性窗口改變他的屬性,按鈕可以是純文字的,我們也可以用圖片來(lái)當(dāng)按鈕。這里靜電做一個(gè)隱形的按鈕,在屬性窗口,把button字樣刪除即可。然后拉大button區(qū)域到你認(rèn)為合適的位置。同樣為其他的VC中你覺(jué)得需要鍵入按鈕的地方設(shè)置按鈕。(如果你找不到隱形的按鈕,可以展開(kāi)組件抽屜,“圖層”形式的操作你一定可以找到并操作好的,但這里與ps的圖層有區(qū)別,一個(gè)元素位于另一個(gè)元素的上方,圖層中顯示順序是在其下方的)
八.讓StoryBoard動(dòng)起來(lái)吧!
按鈕加好后,我們來(lái)進(jìn)行最后一步,也是最關(guān)鍵的一步,讓各個(gè)“故事版”形成關(guān)聯(lián)。也就是指定一個(gè)按鈕的去向是哪里?首先選中第一個(gè)vc中的按鈕,我們要實(shí)現(xiàn)的效果是,點(diǎn)擊后跳轉(zhuǎn)到第二個(gè)界面。
這里操作稍微復(fù)雜,靜電一步一步講解
1. 選中一個(gè)按鈕
2. 在這個(gè)按鈕上點(diǎn)擊右鍵并拖動(dòng)到目標(biāo)界面
3. 在彈出的層中選擇“modal”(push現(xiàn)在不可用,下節(jié)講解push的用法)
4. 這個(gè)時(shí)候兩個(gè)VC中出現(xiàn)了連接線,選中鏈接線,在右側(cè)屬性欄設(shè)置transition,也就是跳轉(zhuǎn)動(dòng)畫(自己試試哦)
5. 這樣一個(gè)鏈接就完成了
6. 依次為所有的按鈕都加上連線(注意方向,從左到右跳轉(zhuǎn),就鼠標(biāo)右鍵從左到右劃線,反之從右到左。)
7. 選中連線可以更改跳轉(zhuǎn)的屬性,動(dòng)畫。以下是靜電使用的屬性。
大功告成,我們可以運(yùn)行下模擬器看看效果了。靜電這里的設(shè)計(jì)稿是為ip5設(shè)計(jì)的,所以選擇ip5或者5s的模擬器。怎么樣?這樣設(shè)計(jì)稿就連接起來(lái)了。看看靜電實(shí)際的演示效果吧。沒(méi)有一行代碼,輕松完成頁(yè)面之間的跳轉(zhuǎn),當(dāng)然,他的功能還不只這么簡(jiǎn)單,下一節(jié),我們會(huì)繼續(xù)深挖Xcode的神奇組件。看看他還能給我們帶來(lái)哪些更奇妙的好東西。嗯哼,設(shè)計(jì)師也會(huì)Xcode,讓開(kāi)發(fā)工程師和產(chǎn)品經(jīng)理也羨慕一下吧!
素材為Xcode工程文件,大家下載后可以直接打開(kāi)參考。微盤下載
下一次將會(huì)是Xcode的教程第四節(jié),內(nèi)容更精彩,不容錯(cuò)過(guò),靜電為大家?guī)?lái)更好玩的!零代碼,只為設(shè)計(jì)師更好的做交互和設(shè)計(jì)!歡迎關(guān)注靜電的微信帳號(hào)jingdesign91,不定期為大家?guī)?lái)靜電獨(dú)家原創(chuàng)教程。
別在哼哧哼哧的只顧悶頭做圖啦,讓設(shè)計(jì)稿動(dòng)起來(lái)吧!
掃描二維碼關(guān)注公眾號(hào): jingdesign91,歡迎加入靜Design。
專為畢業(yè)生量身打造的三篇好文!幫你迅速找到好工作!
大咖前輩現(xiàn)身說(shuō)法!親歷者經(jīng)驗(yàn)!
《畢業(yè)生必看!剛?cè)胄械脑O(shè)計(jì)師如何敲開(kāi)大公司的門》有了這個(gè),就不怕遇到黑心老板啦!
《找工作必備!教你一眼識(shí)穿招聘公司有木有坑》朋友擠破頭來(lái)讓你幫個(gè)忙?看看這篇!
《人情練達(dá)即文章:如何拒絕朋友免費(fèi)做設(shè)計(jì)的要求?》
投稿者:@JingDesign
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:2650232288@qq.com】
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái),專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書:史上最全的設(shè)計(jì)師圖書導(dǎo)航:http://hao.uisdc.com/book/。
設(shè)計(jì)微博:擁有粉絲量87萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ,歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航:全球頂尖設(shè)計(jì)網(wǎng)站推薦,設(shè)計(jì)師必備導(dǎo)航:http://hao.uisdc.com
官方微信:想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎?添加優(yōu)設(shè)哥微信號(hào):youshege
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評(píng)論!每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后,在評(píng)論區(qū)留言,系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今,是國(guó)內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái),提供獎(jiǎng)品贊助 聯(lián)系我們
AI輔助海報(bào)設(shè)計(jì)101例
已累計(jì)誕生 737 位幸運(yùn)星
發(fā)表評(píng)論
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓