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