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