Xcode不只是開發者用來開發iOS Apps的開發工具，一樣也能夠被設計師用來建立App的高保真交互原型。在Xcode開發環境裏，沒有任何限制，設計師能夠嵌入各類各樣有趣的交互，動效和聲音去創造一個真正的iOS App的體驗。在這個教程中，主要講述Xcode工具中Storyboard功能，這個功能可讓設計師不用任何一行code去建立一個iOS App的原型，這僅僅須要花費幾個小時而已。
教程的最終目標是把設計在iOS環境下生成完整的可交互原型。就像WEB設計中學習CSS同樣，這能夠極大幫助開發者解決UI還原部分的工做，並幫助設計師和開發者更好的進行合做。正如喬布斯所說:「Design is how it works.」 靜態的圖片對設計來講並不足夠，須要把設計帶入到真實生活中。
獲取Xcode
在App Store 中下載Xcode
Start A New Project(開始一個新項目）
1）打開Xcode，而後「Create a new project（建立一個新項目）」
2）選擇「Single View Application(單視圖模板）」
3）編輯項目名稱和公司名稱
初始化App設置
1）選擇僅支持Portrait模式（豎屏）
2）選擇App的 icons
3）選擇App的Launch Images（啓動頁），Launch Images就是當App啓動時展示的第一個頁面。
XcodeUI界面
初次使用Xcode可能會感受到界面有一點複雜。在這個教程中，咱們只專一Storyboard功能有關的部分。
Add images(插入圖片)
準備好App的設計頁面，頁面中不要包含頂部的狀態欄。想要把這些圖片插入，首先要選擇一個「 Group」(組），而後「Add Files To… (添加文件到…)」。固然也能夠直接拖拽圖片到建立的Group中。
在執行操做前要確認「Copy items into destination group」（拷貝到指定組中）和「Add to targets」（加入到目標中）兩個選項已經啓用。
First Screen（第一場景）
到此初始化設置已完成，設計稿圖片也已經添加到組中，終於能夠開始使用Storyboard工具了。如今去Storyboard面板並從Object Library（控件庫）中拖拽一個Button(按鈕）到工做區中。
爲何先放置一個Button（按鈕）？由於這個Button能夠起到一個可被點擊並跳轉到第二個場景的做用。調整Button尺寸，讓它和總體尺寸的比例大小合適。
當選擇按鈕的時候，須要查看一下Attributes Inspector（屬性面板）。其中咱們關注的屬性是type（類型）、title（標題）和image（圖片）。把類型選擇成custom（定製），title（標題）設置爲none（無），image（圖片）設置成設計稿中的第一個頁面（輸入圖片名字的時候系統會幫助自動補齊)
Second Screen（第二個場景）
場景在Xcode環境中被稱做「Controllers（控制器）」。要開始建立第二個場景，簡單的拖拽一個View Controller（場景控制器）到工做區，並重復以前步驟就能夠了。
把場景聯繫起來
Xcode經過一個被稱做爲「Segue（連接）」把不一樣的場景關聯起來。爲了建立一個「Segue（連接）」，按下鍵盤上「Control」鍵同時使用鼠標光標把第一個場景拖拽到第二個場景上。選擇「modal」（模態）模式。這樣會創造出一個第二場景從底部滑入的轉場動效。
能夠經過點擊兩個場景之間的「Segue」（兩屏之間也圓形圖標）對轉場動效果進行定製，經常使用的動效有 Cover Vertical（底部滑入）, Flip Horizontal（水平翻起）, Cross Dissolve（淡入淡出） or Partial Curl（翻頁捲起）。 若是不想使用轉場動效，取消勾選「animate」（動效）選項便可。
Push Segue（右側滑入轉場動效）
Push Segue（有導航條類型連接）只有存在Navigation Controller（導航控件）場景下才能使用。要想建立一個Navigation Controller，選擇第一個場景的View Controller（場景控制器）選中頂部菜單Editor(編輯）>Embed in（嵌入）>Navigation Controller。插入導航控件後，全部連接在一塊兒場景頂部都出現Navigation Controller的導航條。
若是想要移除導航條，選中Navigation Controller，而後把Top bar（頂部條）設置爲none
到了這步，能夠選擇使用Push Segue併爲其選擇一個Horizontal Sliding（水平滑入動效）。
測試你的App
Xcode內嵌着一個iOS模擬器能夠預覽當前的工做。要想預覽，選擇iPhone6.1模擬器並點擊左上方的Run（運行）按鈕。而後，屏幕正中會出現一個iPhone預覽視圖讓設計師能夠測試剛剛建立過的App。
點擊第一個場景上面的Button，第二個場景會從右側水平滑入。雖然很是簡單，但能夠幫助你們很好的理解Storyboard工具如何工做。
下載 Prototype 1.0 這是當前所設計的原型
Header and Content(標題和內容)
Header and Content會有不少的交互。在View Controller（場景控制器）裏，能夠從Object Library選擇使用任意一種控件。通常比較典型的頁面會有一個穩定Header，若干個button和能夠滾動展現的Content。
首先，必須在Photoshop或者Sketch中把Header和Content分離。如今把以前建立的Button刪掉，並從Object Library中拽取一個圖片控件到Header（標題）位置上。在Attribute（屬性）面板中編輯圖片的名字。至於尺寸，選擇Size tab（尺寸頁卡）把高度設置爲和Header圖片尺寸同樣。
請注意Xcode通常使用pt而不是px做爲單位（1pt=2px），在設置尺寸時請注意單位的換算。
在Header上面，能夠從控件庫繼續拖拽Button和Label控件。
Scrollable Content(可滾動的內容）
爲了設計內容能夠在界面內滾動查看，須要拖拽來一個Table View控件並調整尺寸大小填充頁面中剩餘 部分。在Table View控件區域裏，拖拽來一個Button控件並設置尺寸大小和圖片大小一致。在這個Button控件上能夠編輯一個Segue連接第二個場景。在當你按下Control進行拖拽和放置的時候確保Button是一直被選中的。
與此同時，還必須確認Header（標題）圖層要比Table View 圖層更優先運行。Xcode環境中通常採用反向的順序，在底層的圖層會比上層的圖層優先運行。
The Back Button（返回按鈕）
Back button（返回按鈕）之因此會在本文中提到，是由於它是很是重要有用的，文章做者會在將來教程中解釋其如何使用。如今要作的是建立一個Group，把
Object—C category files拖拽到Group裏面。在導入文件的確保勾選上「Add to Targets(添加到目標）」選項。
導入文件後，即可以把Back Button 和底部Exit（退出）圖標連接在一塊兒，這時一個叫作 backbutton（返回按鈕）選項會浮現出來，點擊這個選項。
Views and Objects(視圖和對象）
下面是一個關於Views and Objects （視圖和對象）是如何構建的圖例：
一旦瞭解了Views and Objects（場景和對象),即可以按照你的想法定製上圖中的控件。
在iPhone上預覽
xcode能夠幫助在iPhone上預覽設計的App。不過這是一個比較複雜的過程，並且須要開發者賬號。若是你有開發者賬號，你必須根聽說明和指引去建立證書並修改你的mac的配置文件，完成後才能取得像iPhone安裝App的權限。簡單的把模版裏面的圖片替換成你本身的，調整一下面板裏的屬性，加上新的場景並用Segue連接他們。
下載模板
下面的這個模板能夠幫助你們開始熟悉Storyboard
簡單的把模版裏面的圖片替換成你本身的，調整一下面板裏的屬性，加上新的場景控件並用Segue連接他們。
資源
就像在sketch軟件同樣，研究別人作的Xcode源文件，對於學習Xcode是很是關鍵的。下面是一些對學習Xcode資源有用的資源
Cocoa Controls-能夠找到不少開源的控件
在Github裏面搜索Xcode projects
最後一些想法
做爲一個設計師，我歷來沒想過本身會寫Xcode教程。這個程序原來僅對開發人員有吸引力——程序界面複雜且須要使用者掌握Objective-C，使得使用門檻很是高。所幸，從Xcode 4版本開始增長的Storyboard讓設計師可以規避對編程的恐懼，並能自如地使用程序完成交互設計。
若是沒有iOS開發者Max Tagher的幫助我是沒法完成這篇教程的，是他幫助我解決了使用Xcode中遇到的各類困難。若是你認識有iOS開發背景的朋友，我建議在使用Storyboard遇到困難時向他請教。這是Storyboard系列教程中的第一篇。在下一篇中，會包含如何定製字體，更復雜的流程、動效和聲音。高質量的Xcode資源很不容易找到，若是你有，請分享給你們。