零代碼搞定交互動(dòng)畫！為設(shè)計(jì)師量身打造的XCODE教程（3）

編者按：眨個(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è)理由：

1. 讓天馬行空的設(shè)計(jì)被工程師打回而感到失望和沮喪
2. 更快更高質(zhì)量的完成你的設(shè)計(jì)稿，然后再來(lái)個(gè)錦上添花。
3. 每天跟開(kāi)發(fā)工程師開(kāi)開(kāi)心心的配合，成為好基友。
4. 如果注定跟工程師成不了好基友，自己搞定那該死的一像素錯(cuò)位，讓他們刮目相看。
5. 如果這些還不夠，那還有最后一條。你可能會(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)看下最后輸出的效果：

前兩章教程：

1. 《搞定一像素不求人！為設(shè)計(jì)師量身打造的XCODE教程（1）》
   
2. 《搞定一像素不求人！為設(shè)計(jì)師量身打造的XCODE教程（2）》

一、什么是故事板？

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教程合集：

1. 《SKETCH設(shè)計(jì)教室！從零開(kāi)始學(xué)APP設(shè)計(jì)利器SKETCH（一）》
2. 《SKETCH設(shè)計(jì)教室！從零開(kāi)始學(xué)APP設(shè)計(jì)利器SKETCH（二）》
3. 《SKETCH設(shè)計(jì)教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過(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