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

制定設(shè)計(jì)規(guī)范，設(shè)計(jì)有規(guī)范，評審有標(biāo)準(zhǔn)

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

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

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

藍(lán)湖教程：藍(lán)湖自動(dòng)切圖功能該怎么用？

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

2、左鍵依次單擊“窗口”——“擴(kuò)展功能”——“藍(lán)湖”

3、在彈出的小窗口上方單擊“切圖”，再點(diǎn)擊“標(biāo)記為切圖”

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

5、上傳成功后，點(diǎn)擊“去Web端查看”

6、雙擊設(shè)計(jì)圖即可查看標(biāo)注和切圖

藍(lán)湖插件ps切圖使用教程？

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

2、左鍵依次單擊“窗口”——“擴(kuò)展功能”——“藍(lán)湖”

3、在彈出的小窗口上方單擊“切圖”，再點(diǎn)擊“標(biāo)記為切圖”

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

5、上傳成功后，點(diǎn)擊“去Web端查看”

6、雙擊設(shè)計(jì)圖即可查看標(biāo)注和切圖

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

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

《HTML5秘籍》

2、CSS

推薦書籍：

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

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

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

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

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

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

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

3、深入學(xué)習(xí)JS

推薦書籍：

1、《單頁Web應(yīng)用:Javascript從前端到后端》

2、《Web2.0界面設(shè)計(jì)模式》

3、《響應(yīng)式Web設(shè)計(jì):HTML5和CSS3實(shí)戰(zhàn)》

5、工具

學(xué)會(huì)使用grunt進(jìn)行JS、CSS、HTML壓縮，特別是模塊化js開發(fā)時(shí)候的壓縮

會(huì)用PS進(jìn)行切圖、保存icon

入手sublime、webstorm

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

進(jìn)階：

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版)》

希望可以幫到您，謝謝！

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