在網(wǎng)站建設(shè)過程中，網(wǎng)頁設(shè)計(jì)團(tuán)隊(duì)需要與開發(fā)團(tuán)隊(duì)對(duì)接，設(shè)計(jì)師通常會(huì)加倍努力確保字體完全按照指定設(shè)置，顏色與模型相匹配，并且元素的間距是像素完美的。不幸的是，很多時(shí)候，當(dāng)開發(fā)人員完成他們的工作時(shí)，結(jié)果并不總是符合設(shè)計(jì)人員的設(shè)想。那么你如何彌合設(shè)計(jì)和開發(fā)之間的差距？

創(chuàng)建頁面以匹配設(shè)計(jì)的第一步從正確的工具開始?，F(xiàn)在市場(chǎng)上有幾種選擇。 Adobe XD是一種基于矢量的用戶體驗(yàn)設(shè)計(jì)工具，它結(jié)合了設(shè)計(jì)、原型制作和強(qiáng)大的開發(fā)人員界面，可簡(jiǎn)化交接并為開發(fā)人員提供精確的頁面視圖，其中包含所有元素——字體、顏色、間距、資產(chǎn)和 CSS 代碼塊. 

Sketch是另一個(gè)流行的工具，經(jīng)常與 Zeplin 一起用于開發(fā)人員交接，非常相似。將文件導(dǎo)入 Zeplin 后，開發(fā)人員會(huì)看到所有頁面元素，類似于 Adobe XD。此外，設(shè)計(jì)師可以連接他們的設(shè)計(jì)系統(tǒng)，以全面了解項(xiàng)目。

最后，還有Figma，一個(gè)相對(duì)較新的人，它將自己描述為一種工具，通過將 UX/UI 設(shè)計(jì)、原型設(shè)計(jì)、協(xié)作和開發(fā)人員交接組合成一個(gè)包，“將設(shè)計(jì)過程中的每個(gè)人聯(lián)系起來，以便團(tuán)隊(duì)可以更快地交付更好的產(chǎn)品” ，很容易在線訪問。

這在過去發(fā)生過很多次：我會(huì)收到我們開發(fā)團(tuán)隊(duì)的一封電子郵件，要求我查看他們構(gòu)建的頁面。我會(huì)害怕這些電子郵件，因?yàn)槲蚁Ｍ@些頁面看起來與我提供的設(shè)計(jì)完全不同。在某個(gè)時(shí)候，很明顯我可能會(huì)繼續(xù)感到沮喪并花時(shí)間進(jìn)行多次設(shè)計(jì)審查，或者通過從開發(fā)人員那里“購買”精確遵循設(shè)計(jì)的價(jià)值來提出不同的方法。 

這個(gè)過程需要一點(diǎn)時(shí)間，但是一旦開發(fā)人員了解了我的期望，就不再需要進(jìn)行多次審核。我會(huì)查看頁面，提供反饋，然后他們會(huì)做一些小的調(diào)整以使頁面看起來完美。建立“像素完美”文化成為了一個(gè)巨大的節(jié)省時(shí)間！

此外，在開始設(shè)計(jì)之前，與開發(fā)人員直接對(duì)話以聽取他們的“故事的一面”是非常有益的。這是回顧開發(fā)需求以及它們將如何決定視覺和功能方法的最佳時(shí)機(jī)。一旦建立了這些要求，最終的設(shè)計(jì)應(yīng)該是開發(fā)人員完全理解和支持的。