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)。最后祝愿小伙伴們工作順利！
如何成為一名卓越的前端工程師
首先，優(yōu)秀的Web前端開發(fā)工程師要在知識體系上既要有廣度和深度！做到這兩點(diǎn)，其實(shí)很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發(fā)工程師。技術(shù)非黑即白，只有對和錯，而技巧則見仁見智。
在以前，會一點(diǎn)Photoshop和Dreamweaver的操作，就可以制作網(wǎng)頁。
現(xiàn)在，只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁制作，而是叫Web前端開發(fā)。
Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要，而且需要專業(yè)的前端工程師才能做好。
Web前端開發(fā)是一項(xiàng)很特殊的工作，涵蓋的知識面非常廣，既有具體的技術(shù)，又有抽象的理念。簡單地說，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。
其次，優(yōu)秀的Web前端開發(fā)工程師應(yīng)該具備快速學(xué)習(xí)能力。Web發(fā)展的很快，甚至可以說這些技術(shù)幾乎每天都在變化！如果沒有快速學(xué)習(xí)能力，就跟不上Web發(fā)展的步伐。前端工程師必須不斷提升自己，不斷學(xué)習(xí)新技術(shù)、新模式；僅僅依靠今天的知識無法適應(yīng)未來。Web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何通過自己的Web應(yīng)用程序來體現(xiàn)這種翻天覆地的變化。
如何成為一個偉大的前端工程師？
最近，我收到了我的博客的一個讀者發(fā)來的電子郵件，不管出于什么原因，我真的開始思考了。這就是它說:
你好，Philip，問你如何成為一個偉大的前端工程師可以嗎?
任何建議嗎?
我不得不承認(rèn)，當(dāng)我被問到這個問題時，我很驚訝，因?yàn)槲覐膩頉]有把自己當(dāng)成一個“偉大的”前端工程師。事實(shí)上，我在這個行業(yè)工作的頭幾年，我真的認(rèn)為自己沒有資格勝任任何一份工作。我只申請了他們，因?yàn)槲覜]有意識到我知道的太少了，而且我只有他們，因?yàn)槊嬖囄业娜瞬恢酪獑柺裁磫栴}。
話雖如此，我最終在每個角色中都表現(xiàn)得很好，成為了團(tuán)隊(duì)中的一名重要成員。當(dāng)我最終離開的時候(因?yàn)橄乱粋€挑戰(zhàn)我也沒有資格)，我通常被要求雇用我的替代者。現(xiàn)在回想一下，我是如何接近這些采訪的，我對自己對知識的重視程度感到震驚——盡管我剛開始的時候還缺乏這個領(lǐng)域的知識。即使我從個人經(jīng)驗(yàn)中知道成功是可能的，但我現(xiàn)在的自己可能不會雇傭我以前的自己。
我在網(wǎng)上工作的時間越長，我就越意識到把好人和真正優(yōu)秀的人區(qū)分開來的不是他們所知道的;他們怎么想。顯然，知識在某些情況下是至關(guān)重要的，但在一個變化如此迅速的領(lǐng)域，你如何去獲取知識總是比你在任何時候所知道的更重要(至少是長期的)。也許最重要的是:你如何利用這些知識來解決日常問題。
這里有大量的文章討論你需要知道的語言、框架和工具。我想采取另一種方法。在這篇文章中，我將討論前端工程師的思維方式，并希望對這個問題給出一個更持久的答案:你如何變得偉大?
不要只是解決問題，要弄清楚到底發(fā)生了什么。
有太多的人寫CSS和JavaScript tinker，直到他們找到了有用的東西，然后他們才繼續(xù)前進(jìn)。我知道這會發(fā)生，因?yàn)樵诖a審查期間我經(jīng)常看到它。
我經(jīng)常會問別人:“你為什么要加float ?”或者“這個溢出:隱藏真的是必要的嗎?”他們會回答:“我不知道，但如果我把它拿走，它就不工作了?！?
JavaScript也是如此。我將會看到一個setTimeout用于防止一個race條件，或者某人停止事件傳播，而不考慮它將如何影響頁面上的其他事件處理程序。
我知道有時候你需要一些有用的東西，而你現(xiàn)在需要它。但是如果你從來沒有花時間去理解問題的根源，你會發(fā)現(xiàn)自己在同樣的情況下一遍又一遍。
花點(diǎn)時間弄清楚為什么你的黑客行為現(xiàn)在看起來很昂貴，但是我保證它會在將來節(jié)省你的時間。對你所處的系統(tǒng)有一個更全面的了解，就意味著更少的猜測和檢查工作。
學(xué)會預(yù)測瀏覽器的未來變化。
前端代碼和后端代碼之間的主要區(qū)別之一是后端代碼通常運(yùn)行在您所控制的環(huán)境中。相反，前端完全超出了你的控制范圍。您的用戶在任何時候都可以完全改變的平臺或設(shè)備，您的代碼需要能夠優(yōu)雅地處理它。
我記得在2011年閱讀了一個流行的JavaScript框架的源代碼，并看到了下面的代碼(為了簡單起見而修改):
visie6= !isIE7&!isIE8&&!isIE9;
在這種情況下，IE6是IE版本的最流行的版本，大概可以處理IE6的版本。但當(dāng)IE10問世時，我們的大部分應(yīng)用程序都徹底崩潰了。
我明白在現(xiàn)實(shí)世界中特征檢測不工作100%的時間,有時你必須依靠車行為或白名單瀏覽器的功能檢測錯誤返回假陽性(或否定),但任何時候你做這絕對至關(guān)重要的預(yù)測幾乎肯定的將來不再存在這些缺陷。
對于我們中的許多人來說，我們今天寫的代碼將會比我們現(xiàn)在的工作更長壽。我在8年前寫的一些代碼現(xiàn)在仍然運(yùn)行在大型的生產(chǎn)網(wǎng)站上，這是一種既令人滿意又令人恐懼的想法。
閱讀規(guī)格
總是會有瀏覽器錯誤，但是當(dāng)兩個瀏覽器以不同的方式呈現(xiàn)相同的代碼時，人們通常會假設(shè)，沒有檢查自己，所謂的“好”瀏覽器是正確的，而“壞”瀏覽器是錯誤的。但事實(shí)并非總是如此，當(dāng)你錯了這個假設(shè)時，你所選擇的任何變通方法在將來幾乎肯定會被打破。
一個及時的示例是flex項(xiàng)目的默認(rèn)最小大小。根據(jù)規(guī)范，flex項(xiàng)的初始最小寬度和最小高度值是auto(而不是0)，這意味著。
