編者按：從零開始幫你掌握Xcode！設計師同學想跟工程師一起開開心心做好產品，懂點開發知識是必不可少的，今天@JingDesign?拿出萬分誠意，寫了這篇Xcode教程，今后就再也不用為了一像素跟工程師吵架咯，趕緊來看！

設計師講Xcode？靜電瘋了嗎？

@JingDesign?：hi，歡迎和靜電一起進入新的學習計劃中。本次我們來點刺激的，對！就是Xcode！什么？有人問Xcode是神馬？好吧，靜電承認這個教程做的確實夠激進，很多人不知道Xcode是神馬東東。那么靜電在這里直截了當的介紹下，Xcode是蘋果公司推出的iOS及MacOS APP開發環境，運行在Mac OS系統中，我們平時在iPhone，iPad及Mac上用的軟件，都是用他來進行開發的. 所以對于iOS開發工程師來說，這是xcode必不可少的工作軟件. 但對于設計師來說，靜電為什么要選擇一款開發工程師使用的軟件作為新一季的教程選題呢?來聽靜電講講。

App設計師為什么要學習Xcode?

大家是否記得靜電上一次發的文《一像素的恩怨情仇！射雞師與工程師的那點破事兒》。這篇文章在設計師群體，甚至開發工程師直接都引起了很大的共鳴，設計師抱怨工程師不愿意為了一像素的錯位去修改程序，工程師覺得總是這么改對于他們實現更高的價值來說，簡直是浪費時間。于是矛盾誕生了，火拼開始了。

另外，在靜電的設計群中，有很多剛剛進入app設計領域的設計師，對于軟件基本的軟件開發原理，像素，ppi等等都不甚了解，要知道，要設計出一款優秀的APP產品，可不是單純會使用photoshop那么簡單的，現在，請大家問自己這樣幾個問題：

1. 在設計APP的過程中，你知道用多大的畫布尺寸來做設計最合適嗎？
2. 你知道@2x，@3x的圖片對應那些設備，他們具體是做什么用的嗎？
3. 有沒有在開發中遇到這樣的問題，一像素的細線總是看起來比一像素粗？
4. 你了解如何在xcode中插入一張圖片，插入一段文字，甚至更多組件的實現原理？你了解imageview，tableview等等專業名詞嗎？
5. 你知道在更大屏幕的ios設備中（如iphone6 plus），元素的適配是基于什么規則來實現的嗎？
6. 你在切圖過程中，有不遵循開發實現方式，以至于讓工程師抓狂的情形嗎？
7. 有沒有想過自己可以了解軟件是如何運行在自己的iPhone上，我們可以自己開發出一款運行在自己手機上的APP嗎？

是的，很多人會說不知道，還有人會說，我為什么要了解這些，這完全是開發工程師的事情，我只需要把效果圖做出來就可以了。如果看了靜電的sketch教程，甚至還有人在吐槽為什么我需要做這些的事情，我想你不適合看這個系列文章。

靜電的Sketch教程合集：

1. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（一）》
2. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（二）》
3. 《SKETCH設計教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗》

以下是靜電總結出來的幾條，你要開始學習Xcode的原因：

1. 讓你不會天馬行空的設計被工程師打回而感到失望和沮喪
2. 讓你更快更高質量的完成你的設計稿，然后再來個錦上添花
3. 讓你每天跟開發工程師開開心心的配合，成為好基友
4. 如果你注定跟工程師成不了好基友，自己搞定那該死的一像素錯位，讓他們刮目相看！

如果這些還不夠，那還有最后一條。你可能會因此成為大神，升職加薪，出任CEO，贏取白富美，走上人生巔峰。讓同事刮目相看

這樣難道還不夠嗎？ 哈哈，一定夠了！來，別被我不會代碼這樣的預設打倒，靜電來回答大家的疑問。

學習Xcode，我必須要會代碼嗎？

放輕松，親。現在，我們來分析一下，靜電認為設計師有這三種情況。

1，我真的不會代碼，看到代碼我就眩暈，嘔吐。Photoshop是我的獨門絕技，快捷鍵用的搜搜，各種特效濾鏡全包。Dreamweaver神馬的直接不會，設計稿完成直接扔給前端工程師幫你完美搞定，代碼神馬的愛哪兒哪兒去~

2，我會一點點代碼，可以改個顏色數值什么的- 恩，我想你已經入了門，用xcode也可以幫你做類似于dreamweaver里的操作。一像素隨便調。

3，我對代碼有天生的好感，如果努力學習，xcode不在話下-這個，請受靜電一拜，大濕收靜電為徒吧，給靜電編個photoshop，做完一個按鈕直接生成app，讓程序猿下崗去吧！

開玩笑，如果你不是這三種中的某一種，那么歡迎告訴靜電你是哪種設計師。 不管怎么樣，對于以上三種設計師，xcode都適合大家不同程度的學習和使用。不用編碼，你可以了解大部分app開發原理，這就夠了。對于第二種第三種，那更好了，如果開發工程師不屑于改神馬一像素，Do it yourself！改到自己滿意為止。

所以，不用擔心，來跟靜電一起Xcode之旅吧。在本章中，靜電用最快的方式教大家安裝xcode并可以在你的電腦上運行。哦，忘了說，你必須要有臺mac電腦。（我不會出去，你們休想打死我。。。保證也沒有用）。PC的同學請先圍觀下，因為，如果大家做安卓開發，這樣的思路同樣試用，只不過你需要一臺PC（Mac也可以），安卓需要安裝eclipse（保佑我沒拼錯單詞）。

下載并安裝Xcode

首先我們可以從蘋果開發者網站下載最新版的xcode.

下載地址：https://developer.apple.com

打開后，我們選擇主菜單的downloads，可以進入下載界面。

然后選擇 View in the mac App Store，到達APP store界面，接著點擊 View in Mac App Store

接下來會打開mac系統自帶的App store，選擇安裝App按鈕.輸入蘋果ID就可以下載了（相信使用iphone設備的同學一定是人手一個id的）

登錄后即可開始下載.文件比較大，請耐心等待. 完成后，我們可以直接在launchpad中找到如下圖標，還是閃閃發光的.

點擊就可以打開了. 或者直接使用spotlight搜索xcode同樣能運行.

Tips：如果App Store無法下載，請使用搜索引擎搜索xcode，會有其他很多網站提供安裝包，請確保下載的版本為最新版，太老了可不好用哈.然后就使用迅雷等等軟件加速下載吧.

你好，Xcode！

打開xcode會出現歡迎界面，界面如下.靜電接下來一個一個為大家介紹。

首先是左邊的三個圖標。

1. Get start with a playground ——這是xcode為了方便我們了解和快速上手swift特意為我們建造的”游樂場”.我們先略過這項

2. Creat a new Xcode Project —— 創建一個Xcode項目。 當我們打算開發一款軟件的時候，一般會使用第二個選項創建一個“項目”

3. Check out an existing project —— 取回一個已有的項目。一般開發會使用svn或者git等版本控制軟件來進行多人協作開發，如果你已經有svn或者git的基礎，有開發人員提供git或者svn服務權限，那么可以直接打開一個現成的工程進行研究。這一項我們在后邊幾章的進階中詳細介紹。

右側的一堆文件圖標，那是靜電打開過的歷史文件記錄。大家會看到一堆的測試文件。

來與xcode一起玩耍吧！

為了快速了解xcode，與這個神秘的軟件交朋友，我們選擇Creat a new Xcode project，新建一個軟件工程，在彈出的界面中選擇Single View Application，點擊next繼續。（其它選項我們現在用不到，這里先不做講解。后期我們會詳細介紹。）

接著為我們的項目起一個名字。下面的選項不用管。直接Next，然后選擇一個保存位置，這個隨便選就好。

確認后我們看到如下界面。 有些朋友第一次安裝可能沒有上面的菜單，這個時候，在如下箭頭所示的位置鼠標右鍵選擇 icon & text。然后選擇 最右邊箭頭，把三個全點成藍色。 所有的界面就出現了。

哇，好復雜有木有，大家會不會一頭霧水？ 別急，我們一步一步來，選擇下圖所示的文件，接下來把屏幕右側的文字隨便改成自己想要的吧。

接下來按圖點擊

1. 選擇一個模擬器

2. 點擊run

如果沒有什么問題的話，你會在模擬器的啟動畫面中看到hello xcode的字樣，這樣 一個空白的，有著hello xcode字樣的簡單app就完成了（啟動畫面小消失很快，記得盯著模擬器看哦。否則你會看到大白邊，啥都沒有）怎么樣，簡單吧？ 如果大家沒看到，請點擊一次stop，然后再運行一遍。

好的，這一次的文字，我們首先跟大家一起來熟悉一下xcode，讓大家不會有太多陌生感。再次聲明一下，本教程主要面向的對象是廣大的app設計師以及對軟件有興趣的朋友，專業人士請不要嘲笑靜電。畢竟，這個在你們眼里，真的是再簡單不過了。好的，接下來的n篇文章中，讓我們來一場設計師的逆襲之旅吧。 別被復雜的功能嚇到，其實，Xcode的很多操作，都可以借助可視化界面及右側的屬性面板完成，這樣很多界面的工作我們可以直接進行調整了。

下一章我們繼續來講解這個實例，讓我們看看怎么在這個簡單的app中加入更多好玩的功能。請持續關注靜電的公眾帳號 jingdesign91，教程會在靜電的公號，站酷中首發。歡迎大家相互交流學習，一同加油！

掃描二維碼關注我: jingdesign91

專為畢業生量身打造的三篇好文！幫你迅速找到好工作！

大咖前輩現身說法！親歷者經驗！
《畢業生必看！剛入行的設計師如何敲開大公司的門》

有了這個，就不怕遇到黑心老板啦！
《找工作必備！教你一眼識穿招聘公司有木有坑》

朋友擠破頭來讓你幫個忙？看看這篇！
《人情練達即文章：如何拒絕朋友免費做設計的要求？》

原文地址：guimobile
作者：@JingDesign

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量87萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：