網(wǎng)頁設(shè)計師工作流程

網(wǎng)頁設(shè)計師工作流程

網(wǎng)頁設(shè)計師工作流程，網(wǎng)頁設(shè)計完成后，還需要網(wǎng)頁設(shè)計師進行項目走查，確定網(wǎng)頁還原度是否存在問題，這一步非常重要，今天小編主要給大家分享網(wǎng)頁設(shè)計師工作流程，希望對你們有幫助!

1.視覺稿階段

視覺稿階段是設(shè)計師需要根據(jù)原型圖確定的內(nèi)容和總體布局完成網(wǎng)站的界面設(shè)計。

在設(shè)計網(wǎng)站時，設(shè)計師需要一些圖片和靈感材料。例如，在世界杯主題中，除了收集大量的資料，設(shè)計師還可以設(shè)計一個“情緒板”。

簡單的說，情緒板就是拼貼一些與主題相關(guān)的資料和素材，這樣可以更好地指引整個需求的設(shè)計主題和大體感覺。

另外，很多網(wǎng)站的首頁通常需要主視覺來抓人眼球，此時，就可以使用需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進行混合并拼出讓人覺得震撼的頭部視覺就是設(shè)計師的目標。

2.設(shè)計規(guī)范

當視覺稿通后時，許多設(shè)計師可能不會主動去做設(shè)計規(guī)范。事實上，每個迭代產(chǎn)品都需要設(shè)計師總結(jié)設(shè)計規(guī)范。

設(shè)計規(guī)范就是所有頁面中共性的東西，比如說字體不同的大小、圖片的尺寸、按鈕的樣式等。這些共性也是用戶訪問網(wǎng)站時會理解成固定概念的憑證。

具體來說，產(chǎn)品的設(shè)計規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。

3. 切圖

網(wǎng)頁設(shè)計師通常不需要為前端工程師切圖，因為前端工程師往往需要掌握PS軟件的技能，如果在特殊情況下需要網(wǎng)頁設(shè)計師切圖時，設(shè)計師可以使用諸如 Cutterman、Zeplin 等切圖插件中的 Web 選項為前端切出網(wǎng)站所使用的圖片。

4.前端代碼

前端工程師將用代碼重構(gòu)網(wǎng)頁設(shè)計師設(shè)計的頁面，并將圖紙轉(zhuǎn)換為靜態(tài)頁面，然后與后端工程師對接調(diào)取數(shù)據(jù)接口，一個網(wǎng)站就活了起來。

工程師們?yōu)榱朔奖懔私饩W(wǎng)站是不是達到了設(shè)計師要求的數(shù)據(jù)，也會進行埋點，埋點就是在頁面代碼里插入一些統(tǒng)計代碼，方便之后確定哪些頁面訪問量高，哪些沒有達到預(yù)期效果。

同時，也會有測試工程師介入來發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等。

5.項目走查

網(wǎng)頁設(shè)計完成后，還需要網(wǎng)頁設(shè)計師進行項目走查，確定網(wǎng)頁還原度是否存在問題，如果發(fā)現(xiàn)有和設(shè)計稿出入很大的，就需要讓前端工程師進行調(diào)整。

這一步非常重要，因為網(wǎng)站的成品是設(shè)計師最終的輸出，不要以為設(shè)計稿很漂亮而實現(xiàn)后的頁面就不需要網(wǎng)頁設(shè)計師負責了。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://m.universityresearchassociates.com/news-id-53496.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實性請自行核實或聯(lián)系我們，了解更多相關(guān)資訊請關(guān)注網(wǎng)頁制作頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費申請試課。關(guān)注官方微信了解更多：150 3333 6050