Web前端工程師要掌握的工作經(jīng)驗(yàn)

今天小編要跟大家分享的文章是關(guān)于Web前端工程師要掌握的工作經(jīng)驗(yàn)。設(shè)計(jì)師與工程師的交流經(jīng)常是雞同鴨講，牛頭對(duì)不上馬嘴，為了幫同學(xué)們搞定這個(gè)難題，小編整理了一個(gè)列表，幫同學(xué)們能跟工程師無(wú)障礙溝通，全是非常實(shí)用的知識(shí)點(diǎn)。





開(kāi)發(fā)者一般不是令人驚艷的設(shè)計(jì)師，設(shè)計(jì)師也通常不是出色的開(kāi)發(fā)者。雖然有很多例外，但這兩行的門(mén)道對(duì)對(duì)方而言都是難以言說(shuō)的謎，然而雙方卻要在這種情況下合作完成項(xiàng)目。作為在兩個(gè)領(lǐng)域都工作過(guò)的人，北大青鳥(niǎo)web前端培訓(xùn)專家整理了一個(gè)列表，使設(shè)計(jì)師能夠更好地輔助開(kāi)發(fā)者開(kāi)發(fā)應(yīng)用和網(wǎng)站。下面來(lái)和小編一起看一看吧！


一、Photoshop


開(kāi)發(fā)者經(jīng)常需要處理設(shè)計(jì)師制作的Photoshop
PSD文件，因此任何對(duì)設(shè)計(jì)師有益的事情也會(huì)對(duì)開(kāi)發(fā)者有益，包括繪制易于維護(hù)、易于理解的PSD文件。


1、有效地進(jìn)行版本控制


設(shè)計(jì)師經(jīng)常會(huì)面對(duì)各種裝滿了一堆沒(méi)有清晰版本命名的PSD的文件夾。為了解決這個(gè)問(wèn)題，設(shè)計(jì)師可以事先確定一種合適的版本命名格式(理想的格式應(yīng)該使文件在字順排序下自動(dòng)有意義地排列)。


2、保持圖層


不要輕易合并圖層。需要導(dǎo)出時(shí)，通過(guò)組合，隱藏/顯示圖層的方式來(lái)進(jìn)行，導(dǎo)出后再把文件恢復(fù)到原來(lái)的狀態(tài)。不要輕易破壞有用的數(shù)據(jù)。電腦性能更不是合并圖層的理由——若被此限制，你應(yīng)該做的是買(mǎi)內(nèi)存更大，性能更好的電腦。


3、對(duì)圖層進(jìn)行有意義的命名


雖然對(duì)圖層命名比較繁瑣，但這樣做確實(shí)能夠幫助理解，尤其是在重用文件元素的時(shí)候。命名時(shí)應(yīng)確保文字圖層的名稱反應(yīng)其內(nèi)容。重復(fù)的圖層也要進(jìn)行有意義的命名，而不是簡(jiǎn)單的“副件”。


4、合理地對(duì)圖層編組


應(yīng)該把分散在不同圖層的視覺(jué)元素編為一組。對(duì)單一設(shè)計(jì)的文件來(lái)說(shuō)，編組整體上應(yīng)該一致按照從左到右，從上到下的順序。層次和順序比按顏色編碼圖層更好，因?yàn)閳D層移動(dòng)時(shí)，顏色還需要保持。


5、去掉不需要的圖層


不再需要的舊版本、模版和參考材料以及臨時(shí)復(fù)件應(yīng)該從圖層中及時(shí)刪除。間歇性地瀏覽一下你的所有圖層，及時(shí)刪除不需要的東西。


6、使用圖層復(fù)合


Photoshop的圖層復(fù)合功能可以讓你制作多組圖層狀態(tài)，如可見(jiàn)性，位置甚至圖層風(fēng)格。你可以用圖層復(fù)合功能來(lái)靈活地在一份文件中整合設(shè)計(jì)中不同部分(比如網(wǎng)站的多個(gè)標(biāo)簽、應(yīng)用的多個(gè)頁(yè)面)。這樣做可以不必保留重復(fù)的圖層編組，從而減小文件大小。


7、保存矢量文件和可伸縮效果


在設(shè)計(jì)應(yīng)用時(shí)，很可能會(huì)需要原設(shè)計(jì)兩倍尺寸的圖片來(lái)適應(yīng)有雙倍像素的新設(shè)備。確保在這種情況下你不需要重新繪制所有的圖標(biāo)。


二、助力開(kāi)發(fā)者


還有一些特別與應(yīng)用及網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的建議，每項(xiàng)都有相應(yīng)的要求和限制。


8、學(xué)會(huì)在縮放時(shí)保存圓角


操作系統(tǒng)經(jīng)常會(huì)統(tǒng)一圓角的角半徑(iOS通常為12像素)。Adobe
Fireworks會(huì)保持圓角矩形的角半徑，但Photoshop不會(huì)。因此確保你用直接選擇工具來(lái)選取圓角的點(diǎn)并且以傳統(tǒng)的方式縮放圖像。


9、在72ppi下進(jìn)行設(shè)計(jì)


一個(gè)像素就是一個(gè)像素，更多的像素只會(huì)生成更大的文件。不要通過(guò)改分辨率來(lái)蒙混過(guò)關(guān)。


10、對(duì)齊像素


確保相關(guān)的形狀工具設(shè)置成對(duì)齊像素。根據(jù)你的需要使用像素網(wǎng)格等工具。一貫使用偶數(shù)尺寸來(lái)方便裁剪。


11、使用RGB模式


這點(diǎn)不僅對(duì)顏色顯示重要，對(duì)開(kāi)發(fā)者將顏色正確地寫(xiě)入代碼也同樣關(guān)鍵。


12、資源準(zhǔn)備是你工作的一部分


很多(大多數(shù))開(kāi)發(fā)者除了基本的編輯功能外對(duì)Photoshop一竅不通。設(shè)計(jì)師需要適時(shí)地導(dǎo)出可能會(huì)在應(yīng)用或網(wǎng)站上用到的裁剪圖，因?yàn)楫吘顾麄兪菍?duì)文件和Photoshop最熟悉的人。這項(xiàng)工作雖然很痛苦，而且很耗時(shí)，但這是除“設(shè)計(jì)”外90%的工作。


13、謹(jǐn)慎地使用字體


不同的設(shè)備和操作系統(tǒng)的預(yù)設(shè)字體有所不同，因此不能確保這些設(shè)備都有你進(jìn)行設(shè)計(jì)的電腦上的字體(事實(shí)上，你比一般人的設(shè)備上的字體都多)?；旧希瑢?yīng)用或網(wǎng)站上的文字以實(shí)際文本的格式呈現(xiàn)會(huì)有更好的效果，但這也使對(duì)字體的選擇不僅基于視覺(jué)，還有可行性上的考慮。


還有一點(diǎn)值得注意，允許個(gè)人設(shè)計(jì)使用的許可也許不允許你將該字體完全使用在應(yīng)用或網(wǎng)頁(yè)上。在選定設(shè)計(jì)中使用的字體之前，確保和你的開(kāi)發(fā)者或客戶進(jìn)行有效溝通。


14、確定設(shè)計(jì)尺寸


對(duì)移動(dòng)設(shè)備應(yīng)用來(lái)說(shuō)，屏幕尺寸不是全部信息，你還需要考慮系統(tǒng)狀態(tài)欄等的存在，以及他們?nèi)绾卧谄聊粰M排和豎排時(shí)影響尺寸(比如iOS設(shè)備的頂端狀態(tài)欄會(huì)在橫排的時(shí)候減小較小邊的尺寸，在豎排的時(shí)候減小大邊的尺寸)。和你的開(kāi)發(fā)者確認(rèn)一下應(yīng)用是否為完整的全屏很必要。


15、使用平臺(tái)風(fēng)格


每個(gè)平臺(tái)(操作系統(tǒng))都有其獨(dú)特的用戶界面元素和交互風(fēng)格(也會(huì)根據(jù)不同的設(shè)備有所不同)。在設(shè)計(jì)時(shí)注意這些風(fēng)格，并且除了有特殊原因，不要進(jìn)行與平臺(tái)本身風(fēng)格差別太大的設(shè)計(jì)。例如，在iPad上，你會(huì)發(fā)現(xiàn)這些需要注意的地方：


1、支持兩種屏幕方向的強(qiáng)烈需求


2、雙欄設(shè)計(jì)在兩種屏幕方向上都可接受


3、將彈出框作為一種界面元素和分組機(jī)制


4、確定的文件瀏覽器的風(fēng)格


5、在級(jí)別較高的導(dǎo)航欄中，返回按鈕是向左指的圖標(biāo)


因此，在設(shè)計(jì)時(shí)要熟悉平臺(tái)，因?yàn)槟愕脑O(shè)計(jì)要適應(yīng)它。沒(méi)有哪一種單一的設(shè)計(jì)可以適應(yīng)所有的平臺(tái)。。


16、對(duì)橫排和豎排分別進(jìn)行設(shè)計(jì)


不同的屏幕方向需要不同的交互設(shè)計(jì)風(fēng)格，這不僅是因?yàn)槠聊粚捀弑龋€因?yàn)橛脩粢圆煌较蚴殖衷O(shè)備時(shí)外形、重量和平衡上的區(qū)別。只針對(duì)適應(yīng)屏幕寬高比進(jìn)行設(shè)計(jì)頂多是一個(gè)糟糕的妥協(xié)策略。


17、針對(duì)每種主流尺寸和情景進(jìn)行設(shè)計(jì)


同一應(yīng)用在手機(jī)、平板和電腦上的內(nèi)容和交互都應(yīng)有所不同。對(duì)移動(dòng)設(shè)備而言，我們也需要考慮注意力持續(xù)時(shí)間、注意力分散、使用設(shè)備時(shí)的身體協(xié)調(diào)性減弱，以及用戶在移動(dòng)或危險(xiǎn)情境下使用設(shè)備的可能性(例如走路時(shí)的障礙物、過(guò)馬路時(shí)的交通情況以及駕駛安全性)。這些使用情景與設(shè)備的尺寸和本質(zhì)有不可否認(rèn)的關(guān)系，有效的設(shè)計(jì)應(yīng)該充分考慮這些因素。


18、使用純正的，至少實(shí)際的示例內(nèi)容


好的示例內(nèi)容標(biāo)準(zhǔn)有以下幾條：


1、示例內(nèi)容涵蓋應(yīng)用可能的長(zhǎng)度，而不是僅僅為了原型設(shè)計(jì)的方便。


2、設(shè)計(jì)必需的數(shù)據(jù)缺省時(shí)的顯示方案，尤其如用戶照片等。


3、考慮不合需要的輸入示例，比如需要進(jìn)行裁剪的過(guò)寬或過(guò)長(zhǎng)的圖片。


4、包含極端或少見(jiàn)的名字示例，包括超長(zhǎng)或不間斷的姓和名。


5、地址不限制為當(dāng)?shù)氐牡刂沸问?，而包括各種可能的長(zhǎng)度和格式。


6、在設(shè)計(jì)的任何角落都找不到“Loremipsum”。


19、本地化考慮


當(dāng)大多數(shù)人考慮支持其它語(yǔ)言時(shí)，他們想的是文本。而當(dāng)設(shè)計(jì)師或開(kāi)發(fā)者考慮本地化時(shí)，他們應(yīng)該考慮的是布局。為了實(shí)現(xiàn)本地化，你的設(shè)計(jì)應(yīng)該使所有文本支持與英文50%的寬度差異。在顯示同等內(nèi)容時(shí)，亞洲語(yǔ)言需要的空間比英語(yǔ)少接近50%，而歐洲語(yǔ)言會(huì)比英語(yǔ)多接近50%。這個(gè)問(wèn)題在設(shè)計(jì)按鈕和幫助文本時(shí)尤其重要。


20、考慮屏幕全局光源


作為設(shè)計(jì)師，你應(yīng)該早就了解每個(gè)平臺(tái)都有其不可改變的屏幕全局光源(例如在iOS上，是在中心的正上方，或90度)。所有高光和陰影效果都應(yīng)該和平臺(tái)的光源相協(xié)調(diào)。


21、明確導(dǎo)航和組織控件設(shè)計(jì)


向你的開(kāi)發(fā)者明確展示你的設(shè)計(jì)中包含的標(biāo)簽、下拉菜單或者其它閉合機(jī)制。在進(jìn)行這種控件設(shè)計(jì)時(shí)，要尊重平臺(tái)的設(shè)計(jì)慣例。開(kāi)發(fā)者在進(jìn)行開(kāi)發(fā)時(shí)需要明確了解信息層次，因此你要確保你的設(shè)計(jì)清晰地展示你的意圖。圖層復(fù)合在這種情況下非常有用。


22、導(dǎo)出圖形時(shí)不進(jìn)行壓縮


在導(dǎo)出時(shí)以PNG
alpha通道格式保存，除非被明確告知其它保存方式。除非被明確要求，否則不要使用JPEG格式。不要考慮圖像文件大小，因?yàn)殚_(kāi)發(fā)者或他們的開(kāi)發(fā)環(huán)境會(huì)對(duì)圖像進(jìn)行最優(yōu)化。以透明背景導(dǎo)出每個(gè)元素，而不是純色，即便你設(shè)計(jì)中的一部分背景確實(shí)是純色的。


23、詢問(wèn)陰影的處理


和你的開(kāi)發(fā)者溝通是否要將陰影效果包含在導(dǎo)出圖中。通常情況下，開(kāi)發(fā)者會(huì)用CSS或?qū)懘a來(lái)應(yīng)用陰影，這樣做事實(shí)上會(huì)比直接使用預(yù)先保存的陰影位圖更方便容易。不要假定陰影效果應(yīng)該包含在圖像中，雖然在設(shè)計(jì)原型時(shí)用圖層展示陰影效果。


24、理解按鈕的構(gòu)建方法


應(yīng)用或網(wǎng)頁(yè)上的按鈕幾乎都不是用單一的圖片創(chuàng)建的，而通常是下面兩種情況：


a：3部分圖像，左端圖像，右端圖像，重復(fù)的單像素寬的中間部分(允許圖像的橫向擴(kuò)展)


b：9部分圖像，上中下-左端圖像，上中下-右端圖像，以及3個(gè)重復(fù)的上中下中間部分(允許按鈕的橫向和縱向擴(kuò)展)


最后想法


任何軟件都應(yīng)該是平面設(shè)計(jì)、交互設(shè)計(jì)和開(kāi)發(fā)三者合作的結(jié)果，這三部分都同等重要。知道另外領(lǐng)域的需求對(duì)我們自己的工作非常有幫助。


以上就是小編今天為大家分享的關(guān)于Web前端工程師要掌握的工作經(jīng)驗(yàn)的文章，希望本篇文章能夠?qū)φ趶氖聎eb前端工作的小伙伴們有所幫助，想要了解更多web前端知識(shí)的小伙伴們記得關(guān)注北大青鳥(niǎo)web培訓(xùn)官網(wǎng)。最后祝愿小伙伴們工作順利！

前端工程師三年工作經(jīng)驗(yàn)大概多少錢(qián)

前端工程師的工作經(jīng)驗(yàn)與薪資沒(méi)有太大關(guān)系，前端薪資制定和調(diào)整是要看實(shí)際能力的。

以下幾點(diǎn)是面試中經(jīng)常會(huì)問(wèn)到的

• 對(duì)Web標(biāo)準(zhǔn)的理解

• 瀏覽器差異

• CSS基本功：布局、盒模型、選擇器優(yōu)先級(jí)及使用等

• Javascript 基礎(chǔ)、JS面向?qū)ο髮?shí)現(xiàn)原理、閉包機(jī)制、作用域

但同時(shí)也會(huì)上機(jī)操作，看實(shí)際能力如何。

一般的前端工程師薪資都是在1w以上。

前端工程師是做什么的？

一、什么是前端？

1、前端概念

前端即網(wǎng)站前臺(tái)部分，運(yùn)行在PC端，移動(dòng)端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁(yè)。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，HTML5，CSS3，前端框架的應(yīng)用，跨平臺(tái)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能夠適應(yīng)各種屏幕分辨率，完美的動(dòng)效設(shè)計(jì)，給用戶帶來(lái)極高的用戶體驗(yàn)。

2、前端特點(diǎn)

前端技術(shù)一般分為前端設(shè)計(jì)和前端開(kāi)發(fā)，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺(jué)設(shè)計(jì)，前端開(kāi)發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級(jí)版本HTML5、CSS3，以及SVG等。

3、前端主要技術(shù)：HTML、CSS、JavaScript

這三個(gè)是前端開(kāi)發(fā)中最基本也是最必須的三個(gè)技能。前端的開(kāi)發(fā)中，在頁(yè)面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過(guò)JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來(lái)很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開(kāi)發(fā)前，需要對(duì)這些概念弄清楚、弄明白，這樣在開(kāi)發(fā)的過(guò)程中才會(huì)得心應(yīng)手。

（1）HTML

指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)，這個(gè)也是我們網(wǎng)頁(yè)最常用普通的語(yǔ)言了，經(jīng)歷了多個(gè)版本的發(fā)展，已經(jīng)發(fā)展到5.0版了，得力于W3C建立的標(biāo)準(zhǔn)和規(guī)范，已普遍升級(jí)到了XHTML，XHTML 指可擴(kuò)展超文本標(biāo)簽語(yǔ)言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成為 W3C 標(biāo)準(zhǔn)，是更嚴(yán)格更純凈的 HTML 代碼，XHTML 的目標(biāo)是取代 HTML。XHTML 與 HTML 4.01 幾乎是相同的，XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML，是一個(gè) W3C 標(biāo)準(zhǔn)。W3C 將 XHTML 定義為最新的HTML版本。所有新的瀏覽器都支持 XHTML。

（2）CSS

級(jí)聯(lián)樣式表（Cascading Style Sheet）簡(jiǎn)稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過(guò)設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力。

（3）JavaScript

是一種由Netscape的LiveScript發(fā)展而來(lái)的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類(lèi)型的區(qū)分大小寫(xiě)的客戶端腳本語(yǔ)言，主要目的是為了解決服務(wù)器端語(yǔ)言，比如Perl，遺留的速度問(wèn)題，為客戶提供更流暢的瀏覽效果。當(dāng)時(shí)服務(wù)端需要對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證，由于網(wǎng)絡(luò)速度相當(dāng)緩慢，只有28.8kbps，驗(yàn)證步驟浪費(fèi)的時(shí)間太多。于是Netscape的瀏覽器Navigator加入了Javascript，提供了數(shù)據(jù)驗(yàn)證的基本功能。

二、什么是后端？

1、后端概念

多數(shù)后端開(kāi)發(fā)人員從事于構(gòu)建他們正在工作的應(yīng)用程序背后的實(shí)際邏輯。前端開(kāi)發(fā)人員構(gòu)建用戶界面，而后端開(kāi)發(fā)人員編寫(xiě)代碼，使其工作。后端開(kāi)發(fā)人員寫(xiě)可使得按鈕工作的代碼，通過(guò)指出從數(shù)據(jù)庫(kù)中提取哪些數(shù)據(jù)并將其傳回到前端。后端開(kāi)發(fā)人員也可能會(huì)大量參與系統(tǒng)架構(gòu)，決定如何組織系統(tǒng)的邏輯，以便能夠正常維護(hù)和運(yùn)行。

可能會(huì)參與構(gòu)建框架或系統(tǒng)架構(gòu)，以便于更容易編寫(xiě)程序。后端開(kāi)發(fā)人員比前端開(kāi)發(fā)人員花費(fèi)更多的時(shí)間在實(shí)現(xiàn)算法和解決問(wèn)題上。通常前端開(kāi)發(fā)工作更多的是關(guān)于創(chuàng)建用戶界面和與之相關(guān)的內(nèi)容，而不是實(shí)現(xiàn)實(shí)際的業(yè)務(wù)邏輯，使應(yīng)用程序工作。

2、后端開(kāi)發(fā)主要技術(shù)

前端開(kāi)發(fā)人員需要知道一系列用于創(chuàng)建用戶界面的工具，而后端開(kāi)發(fā)人員通常使用的是一套完全不同的工具和技能，以便于高效地完成他們的工作。后端開(kāi)發(fā)人員所需的一個(gè)重要技能與SQL和數(shù)據(jù)庫(kù)有關(guān)。大多數(shù)后端系統(tǒng)需要連接到存儲(chǔ)應(yīng)用程序數(shù)據(jù)的數(shù)據(jù)庫(kù)。

后端開(kāi)發(fā)人員通常的工作是從數(shù)據(jù)庫(kù)或其他數(shù)據(jù)源寫(xiě)入、讀取和處理數(shù)據(jù)，因此擁有SQL等技能會(huì)非常重要。后端開(kāi)發(fā)人員——至少對(duì)于Web開(kāi)發(fā)——也需要擅長(zhǎng)他們正在使用的技術(shù)棧的服務(wù)器端語(yǔ)言。

后端開(kāi)發(fā)人員需要更多地了解應(yīng)用程序架構(gòu)，因?yàn)榇蠖鄶?shù)情況下，后端開(kāi)發(fā)人員需要去構(gòu)建應(yīng)用程序的體系結(jié)構(gòu)和內(nèi)部設(shè)計(jì)。一個(gè)好的后端開(kāi)發(fā)人員得知道如何使用各種框架和庫(kù)，如何將它們集成到應(yīng)用程序中，以及如何構(gòu)建代碼和業(yè)務(wù)邏輯，用一種使系統(tǒng)更易于維護(hù)的方式。

前端用戶可見(jiàn)的界面，網(wǎng)站前端頁(yè)面就是網(wǎng)頁(yè)的頁(yè)面開(kāi)發(fā)，前端的工作內(nèi)容就是將美工設(shè)計(jì)的效果圖的設(shè)計(jì)成瀏覽器可以運(yùn)行的網(wǎng)頁(yè)，并配合后端做網(wǎng)頁(yè)的數(shù)據(jù)顯示和交互等可視方面的工作內(nèi)容；后端是指用戶看不見(jiàn)的東西，通常是與前端工程師進(jìn)行數(shù)據(jù)交互及網(wǎng)站數(shù)據(jù)的保存和讀取，相對(duì)來(lái)說(shuō)后端涉及到的邏輯代碼比前端要多的多，后端考慮的是底層業(yè)務(wù)邏輯的實(shí)現(xiàn)，平臺(tái)的穩(wěn)定性與性能等。

以上就是整理的前端和后端的具體區(qū)別。希望能幫到大家！