@小乖乖老爸?：你是不是有這樣的經歷？自己覺得還不錯的設計，等工程師做出來，放在手機上一看，怎么看都不對勁。當你有這種疑惑的時候，就是設計還原度的問題了。想提高設計還原度，盡可能縮小設計稿與完成品之間的差距嗎？這篇文章就是為了這個目的而存在的。

寫給設計師的網頁前端教程系列：

1. 《零基礎也能看懂！寫給設計師的前端小知識之小白入門篇（一）》
2. 《零基礎也能看懂！寫給設計師的前端小知識之征服霸道DIV篇（二）》
3. 《零基礎也能看懂！寫給設計師的前端小知識之網頁排版（附實戰）》
4. 《零基礎也能看懂！寫給設計師的前端小知識之排版三步走起來》
5. 《零基礎也能看懂！寫給設計師的前端小知識之各司其職》

iOS的確有許多教程，但是幫助文檔你有耐心看嗎？寫給工程師的教程你看得懂嗎？適合設計師學習的iOS前端教程實在太少了，至少我沒搜了一下，沒找到。這也難怪，會寫代碼的設計師本來就少，還愿意寫下來的，那就更少了。正好最近我要向部門的同事分享簡單的iOS前端知識，就順便寫下來，也許能幫助到更多的朋友吧。

二、設計師是怎么跟工程師合作的？

設計師與工程師之間的合作，可以分成三個階段：

• 前期，要做交互稿（低保真原型）和視覺稿（高保真原型）；
• 中期，要切圖，做標注；
• 后期，要配合前端實現，俗稱「調UI」；

其中第三階段，調UI的方法，大致可以分三種：

方法一、肉眼看+嘴巴說

如果你面相不凡骨骼清奇天生一副像素眼，一眼就能看出差了幾個像素，直接告訴工程師該怎么怎么改，那也是可以的。但大部分情況是類似這樣的：

工程師：怎么改？
設計師：往左。。。10個像素吧。
工程師：（十秒鐘改好，一分鐘運行出來）好了嗎？
設計師：太靠左了，再向右4個像素。
工程師：（十秒鐘改好，一分鐘運行出來）好了嗎？
設計師：太靠右了，再向左2個像素。
工程師：我擦，你是猴子請來耍我的吧？

方法二、對比+注釋

讓工程師幫你截個圖，然后你拿過來跟設計稿進行比對。就像在玩「大家來找茬」，把不同的地方標注出來。然后工程師按照你的標注來修改。這個方法比較簡單實用，而且設計師和工程師不用黏在一塊，各自干活，各自精彩，效率更高。

按理說，問題已經解決了，可以洗洗睡了。可是現實情況是，工程師的首要工作保證自己的工作做完，要是碰上工期趕的，能做完能把功能跑通，就算不錯了，還奢望他陪你調UI？

方法三、自己動手改代碼

nnd，不求這幫爺了，老子/老娘自己來！

三、為什么設計師要學點iOS前端技術？

除了上面說的，是被逼出來的。主動學一點iOS前端技術，還是有些幫助的。

• 你能保證自己的設計不打折的實現出來，有更強的把控力；
• 你能估計程序實現的難度，在設計的過程中就能考慮到，換位思考，替工程師著想，這對大家都好；
• 你能用工程師聽得懂的方式來跟他們交流，比如拽一點術語，提高溝通的效率；

四、要準備些什么？

要有臺Mac，不管是iMac還是MacBook；

裝個版本控制軟件，把最新的代碼弄下來，改好之后再提交上去。常用的版本控制是Git，工程師通常會教你用命令行，別信他的，你是設計師，當然要用圖形界面的啦，推薦用Source Tree。具體操作方法有點復雜，都可以寫篇教程了，用到的時候你還是找工程師幫忙吧

從Mac的App store里下載個Xcode。

運行Xcode，打開項目，運行。稍等片刻，模擬器里就你的app就運行起來了，有點小激動吧？

五、開源了一個小項目

有位朋友說，我想學，但是SourceTree怎么弄到代碼你又不說清楚，而且公司的代碼沒有權限也下載不了啊。

我在GitHub上做了一個開源的小項目，整個app簡單到只有一個頁面，方便大家練手。

按照上面說的，在Mac上安裝好Source Tree和Xcode，然后……

第一步，打開Source Tree，Clone from URL

△ Source Tree的主界面

第二步，Clone a repository

彈出窗口的第一行里填：https://github.com/sesamebolus/iOS_tutorial.git

第二行是本地目錄，自己選一個。

第三行是項目的名字，默認會有一個的，你可以隨便改。

△ Source Tree的彈出窗口

第三步，點「Clone」之后，一分鐘左右就能下載好代碼。

第四步，用Xcode打開項目的文件夾（第二步里你自己選的文件夾）。另一個方法是打開項目文件夾，雙擊中間的文件，Xcode就會自動打開了。

△ 項目文件夾

第五步，在Xcode里選擇一個模擬器（比如iPhone 6s），然后點一下左邊的三角形按鈕（快捷鍵 command+R），項目就運行起來了，趕緊去試試你的第一個iOS項目吧。

「本月最值得閱讀收藏的完美像素使用手冊」

1. 《值得每個設計師收藏的《完美像素使用手冊》之原理篇》
2. 《中文版來了！值得每個設計師收藏的《完美像素使用手冊》之細節篇》
3. 《第三集！值得每個設計師收藏的《完美像素使用手冊》之易用性篇》
4. 《第四集！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》
5. 《最終版！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》

原文地址：jianshu

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

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com