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

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

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

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

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

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

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

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

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

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

2.詳細(xì)的，規(guī)范的設(shè)計(jì)說明文檔，標(biāo)注文檔

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

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

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

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

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

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