在過去的一個月，我每天早上 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 項目：
可以在上面這個項目上自己進行摸索，可以随便調試設計，項目的資源檔案在：
沒有代碼
如果你回頭看看那些複雜的部分，Xcode 會比 HTML/CSS/SCSS/Javascript 簡單得多。它提供了強大的 UI 可以讓你編輯絕大多數應用上的視覺元素。某種意義上來說，它就是所見即所得了（WYSIWYG）。下次，我會讨論如何用最少代碼，僅依靠使用 CocoaPds和第三方庫的去定制字型、聲音、動畫等。如果你有興趣關注後續 Ripple 應用的開發或相關 Xcode 教程，你可以在twitter 上關注我：@
mengto