news center
網(wǎng)站設(shè)計(jì)師,您喜歡您設(shè)計(jì)工作的前端工程師嗎?您的一些習(xí)慣很可能無(wú)法很好地轉(zhuǎn)換為代碼,這使得前端工程師更難以與您合作完成項(xiàng)目。想成為更好的同事嗎?然后我們將學(xué)習(xí)如何更好地進(jìn)行溝通和設(shè)計(jì),讓前端工程師通過(guò)對(duì)工作方式進(jìn)行微妙的改變來(lái)愛(ài)上你的工作。這將加快項(xiàng)目進(jìn)度,使工作更輕松。
1、讓前端工程師盡早開(kāi)始項(xiàng)目
網(wǎng)站設(shè)計(jì)師和前端工程師之間最大的問(wèn)題是,他們經(jīng)常在設(shè)計(jì)的第一稿完成之前默默地開(kāi)展工作,個(gè)人或團(tuán)隊(duì)開(kāi)始談?wù)擁?xiàng)目。這不是正確的工作方式,網(wǎng)站設(shè)計(jì)師和前端工程師應(yīng)該討論如何從一開(kāi)始就組裝項(xiàng)目。雖然網(wǎng)站設(shè)計(jì)人員可能會(huì)關(guān)注顏色、字體和圖像,但前端工程師可以深入了解可用性、的功能和性能。
網(wǎng)站設(shè)計(jì)師和前端工程師應(yīng)該很好地了解彼此的外觀。網(wǎng)站設(shè)計(jì)人員應(yīng)該了解足夠的代碼和可用性,以便與前端工程師溝通并了解挑戰(zhàn):前端工程師應(yīng)該對(duì)設(shè)計(jì)理論有一點(diǎn)了解,以便在設(shè)計(jì)概念不適合網(wǎng)絡(luò)時(shí)提出建議。
2、文件結(jié)構(gòu)清晰
Web設(shè)計(jì)人員可以做的最重要的事情之一就是每次都以相同的方式準(zhǔn)備和打包文件。您有多少次打開(kāi)包含數(shù)百個(gè)未命名圖層的Photoshop文檔?請(qǐng)勿將此類(lèi)文檔交給前端工程師。無(wú)論您使用哪種軟件,都應(yīng)該適當(dāng)?shù)孛總€(gè)圖層和樣式。樣式、顏色、樣本和布局在整個(gè)設(shè)計(jì)過(guò)程中應(yīng)保持一致。
對(duì)于每個(gè)項(xiàng)目,以相同的方式命名文件和樣式。以類(lèi)似的方式分組并使用一致的文件夾系統(tǒng)。這樣,前端工程師就不必重新學(xué)習(xí)如何找到每個(gè)新項(xiàng)目的部件和元素。
3、使用瀏覽器字體
印刷管理是設(shè)計(jì)項(xiàng)目(包括印刷和數(shù)字作品)面臨的最大挑戰(zhàn)之一。不要將桌面字體用于為Web或應(yīng)用程序設(shè)計(jì)的打印項(xiàng)目,并假設(shè)它們可以正常工作。 (通常他們沒(méi)有。)
對(duì)于數(shù)字項(xiàng)目,請(qǐng)選擇“瀏覽器字體排版”。這意味著您可能需要為Web找到與打印內(nèi)容相匹配的類(lèi)似字體。不要讓前端工程師為您做這件事。選擇可比的瀏覽器字體并從一開(kāi)始就使用它們。您甚至可以在風(fēng)格指南中注意到打印和數(shù)字字體。
這背后的原因很簡(jiǎn)單:嵌入字體可能很棘手。此外,瀏覽器字體是免費(fèi)的,可確保您不會(huì)產(chǎn)生額外的項(xiàng)目成本。 (當(dāng)你這樣做時(shí),考慮用圖標(biāo)做同樣的事情,使用像字體這樣的好包裝,所以前端工程師可以使用CSS風(fēng)格的圖標(biāo)而不是導(dǎo)入一堆圖像文件?。?/span>
4、打包圖像資產(chǎn)
當(dāng)我們討論圖像資產(chǎn)時(shí),正確導(dǎo)出和打包文件非常重要。前端工程師可以打開(kāi)和導(dǎo)出所有圖像文件以滿足他們的需求,您可以詢問(wèn)他們需要什么并在此過(guò)程中執(zhí)行它們。
這可確保您獲得所需的圖像并壓縮文件以幫助您快速加載網(wǎng)站。
不要試圖自己這樣做。詢問(wèn)前端工程師如何保存、命名和壓縮文件以獲得最佳使用效果。
5、考慮環(huán)境
在設(shè)計(jì)網(wǎng)站和移動(dòng)應(yīng)用程序時(shí),需要考慮很多設(shè)備大小和寬高比。作為Web設(shè)計(jì)人員,您需要知道畫(huà)布大小、邊距、填充等,以創(chuàng)建實(shí)際可用的模型。
在開(kāi)始繪圖之前,請(qǐng)先咨詢前端工程師,以確保在開(kāi)始之前了解設(shè)計(jì)環(huán)境的外觀。沒(méi)有比在Photoshop或Sketch中看起來(lái)更好的設(shè)計(jì)更糟糕的了。
你需要提前知道這些事情:
如果框架具有不同尺寸的特定填充規(guī)格。
列之間的溝寬度(如果不同)
屏幕尺寸最窄的前端工程師將編寫(xiě)代碼。
6、提出更多問(wèn)題
它已被多次提及,但設(shè)計(jì)師和前端工程師之間的溝通是所有這些工作的關(guān)鍵。溝通可以創(chuàng)建或破壞項(xiàng)目,影響截止日期,并影響最終項(xiàng)目的設(shè)計(jì)和功能。
與前端工程師共進(jìn)午餐,了解他們。在此過(guò)程中有許多問(wèn)題要問(wèn)。如果您不確定某些內(nèi)容是否有用,請(qǐng)?jiān)儐?wèn)。前端工程師并不是一個(gè)糟糕的人,在過(guò)程早期回答問(wèn)題要比重新思考和整個(gè)概念容易得多。
7、了解一些開(kāi)發(fā)基礎(chǔ)知識(shí)
當(dāng)您與前端工程師交談并提出問(wèn)題時(shí),您需要深入挖掘。如果您的設(shè)計(jì)庫(kù)中還沒(méi)有這些技能,請(qǐng)學(xué)習(xí)一些開(kāi)發(fā)基礎(chǔ)知識(shí)。
從事數(shù)字項(xiàng)目的網(wǎng)站設(shè)計(jì)師應(yīng)該在以下方面進(jìn)行自我介紹:
HTML和CSS(您應(yīng)該能夠更改字體大小或顏色,并了解兩者是不同的)常見(jiàn)用戶模式(針對(duì)用戶與內(nèi)容的交互方式而設(shè)計(jì))
可訪問(wèn)性標(biāo)準(zhǔn)(因此您的設(shè)計(jì)將適用于更多用戶)
哪些類(lèi)型的元素需要用作圖像,哪些元素可以使用純CSS創(chuàng)建!
斷點(diǎn)如何在響應(yīng)式布局中工作?
網(wǎng)站設(shè)計(jì)趨勢(shì)
您可能永遠(yuǎn)不會(huì)真正編寫(xiě)代碼,但學(xué)習(xí)開(kāi)發(fā)原則會(huì)使您成為更好的網(wǎng)站設(shè)計(jì)者,因?yàn)槟鷮⒘私夤ぞ吆凸ぷ髁鞒痰膬r(jià)值。
8、使用“常規(guī)”樣式指南
設(shè)計(jì)過(guò)程也延伸到開(kāi)發(fā),網(wǎng)站網(wǎng)站設(shè)計(jì)師,你需要意識(shí)到前端工程師對(duì)你的設(shè)計(jì)過(guò)程同樣重要。
考慮到這一點(diǎn),創(chuàng)建一個(gè)“常規(guī)”樣式指南,不僅包括顏色和字體,還包括組件。在該項(xiàng)目已經(jīng)開(kāi)始時(shí),每個(gè)人都應(yīng)該能夠訪問(wèn)和更新文檔。
一個(gè)好的樣式指南將幫助項(xiàng)目的每個(gè)人保持與可視元素的一致性,為設(shè)計(jì)選擇提供上下文,為項(xiàng)目提供協(xié)作點(diǎn),并幫助標(biāo)準(zhǔn)化代碼。
將以下信息放入樣式指南中以充分利用:
標(biāo)志風(fēng)格
調(diào)色板
字體面板
圖標(biāo)面板
導(dǎo)航菜單元素(它們鏈接到)
不同頁(yè)面的布局選項(xiàng)。
在整個(gè)站點(diǎn)中重復(fù)使用的代碼片段(例如按鈕)
9、使用網(wǎng)格
網(wǎng)格尊重。在響應(yīng)式網(wǎng)站設(shè)計(jì)中,網(wǎng)格不僅僅是將元素放置在屏幕上的指南,它還確定了元素在不同屏幕尺寸下的位置,以及列的堆疊和改組。
網(wǎng)格可以幫助您設(shè)計(jì)和維護(hù)流。 (挑戰(zhàn)在于你不能隨意違反設(shè)計(jì)規(guī)則。)
可以這樣想一想:您的設(shè)計(jì)在全屏桌面顯示屏上有四行內(nèi)容排列在屏幕上(屏幕上的寬度相同)。然后在平板上,將塊轉(zhuǎn)換為兩列,每行兩列。在移動(dòng)設(shè)備上,它們被轉(zhuǎn)換為一行和四行。
了解網(wǎng)格如何影響對(duì)象的大小以及對(duì)象如何在不同設(shè)備上進(jìn)行轉(zhuǎn)換非常重要,因?yàn)樗鼪Q定了如何設(shè)計(jì)您擁有的內(nèi)容。再想一想同樣的情況。如果有五個(gè)內(nèi)容塊怎么辦?它需要重新設(shè)計(jì),以確保您創(chuàng)建一致的視覺(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é)而且是一個(gè)不動(dòng)的人,但響應(yīng)式設(shè)計(jì)卻不是這樣的。易于使用的網(wǎng)站設(shè)計(jì)師將贏得更多尊重并與前端工程師建立更好的關(guān)系。這將帶來(lái)更好,更成功的項(xiàng)目。應(yīng)該說(shuō),但是太多次,會(huì)有很多無(wú)意識(shí)的行為。不要陷入那個(gè)陷阱。與您的前端工程師討論您的項(xiàng)目,他們會(huì)愛(ài)你。