2016-10-04 分類(lèi): 網(wǎng)站設(shè)計(jì)
網(wǎng)站設(shè)計(jì)師們,你的設(shè)計(jì)作品前端工程師們是喜歡的嗎?很有可能你的一些習(xí)慣并不能很好地轉(zhuǎn)化為代碼,這就會(huì)讓前端工程師在項(xiàng)目上與你一起工作變得更加困難了。想成為一個(gè)更好的同事嗎?那我們今天就來(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ì)起作用。(通常他們沒(méi)有。)
對(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)出所有的圖像文件以滿足他們的需求,你可以詢問(wèn)他們需要什么,并在過(guò)程中執(zhí)行。
這可以確保你得到你想要的圖片,同時(shí)壓縮文件以幫助你的網(wǎng)站快速加載。
不要試圖自己做這件事。詢問(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)的用戶模式(為用戶與內(nèi)容交互的方式設(shè)計(jì))
可訪問(wèn)性標(biāo)準(zhǔn)(因此你的設(shè)計(jì)將適用于更多的用戶)
哪些類(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)格指南
設(shè)計(jì)過(guò)程也延伸到開(kāi)發(fā)中,網(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)你的。
分享名稱(chēng):10種網(wǎng)站設(shè)計(jì)師如何更好配合前端工作的方法
URL網(wǎng)址:http://m.rwnh.cn/news2/48652.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容