設計師眼中功能強大的Xcode

作為設計師，不僅要能創造出移動為先的新產品，更要了解能創造出優秀移動作品的工具。這個實現過程可以讓我們的設計更加優秀。

過去兩個月，我每天在Xcode上花費的時間大約有10個小時，我學到了很多完全改變我的工作流程的技術。Xcode是一款成熟的工具包含了很多強有力的但沒被經常使用的功能。如果你不確定Storeboard是CSS的未來，或者沒有直接使用Xcode工作，這篇文章至少會告訴你Xcode如何為你的設計做準備和它有什麼可能的限制。

預覽你的設計

如同你跨多解析度裝置，在瀏覽器中預覽web app一樣，你可以通過Storyboard preview這個強大的功能來進行預覽。

在這個螢幕上，我預覽了設計在iPhone 4的3.5英寸螢幕上的展示情況，而不用在模擬器中執行和導航至特定的頁面。

給圖片著色

對於設計師來說，在程式中為多個例項必須建立多個資源是設計過程中遇到的主要障礙之一。Xcode能給你的圖片著色，你只需知道它，因為這個不會貫穿使用。

為導航欄按鈕著色

如果設定為系統就可以為為按鈕圖片著色，系統會給你一個很好的按鈕按下狀態轉換。UIImage不允許你簡單地為圖片著色，除非是在程式碼中，所以往往你應該使用UIButton代替，它有更多選擇。

使用十六進位制顏色

自從Photeshop和Sketch以來，許多的設計師常使用十六進位制編碼來配置顏色值。為了使用十六進位制編碼，你必須下載 “Hex Color Picker”增加色彩檢測。

它也是更精確的顏色選擇器工具

嵌入和解除嵌入

考慮到在Photoshop中以資料夾的嵌入。Xcode允許你把許多元素整合進UIView或者UIScrollView裡。由於UIView在Canvas動畫、組織目的以及選擇方面非常有才能，你可以把相關的元素嵌入到一起。

我喜歡嵌入功能，我可以新增鍵盤快捷鍵（像Sketch快捷鍵一樣）來建立資料夾。

我正在建立多個列隊動畫，我把這些元素分組派進多個嵌入，這樣我可以對它們單獨動畫。

自動佈局

這是一個連許多經驗豐富的開發者也頗為頭疼問題。所以我試著簡化它。這是一個允許你的設計自動適配的工具。

我想要讓Canvas中的白色方框在水平方向上和垂直方向上居中。首先，開啟預覽。如圖所示，在iPhone 4中，白色方框錯誤地自動調整大小。

把白色方框拖至Superview（that’s how they call the canvas），我選擇了在Container中居中。按住Shift鍵，點選水平方向和垂直方向，然後你必須設定白色方框的寬度和高度。

這是最基本的。對於複雜的場景，它要花費很多時間來練習，我建議你看看WWDC視訊： Taking Control of Auto Layout in Xcode 5。如果你想要節省開發時間，你應該明確的學習自動佈局。

動態字型

iOS 7引入了基於使用者喜好設計字型大小的能力。

即時使用自定義字型，你可以使用iOS 7的Text Styles來設定使用者喜歡的大小。

操作和對話方塊

在Xcode中，你能快速建立操作表單和對話方塊。為什麼花那麼多時間在蘋果已經很完美的東西上呢？

使用已經成熟的功能，這樣你可以更加關注app其他部分。

簡單使用相機

在Xcode中只需20行程式碼就可以使用Xcode的相機了。

聲音

帶有聲音的app會更加有趣。使用SimpleAudioPlayer一行程式碼：[SimpleAudioPlayer playFile:@”filename.mp3″];  就可以播放音樂。

動畫效果

使用SimpleMotionEffects一行程式碼：[self.myView addMotionEffectWithMovement:CGPointMake(15, 15)] ；你能建立這樣的效果。

最後的思考

如果你已經開始了，那麼在9天時間裡建立一個iOS App是可能實現的。iOS app能像Web app那樣快速建立，對大多數設計師來說只是一個時間問題。