如何與設(shè)計師合作？制定設(shè)計規(guī)范，設(shè)計有規(guī)范，評審有標準在藍湖「設(shè)計規(guī)范云」自定義添加顏色、文本樣式、圖層樣式、圖標、組件等元素后，團隊成員就能輕松使用添加好的元素。視覺設(shè)計師是怎樣讓前端工程師100%

如何與設(shè)計師合作？

制定設(shè)計規(guī)范，設(shè)計有規(guī)范，評審有標準

在藍湖「設(shè)計規(guī)范云」自定義添加顏色、文本樣式、圖層樣式、圖標、組件等元素后，團隊成員就能輕松使用添加好的元素。

視覺設(shè)計師是怎樣讓前端工程師100% 實現(xiàn)設(shè)計效果的？

我們公司的設(shè)計師都是直接在藍湖上上傳設(shè)計圖，前端工程師可以直接看到交互、標注、切圖等，不需要過多無效的溝通，就可以輕易理解對方需求

藍湖教程：藍湖自動切圖功能該怎么用？

1、將需要生成切圖的圖片拖入PS

2、左鍵依次單擊“窗口”——“擴展功能”——“藍湖”

3、在彈出的小窗口上方單擊“切圖”，再點擊“標記為切圖”

4、之后在彈出的小窗口上方單擊“上傳”，再點擊“上傳全部畫板”

5、上傳成功后，點擊“去Web端查看”

6、雙擊設(shè)計圖即可查看標注和切圖

藍湖插件ps切圖使用教程？

、將需要生成切圖的圖片拖入PS

2、左鍵依次單擊“窗口”——“擴展功能”——“藍湖”

3、在彈出的小窗口上方單擊“切圖”，再點擊“標記為切圖”

4、之后在彈出的小窗口上方單擊“上傳”，再點擊“上傳全部畫板”

5、上傳成功后，點擊“去Web端查看”

6、雙擊設(shè)計圖即可查看標注和切圖

有哪些關(guān)于前端設(shè)計師的書籍？

1、HTML/HTML5基礎(chǔ)：

《HTML5秘籍》

2、CSS

推薦書籍：

1、《圖靈程序設(shè)計叢書:HTML5與CSS3設(shè)計模式》

2、《Web開發(fā)技術(shù)叢書:深入理解Bootstrap》

3、《高流量網(wǎng)站CSS開發(fā)技術(shù)》

4、《CSS設(shè)計徹底研究》 這個一定要

5、《Web開發(fā)技術(shù)叢書:深入理解Bootstrap》

6、可以找一些專門講SASS的書，但是我沒找到

7、《CSS權(quán)威指南(第3版)》

3、深入學習JS

推薦書籍：

1、《單頁Web應用:JavaScript從前端到后端 》

2、《Web 2.0界面設(shè)計模式》

3、《響應式Web設(shè)計:HTML5和CSS3實戰(zhàn)》

5、工具

學會使用grunt進行JS、CSS、HTML 壓縮，特別是模塊化js開發(fā)時候的壓縮

會用PS進行切圖、保存icon

入手sublime、webstorm

學會使用chrome調(diào)試面板，特別是：console、network、profile、element

進階：

4、性能

推薦書籍：

1、《Web性能權(quán)威指南》

2、雅虎網(wǎng)站頁面性能優(yōu)化的34條黃金守則

5、HTTP及TCP協(xié)議族

推薦書籍：

1、《HTTP權(quán)威指南》

2、《TCP/IP詳解》

3、《圖解TCP/IP(第5版)》

希望可以幫到您，謝謝！

前端有時候也會做UI設(shè)計，一般會使用到ps、sketch、xd來做設(shè)計，如果你是mac系統(tǒng)的話，可以使用sketch，這是一個專門的UI設(shè)計工具，同時配合藍湖來使用，不僅可以一鍵切圖標注，還可以生成代碼，直接復用。所以ps、sketch、xd和藍湖都是前端工程師必備的設(shè)計工具