網(wǎng)站網(wǎng)站設(shè)計師們，你的設(shè)計作品前端工程師們是喜歡的嗎？很有可能你的一些習(xí)慣并不能很好地轉(zhuǎn)化為代碼，這就會讓前端工程師在項目上與你一起工作變得更加困難了。想成為一個更好的同事嗎？那綿陽網(wǎng)站建設(shè)今天就來告訴大家如何更好地溝通和設(shè)計，通過對工作方式的細(xì)微改變來讓前端工程師愛上你的作品，這樣將會加快項目進(jìn)度，使工作更輕松。
1、讓前端工程師在早期開始接觸項目
網(wǎng)站網(wǎng)站設(shè)計師和前端工程師之間最大的問題是他們經(jīng)常在默默的完成自己的工作，直到設(shè)計的初稿完成，個人或團(tuán)隊才開始談?wù)撘粋€項目。這不是正確的工作方式，網(wǎng)站網(wǎng)站設(shè)計師和前端工程師應(yīng)該從一開始就討論項目將如何組合在一起。雖然網(wǎng)站網(wǎng)站設(shè)計師可能關(guān)注顏色、字體和圖像，但前端工程師可以提供對可用性、功能和性能的洞察。
網(wǎng)站網(wǎng)站設(shè)計師和前端工程師應(yīng)該對對方的外觀有一個很好的了解。網(wǎng)站網(wǎng)站設(shè)計師應(yīng)該理解足夠的代碼和可用性，以便與前端工程師交流并理解挑戰(zhàn)：前端工程師應(yīng)該對設(shè)計理論有一點了解，這樣他們就可以在設(shè)計理念不適合web的時候提出建議。
2、清晰的文件
網(wǎng)站設(shè)計師所能做的最大的事情之一就是每次都以相同的方式準(zhǔn)備和打包文件。有多少次你打開了一個有數(shù)百個未命名圖層的Photoshop文檔？不要將這種類型的文件交給前端工程師。無論你使用什么軟件，每一層和樣式都應(yīng)該適當(dāng)命名。樣式、顏色、色板和排版在整個設(shè)計過程中都應(yīng)保持一致。
對于每個項目，以相同的方式命名文件和樣式。以類似的方式分組，并使用一致的文件夾系統(tǒng)。這樣，前端工程師就不必重新學(xué)習(xí)如何找到每個新項目的部件和元素。
3、使用瀏覽器字體
設(shè)計項目的最大挑戰(zhàn)之一，包括印刷和數(shù)字作品是印刷管理。不要將桌面字體用于web或應(yīng)用程序設(shè)計的打印項目，并假設(shè)它們會起作用。（通常他們沒有。）
對于數(shù)字項目，選擇瀏覽器字體排版。這意味著你可能需要為web找到類似的字體，以便與打印的內(nèi)容相匹配。
不要讓前端工程師為你做這些。挑選可比較的瀏覽器字體，并從一開始就使用它們。你甚至可以在你的風(fēng)格指南中注意到打印和數(shù)字字體。
這背后的原因很簡單:嵌入字體可能有點棘手。另外，瀏覽器字體是免費的，并且將確保你不會產(chǎn)生額外的項目成本。（當(dāng)你在做的時候，考慮一下用圖標(biāo)做同樣的事情，用一個像字體一樣棒的包，這樣前端工程師就可以使用CSS樣式的圖標(biāo)，而不是導(dǎo)入一堆圖像文件!）
4、包裝形象資產(chǎn)
當(dāng)我們討論圖像資產(chǎn)的時候，正確的導(dǎo)出和打包文件是非常重要的。前端工程師可以打開和導(dǎo)出所有的圖像文件以滿足他們的需求，你可以詢問他們需要什么，并在過程中執(zhí)行。
這可以確保你得到你想要的圖片，同時壓縮文件以幫助你的網(wǎng)站快速加載。
不要試圖自己做這件事。詢問前端工程師如何保存、命名和壓縮文件以獲得最佳使用。
5、考慮環(huán)境
在設(shè)計網(wǎng)站和移動應(yīng)用程序時，要考慮的設(shè)備大小和縱橫比都是如此之多，作為一個網(wǎng)站設(shè)計師，你需要了解畫布大小、頁邊距、填充等，以創(chuàng)建實際可用的模型。
在開始繪圖之前，請與前端工程師交談，以確保在開始之前了解設(shè)計環(huán)境的外觀。沒有什么比一個在Photoshop或素描中看起來更棒的設(shè)計更糟糕的了。
你需要事先知道這些事情:
如果該框架具有不同大小的特定填充規(guī)格。
列之間的溝寬（如果不同）
最窄屏幕尺寸的前端工程師將編寫代碼。
6、多問問題
它已經(jīng)被提到過幾次了，但是設(shè)計者和前端工程師之間的溝通是所有這些工作的關(guān)鍵。溝通可以產(chǎn)生或破壞項目，影響截止日期，影響最終項目的設(shè)計和功能。
多與你的前端工程師去吃午飯，去了解他們。一路上要問很多問題。如果你不確定某件事是否有用，就問一問。前端工程師不是可怕的人，在這個過程的早期回答一個問題比需要重新思考和整個概念要容易得多。
7、學(xué)習(xí)一些開發(fā)基礎(chǔ)知識
當(dāng)你與前端工程師交談并提出問題時，要深入挖掘。如果你在你的設(shè)計庫中還沒有這些技能，那就學(xué)習(xí)一些開發(fā)基礎(chǔ)知識。
從事數(shù)字項目的網(wǎng)站設(shè)計師應(yīng)該在以下方面進(jìn)行自我介紹:
HTML和CSS（你應(yīng)該能夠改變字體大小或顏色，并理解兩者是不同的）
常見的用戶模式（為用戶與內(nèi)容交互的方式設(shè)計）
可訪問性標(biāo)準(zhǔn)（因此你的設(shè)計將適用于更多的用戶）
哪些類型的元素需要用作圖像，哪些元素可以使用純CSS來創(chuàng)建!
在響應(yīng)式布局中，斷點是如何工作的？
網(wǎng)站設(shè)計的趨勢
你可能永遠(yuǎn)不會真正編寫代碼，但是學(xué)習(xí)開發(fā)原則將使你成為更好的網(wǎng)站網(wǎng)站設(shè)計師，因為你將了解工具和工作流的價值。
8、使用“常規(guī)”風(fēng)格指南
設(shè)計過程也延伸到開發(fā)中，網(wǎng)站網(wǎng)站設(shè)計師，你需要認(rèn)識到，前端工程師對設(shè)計過程和你一樣重要。
考慮到這一點，創(chuàng)建一個“常規(guī)”風(fēng)格指南，不僅包括顏色和字體，還包括組件。每個人都應(yīng)該能夠訪問和更新文檔，因為這個項目已經(jīng)開始了。
一個好的風(fēng)格指南將幫助每個在項目中工作的人保持與視覺元素的一致性，為設(shè)計選擇提供上下文，為項目提供一個協(xié)作點，并幫助標(biāo)準(zhǔn)化代碼。
將以下信息放入風(fēng)格指南中，充分利用:
標(biāo)識樣式
調(diào)色板
字體面板
圖標(biāo)面板
導(dǎo)航菜單元素（它們鏈接到）
不同頁面的布局選項。
在整個站點中重用的代碼片段（例如按鈕）
9、使用網(wǎng)格
網(wǎng)格的尊重。在響應(yīng)式網(wǎng)站設(shè)計中，網(wǎng)格不僅僅是放置元素在屏幕上的指導(dǎo)原則，它還可以決定元素在不同屏幕大小下的位置，以及列的堆棧和洗牌。
網(wǎng)格可以幫助你設(shè)計和維護(hù)流。（挑戰(zhàn)在于你不能隨意打破設(shè)計規(guī)則。）
你可以這樣想:你的設(shè)計有四個內(nèi)容塊在屏幕上排成一行（在屏幕上有相同的寬度），在全屏幕的桌面顯示器上。然后在一個平板上，這些塊轉(zhuǎn)換成兩列，有兩行。在移動設(shè)備上，它們會轉(zhuǎn)換成一行四行。
理解網(wǎng)格如何影響對象的大小，以及對象如何在不同的設(shè)備上進(jìn)行轉(zhuǎn)換，這一點很重要，因為它可以決定如何設(shè)計你所擁有的內(nèi)容。再想想同樣的情景。如果有五個內(nèi)容塊呢？它需要重新設(shè)計，以確保你創(chuàng)建一個一致的視覺輪廓。
10、友好的網(wǎng)站設(shè)計師
確保項目順利進(jìn)行的真正關(guān)鍵在于靈活，網(wǎng)頁的設(shè)計技術(shù)和標(biāo)準(zhǔn)一直在變化，雖然有些項目確實讓你成為一個細(xì)節(jié)和不動的人，但是響應(yīng)性設(shè)計并不是這樣的。
容易與人合作的網(wǎng)站設(shè)計師會贏得更多的尊重，并與前端工程師建立更好的關(guān)系。這將會帶來更好更成功的項目。這應(yīng)該不用說，但太多的時候，會有很多不自覺的行為。不要掉進(jìn)那個陷阱。多和你的前端工程師討論項目，他們會愛你的。
.jpg)
