編者按：眨個(gè)眼@JingDesign?同學(xué)的投稿已經(jīng)到第三期咯，前兩期認(rèn)識了Xcode，也用它設(shè)計(jì)了自己的APP界面，今天放大招，直接幫設(shè)計(jì)師同學(xué)零代碼搞定交互動畫，方便實(shí)用易上手，繼續(xù)來學(xué)習(xí)咯。

@JingDesign?：這期的教程隔的時(shí)間有點(diǎn)長，對不住大家，年末工作多，操心的事兒也多，如果你現(xiàn)在還在繼續(xù)關(guān)注靜電的教程，那我在這里要再次說一聲：感謝。Xcode對于設(shè)計(jì)師來說，大部分人可能并不是很感冒，但我想在這里冒著文章點(diǎn)擊量不高，反響不那么好的風(fēng)險(xiǎn)，繼續(xù)我們的Xcode教程。畢竟有很多朋友繼續(xù)支持著靜電，讓靜電有動力繼續(xù)為大家普及Xcode的知識。其實(shí)，只要你稍微花一點(diǎn)點(diǎn)耐心，那么“看起來”稍顯復(fù)雜的Xcode界面只會是一只紙老虎，剝繭抽絲，讓我們一同繼續(xù)來發(fā)掘iOS開發(fā)工具的絕妙之處，特別是對于我們設(shè)計(jì)師的。

再次摘錄出第一節(jié)的，設(shè)計(jì)師為什么要接觸Xcode的5個(gè)理由：

1. 讓天馬行空的設(shè)計(jì)被工程師打回而感到失望和沮喪
2. 更快更高質(zhì)量的完成你的設(shè)計(jì)稿，然后再來個(gè)錦上添花。
3. 每天跟開發(fā)工程師開開心心的配合，成為好基友。
4. 如果注定跟工程師成不了好基友，自己搞定那該死的一像素錯(cuò)位，讓他們刮目相看。
5. 如果這些還不夠，那還有最后一條。你可能會因此成為大神，升職加薪，出任CAO，贏取白富美，走上人生巔峰。讓同事刮目相看。

最后再加上一條，學(xué)習(xí)了Xcode之后，你會不用花費(fèi)一行代碼，就可以生成一個(gè)在真機(jī)上演示的APP，對于設(shè)計(jì)師來說，沒有比自己的設(shè)計(jì)稿被實(shí)現(xiàn)更有成就感了對吧？

在第一章和第二章中，我們大概對這個(gè)新朋友做了初步了解，讓我們可以簡單的體驗(yàn)到app是如何在模擬器中運(yùn)行起來的。對，有的小伙伴會想到那個(gè)稍顯簡陋的啟動界面，但肯定大伙不會就那么容易滿足于這個(gè)啟動界面，可以做更多的事情嗎？沒錯(cuò)，那么在本章中，靜電繼續(xù)為大家介紹Xcode的storyboard，翻譯過來就是故事板。先來看下最后輸出的效果：

前兩章教程：

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

一、什么是故事板？

Storyboard是一件很奇妙的東西，電影，電視劇等影視劇拍攝的時(shí)候，導(dǎo)演會在本子上畫類似于連環(huán)畫一樣的圖，也就是分鏡頭，導(dǎo)演通過這些“連環(huán)畫”來告訴攝影師，演員，接下來的故事，你將出現(xiàn)在哪里，角度是怎樣的，如何與周圍的環(huán)境互動，攝影師需要知道這個(gè)場景要如何拍攝，通過什么角度來進(jìn)行拍攝，拍攝時(shí)間，對白等等。也有人將故事板稱為“可視劇本”（visual script），讓導(dǎo)演、攝影師、布景師和演員在鏡頭開拍之前，對鏡頭建立起統(tǒng)一的視覺概念。在電影拍攝期間，為了讓一個(gè)龐大的劇組協(xié)調(diào)工作，那么，解釋劇本、解釋導(dǎo)演意圖和工作要求的最辦法就是“看”，當(dāng)一場戲的場景動作、拍攝、布景等因素比較復(fù)雜而難以解釋時(shí)，故事板可以很輕松地讓整個(gè)劇組建立起清晰的拍攝概念。下圖是《冰雪奇緣》的故事版。

說到這里，相信大家一定對故事版的概念有了大概的了解，那么Xcode的中的故事版是什么呢？我們知道，APP也是由一個(gè)一個(gè)頁面構(gòu)成，每個(gè)頁面承載不同的內(nèi)容和功能，同時(shí)這些頁面又是相互關(guān)聯(lián)和依存的，沒有一個(gè)界面能脫離其他界面單獨(dú)存在，整個(gè)app界面我們把他理解為上圖的一幅幅的“分鏡頭”，再通過某種方式組合起來，就形成了一個(gè)完整的app結(jié)構(gòu)。下圖就是靜電在故事版上講的故事。每一個(gè)頁面就是一個(gè)“場景”，場景之間使用箭頭和連線將一個(gè)個(gè)的故事串聯(lián)起來，形成一個(gè)完整功能的“故事”。Xcode這款針對開發(fā)者的工具中為我們提供了非常友好的可視化界面，讓我們通過故事版，就可以完成一個(gè)簡易或者復(fù)雜的功能，一切只需要使用各種組件和連線而已。

二、為使用故事版準(zhǔn)備設(shè)計(jì)稿

首先我們要準(zhǔn)備設(shè)計(jì)稿，準(zhǔn)備一組相互關(guān)聯(lián)的效果圖，以下是靜電準(zhǔn)備的一組設(shè)計(jì)，當(dāng)然，推薦使用同樣有故事板的Sketch來設(shè)計(jì)。從最左邊的分類入口“情感”點(diǎn)擊進(jìn)入“情感”分類列表，然后點(diǎn)擊某一本作品，進(jìn)入作品主頁，在作品主頁點(diǎn)擊作者頭像，進(jìn)入作者主頁。整個(gè)流程可以點(diǎn)擊左上角返回按鈕后退。

靜電的Sketch教程合集：

1. 《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（一）》
2. 《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（二）》
3. 《SKETCH設(shè)計(jì)教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗(yàn)》

三、設(shè)定Xcode故事板尺寸

準(zhǔn)備好這些效果圖后，我們接著打開Xcode。和第一章的做法一樣，我們要新建一個(gè)工程文件。在Xcode啟動后的歡迎界面選擇箭頭所示的選項(xiàng)。或者選擇屏幕左上角的File>New>Project，同樣可以新建一個(gè)項(xiàng)目。

選擇Single View Application

接下來我們給項(xiàng)目起一個(gè)名字，product name你可以隨便寫，第二項(xiàng)也可以隨便，第三項(xiàng)默認(rèn)，language選擇swift或者object-c均可，設(shè)備選擇iphone，最后的對勾不用勾選。接著Next

提交后就來到我們熟悉的界面了，左邊的一列是Xcode自動為我們生成的文件，中間最大的區(qū)域?yàn)楣ぷ鲄^(qū)，右側(cè)為元素的屬性欄目。是不是跟某些軟件很像呢？

那么Storyboard在哪里呢？眼睛尖的同學(xué)想必已經(jīng)發(fā)現(xiàn)，左側(cè)的文件列表區(qū)域有一個(gè)名為Main.storyboard的文件，對啦，這就是我們今天的主戰(zhàn)場，快點(diǎn)擊打開吧。

打開這個(gè)Main.storyboard文件后，中間的工作區(qū)域與右側(cè)的面板會發(fā)生變化，如下圖所示。我們發(fā)現(xiàn)，中間出現(xiàn)了一塊類似于sketchartboard一樣的東西，對，這就是Xcode中的故事板啦，我們可以在故事板上作畫，但是，這個(gè)畫板的尺寸好像不太合適，我們需要將尺寸改成我們需要的手機(jī)尺寸大小（這里為了簡單起見，靜電先不介紹autolayout，也就是自動布局功能，這個(gè)是為iphone6 及plus等更大屏幕準(zhǔn)備的新功能），依次按箭頭點(diǎn)擊，找到use Auto Layout，將前面的對勾去掉，這個(gè)時(shí)候你會發(fā)現(xiàn)“畫布”尺寸發(fā)生了變化，好像開始正常起來了對吧？

親愛的讀者們，你們手頭是用哪一款iPhone手機(jī)來調(diào)試呢？如果是iphone5，那么就調(diào)成640-1136大小（然后尺寸除以），如果是iPhone6，或者plus就各自選擇對應(yīng)的尺寸即可，靜電在這里的設(shè)計(jì)稿使用iPhone5s來設(shè)計(jì)的，所以這里選擇ip5的尺寸，注意將物理分辨率寬高分別除以二（Xcode中，我們務(wù)必將設(shè)計(jì)稿的尺寸除以2，這一點(diǎn)請務(wù)必記住了）。那么在哪里具體設(shè)置畫布的尺寸呢？請看下圖，上邊的箭頭所指示區(qū)域是一把尺子，這代表著關(guān)于元素尺寸方面的東東，都可以在這里設(shè)置，那么我們點(diǎn)擊然后按自己的設(shè)計(jì)稿尺寸或者手機(jī)物理分辨率尺寸除以2，填寫在下邊的框中。我們的第一個(gè)畫布就這么完成設(shè)定了。

左側(cè)的箭頭表示什么呢？那表示我們現(xiàn)在被箭頭指的這個(gè)是初始界面。

四、了解故事板的構(gòu)成元素——組件

開發(fā)人員可以用代碼實(shí)現(xiàn)無比復(fù)雜的功能，那么作為設(shè)計(jì)師，我們完全可以通過Xcode找到替代品，如下圖右側(cè)就是各種的組件，我們可以用組件實(shí)現(xiàn)不同的功能，最基本的組件就是最左側(cè)箭頭所示的View controller。這個(gè)組件是做什么的呢？我們可以嘗試拖動一個(gè)View controller組件到工作區(qū)的空白位置，發(fā)現(xiàn)了什么？是的，又生成了一張“畫布”！這個(gè)奇妙的功能，我只告訴讀這篇文的同學(xué)啊，很好玩吧？那么View controller左側(cè)的箭頭是做什么的呢?好，我們同樣拖動一個(gè)箭頭到一個(gè)VC（view controller簡寫，下同）上，發(fā)現(xiàn)了什么？箭頭附加到了這個(gè)VC的左側(cè)，這個(gè)代表我們的故事是從這個(gè)VC開始的，也就是這個(gè)是啟動界面完成后第一次進(jìn)來的界面啦。

靜電在這里準(zhǔn)備了四個(gè)界面，所以，拖動四個(gè)VC到主界面上，依次排列好.然后在這里我們還需要了解另一個(gè)控件-image view。由名字可以猜出來，image view是來展示圖片的容器。但image view必須依附VC存在而不能單獨(dú)存在。

可以這么理解，VC是畫布，沒有畫布，我們不能在上邊做任何操作。下圖位置的圖標(biāo)就是image view，在每個(gè)VC里都拖動一個(gè)image view吧！（請注意，拖動到VC的操作必須在視圖百分比顯示而不是縮放的情況下，且選中VC的情況下才能拖動，如果你無法實(shí)現(xiàn)拖動，記得在主界面右鍵或者雙擊左鍵放大視圖，同時(shí)選中一個(gè)VC，然后再拖動）

很簡單對嗎？完成后，就如上圖所示的樣子，可能有朋友發(fā)現(xiàn)自己的imageview大小不太對，很小。沒關(guān)系，我們在后邊可以調(diào)整他的大小。接著點(diǎn)擊下圖所示的位置展開“圖層”，我們會發(fā)現(xiàn)類似ps里圖層的東西，還有一點(diǎn)，image Vew是在VC的下級里的，也就是被包含的關(guān)系，以后如果我們在VC里放入其他元素，也會出現(xiàn)在Vew的下級。

五、導(dǎo)入圖片資源到Xcode

接下來我們還卻一樣?xùn)|西，就是設(shè)計(jì)稿圖片了，ok，準(zhǔn)備好本文開頭靜電提到的圖片素材（你可以使用sketch或者任何你喜歡的作圖軟件設(shè)計(jì)）。接著從最左側(cè)的文件庫中找到帶有藍(lán)色圖標(biāo)的images.xcassets．打開它，我們發(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)入圖片方式，就是之間把圖片文件拖動到左側(cè)的文件目錄中，這里靜電不推薦．）appicon是程序的圖標(biāo)，現(xiàn)在我們可以將制作好的圖標(biāo)文件拖動到里邊，如果現(xiàn)在沒有準(zhǔn)備這個(gè)圖標(biāo)，也無所謂，沒有他我們可以照樣繼續(xù)工作。待會兒再做不遲。

把你剛剛做好的設(shè)計(jì)稿拖動到第二欄即可。這里為了方便，我們要把文件名加上@2x或者@3x的后綴。這樣Xcode可以自動識別該放哪一欄。這樣圖片文件已經(jīng)導(dǎo)入到Xcode工程中了，我們可以在image view里調(diào)用。

六、讓storyboard顯示圖片

返回Main.storyboard文件，選中剛剛拖動到VC里的UIimageView，接著我們可以對這個(gè)容器的屬性進(jìn)行設(shè)置了。

如果imageView尺寸不對，ok，我們在下圖的位置更改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ì)稿較長，選擇top比較合適），同樣我們可以調(diào)節(jié)透明度（alpha），其他選項(xiàng)大家可以自行點(diǎn)點(diǎn)看，我們現(xiàn)在暫時(shí)用不到，不再講解。

依照這個(gè)操作步驟，把剛剛導(dǎo)入的圖片賦予每一個(gè)imageview。

七、按鈕——為storyboard加入點(diǎn)擊事件

用過flash等軟件的朋友一定知道，要讓某些元素相應(yīng)我們的點(diǎn)擊或者其他事件，我們必須把他設(shè)置為按鈕。在Xcode中，這同樣適用。在組件庫里找到按鈕（button）組件吧，相信你一定可以找到。接著拖動到你想要相應(yīng)點(diǎn)擊事件的位置（當(dāng)然必須在vc中），另外，必須保持VC為選中狀態(tài)再進(jìn)行拖動哦。

拖動按鈕到合適的位置，選中按鈕，同樣在右側(cè)屬性窗口改變他的屬性，按鈕可以是純文字的，我們也可以用圖片來當(dāng)按鈕。這里靜電做一個(gè)隱形的按鈕，在屬性窗口，把button字樣刪除即可。然后拉大button區(qū)域到你認(rèn)為合適的位置。同樣為其他的VC中你覺得需要鍵入按鈕的地方設(shè)置按鈕。（如果你找不到隱形的按鈕，可以展開組件抽屜，“圖層”形式的操作你一定可以找到并操作好的，但這里與ps的圖層有區(qū)別，一個(gè)元素位于另一個(gè)元素的上方，圖層中顯示順序是在其下方的）

八.讓StoryBoard動起來吧！

按鈕加好后，我們來進(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)擊右鍵并拖動到目標(biāo)界面

3. 在彈出的層中選擇“modal”（push現(xiàn)在不可用，下節(jié)講解push的用法）

4. 這個(gè)時(shí)候兩個(gè)VC中出現(xiàn)了連接線，選中鏈接線，在右側(cè)屬性欄設(shè)置transition，也就是跳轉(zhuǎn)動畫（自己試試哦）

5. 這樣一個(gè)鏈接就完成了

6. 依次為所有的按鈕都加上連線（注意方向，從左到右跳轉(zhuǎn)，就鼠標(biāo)右鍵從左到右劃線，反之從右到左。）

7. 選中連線可以更改跳轉(zhuǎn)的屬性，動畫。以下是靜電使用的屬性。

大功告成，我們可以運(yùn)行下模擬器看看效果了。靜電這里的設(shè)計(jì)稿是為ip5設(shè)計(jì)的，所以選擇ip5或者5s的模擬器。怎么樣？這樣設(shè)計(jì)稿就連接起來了。看看靜電實(shí)際的演示效果吧。沒有一行代碼，輕松完成頁面之間的跳轉(zhuǎn)，當(dāng)然，他的功能還不只這么簡單，下一節(jié)，我們會繼續(xù)深挖Xcode的神奇組件。看看他還能給我們帶來哪些更奇妙的好東西。嗯哼，設(shè)計(jì)師也會Xcode，讓開發(fā)工程師和產(chǎn)品經(jīng)理也羨慕一下吧！

素材為Xcode工程文件，大家下載后可以直接打開參考。微盤下載

下一次將會是Xcode的教程第四節(jié)，內(nèi)容更精彩，不容錯(cuò)過，靜電為大家?guī)砀猛娴?零代碼，只為設(shè)計(jì)師更好的做交互和設(shè)計(jì)!歡迎關(guān)注靜電的微信帳號jingdesign91，不定期為大家?guī)盱o電獨(dú)家原創(chuàng)教程。

別在哼哧哼哧的只顧悶頭做圖啦，讓設(shè)計(jì)稿動起來吧！

掃描二維碼關(guān)注公眾號: jingdesign91，歡迎加入靜Design。

專為畢業(yè)生量身打造的三篇好文！幫你迅速找到好工作！

大咖前輩現(xiàn)身說法！親歷者經(jīng)驗(yàn)！
《畢業(yè)生必看！剛?cè)胄械脑O(shè)計(jì)師如何敲開大公司的門》

有了這個(gè)，就不怕遇到黑心老板啦！
《找工作必備！教你一眼識穿招聘公司有木有坑》

朋友擠破頭來讓你幫個(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"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量87萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(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è)哥微信號：youshege