寫給設計師同窗的xcode使用教程: 教你用 Xcode 作原型設計

時間 2019-12-29

原文原文鏈接

在過去的一個月，我天天早上 7 點起牀，一直工做到晚上 7 點，在完成在 Carshare.hk 的那份全職工做之餘，一直都在致力於完善那個 Ripple 應用。這個月全是關於 iOS 方面的經驗，我面對的挑戰是在年末前發佈這個 iOS 應用之餘，還要爲之作些設計師/前端的工做。php

下載 Xcode 開發原型：
http://cl.ly/2A0m0j0i0g1Khtml

擁抱 Xcode 故事板（Storyboard）

在作應用的時候，我遇到一個很崇尚使用故事板的 iOS 開發牛人。我之前用過故事板來作原型設計，但個人夢想一直是作一個功能性的 iOS 應用。在他的幫助下，我終於能大大地簡化了 iOS 開發，由於他會集中於更高級的交互設計，而我得以專心與每一個像素的細節、動畫和各處的設計佈局。蘋果的開發文檔是世界級的好質量，這對我來講是幸運的。另外，去 Stackoverflow看看，會知道這個社區的人也不少。但此次，咱們不用寫代碼。前端

爲設計師的簡化

做爲一個不得不要在用戶體驗、視覺設計和前端這些內容中徘徊的設計師，我不但願事情是複雜的。由於有時候要成爲一個高效的設計師，要可以說不。若是我須要學會整個 Objective-C 語言，那麼我就會失去動力。在這個文章中，我不會說太複雜的東西，部分緣由是以爲其餘人已經在這方面作得很好了。相反，我會首先接觸些設計師已經熟悉了的東西，而後在慢慢邁向故事板。ios

iOS7 和 Xcode5

在 iOS7 中，設覺設計發揮的做用已經不像從前那樣大了，這要求設計師更加註重風格背後的功能上。伴隨着 iOS7 的重磅更新，蘋果公司也發佈了 Xcode5，一個比以往更加易用的開發工具。它新添了構件庫(Assets Library)，自動配置工具(Automatic Configuration，能夠更方便地在 iPhone 上測試)，快速打開（Open Quickly，就 SublimeText 的那樣），SpriteKit，還有一些更穩定的故事板。segmentfault

開始使用 Xcode

安裝 Xcode 後，建立一個新的項目。xcode

選擇單視圖應用（Single-View Application），而後給它命名。app

每個新項目都有一個故事板(Storyboard)ide

增長一個構件庫(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

原文連接：Learning Xcode 5 As a Designer
翻譯：SegmentFault