摘要: 懂設計的程序員攜乾貨滿滿的《程序員生存指南》系列重磅迴歸！設計師說完了前端交付標準，這次來聽聽前端開發怎麼說！
大家好，是我沒有錯，
時間和開發雖然帶走了我部分的頭髮，
但卻不能帶走我大腦裡設計的知識。
今天，就讓我，一位懂設計的程序員，為大家分析一下設計與開發的異同，為促進同事友好相處做貢獻。
一、設計與開發的不同
設計與開發自然是大不相同的，否則我也不會棄設計從開發。
具體而言，又可以從兩個角度進行分析。
首先，是產品與客戶的角度。
設計的角色是清楚瞭解產品需求，就是需要知道設計什麼、用來幹嘛、有什麼功能；因此需要頻繁與客戶溝通；主要任務就是滿足已知的需求和客戶期望，所以在設計階段思考的內容主要是如何在遵循一定規範和美學的前提下將需求和期望轉換為實際。
總結來說就是甲方爸爸！
而開發由於不與客戶直接溝通，主要面對的是需求和設計稿，所以主要任務是實現設計稿的需求與客戶對於設計稿的期望，思考的內容主要是如何開發實現功能，優化用戶體驗。
總結來說就是設計爸爸！
其次，是公司與內部的角度 。
對於內部角度來說。設計的主要任務是理解並說服客戶，思考的內容主要是如何引導客戶選擇設計稿以及減少返稿。（坑甲方爸爸）
而開發的主要任務則是減少bug提升代碼複用率，思考的內容主要是提升開發效率與實現更復雜的功能設計。
以上就是我理解的設計和開發的不同點。
二、設計與開發的聯繫
而說到設計與開發的聯繫，實際上作為項目組不可或缺的兩個重要組成，設計與開發本身就是聯繫緊密的兩個職業。
其次，與客戶密切溝通的設計師，自然也對需求瞭如執掌，而開發幾乎不與客戶溝通，在這種情況下設計師和設計稿以及需求文檔就成了開發瞭解需求的唯一途徑。
再者，作為開發人員，很少有會使用PS等工具的，所以設計師也就成了開發的
切圖來源。
同時由於【100%還原設計稿】的難度，開發完成後設計往往掌握著開發的生死大權。
三、舉一個例子
1）關於切圖
例如前文提到的[設計是開發的切圖來源]，以下這張圖片曾經困擾後端同事很久：
原因是設計稿與切出來的圖片都是帶有陰影的，而陰影的存在導致圖片的實際內容與邊框並不等寬，於是就像下圖一樣總是留有邊距；
而在編寫代碼時為了確保圖片不會拉伸變形，圖片通常設置為根據實際手機尺寸等比縮放的，此時邊距就成了一個無法測量的邊距。
雖然圖片直接帶有陰影確實會省很多事情，但是圖片實際邊距無法測量反而導致更加無法調試。因此最後設計師把圖切成了這樣：
網頁呈現上也就順利實現了理想效果:
2）關於陰影
在設計稿製作中，我們有兩種方式來製作陰影/投影；第一種就是利用圖層樣式來處理，直接用fx添加投影。
對於開發來說，ps可以直接根據調整的數值生成代碼樣式，直接複製就可使用，即使上傳至藍湖也可以直接生成投影的代碼，拿來即用；
而第二種是在原圖層下再複製一個圖層的方式，給下層添加圖層蒙版羽化生成投影。
這樣的方式生成的投影在設計的角度來說會看起來更加自然，而且也易於調整修改。但是開發沒辦法複製樣式代碼，這類投影最簡單的開發方式就是把下層陰影圖層導出圖片，然後再利用代碼座標定位至圖層一的下面。或者使用方式一的投影代碼，一點一點調到與方式二差不多。
以上就是本期頭條的主要內容，作為兩個職業要求大相徑庭的職業，設計與開發自然存在許許多多的差別，但不可忽視的是，它們往往也存在許多相同點。（比如都會頭禿）
求同存異，讓工作更加順利！
感謝您的瀏覽，下期再見！
閱讀更多 SIMPLEBY熙派 的文章
