編者按：從零開始幫你掌握Xcode！設(shè)計(jì)師同學(xué)想跟工程師一起開開心心做好產(chǎn)品，懂點(diǎn)開發(fā)知識(shí)是必不可少的，今天@JingDesign?拿出萬(wàn)分誠(chéng)意，寫了這篇Xcode教程，今后就再也不用為了一像素跟工程師吵架咯，趕緊來(lái)看！

設(shè)計(jì)師講Xcode？靜電瘋了嗎？

@JingDesign?：hi，歡迎和靜電一起進(jìn)入新的學(xué)習(xí)計(jì)劃中。本次我們來(lái)點(diǎn)刺激的，對(duì)！就是Xcode！什么？有人問(wèn)Xcode是神馬？好吧，靜電承認(rèn)這個(gè)教程做的確實(shí)夠激進(jìn)，很多人不知道Xcode是神馬東東。那么靜電在這里直截了當(dāng)?shù)慕榻B下，Xcode是蘋果公司推出的iOS及MacOS APP開發(fā)環(huán)境，運(yùn)行在Mac OS系統(tǒng)中，我們平時(shí)在iPhone，iPad及Mac上用的軟件，都是用他來(lái)進(jìn)行開發(fā)的. 所以對(duì)于iOS開發(fā)工程師來(lái)說(shuō)，這是xcode必不可少的工作軟件. 但對(duì)于設(shè)計(jì)師來(lái)說(shuō)，靜電為什么要選擇一款開發(fā)工程師使用的軟件作為新一季的教程選題呢?來(lái)聽靜電講講。

App設(shè)計(jì)師為什么要學(xué)習(xí)Xcode?

大家是否記得靜電上一次發(fā)的文《一像素的恩怨情仇！射雞師與工程師的那點(diǎn)破事兒》。這篇文章在設(shè)計(jì)師群體，甚至開發(fā)工程師直接都引起了很大的共鳴，設(shè)計(jì)師抱怨工程師不愿意為了一像素的錯(cuò)位去修改程序，工程師覺(jué)得總是這么改對(duì)于他們實(shí)現(xiàn)更高的價(jià)值來(lái)說(shuō)，簡(jiǎn)直是浪費(fèi)時(shí)間。于是矛盾誕生了，火拼開始了。

另外，在靜電的設(shè)計(jì)群中，有很多剛剛進(jìn)入app設(shè)計(jì)領(lǐng)域的設(shè)計(jì)師，對(duì)于軟件基本的軟件開發(fā)原理，像素，ppi等等都不甚了解，要知道，要設(shè)計(jì)出一款優(yōu)秀的APP產(chǎn)品，可不是單純會(huì)使用photoshop那么簡(jiǎn)單的，現(xiàn)在，請(qǐng)大家問(wèn)自己這樣幾個(gè)問(wèn)題：

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

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

靜電的Sketch教程合集：

1. 《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（一）》
2. 《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（二）》
3. 《SKETCH設(shè)計(jì)教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過(guò)不加班？SKETCH絕配神器MIRROR搶先體驗(yàn)》

以下是靜電總結(jié)出來(lái)的幾條，你要開始學(xué)習(xí)Xcode的原因：

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

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

這樣難道還不夠嗎？ 哈哈，一定夠了！來(lái)，別被我不會(huì)代碼這樣的預(yù)設(shè)打倒，靜電來(lái)回答大家的疑問(wèn)。

學(xué)習(xí)Xcode，我必須要會(huì)代碼嗎？

放輕松，親?，F(xiàn)在，我們來(lái)分析一下，靜電認(rèn)為設(shè)計(jì)師有這三種情況。

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

2，我會(huì)一點(diǎn)點(diǎn)代碼，可以改個(gè)顏色數(shù)值什么的- 恩，我想你已經(jīng)入了門，用xcode也可以幫你做類似于dreamweaver里的操作。一像素隨便調(diào)。

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

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

所以，不用擔(dān)心，來(lái)跟靜電一起Xcode之旅吧。在本章中，靜電用最快的方式教大家安裝xcode并可以在你的電腦上運(yùn)行。哦，忘了說(shuō)，你必須要有臺(tái)mac電腦。（我不會(huì)出去，你們休想打死我。。。保證也沒(méi)有用）。PC的同學(xué)請(qǐng)先圍觀下，因?yàn)?，如果大家做安卓開發(fā)，這樣的思路同樣試用，只不過(guò)你需要一臺(tái)PC（Mac也可以），安卓需要安裝eclipse（保佑我沒(méi)拼錯(cuò)單詞）。

下載并安裝Xcode

首先我們可以從蘋果開發(fā)者網(wǎng)站下載最新版的xcode.

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

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

然后選擇 View in the mac App Store，到達(dá)APP store界面，接著點(diǎn)擊 View in Mac App Store

接下來(lái)會(huì)打開mac系統(tǒng)自帶的App store，選擇安裝App按鈕.輸入蘋果ID就可以下載了（相信使用iphone設(shè)備的同學(xué)一定是人手一個(gè)id的）

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

點(diǎn)擊就可以打開了. 或者直接使用spotlight搜索xcode同樣能運(yùn)行.

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

你好，Xcode！

打開xcode會(huì)出現(xiàn)歡迎界面，界面如下.靜電接下來(lái)一個(gè)一個(gè)為大家介紹。

首先是左邊的三個(gè)圖標(biāo)。

1. Get start with a playground ——這是xcode為了方便我們了解和快速上手swift特意為我們建造的”游樂(lè)場(chǎng)”.我們先略過(guò)這項(xiàng)

2. Creat a new Xcode Project —— 創(chuàng)建一個(gè)Xcode項(xiàng)目。 當(dāng)我們打算開發(fā)一款軟件的時(shí)候，一般會(huì)使用第二個(gè)選項(xiàng)創(chuàng)建一個(gè)“項(xiàng)目”

3. Check out an existing project —— 取回一個(gè)已有的項(xiàng)目。一般開發(fā)會(huì)使用svn或者git等版本控制軟件來(lái)進(jìn)行多人協(xié)作開發(fā)，如果你已經(jīng)有svn或者git的基礎(chǔ)，有開發(fā)人員提供git或者svn服務(wù)權(quán)限，那么可以直接打開一個(gè)現(xiàn)成的工程進(jìn)行研究。這一項(xiàng)我們?cè)诤筮厧渍碌倪M(jìn)階中詳細(xì)介紹。

右側(cè)的一堆文件圖標(biāo)，那是靜電打開過(guò)的歷史文件記錄。大家會(huì)看到一堆的測(cè)試文件。

來(lái)與xcode一起玩耍吧！

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

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

確認(rèn)后我們看到如下界面。 有些朋友第一次安裝可能沒(méi)有上面的菜單，這個(gè)時(shí)候，在如下箭頭所示的位置鼠標(biāo)右鍵選擇 icon & text。然后選擇 最右邊箭頭，把三個(gè)全點(diǎn)成藍(lán)色。 所有的界面就出現(xiàn)了。

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

接下來(lái)按圖點(diǎn)擊

1. 選擇一個(gè)模擬器

2. 點(diǎn)擊run

如果沒(méi)有什么問(wèn)題的話，你會(huì)在模擬器的啟動(dòng)畫面中看到hello xcode的字樣，這樣 一個(gè)空白的，有著hello xcode字樣的簡(jiǎn)單app就完成了（啟動(dòng)畫面小消失很快，記得盯著模擬器看哦。否則你會(huì)看到大白邊，啥都沒(méi)有）怎么樣，簡(jiǎn)單吧？ 如果大家沒(méi)看到，請(qǐng)點(diǎn)擊一次stop，然后再運(yùn)行一遍。

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

下一章我們繼續(xù)來(lái)講解這個(gè)實(shí)例，讓我們看看怎么在這個(gè)簡(jiǎn)單的app中加入更多好玩的功能。請(qǐng)持續(xù)關(guān)注靜電的公眾帳號(hào) jingdesign91，教程會(huì)在靜電的公號(hào)，站酷中首發(fā)。歡迎大家相互交流學(xué)習(xí)，一同加油！

掃描二維碼關(guān)注我: jingdesign91

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

大咖前輩現(xiàn)身說(shuō)法！親歷者經(jīng)驗(yàn)！
《畢業(yè)生必看！剛?cè)胄械脑O(shè)計(jì)師如何敲開大公司的門》

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

朋友擠破頭來(lái)讓你幫個(gè)忙？看看這篇！
《人情練達(dá)即文章：如何拒絕朋友免費(fèi)做設(shè)計(jì)的要求？》

原文地址：guimobile
作者：@JingDesign

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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