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

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

再次摘錄出第一節的，設計師為什么要接觸Xcode的5個理由：

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

最后再加上一條，學習了Xcode之后，你會不用花費一行代碼，就可以生成一個在真機上演示的APP，對于設計師來說，沒有比自己的設計稿被實現更有成就感了對吧？

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

前兩章教程：

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

一、什么是故事板？

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

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

二、為使用故事版準備設計稿

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

靜電的Sketch教程合集：

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

三、設定Xcode故事板尺寸

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

選擇Single View Application

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

提交后就來到我們熟悉的界面了，左邊的一列是Xcode自動為我們生成的文件，中間最大的區域為工作區，右側為元素的屬性欄目。是不是跟某些軟件很像呢？

那么Storyboard在哪里呢？眼睛尖的同學想必已經發現，左側的文件列表區域有一個名為Main.storyboard的文件，對啦，這就是我們今天的主戰場，快點擊打開吧。

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

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

左側的箭頭表示什么呢？那表示我們現在被箭頭指的這個是初始界面。

四、了解故事板的構成元素——組件

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

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

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

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

五、導入圖片資源到Xcode

接下來我們還卻一樣東西，就是設計稿圖片了，ok，準備好本文開頭靜電提到的圖片素材（你可以使用sketch或者任何你喜歡的作圖軟件設計）。接著從最左側的文件庫中找到帶有藍色圖標的images.xcassets．打開它，我們發現右側的主界面發生了變化。接著點擊appicon，這個時候主界面出現了我們很熟悉的東西，2x，3x。

秒懂！是的，Xcode在新版本中為我們提供了這個images.xcassets功能，我們可以將所有圖片都扔在這個里邊（當然，還有一種傳統的導入圖片方式，就是之間把圖片文件拖動到左側的文件目錄中，這里靜電不推薦．）appicon是程序的圖標，現在我們可以將制作好的圖標文件拖動到里邊，如果現在沒有準備這個圖標，也無所謂，沒有他我們可以照樣繼續工作。待會兒再做不遲。

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

六、讓storyboard顯示圖片

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

如果imageView尺寸不對，ok，我們在下圖的位置更改Width與Height的值，讓其充滿VC（再次強調，這里的數值是我們實際設計稿的一半，以后都要形成這個概念，這也是我們為什么一定要將圖片素材做成偶數像素的原因）。

接著切換到下圖箭頭位置，調用圖片文件到imageview，如果發現圖片被拉伸或者壓縮了，可以嘗試調節第三個箭頭所示的縮放模式（如果設計稿較長，選擇top比較合適），同樣我們可以調節透明度（alpha），其他選項大家可以自行點點看，我們現在暫時用不到，不再講解。

依照這個操作步驟，把剛剛導入的圖片賦予每一個imageview。

七、按鈕——為storyboard加入點擊事件

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

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

八.讓StoryBoard動起來吧！

按鈕加好后，我們來進行最后一步，也是最關鍵的一步，讓各個“故事版”形成關聯。也就是指定一個按鈕的去向是哪里？首先選中第一個vc中的按鈕，我們要實現的效果是，點擊后跳轉到第二個界面。

這里操作稍微復雜，靜電一步一步講解

1. 選中一個按鈕

2. 在這個按鈕上點擊右鍵并拖動到目標界面

3. 在彈出的層中選擇“modal”（push現在不可用，下節講解push的用法）

4. 這個時候兩個VC中出現了連接線，選中鏈接線，在右側屬性欄設置transition，也就是跳轉動畫（自己試試哦）

5. 這樣一個鏈接就完成了

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

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

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

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

下一次將會是Xcode的教程第四節，內容更精彩，不容錯過，靜電為大家帶來更好玩的!零代碼，只為設計師更好的做交互和設計!歡迎關注靜電的微信帳號jingdesign91，不定期為大家帶來靜電獨家原創教程。

別在哼哧哼哧的只顧悶頭做圖啦，讓設計稿動起來吧！

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

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

大咖前輩現身說法！親歷者經驗！
《畢業生必看！剛入行的設計師如何敲開大公司的門》

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

朋友擠破頭來讓你幫個忙？看看這篇！
《人情練達即文章：如何拒絕朋友免費做設計的要求？》

投稿者：@JingDesign

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量87萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
官方微信：想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎？添加優設哥微信號：youshege