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

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





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


一、Photoshop


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


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


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


2、保持圖層


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


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


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


4、合理地對圖層編組


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


5、去掉不需要的圖層


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


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


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


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


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


二、助力開發(fā)者


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


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


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


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


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


10、對齊像素


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


11、使用RGB模式


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


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


很多(大多數(shù))開發(fā)者除了基本的編輯功能外對Photoshop一竅不通。設(shè)計(jì)師需要適時地導(dǎo)出可能會在應(yīng)用或網(wǎng)站上用到的裁剪圖，因?yàn)楫吘顾麄兪菍ξ募蚉hotoshop最熟悉的人。這項(xiàng)工作雖然很痛苦，而且很耗時，但這是除“設(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)會有更好的效果，但這也使對字體的選擇不僅基于視覺，還有可行性上的考慮。


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


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


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


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


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


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


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


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


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


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


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


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


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


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


同一應(yīng)用在手機(jī)、平板和電腦上的內(nèi)容和交互都應(yīng)有所不同。對移動設(shè)備而言，我們也需要考慮注意力持續(xù)時間、注意力分散、使用設(shè)備時的身體協(xié)調(diào)性減弱，以及用戶在移動或危險情境下使用設(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)用可能的長度，而不是僅僅為了原型設(shè)計(jì)的方便。


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


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


4、包含極端或少見的名字示例，包括超長或不間斷的姓和名。


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


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


19、本地化考慮


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


20、考慮屏幕全局光源


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


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


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


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


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


23、詢問陰影的處理


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


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


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


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


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


最后想法


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


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

web前端方面的工作經(jīng)歷都有哪些呢？

1、三大基礎(chǔ)技能，js、css、html這三項(xiàng)技能是前端工程師能力中的基礎(chǔ)，任何框架、工具、庫都是基于這三者只上的。這是硬實(shí)力，決定了整個前端生涯能夠達(dá)到的高度，以及在后面的技術(shù)棧拓展中的順暢程度和能夠達(dá)到的效果。
2、工程能力要有，前端工程師首先是個工程師，做項(xiàng)目就是在做工程，所以懂得如何把一個項(xiàng)目的前端部分的工程運(yùn)行起來，是另一項(xiàng)必備技能。
grunt、gulp、webpack都是著名的工程類工具，這些工具只要能熟練使用，就基本符合工程能力的要求。但是如果想要拿到更高一個層次的offer，理解工作原理必不可少。這些工具的根本作用，就是對資源的處理，包括代碼的壓縮打包、本地服務(wù)器的架設(shè)等。
3、調(diào)試能力要必備，如果還在用alert、console來調(diào)試程序定位問題，那么你還不符合要求。
學(xué)習(xí)chrome調(diào)試工具的使用，Elements查看元素、Network查看網(wǎng)絡(luò)請求、Sources查看代碼，設(shè)置斷點(diǎn)定位問題、call stack查看調(diào)用棧。這個能力很少有人提到，但是掌握這些技能，不僅能在面試時加分，更重要的是在日后實(shí)際的項(xiàng)目中發(fā)揮的作用。
4、團(tuán)隊(duì)協(xié)作能力指的就是git，在項(xiàng)目開發(fā)中必不可少，熟練使用git，掌握常用的命令，學(xué)會解決沖突。
5、熱門框架的使用vue、react是當(dāng)前兩個最熱門的框架，能夠熟練使用是基本要求，如果你想在眾多求職者中脫穎而出，你還需要理解原理，還是那句話，你跟offer的差距就是使用與實(shí)現(xiàn)的差距。試著理解virtual dom的原理，響應(yīng)式的原理，雙向數(shù)據(jù)綁定的原理。
6、項(xiàng)目經(jīng)驗(yàn)要可靠，不是“仿了幾個頁面”，而是“項(xiàng)目”的經(jīng)驗(yàn)，是經(jīng)歷過整個項(xiàng)目從0到1全過程的經(jīng)驗(yàn)，在這個過程中遇到了什么坑，如何解決的，解決的過程中是如何思考的。

前端開發(fā)個人簡歷范文參考

撰寫個人簡歷是前端開發(fā)個人求職者求職的第一步，也是前端開發(fā)個人求職者求職的必備文件。下面是我整理的前端開發(fā)簡歷 范文 ，以供大家閱讀。
前端開發(fā)簡歷范文(一)
個人概況

姓 名：*****

出生年月：1992-1

性 別：男

身 高：171CM

婚姻狀況：未婚

籍 貫：福建莆田市

政治面貌：共青團(tuán)員

目前所在地：義烏稠州北路601號

求職意向

期望職位：網(wǎng)頁設(shè)計(jì)/電腦美工

職位類型：全職 工作地點(diǎn)：全國各地

工資待遇：暑期工 1000-1500 住房要求：面議

工作 經(jīng)驗(yàn)

工作經(jīng)驗(yàn)：1年

教育 背景

最高學(xué)歷：中專

畢業(yè) 院校：義烏市城職校

所學(xué)專業(yè)：PHP程序員

計(jì)算機(jī)能力：精通

其它 能力：web前端開發(fā)
前端開發(fā)簡歷范文(二)
(女，22歲)

求 職 位：web前端開發(fā) 期望薪資：3000-5000元/月

目前職位：網(wǎng)頁設(shè)計(jì)/制作 學(xué) 歷：大專

工作經(jīng)驗(yàn)：1-3年 現(xiàn)居住地：上海徐匯上海植物園

聯(lián)系電話： 電子郵箱：

自我評價

本人在校表現(xiàn)優(yōu)秀，連年獲得國家獎學(xué)金、三好學(xué)生優(yōu)秀班干部等榮譽(yù)。獲得助理電子商務(wù)師、全國計(jì)算機(jī)高新技術(shù)證書證書。我樂觀向上、有較強(qiáng)的團(tuán)隊(duì)意識，做事認(rèn)真負(fù)責(zé)?，F(xiàn)經(jīng)過培訓(xùn)，已掌握web前端開發(fā)技術(shù)，熟悉HTML/XHTML、CSS等網(wǎng)頁制作技術(shù)，熟悉頁面架構(gòu)及布局，掌握div+css制作符合W3C標(biāo)準(zhǔn)的靜態(tài)網(wǎng)頁;熟悉JavaScript腳本，使用過Query框架開發(fā)技術(shù);入門Access數(shù)據(jù)庫、c#、asp.net等后臺應(yīng)用的基礎(chǔ)。了解html5\css3的基礎(chǔ)用法;用過了解Photoshop、flash、Fireworks、Dreamweaver等軟件應(yīng)用。

工作經(jīng)驗(yàn)

中國電信

2011-12 至 2012-2任職網(wǎng)頁設(shè)計(jì)/制作薪資2000-3000元/月

工作職責(zé)：獨(dú)立完成中國電信積分商城內(nèi)頁設(shè)計(jì)，修改，切圖，完成頁面制作，制作符合W3C規(guī)范的靜態(tài)頁面，達(dá)到各種瀏覽器的兼容。

上海谷宇 廣告 公司

2012-2 至 現(xiàn)在任職網(wǎng)頁設(shè)計(jì)/制作薪資2000-3000元/月

工作職責(zé)：獨(dú)立設(shè)計(jì)網(wǎng)站的平面，然后切圖，制作成符合W3C標(biāo)準(zhǔn)的網(wǎng)頁，達(dá)到各大主流瀏覽器的兼容，傳上服務(wù)器，管理后臺信息更新，兼顧日常網(wǎng)絡(luò)推廣

教育經(jīng)歷

2009-9 至 2012-6海南經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院電子商務(wù)專業(yè)

霍倩云語言能力

英語：一般
前端開發(fā)簡歷范文(三)
基本信息

姓名：xx

性別：男

出生日期：1992-4

婚姻狀況：未婚

聯(lián)系電話：×××××××××××

電子郵箱：

應(yīng)聘崗位：Web前端開發(fā)

專業(yè)技能

計(jì)算機(jī)語言：HTML、CSS、JS、C++、Flash/Flex、Silverlight、XML

網(wǎng)頁編輯器：Adobe Dreamweaver、Frontpage、CSSDesk、Drawter

數(shù)據(jù)庫軟件：Oracle、SQL Sever、Access

操作系統(tǒng) ：Windows、Linux、Unix、iOS

編程軟件：Delphi、VC++

Photoshop證書，網(wǎng)頁設(shè)計(jì)師證書

工作經(jīng)歷

2015.02-2015.05××有限公司PHP開發(fā)工程師

主要是使用HTML標(biāo)記、div+css+javascript Dom操作等前端WEB技術(shù)進(jìn)行網(wǎng)站的開發(fā)與制造

使用mvc思想、oop面向?qū)ο笏枷?、ThinkPHP模板框架、基于jQuery的EasyUI框架、Smarty模板引擎等技術(shù)來做項(xiàng)目開發(fā)

2013.09-2014.08CRM管理系統(tǒng)數(shù)據(jù)庫和網(wǎng)頁設(shè)計(jì)

負(fù)責(zé)編寫詳細(xì)需求分析和客戶管理模塊

實(shí)現(xiàn)了客戶添加、客戶修改、客戶刪除、批量刪除客戶、分頁等幾大功能

分別用到Myeclipse開發(fā)工具、orcal數(shù)據(jù)庫、ssh、javascript、jquery等開發(fā)技術(shù)，現(xiàn)幾大功能運(yùn)行穩(wěn)定，運(yùn)算速度明顯變快

教育背景

2010.09-2014.06廣州大學(xué)計(jì)算機(jī)網(wǎng)絡(luò)工程本科

獲得證書

大學(xué)英語六級

全國計(jì)算機(jī)等級證書三級 網(wǎng)絡(luò)技術(shù)

自我評價

工作積極，并且性格開朗，服從安排，吃苦耐勞

在前端開發(fā)個人求職者的求職中，個人求職信跟個人簡歷起著同樣重要的作用，下面是我為大家精心推薦的前端開發(fā)個人求職信范文，希望能夠?qū)δ兴鶐椭?
前端開發(fā)個人求職信范文
尊敬的領(lǐng)導(dǎo)：

您好!

首先感謝您在百忙之中抽出時間閱讀我的求職信。

我是xx水利電力職業(yè)技術(shù)學(xué)院計(jì)算機(jī)信息工程系的一名學(xué)生，即將面臨畢業(yè)。xx水利電力職業(yè)技術(shù)學(xué)院是教育部1999年7月26日批準(zhǔn)成立的一所普通高等院校。學(xué)院前身是1952年10月成立的xx土木水利工程學(xué)校，至今已有五十四年的歷史。在這五十四年中，學(xué)校的名稱幾經(jīng)變異。1958年—1962年曾升格為xx水利電力學(xué)院(本科層次)，“”期間學(xué)院停辦。1973年5月復(fù)辦后定名為xx省水利電力學(xué)校(中專)，1999年7月經(jīng)教育部批準(zhǔn)，升格為xx水利電力職業(yè)技術(shù)學(xué)院。建校至今，已培養(yǎng)了3萬多名技術(shù)人才，他們中的大多數(shù)已成為廣東省乃至國內(nèi)其他一些省份水利電力行業(yè)及相關(guān)行業(yè)的中堅(jiān)力量，為各地的經(jīng)濟(jì)建設(shè)和水利事業(yè)發(fā)展做出了重要貢獻(xiàn)。例如計(jì)算機(jī)應(yīng)用求職信范文。

三年來，在師友的嚴(yán)格教益及個人的努力下，我吸取了豐富的專業(yè)知識并鍛煉了自己的能力;使我具備了扎實(shí)的專業(yè)基礎(chǔ)知識，系統(tǒng)地掌握了c語言、匯編語言、asp.net、java，數(shù)據(jù)庫原理、linux網(wǎng)絡(luò)操作系統(tǒng)。局域網(wǎng)的組建或局域網(wǎng)廣域網(wǎng)的交換與路由設(shè)計(jì)實(shí)現(xiàn)和維護(hù)等有關(guān)理論;熟悉涉外工作常用禮儀;具備較好的英語聽、說、讀、寫、譯等能力;能熟練操作計(jì)算機(jī)辦公軟件。計(jì)算機(jī)專業(yè) 自我介紹 實(shí)訓(xùn)問題。同時，我利用課余時間廣泛地涉獵了大量書籍，不但充實(shí)了自己，也培養(yǎng)了自己多方面的技能。更重要的是，嚴(yán)謹(jǐn)?shù)膶W(xué)風(fēng)和端正的 學(xué)習(xí)態(tài)度 塑造了我樸實(shí)、穩(wěn)重、創(chuàng)新的性格特點(diǎn)。

最后再次感謝您耐心的閱讀了我的求職信。收筆之際，鄭重地提一個小小的要求： 無論您是否選擇我，尊敬的領(lǐng)導(dǎo)，希望您能夠接受我誠懇的謝意!

祝愿貴單位事業(yè)蒸蒸日上!

此致

敬禮!

XXX

XXXX年XX月XX日