写给设计师同学的xcode使用教程: 教你用 Xcode 做原型设计
在過去的一個月，我每天早上 7 點起床，一直工作到晚上 7 點，在完成在 Carshare.hk 的那份全職工作之余，一直都在致力于完善那個 Ripple 應用。這個月全是關于 iOS 方面的經驗，我面對的挑戰是在年底前發布這個 iOS 應用之余，還要為之做些 設計師/前端 的工作。
下載 Xcode 開發原型：
http://cl.ly/2A0m0j0i0g1K
擁抱 Xcode 故事板（Storyboard）
在做應用的時候，我遇到一個很崇尚使用故事板的 iOS 開發牛人。我以前用過故事板來做原型設計，但我的夢想一直是做一個功能性的 iOS 應用。在他的幫助下，我終于能大大地簡化了 iOS 開發，因為他會集中于更高級的交互設計，而我得以專心與每個像素的細節、動畫和各處的設計布局。蘋果的開發文檔是世界級的好質量，這對我來說是幸運的。另外，去?Stackoverflow看看，會知道這個社區的人也很多。但這次，我們不用寫代碼。
為設計師的簡化
作為一個不得不要在用戶體驗、視覺設計和前端這些內容中徘徊的設計師，我不希望事情是復雜的。因為有時候要成為一個高效的設計師，要能夠說不。如果我需要學會整個 Objective-C 語言，那么我就會失去動力。在這個文章中，我不會說太復雜的東西，部分原因是覺得其他人已經在這方面做得很好了。 相反，我會首先接觸些設計師已經熟悉了的東西，然后在慢慢邁向故事板。
iOS7 和 Xcode5
在 iOS7 中，設覺設計發揮的作用已經不像從前那樣大了，這要求設計師更加注重風格背后的功能上。伴隨著 iOS7 的重磅更新，蘋果公司也發布了 Xcode5，一個比以往更加易用的開發工具。它新添了構件庫(Assets Library)，自動配置工具(Automatic Configuration，可以更方便地在 iPhone 上測試)，快速打開（Open Quickly，就 SublimeText 的那樣），SpriteKit，還有一些更穩定的故事板。
開始使用 Xcode
安裝 Xcode 后，創建一個新的項目。
選擇單視圖應用（Single-View Application），然后給它命名。
每一個新項目都有一個故事板(Storyboard)
增加一個構件庫(Assets Library)
每個 iOS 設計師都會對應用圖標（AppIcon）和登錄圖片（LaunchImage）感到熟悉。通過鼠標拖拉就可以把圖片填充上去。（譯者注：這里對圖片格式會有要求，如不可以添加 jpg 格式圖片，可以添加 .png 格式圖片）
構件庫，我的最愛
如何把設計好的構件效果在移動設備上完整實現出來，一直是設計師和開發者交流時最大的問題。
開發者們不得不學 Sketch 或者 Photoshop 去實現設計師他們的設計，或者，不得不就怎么樣把構件效果實現出來和設計師們討論。對絕大部分的設計師來說，為構件寫文檔是一個非常耗時間但又是必須做的事情。然后，就有了那些可怕的可伸縮插件。你必須知道它們是怎么編寫出來的，但這些又是非常復制，復雜到需要很多教程來學習。然后，現在不用了。 Xcode 5 會自動為你穿件這些可伸縮構件。
來自?Sketch, 把插件以 2倍大小和一半大小到處。Sketch 會自動命名好。
從 Sketch 中導入構件到 Xcode 中，Xcode 會自動匹配它們。
對于那些可伸縮的構件，點擊打開顯示切片(Show Slicing)
然后，點擊 開始切片(Start Slicing）
根據你需要，點擊這三個按鈕進行挑戰
看，Xcode 自動為你做好這些了。然后根據這個流程，處理你那些按鈕和氣泡。
你的第一個屏幕顯示
讓我們開始做第一個屏幕顯示。在你的故事板中，從對象庫（Object Library）中拖拉圖像視圖(Image View)
然后，去屬性檢測器（Attributes Inspector）中編輯圖像。如果在構件庫中找到對應構件， Xcode 會自動顯示出效果。
試著把圖拉拽到另一個 圖像視圖（Image View），然后把它設成氣泡白。當你調整尺寸時，你會注意到它能很好的適應伸展。
然后創造一個頭像。當你按住 Alt 的時候，你會看到一個類似在 Sketch 中的功能:)
現在，拖拽一個標簽（Label），然后后設置文字（Text）內容，你可以把行數（Lines）設為 0，這樣就可以不限制行數了。
去尺寸檢測器（Size Inspector）那，用數字調整尺寸，這會更精確。
作為一個完美主義者，你應該盡可能讓你的設計變得更好:)
關于字體，你可以選擇一個較瘦的 iOS7 字體, 推薦 Helvetica Neue Light
輸入信息的界面
把 View 拖進來，它就像是一個文件夾那樣，你可以把所有的東西拖進去。它有自己的屬性，是非常好用的。
如果你也做過 CSS 的話，文字框某些屬性你應該會熟悉。確認下邊框效果(Border style)已經取消了。
然后，那個聲名狼藉的按鈕。注意高亮顯示的那些屬性。
導航條
這里有一個簡潔的技巧：去幫助(Help)菜單，找到嵌入(Embed)，熱后，在導航控制（Navigation Controller）中選擇嵌入。
在左邊邊框，選擇導航條（Navigation Bar）, 它在故事板中自帶了許多中樣式可以選擇。
想要一個標題？編輯你的 視圖控制器（View Controller）的導航條目(Navigation Item)下的屬性.
是的，導航條有執行按鈕。這個對象是在每個庫的最末端。記得去編輯下著色的顏色，因為 Xcode 會自動幫你的圖像上色。
圓角
在 CSS 中，你經常不想使用圖像來做一些類似圓角的效果。但是，在 Xcode5 中，你可以程序化地設置圓角，這非常有用。
在這個表格中，我們要創建一個視圖（View），它可以放置所有的東西，然后加上圓角。記得打開
"剪切子視圖(Clip Subviews)"，它的作用就相當于「overflow:hidden」
設置 layer.cornerRadius 運行時屬性（Runtime Attribute）
這個效果不會在故事板中顯示出來，但會在模擬器中顯示出來。
鏈接到其他屏幕
創建一個空的按鈕，然后把它放在視圖里面
按住 Ctrl，把那個按鈕拖拽到其他屏幕。選擇推送（Push），記得在根屏幕上有一個導航條，否則這個會沒效果。
1像素（px）的行
Xcode 是在 pt 單元運作的（pt unit）。你其實沒有真的創建一個視圖，然后把視圖設成 0.5pt 或者 1px。所以，如果你需要建一個頭發那樣細的行，你必須要創建一個 1 像素的構件。
工具條導航
iOS 自帶的工具條非常具有可定制性的。你可以改變它的顏色、文字和圖標。
選擇了視圖控制器之后，搜過之前做過的 「嵌入」，然后這次選擇 Tab 條（Tab Bar）。
就像在導航條的那樣，你可以在每個視圖控制器中編輯
有時候，你不想要導航條或者工具條，你可以通過「選擇下方條為空（Selecting Botton Bar to None）」，然后點擊「隱藏下方條推送（Hide Botton Bar on Push）」。
滾動
每個人都鐘愛 iOS 上的滾動反彈(Bounce back scroll), 如果你也想要這個效果，你必須有一個表格視圖（Table View）作為容器，它的結構是：Table View / View (full) / Your objects.
小心，表格視圖和視圖會提前加載一個白色背景。確保已經設置成清色（Clear color）了。
在屏幕中，有部分是可滾動的，這個能使屏幕活潑些。
下載這個 Xcode 項目：
可以在上面這個項目上自己進行摸索，可以隨便調試設計，項目的資源文件在：
http://cl.ly/2A0m0j0i0g1K
沒有代碼
如果你回頭看看那些復雜的部分，Xcode 會比 HTML/CSS/SCSS/Javascript 簡單得多。它提供了強大的 UI 可以讓你編輯絕大多數應用上的視覺元素。某種意義上來說，它就是所見即所得了（WYSIWYG）。下次，我會討論如何用最少代碼，僅依靠使用 CocoaPds和第三方庫的去定制字體、聲音、動畫等。如果你有興趣關注后續 Ripple 應用的開發或相關 Xcode 教程，你可以在twitter 上關注我：@mengto
總結
以上是生活随笔為你收集整理的写给设计师同学的xcode使用教程: 教你用 Xcode 做原型设计的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Objective-C总Runtime的
- 下一篇： ios中播放gif动画