網(wǎng)站設(shè)計(jì)制作人員，你的設(shè)計(jì)作品前端工程師們是喜歡的嗎？很有可能你的一些習(xí)慣并不能很好地轉(zhuǎn)化為代碼，這就會(huì)讓前端工程師在項(xiàng)目上與你一起工作變得更加困難了。那我們今天就來(lái)學(xué)習(xí)如何更好地溝通和設(shè)計(jì)，通過(guò)對(duì)工作方式的細(xì)微改變來(lái)讓前端工程師愛(ài)上你的作品，這樣將會(huì)加快項(xiàng)目進(jìn)度，使工作更輕松。

1、讓前端工程師在早期開(kāi)始接觸項(xiàng)目

網(wǎng)站設(shè)計(jì)師和前端工程師之間最大的問(wèn)題是他們經(jīng)常在默默的完成自己的工作，直到設(shè)計(jì)的初稿完成，個(gè)人或團(tuán)隊(duì)才開(kāi)始談?wù)撘粋€(gè)項(xiàng)目。這不是正確的工作方式，網(wǎng)站設(shè)計(jì)師和前端工程師應(yīng)該從一開(kāi)始就討論項(xiàng)目將如何組合在一起。雖然網(wǎng)站設(shè)計(jì)制作人員可能關(guān)注顏色、字體和圖像，但前端工程師可以提供對(duì)可用性、功能和性能的洞察。

網(wǎng)站設(shè)計(jì)師和前端工程師應(yīng)該對(duì)對(duì)方的外觀有一個(gè)很好的了解。網(wǎng)站設(shè)計(jì)師應(yīng)該理解足夠的代碼和可用性，以便與前端工程師交流并理解挑戰(zhàn)：前端工程師應(yīng)該對(duì)設(shè)計(jì)理論有一點(diǎn)了解，這樣他們就可以在設(shè)計(jì)理念不適合web的時(shí)候提出建議。

2、清晰的文件

網(wǎng)站設(shè)計(jì)師所能做的最大的事情之一就是每次都以相同的方式準(zhǔn)備和打包文件。有多少次你打開(kāi)了一個(gè)有數(shù)百個(gè)未命名圖層的Photoshop文檔？不要將這種類(lèi)型的文件交給前端工程師。無(wú)論你使用什么軟件，每一層和樣式都應(yīng)該適當(dāng)命名。樣式、顏色、色板和排版在整個(gè)設(shè)計(jì)過(guò)程中都應(yīng)保持一致。對(duì)于每個(gè)項(xiàng)目，以相同的方式命名文件和樣式。以類(lèi)似的方式分組，并使用一致的文件夾系統(tǒng)。這樣，前端工程師就不必重新學(xué)習(xí)如何找到每個(gè)新項(xiàng)目的部件和元素。

3、使用瀏覽器字體

設(shè)計(jì)項(xiàng)目的最大挑戰(zhàn)之一，包括印刷和數(shù)字作品是印刷管理。不要將桌面字體用于web或應(yīng)用程序設(shè)計(jì)的打印項(xiàng)目，并假設(shè)它們會(huì)起作用。對(duì)于數(shù)字項(xiàng)目，選擇瀏覽器字體排版。這意味著你可能需要為web找到類(lèi)似的字體，以便與打印的內(nèi)容相匹配。不要讓前端工程師為你做這些。挑選可比較的瀏覽器字體，并從一開(kāi)始就使用它們。你甚至可以在你的風(fēng)格指南中注意到打印和數(shù)字字體。

這背后的原因很簡(jiǎn)單:嵌入字體可能有點(diǎn)棘手。另外，瀏覽器字體是免費(fèi)的，并且將確保你不會(huì)產(chǎn)生額外的項(xiàng)目成本。（當(dāng)你在做的時(shí)候，考慮一下用圖標(biāo)做同樣的事情，用一個(gè)像字體一樣的包，這樣前端工程師就可以使用CSS樣式的圖標(biāo)，而不是導(dǎo)入一堆圖像文件!）

4、包裝形象資產(chǎn)

當(dāng)我們討論圖像資產(chǎn)的時(shí)候，正確的導(dǎo)出和打包文件是非常重要的。前端工程師可以打開(kāi)和導(dǎo)出所有的圖像文件以滿(mǎn)足他們的需求，你可以詢(xún)問(wèn)他們需要什么，并在過(guò)程中執(zhí)行。這可以確保你得到你想要的圖片，同時(shí)壓縮文件以幫助你的網(wǎng)站快速加載。不要試圖自己做這件事。詢(xún)問(wèn)前端工程師如何保存、命名和壓縮文件以獲得最佳使用。

5、考慮環(huán)境

在設(shè)計(jì)網(wǎng)站和移動(dòng)應(yīng)用程序時(shí)，要考慮的設(shè)備大小和縱橫比都是如此之多，作為一個(gè)網(wǎng)站設(shè)計(jì)師，你需要了解畫(huà)布大小、頁(yè)邊距、填充等，以創(chuàng)建實(shí)際可用的模型。在開(kāi)始繪圖之前，請(qǐng)與前端工程師交談，以確保在開(kāi)始之前了解設(shè)計(jì)環(huán)境的外觀。沒(méi)有什么比一個(gè)在Photoshop或素描中看起來(lái)更棒的設(shè)計(jì)更糟糕的了。

你需要事先知道這些事情:

如果該框架具有不同大小的特定填充規(guī)格。

列之間的溝寬（如果不同）

最窄屏幕尺寸的前端工程師將編寫(xiě)代碼。

6、多問(wèn)問(wèn)題

它已經(jīng)被提到過(guò)幾次了，但是設(shè)計(jì)者和前端工程師之間的溝通是所有這些工作的關(guān)鍵。溝通可以產(chǎn)生或破壞項(xiàng)目，影響截止日期，影響最終項(xiàng)目的設(shè)計(jì)和功能。多與你的前端工程師去吃午飯，去了解他們。一路上要問(wèn)很多問(wèn)題。如果你不確定某件事是否有用，就問(wèn)一問(wèn)。前端工程師不是可怕的人，在這個(gè)過(guò)程的早期回答一個(gè)問(wèn)題比需要重新思考和整個(gè)概念要容易得多。

7、學(xué)習(xí)一些開(kāi)發(fā)基礎(chǔ)知識(shí)

當(dāng)你與前端工程師交談并提出問(wèn)題時(shí)，要深入挖掘。如果你在你的設(shè)計(jì)庫(kù)中還沒(méi)有這些技能，那就學(xué)習(xí)一些開(kāi)發(fā)基礎(chǔ)知識(shí)。從事數(shù)字項(xiàng)目的網(wǎng)站設(shè)計(jì)師應(yīng)該在以下方面進(jìn)行自我介紹:

HTML和CSS（你應(yīng)該能夠改變字體大小或顏色，并理解兩者是不同的）

常見(jiàn)的用戶(hù)模式（為用戶(hù)與內(nèi)容交互的方式設(shè)計(jì)）

可訪問(wèn)性標(biāo)準(zhǔn)（因此你的設(shè)計(jì)將適用于更多的用戶(hù)）

哪些類(lèi)型的元素需要用作圖像，哪些元素可以使用純CSS來(lái)創(chuàng)建!

在響應(yīng)式布局中，斷點(diǎn)是如何工作的？

網(wǎng)站設(shè)計(jì)的趨勢(shì)

你可能永遠(yuǎn)不會(huì)真正編寫(xiě)代碼，但是學(xué)習(xí)開(kāi)發(fā)原則將使你成為更好的網(wǎng)站設(shè)計(jì)師，因?yàn)槟銓⒘私夤ぞ吆凸ぷ髁鞯膬r(jià)值。

8、使用“常規(guī)”風(fēng)格指南

網(wǎng)站開(kāi)發(fā)設(shè)計(jì)過(guò)程中，網(wǎng)站設(shè)計(jì)師需要認(rèn)識(shí)到，前端工程師對(duì)設(shè)計(jì)過(guò)程和你一樣重要。考慮到這一點(diǎn)，創(chuàng)建一個(gè)“常規(guī)”風(fēng)格指南，不僅包括顏色和字體，還包括組件。每個(gè)人都應(yīng)該能夠訪問(wèn)和更新文檔，因?yàn)檫@個(gè)項(xiàng)目已經(jīng)開(kāi)始了。一個(gè)好的風(fēng)格指南將幫助每個(gè)在項(xiàng)目中工作的人保持與視覺(jué)元素的一致性，為設(shè)計(jì)選擇提供上下文，為項(xiàng)目提供一個(gè)協(xié)作點(diǎn)，并幫助標(biāo)準(zhǔn)化代碼。將以下信息放入風(fēng)格指南中，充分利用:

標(biāo)識(shí)樣式

調(diào)色板

字體面板

圖標(biāo)面板

導(dǎo)航菜單元素（它們鏈接到）

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

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

9、使用網(wǎng)格

網(wǎng)格的尊重。在響應(yīng)式網(wǎng)站設(shè)計(jì)中，網(wǎng)格不僅僅是放置元素在屏幕上的指導(dǎo)原則，它還可以決定元素在不同屏幕大小下的位置，以及列的堆棧和洗牌。網(wǎng)格可以幫助你設(shè)計(jì)和維護(hù)流。（挑戰(zhàn)在于你不能隨意打破設(shè)計(jì)規(guī)則。）

你可以這樣想:你的設(shè)計(jì)有四個(gè)內(nèi)容塊在屏幕上排成一行（在屏幕上有相同的寬度），在全屏幕的桌面顯示器上。然后在一個(gè)平板上，這些塊轉(zhuǎn)換成兩列，有兩行。在移動(dòng)設(shè)備上，它們會(huì)轉(zhuǎn)換成一行四行。

理解網(wǎng)格如何影響對(duì)象的大小，以及對(duì)象如何在不同的設(shè)備上進(jìn)行轉(zhuǎn)換，這一點(diǎn)很重要，因?yàn)樗梢詻Q定如何設(shè)計(jì)你所擁有的內(nèi)容。再想想同樣的情景。如果有五個(gè)內(nèi)容塊呢？它需要重新設(shè)計(jì)，以確保你創(chuàng)建一個(gè)一致的視覺(jué)輪廓。

10、友好的網(wǎng)站設(shè)計(jì)師

確保項(xiàng)目順利進(jìn)行的真正關(guān)鍵在于靈活，網(wǎng)頁(yè)的設(shè)計(jì)技術(shù)和標(biāo)準(zhǔn)一直在變化，雖然有些項(xiàng)目確實(shí)讓你成為一個(gè)細(xì)節(jié)和不動(dòng)的人，但是響應(yīng)性設(shè)計(jì)并不是這樣的。

容易與人合作的網(wǎng)站設(shè)計(jì)師會(huì)贏得更多的尊重，并與前端工程師建立更好的關(guān)系。這將會(huì)帶來(lái)更好更成功的項(xiàng)目。這應(yīng)該不用說(shuō)，但太多的時(shí)候，會(huì)有很多不自覺(jué)的行為。不要掉進(jìn)那個(gè)陷阱。多和你的前端工程師討論項(xiàng)目，他們會(huì)愛(ài)你的。