網(wǎng)站制作和網(wǎng)站設(shè)計(jì)人員有關(guān)系的嘛您喜愛您規(guī)劃作業(yè)的前端工程師嗎？您的一些習(xí)慣很或許無法很好地轉(zhuǎn)化為代碼，這使得前端工程師更難以與您協(xié)作完結(jié)項(xiàng)目。想成為更好的搭檔嗎？然后咱們將學(xué)習(xí)怎么更好地進(jìn)行交流和規(guī)劃，讓前端工程師通過對(duì)作業(yè)方法進(jìn)行奇妙的改變來愛上你的作業(yè)。這將加速項(xiàng)目進(jìn)度，使作業(yè)更輕松。

1、讓前端工程師盡早開始項(xiàng)目

網(wǎng)站規(guī)劃師和前端工程師之間最大的問題是，他們經(jīng)常在規(guī)劃的第一稿完結(jié)之前默默地開展作業(yè)，個(gè)人或團(tuán)隊(duì)開始議論項(xiàng)目。這不是正確的作業(yè)方法，網(wǎng)站規(guī)劃師和前端工程師應(yīng)該評(píng)論怎么從一開始就組裝項(xiàng)目。盡管網(wǎng)站規(guī)劃人員或許會(huì)關(guān)注色彩、字體和圖畫，但前端工程師能夠深化了解可用性、的功用和性能。

網(wǎng)站規(guī)劃師和前端工程師應(yīng)該很好地了解互相的外觀。網(wǎng)站規(guī)劃人員應(yīng)該了解足夠的代碼和可用性，以便與前端工程師交流并了解應(yīng)戰(zhàn)：前端工程師應(yīng)該對(duì)規(guī)劃理論有一點(diǎn)了解，以便在規(guī)劃概念不適合網(wǎng)絡(luò)時(shí)提出建議。

2、文件結(jié)構(gòu)清晰

Web規(guī)劃人員能夠做的最重要的作業(yè)之一就是每次都以相同的方法預(yù)備和打包文件。您有多少次翻開包含數(shù)百個(gè)未命名圖層的Photoshop文檔？請(qǐng)勿將此類文檔交給前端工程師。不管您運(yùn)用哪種軟件，都應(yīng)該適當(dāng)?shù)孛總€(gè)圖層和款式。款式、色彩、樣本和布局在整個(gè)規(guī)劃進(jìn)程中應(yīng)堅(jiān)持共同。

關(guān)于每個(gè)項(xiàng)目，以相同的方法命名文件和款式。以相似的方法分組并運(yùn)用共同的文件夾體系。這樣，前端工程師就不用從頭學(xué)習(xí)怎么找到每個(gè)新項(xiàng)目的部件和元素。

3、運(yùn)用瀏覽器字體

印刷辦理是規(guī)劃項(xiàng)目（包含印刷和數(shù)字著作）面對(duì)的最大應(yīng)戰(zhàn)之一。不要將桌面字體用于為Web或運(yùn)用程序規(guī)劃的打印項(xiàng)目，并假定它們能夠正常作業(yè)。 （一般他們沒有。）

關(guān)于數(shù)字項(xiàng)目，請(qǐng)選擇“瀏覽器字體排版”。這意味著您或許需求為Web找到與打印內(nèi)容相匹配的相似字體。不要讓前端工程師為您做這件事。選擇可比的瀏覽器字體并從一開始就運(yùn)用它們。您甚至能夠在風(fēng)格攻略中注意到打印和數(shù)字字體。

這背面的原因很簡(jiǎn)單：嵌入字體或許很棘手。此外，瀏覽器字體是免費(fèi)的，可保證您不會(huì)產(chǎn)生額外的項(xiàng)目本錢。 （當(dāng)你這樣做時(shí)，考慮用圖標(biāo)做相同的作業(yè)，運(yùn)用像字體這樣的好包裝，所以前端工程師能夠運(yùn)用CSS風(fēng)格的圖標(biāo)而不是導(dǎo)入一堆圖畫文件！）

4、打包圖畫財(cái)物

當(dāng)咱們?cè)u(píng)論圖畫財(cái)物時(shí)，正確導(dǎo)出和打包文件非常重要。前端工程師能夠翻開和導(dǎo)出一切圖畫文件以滿意他們的需求，您能夠詢問他們需求什么并在此進(jìn)程中執(zhí)行它們。

這可保證您取得所需的圖畫并壓縮文件以協(xié)助您快速加載網(wǎng)站。

不要試圖自己這樣做。詢問前端工程師怎么保存、命名和壓縮文件以取得最佳運(yùn)用作用。

5、考慮環(huán)境

在規(guī)劃網(wǎng)站和移動(dòng)運(yùn)用程序時(shí)，需求考慮很多設(shè)備巨細(xì)和寬高比。作為Web規(guī)劃人員，您需求知道畫布巨細(xì)、邊距、填充等，以創(chuàng)立實(shí)際可用的模型。

在開始繪圖之前，請(qǐng)先咨詢前端工程師，以保證在開始之前了解規(guī)劃環(huán)境的外觀。沒有比在Photoshop或Sketch中看起來更好的規(guī)劃更糟糕的了。

你需求提前知道這些作業(yè)：

假如結(jié)構(gòu)具有不同尺度的特定填充規(guī)格。

列之間的溝寬度（假如不同）

屏幕尺度最窄的前端工程師將編寫代碼。

6、提出更多問題

它已被屢次提及，但規(guī)劃師和前端工程師之間的交流是一切這些作業(yè)的關(guān)鍵。交流能夠創(chuàng)立或破壞項(xiàng)目，影響截止日期，并影響終究項(xiàng)目的規(guī)劃和功用。

與前端工程師共進(jìn)午餐，了解他們。在此進(jìn)程中有許多問題要問。假如您不確定某些內(nèi)容是否有用，請(qǐng)?jiān)儐枴Ｇ岸斯こ處煵⒉皇且粋€(gè)糟糕的人，在進(jìn)程早期答復(fù)問題要比從頭考慮和整個(gè)概念容易得多。

7、了解一些開發(fā)基礎(chǔ)知識(shí)

當(dāng)您與前端工程師攀談并提出問題時(shí)，您需求深化挖掘。假如您的規(guī)劃庫(kù)中還沒有這些技能，請(qǐng)學(xué)習(xí)一些開發(fā)基礎(chǔ)知識(shí)。

從事數(shù)字項(xiàng)目的網(wǎng)站規(guī)劃師應(yīng)該在以下方面進(jìn)行自我介紹：

HTML和CSS（您應(yīng)該能夠更改字體巨細(xì)或色彩，并了解兩者是不同的）常見用戶模式（針對(duì)用戶與內(nèi)容的交互方法而規(guī)劃）

可拜訪性規(guī)范（因而您的規(guī)劃將適用于更多用戶）

哪些類型的元素需求用作圖畫，哪些元素能夠運(yùn)用純CSS創(chuàng)立！

斷點(diǎn)怎么在呼應(yīng)式布局中作業(yè)？

網(wǎng)站規(guī)劃趨勢(shì)

您或許永遠(yuǎn)不會(huì)真實(shí)編寫代碼，但學(xué)習(xí)開發(fā)原則會(huì)使您成為更好的網(wǎng)站規(guī)劃者，因?yàn)槟鷮⒘私鈻|西和作業(yè)流程的價(jià)值。

8、運(yùn)用“慣例”款式攻略

規(guī)劃進(jìn)程也延伸到開發(fā)，網(wǎng)站網(wǎng)站規(guī)劃師，你需求意識(shí)到前端工程師對(duì)你的規(guī)劃進(jìn)程相同重要。

考慮到這一點(diǎn)，創(chuàng)立一個(gè)“慣例”款式攻略，不只包含色彩和字體，還包含組件。在該項(xiàng)目已經(jīng)開始時(shí)，每個(gè)人都應(yīng)該能夠拜訪和更新文檔。

一個(gè)好的款式攻略將協(xié)助項(xiàng)目的每個(gè)人堅(jiān)持與可視元素的共同性，為規(guī)劃選擇供給上下文，為項(xiàng)目供給協(xié)作點(diǎn)，并協(xié)助規(guī)范化代碼。

將以下信息放入款式攻略中以充分利用：標(biāo)志風(fēng)格

調(diào)色板

字體面板

圖標(biāo)面板

導(dǎo)航菜單元素

不同頁(yè)面的布局選項(xiàng)。

在整個(gè)站點(diǎn)中重復(fù)運(yùn)用的代碼片段（例如按鈕）

9、運(yùn)用網(wǎng)格

網(wǎng)格尊重。在呼應(yīng)式網(wǎng)站規(guī)劃中，網(wǎng)格不只僅是將元素放置在屏幕上的攻略，它還確定了元素在不同屏幕尺度下的方位，以及列的堆疊和改組。

網(wǎng)格能夠協(xié)助您規(guī)劃和維護(hù)流。 （應(yīng)戰(zhàn)在于你不能隨意違背規(guī)劃規(guī)則。）

能夠這樣想一想：您的規(guī)劃在全屏桌面顯示屏上有四行內(nèi)容排列在屏幕上（屏幕上的寬度相同）。然后在平板上，將塊轉(zhuǎn)化為兩列，每行兩列。在移動(dòng)設(shè)備上，它們被轉(zhuǎn)化為一行和四行。

了解網(wǎng)格怎么影響對(duì)象的巨細(xì)以及對(duì)象怎么在不同設(shè)備上進(jìn)行轉(zhuǎn)化非常重要，因?yàn)樗鼪Q議了怎么規(guī)劃您擁有的內(nèi)容。再想一想相同的情況。假如有五個(gè)內(nèi)容塊怎么辦？它需求從頭規(guī)劃，以保證您創(chuàng)立共同的視覺輪廓。

10、友好的網(wǎng)站規(guī)劃師

保證項(xiàng)目順利進(jìn)行的真實(shí)關(guān)鍵是靈活性。網(wǎng)頁(yè)規(guī)劃技能和規(guī)范不斷變化。盡管有些項(xiàng)目確實(shí)讓你成為一個(gè)細(xì)節(jié)而且是一個(gè)不動(dòng)的人，但呼應(yīng)式規(guī)劃卻不是這樣的。易于運(yùn)用的網(wǎng)站規(guī)劃師將贏得更多尊重并與前端工程師建立更好的關(guān)系。這將帶來更好，更成功的項(xiàng)目。應(yīng)該說，可是太屢次，會(huì)有很多無意識(shí)的行為。不要墮入那個(gè)陷阱。與您的前端工程師評(píng)論您的項(xiàng)目，他們會(huì)愛你

更多的網(wǎng)站設(shè)計(jì)可以聯(lián)系啄木鳥建站工作室為您設(shè)計(jì)適合你企業(yè)的網(wǎng)站