網(wǎng)頁(yè)設(shè)計(jì)與前端交接需要提供什么？

時(shí)間：2024-02-07 19:40:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-07 19:40:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì)與前端交接需要提供什么？：




談?wù)劊壕W(wǎng)頁(yè)設(shè)計(jì)師和前端程序員交接應(yīng)該怎么樣配合更好？需要注意什么問(wèn)題事項(xiàng)？

本人認(rèn)為前端工程師和設(shè)計(jì)師師有著共同點(diǎn)的，只不過(guò)對(duì)于設(shè)計(jì)師而言是視覺(jué)上的，而前端工程師是面對(duì)的代碼。設(shè)計(jì)師和前端工程師該怎樣配合？

接下來(lái)，IT工作室創(chuàng)始人王晴兒本人根據(jù)多年的互聯(lián)網(wǎng)資深從業(yè)經(jīng)驗(yàn)，跟大家談?wù)勥@方面的經(jīng)驗(yàn)和分享，希望對(duì)大家能有幫助。

當(dāng)一個(gè)頁(yè)面發(fā)給前端工程師，在他眼里自動(dòng)轉(zhuǎn)換成一堆代碼，就像一個(gè)掃描儀器一樣，把它自動(dòng)掃描成一段段代碼，內(nèi)容的信息對(duì)待就是HTML的結(jié)構(gòu)。比如一個(gè)評(píng)論區(qū)，當(dāng)沒(méi)有設(shè)計(jì)稿的前提下，可以用HTML語(yǔ)言來(lái)定位它的整個(gè)結(jié)構(gòu)，因?yàn)槔锩嬗泻芏鄡?nèi)容是相對(duì)固定的，而且都是通用的。好比作者啊，時(shí)間啊，評(píng)論的內(nèi)容啊，表單等等。那么其他內(nèi)容就可以進(jìn)一步細(xì)化，如評(píng)論表單還可以拆成更細(xì)的對(duì)象，如富文本編輯器。這樣將信息對(duì)象化之后會(huì)發(fā)現(xiàn)有大量重復(fù)的對(duì)象和固定模式可被重用。

如果設(shè)計(jì)師在設(shè)計(jì)頁(yè)面的時(shí)候也是這種思路，基于對(duì)信息的理解，先對(duì)象化，再針對(duì)對(duì)象設(shè)計(jì)。這樣才能本質(zhì)上實(shí)現(xiàn)模塊化設(shè)計(jì)和開(kāi)發(fā)。好處是一方面能準(zhǔn)確表現(xiàn)產(chǎn)品意圖，另一方面可以使開(kāi)發(fā)過(guò)程更高效、更優(yōu)化。

那么在設(shè)計(jì)師這一塊，具體的思路都能夠搞清楚，然后很具體和清晰的表現(xiàn)在設(shè)計(jì)稿上，這樣在交接給前端工程師時(shí)才能避免很多誤解。所以在設(shè)計(jì)稿上要很多必要的標(biāo)注。下面給大家分享一下網(wǎng)頁(yè)設(shè)計(jì)時(shí)的一個(gè)總結(jié)：

視覺(jué)規(guī)格要素：

1、每個(gè)板塊的圖片的尺寸（大小，比例關(guān)系）

2、還有點(diǎn)擊的區(qū)域

3、板塊的劃分

4、布局規(guī)格

5、字體，字號(hào)的大小

6、顏色（包括漸變顏色，陰影，透明度）

7、具體對(duì)其的地方

8、首屏線

這些東西對(duì)于設(shè)計(jì)師來(lái)講是增加工作量，其實(shí)都挺反感的，但是對(duì)于前端工程師來(lái)講，這樣的配合才能設(shè)計(jì)出完美的設(shè)計(jì)。




如果還有興趣的話，可以看看本人之前寫(xiě)過(guò)的相關(guān)文章，讓您減少被建站外包公司忽悠70%的幾率，可以讓您對(duì)建站行業(yè)有個(gè)更加清晰的認(rèn)識(shí)。







以上就是王晴兒整理和分享的文章內(nèi)容，由于自己從事互聯(lián)網(wǎng)設(shè)計(jì)開(kāi)發(fā)已經(jīng)八九個(gè)年頭了，所以自然深知企業(yè)互聯(lián)網(wǎng)營(yíng)銷開(kāi)展的重要性。既然您來(lái)到這里，看完了我分享的文章，那就是一種緣分，也是一種說(shuō)不出的緣分。如果說(shuō)得不好之處，歡迎各位拍磚與指正，有任何互聯(lián)網(wǎng)設(shè)計(jì)開(kāi)發(fā)方面的問(wèn)題，都可以與王晴兒一起交流探討，雖然從業(yè)9年，但不忘初心，一直相信越努力越幸運(yùn)這句話，而且我本人也喜歡結(jié)交各行各業(yè)的朋友，謝謝！

當(dāng)然您覺(jué)得文章有價(jià)值、或關(guān)注分享感謝什么的，也順手點(diǎn)個(gè)贊哈——以文章價(jià)值為橋梁，「點(diǎn)贊」：使「您的價(jià)值」得以延伸并持續(xù)留香……