一息罗、為什么我要寫這篇文章掂咒？
你是不是有這樣的經(jīng)歷？你自己覺得還不錯(cuò)的設(shè)計(jì)，等工程師做出來(lái)绍刮，放在手機(jī)上一看温圆，怎么看都不對(duì)勁。這還是我設(shè)計(jì)的那個(gè)東東嗎孩革？當(dāng)你有這種疑惑的時(shí)候岁歉，就是設(shè)計(jì)還原度的問(wèn)題了。如果還原度不高膝蜈，哪怕你的設(shè)計(jì)做得再好锅移，出來(lái)的效果也是個(gè)渣！
你想提高設(shè)計(jì)的還原度饱搏，盡可能縮小設(shè)計(jì)稿與完成品之間的差距嗎非剃？這篇文章就是為了這個(gè)目的而存在的。
iOS的確有許多教程推沸，但是幫助文檔你有耐心看嗎备绽？寫給工程師的教程你看得懂嗎？適合設(shè)計(jì)師學(xué)習(xí)的iOS前端教程實(shí)在太少了鬓催，至少我沒(méi)搜了一下肺素，沒(méi)找到。這也難怪深浮，會(huì)寫代碼的設(shè)計(jì)師本來(lái)就少压怠，還愿意寫下來(lái)的，那就更少了飞苇。正好最近我要向部門的同事分享簡(jiǎn)單的iOS前端知識(shí)菌瘫，就順便寫下來(lái)，也許能幫助到更多的朋友吧布卡。
二雨让、設(shè)計(jì)師是怎么跟工程師合作的？
設(shè)計(jì)師與工程師之間的合作忿等，可以分成三個(gè)階段：
- 前期栖忠，要做交互稿（低保真原型）和視覺稿（高保真原型）；
- 中期贸街，要切圖庵寞，做標(biāo)注；
- 后期薛匪，要配合前端實(shí)現(xiàn)捐川，俗稱「調(diào)UI」；
其中第三階段逸尖，調(diào)UI的方法古沥，大致可以分三種：
方法一瘸右、肉眼看+嘴巴說(shuō)（難道，這就是傳說(shuō)中的寫輪眼+嘴遁岩齿？）
如果你面相不凡骨骼清奇天生一副像素眼太颤，一眼就能看出差了幾個(gè)像素，直接告訴工程師該怎么怎么改盹沈，那也是可以的龄章。但大部分情況是類似這樣的：
工程師：怎么改？
設(shè)計(jì)師：往左襟诸。瓦堵。。10個(gè)像素吧歌亲。
工程師：（十秒鐘改好菇用，一分鐘運(yùn)行出來(lái)）好了嗎？
設(shè)計(jì)師：太靠左了陷揪，再向右4個(gè)像素惋鸥。
工程師：（十秒鐘改好，一分鐘運(yùn)行出來(lái)）好了嗎悍缠？
設(shè)計(jì)師：太靠右了卦绣，再向左2個(gè)像素。
工程師：我擦飞蚓，你是猴子請(qǐng)來(lái)耍我的吧滤港？
方法二、對(duì)比+注釋
讓工程師幫你截個(gè)圖趴拧，然后你拿過(guò)來(lái)跟設(shè)計(jì)稿進(jìn)行比對(duì)溅漾。就像在玩「大家來(lái)找茬」，把不同的地方標(biāo)注出來(lái)著榴。然后工程師按照你的標(biāo)注來(lái)修改添履。這個(gè)方法比較簡(jiǎn)單實(shí)用，而且設(shè)計(jì)師和工程師不用黏在一塊脑又，各自干活暮胧，各自精彩，效率更高问麸。
按理說(shuō)往衷，問(wèn)題已經(jīng)解決了，可以洗洗睡了严卖×痘妫可是現(xiàn)實(shí)情況是，工程師的首要工作保證自己的工作做完妄田，要是碰上工期趕的俺亮，能做完能把功能跑通，就算不錯(cuò)了疟呐，還奢望他陪你調(diào)UI脚曾？
方法三、自己動(dòng)手改代碼
nnd启具，不求這幫爺了本讥，老子/老娘自己來(lái)！
三鲁冯、為什么設(shè)計(jì)師要學(xué)點(diǎn)iOS前端技術(shù)拷沸？
除了上面說(shuō)的，是被逼出來(lái)的薯演。主動(dòng)學(xué)一點(diǎn)iOS前端技術(shù)撞芍，還是有些幫助的。
- 你能保證自己的設(shè)計(jì)不打折的實(shí)現(xiàn)出來(lái)跨扮，有更強(qiáng)的把控力序无；
- 你能估計(jì)程序?qū)崿F(xiàn)的難度，在設(shè)計(jì)的過(guò)程中就能考慮到衡创，換位思考帝嗡，替工程師著想，這對(duì)大家都好璃氢；
- 你能用工程師聽得懂的方式來(lái)跟他們交流哟玷，比如拽一點(diǎn)術(shù)語(yǔ)，提高溝通的效率一也；
四巢寡、要準(zhǔn)備些什么？
- 要有臺(tái)Mac塘秦，不管是iMac還是macBook讼渊；
- 裝個(gè)版本控制軟件，把最新的代碼弄下來(lái)尊剔，改好之后再提交上去爪幻。常用的版本控制是Git，工程師通常會(huì)教你用命令行须误，別信他的挨稿，你是設(shè)計(jì)師，當(dāng)然要用圖形界面的啦京痢，推薦用Source Tree奶甘。具體操作方法有點(diǎn)復(fù)雜，都可以寫篇教程了祭椰，用到的時(shí)候你還是找工程師幫忙吧臭家。
- 從mac的app store里下載個(gè)Xcode疲陕。
- 運(yùn)行Xcode，打開項(xiàng)目钉赁，運(yùn)行蹄殃。稍等片刻，模擬器里就你的app就運(yùn)行起來(lái)了你踩，有點(diǎn)小激動(dòng)吧诅岩？
五、開源了一個(gè)小項(xiàng)目
有位朋友說(shuō)带膜，我想學(xué)吩谦，但是SourceTree怎么弄到代碼你又不說(shuō)清楚，而且公司的代碼沒(méi)有權(quán)限也下載不了啊膝藕。
我在GitHub上做了一個(gè)開源的小項(xiàng)目式廷，整個(gè)app簡(jiǎn)單到只有一個(gè)頁(yè)面，方便大家練手束莫。
按照上面說(shuō)的懒棉，在mac上安裝好Source Tree和Xcode，然后……
第一步览绿，打開Source Tree策严，Clone from URL
第二步，Clone a repository
彈出窗口的第一行里填：https://github.com/sesamebolus/iOS_tutorial.git
第二行是本地目錄饿敲，自己選一個(gè)妻导。
第三行是項(xiàng)目的名字，默認(rèn)會(huì)有一個(gè)的怀各，你可以隨便改倔韭。
第三步，點(diǎn)「Clone」之后瓢对，一分鐘左右就能下載好代碼寿酌。
第四步，用Xcode打開項(xiàng)目的文件夾（第二步里你自己選的文件夾）硕蛹。另一個(gè)方法是打開項(xiàng)目文件夾醇疼，雙擊中間的文件，Xcode就會(huì)自動(dòng)打開了法焰。
第五步秧荆，在Xcode里選擇一個(gè)模擬器（比如iPhone 6s），然后點(diǎn)一下左邊的三角形按鈕（快捷鍵 command+R）埃仪，項(xiàng)目就運(yùn)行起來(lái)了乙濒，趕緊去試試你的第一個(gè)iOS項(xiàng)目吧。
喜歡這篇文章嗎卵蛉？點(diǎn)擊這里 查看本系列的更多文章颁股。
