前端工程師如何與設計師合作?

發表於2015-11-01

如果你是前端,你可以給設計師提以下一些要求:

1.如果想要95%以上還原設計稿,你必須提供給設計師設計時的注意事項,當然如果設計師有前端功底,他的設計會考慮到更多的協作性,通俗點說:比如設計的PSD稿件的圖層切圖的形狀不要太另類,不同的解析度,元素佈局上你能不能敲程式碼實現,容不容易做出來,不要太自我主義不考慮前端,到時候做出來的東西又返回頭改死人,甚至前端出來後一塌糊塗,兩敗俱傷

2.你看過的或者專案互動上想要的效果,讓設計師分析這種效果拆分後該設計些什麼東西?設計量有多少?能不能用圖形的方式直觀的設計出來?等等

3.自己用鉛筆在紙上畫的草圖,設計中的部分重要細節和你自己的想法要親自提醒設計師

4.專案碰頭的時間段,如何碰頭,使用遠端工具?使用QQ?還是直接離開辦公椅面對面?還是茶水間?是1天碰頭一次?還是設計完某部分碰頭一次?發現問題就可以及時修改,避免事倍功半

5.讓設計師準備好詳細的設計說明文件,文件可以是直接套用html模板,可以是word,可以是圖片或者思維導圖,總之要讓前端設計師一目瞭然知道為什麼這麼設計,這樣設計讓前端怎麼用,怎麼配合

6.如果設計師有前端功底,你還需要讓他提供一些他設計時考慮到的外掛或者程式碼(比如設計banner時他想要視差,3D,還是滑動等效果,要用到什麼外掛,用了什麼框架等),這樣能提高前端的質量和效率

同時,你需要讓設計師給你提供:

1.完整的,規範的PSD分層檔案,最好是要切圖的部分就是一個圖層或者 資料夾,使用photoshop的快速切圖外掛,單獨匯出圖片,快速準確,不建議使用PS預設的切圖工具

2.詳細的,規範的設計說明文件,標註文件

3.對於有前端基礎的設計師,需要提供他設計時考慮到的前端效果外掛或程式碼,是否使用前端框架等

4.適合你們的溝通協作方式

5.如果是比較有經驗的設計師,能給你提供一個demo(可以是視訊,或者gif,甚至是用紙和筆畫出的互動效果),能大大提高前端的質量和效率

最後的最後,前端攻城師和設計師互相提供這些需求和資源的同時:

不要忘記了產品經理或者老闆或者你們部門的專案初衷,也要做好和上層的對接。

在過程中試錯,在試錯中體驗,在體驗中修改優化,在修改優化中培育協作能力和感情,在協作和感情中喝杯咖啡聊聊天泡泡妹子!

相關文章