前端工程師與設(shè)計師怎樣合作

如果你是前端，你可以給設(shè)計師提以下一些要求：

1.如果想要95%以上還原設(shè)計稿，你必須提供給設(shè)計師設(shè)計時的注意事項，當然如果設(shè)計師有前端功底，他的設(shè)計會考慮到更多的協(xié)作性，通俗點說：比如設(shè)計的PSD稿件的圖層切圖的形狀不要太另類，不同的分辨率，元素布局上你能不能敲代碼實現(xiàn)，容不容易做出來，不要太自我主義不考慮前端，到時候做出來的東西又返回頭改死人，甚至前端出來后一塌糊涂，兩敗俱傷

2.你看過的或者項目交互上想要的效果，讓設(shè)計師分析這種效果拆分后該設(shè)計些什么東西？設(shè)計量有多少？能不能用圖形的方式直觀的設(shè)計出來？等等

3.自己用鉛筆在紙上畫的草圖，設(shè)計中的部分重要細節(jié)和你自己的想法要親自提醒設(shè)計師

4.項目碰頭的時間段，如何碰頭，使用遠程工具？使用QQ？還是直接離開辦公椅面對面？還是茶水間？是1天碰頭一次？還是設(shè)計完某部分碰頭一次？發(fā)現(xiàn)問題就可以及時修改，避免事倍功半

5.讓設(shè)計師準備好詳細的設(shè)計說明文檔，文檔可以是直接套用html模板，可以是word，可以是圖片或者思維導(dǎo)圖，總之要讓前端設(shè)計師一目了然知道為什么這么設(shè)計，這樣設(shè)計讓前端怎么用，怎么配合

6.如果設(shè)計師有前端功底，你還需要讓他提供一些他設(shè)計時考慮到的插件或者代碼（比如設(shè)計banner時他想要視差，3D，還是滑動等效果，要用到什么插件，用了什么框架等），這樣能提高前端的質(zhì)量和效率

同時，你需要讓設(shè)計師給你提供：

1.完整的，規(guī)范的PSD分層文件，最好是要切圖的部分就是一個圖層或者 文件夾，使用photoshop的快速切圖插件，單獨導(dǎo)出圖片，快速準確，不建議使用PS默認的切圖工具

2.詳細的，規(guī)范的設(shè)計說明文檔，標注文檔

3.對于有前端基礎(chǔ)的設(shè)計師，需要提供他設(shè)計時考慮到的前端效果插件或代碼，是否使用前端框架等

4.適合你們的溝通協(xié)作方式

5.如果是比較有經(jīng)驗的設(shè)計師，能給你提供一個demo（可以是視頻，或者gif，甚至是用紙和筆畫出的交互效果），能大大提高前端的質(zhì)量和效率

最后的最后，前端攻城師和設(shè)計師互相提供這些需求和資源的同時：

不要忘記了產(chǎn)品經(jīng)理或者老板或者你們部門的項目初衷，也要做好和上層的對接。

在過程中試錯，在試錯中體驗，在體驗中修改優(yōu)化，在修改優(yōu)化中培育協(xié)作能力和感情，在協(xié)作和感情中喝杯咖啡聊聊天泡泡妹子！