引用兩年前，我曾撰寫過(guò)的一篇文章來(lái)作答吧，原文地址：《自學(xué)網(wǎng)頁(yè)設(shè)計(jì)，需要了解的網(wǎng)站開(kāi)發(fā)流程》

搭建一個(gè)功能完善的網(wǎng)站，從構(gòu)思到上線，離不開(kāi)各職位成員的共同努力。作為一個(gè)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)師，提前了解網(wǎng)站開(kāi)發(fā)的流程，有助于在團(tuán)隊(duì)協(xié)作中更好的配合。

通常情況下，任何一網(wǎng)站的建立，都會(huì)經(jīng)過(guò)“策劃—交互—視覺(jué)—前端—后端—測(cè)試”六個(gè)環(huán)節(jié)，其中網(wǎng)頁(yè)設(shè)計(jì)師的核心任務(wù)則落在了“視覺(jué)設(shè)計(jì)”這個(gè)板塊。接下來(lái)@酷coo豆 就簡(jiǎn)要的談?wù)劽總€(gè)環(huán)節(jié)的大致工作內(nèi)容。

1. 策劃階段

每一個(gè)網(wǎng)站的建立同時(shí)，都伴隨著諸多尚未解決的需求。為什么要做這個(gè)網(wǎng)站？是制作之處需要想到的問(wèn)題，無(wú)論是為了宣傳業(yè)務(wù)、提升業(yè)績(jī)，還是表達(dá)觀點(diǎn)、傳遞價(jià)值，一個(gè)網(wǎng)站都會(huì)承載著諸多的功能需求。那么，在策劃階段，就要圍繞著需求及功能點(diǎn)，將其一一解析出來(lái)，并整理成冊(cè)為：PRD產(chǎn)品需求文檔。通常這部分是由產(chǎn)品經(jīng)理（PM）完成，需要在與客戶詳細(xì)交談過(guò)數(shù)次后，才能一并輸出。如果項(xiàng)目中途突然加個(gè)需求，程序和設(shè)計(jì)的心里一定會(huì)很難過(guò)的，所以一個(gè)新站的策劃初期，至少要考慮到未來(lái)2~3年，網(wǎng)站的功能添加的可拓展性。

2. 交互設(shè)計(jì)

這一階段的工作通常由專業(yè)的交互設(shè)計(jì)師來(lái)完成，當(dāng)然也時(shí)常可由產(chǎn)品經(jīng)理兼職。 交互設(shè)計(jì)師得根據(jù)解析出的PDR需求文檔，合理地組織網(wǎng)站框架，建立一級(jí)、二級(jí)導(dǎo)航欄目，規(guī)劃網(wǎng)站內(nèi)頁(yè)的瀏覽路徑，以及頁(yè)面跳轉(zhuǎn)關(guān)系。通常會(huì)用到、或、等軟件來(lái)梳理頁(yè)面邏輯及框架結(jié)構(gòu)，以完成交互設(shè)計(jì)稿的繪制。以便網(wǎng)站受眾在瀏覽過(guò)程中能高效、愉悅地獲取到他們想要的信息。如果是頁(yè)面不多，可在白板上或幾張A4中完成這個(gè)環(huán)節(jié)的工作；頁(yè)面巨多，則要將交互稿整理出圖，打包為電子手冊(cè)，方便下一工作環(huán)節(jié)的實(shí)施。

3. 視覺(jué)設(shè)計(jì)

現(xiàn)在該網(wǎng)頁(yè)設(shè)計(jì)師正式出場(chǎng)了，這一環(huán)節(jié)中，設(shè)計(jì)師主要根據(jù)交互設(shè)計(jì)稿，確定網(wǎng)站內(nèi)頁(yè)的具體設(shè)計(jì)規(guī)范，包括網(wǎng)站顏色VI的選用、字體字號(hào)大小、以及素材的編排、選取及處理、每一根線條、每一個(gè)像素，都是由作為準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)師的你來(lái)把控了。將所有頁(yè)面設(shè)計(jì)稿完畢后，標(biāo)注好尺寸、顏色等數(shù)值信息，輸出必要的圖片、icon等資源，打包好后一并交給Web前端工程師。

4. 前端制作

這個(gè)環(huán)節(jié)的主角是Web前端工程師。其主要根據(jù)網(wǎng)頁(yè)設(shè)計(jì)師出具的設(shè)計(jì)稿，運(yùn)用HTML、CSS代碼實(shí)現(xiàn)頁(yè)面重構(gòu)和頁(yè)面邏輯跳轉(zhuǎn)，運(yùn)用、等技術(shù)優(yōu)化網(wǎng)站瀏覽體驗(yàn)，以及網(wǎng)站界面交互動(dòng)效、功能實(shí)現(xiàn)的制作。相信你的程序員哥哥定能給你辦得穩(wěn)妥妥的，當(dāng)然在這個(gè)過(guò)程中會(huì)遇到些許問(wèn)題，作為網(wǎng)頁(yè)設(shè)計(jì)師的你要及時(shí)與之溝通，一起將界面的細(xì)節(jié)做到99%還原設(shè)計(jì)稿。那么 @酷coo豆 平時(shí)上班時(shí)，程序員哥哥就坐在我的旁邊，上班交流，開(kāi)小差，那簡(jiǎn)直是親切得很啊！！！哈哈哈...

5.后端制作

實(shí)現(xiàn)后端數(shù)據(jù)的邏輯處理網(wǎng)站制作，比如數(shù)據(jù)的提交存儲(chǔ)、更新修改、查詢等。這個(gè)環(huán)節(jié)的主角是Web后端工程師，通常要用到PHP、java、C語(yǔ)言或C++等編程技術(shù)。作為網(wǎng)頁(yè)設(shè)計(jì)師的我，對(duì)于這一環(huán)節(jié)的工作是持仰望態(tài)度，無(wú)法展開(kāi)來(lái)講了。

6. 測(cè)試上線

在網(wǎng)頁(yè)重構(gòu)及后端制作完成后，將代碼模板套入CMS（即：內(nèi)容管理系統(tǒng)）完成本地測(cè)試，以檢驗(yàn)其可靠性。在排除bug問(wèn)題后，就可準(zhǔn)備上線了。買個(gè)域名和服務(wù)器，做些必備的服務(wù)器配置工作，完成DNS解析，將域名和服務(wù)器連接起來(lái)，最后再運(yùn)用FTP工具上傳資料到服務(wù)器。于是該網(wǎng)站就可以正常訪問(wèn)了。

實(shí)操案例

@酷coo豆 在去年的工作中，公司網(wǎng)站經(jīng)過(guò)了一次大的改版。我所在公司是傳統(tǒng)實(shí)業(yè)型，網(wǎng)絡(luò)部門的技術(shù)人員不多，在協(xié)作過(guò)程中主要有：經(jīng)理、設(shè)計(jì)師、程序員三個(gè)角色。其中功能需求由經(jīng)理提出，其負(fù)責(zé)策劃、交互事宜。以口頭闡述及Word線框圖為主要溝通方式。而我（設(shè)計(jì)）則主要負(fù)責(zé)視覺(jué)稿的輸出與素材處理，與程序員間的溝通以圖片、標(biāo)注文檔、及口述為主；程序員則負(fù)責(zé)了前端制作以后的所有工作。在辦公室里程序員在左、我在中間，右邊是經(jīng)理，這樣位置安排剛好符合工作流程，且有助于溝通效率的提升。

因?yàn)槭窃谛」荆诠ぷ鲗?duì)接上沒(méi)有太多的規(guī)范標(biāo)準(zhǔn)，不過(guò)大家在一起合作還是蠻開(kāi)心的。去年在程序員哥哥的的技術(shù)熏陶下，@酷coo豆 重拾了曾學(xué)過(guò)的前端知識(shí)，嘗試著做了「平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)」用作分享自學(xué)平面設(shè)計(jì)相關(guān)的經(jīng)驗(yàn)及資料網(wǎng)站制作，也算是去年獨(dú)自完成的一個(gè)大工程吧。

第一次嘗試著用代碼去100%的還原自個(gè)兒做的設(shè)計(jì)稿，讓我習(xí)得了更多團(tuán)隊(duì)協(xié)作需要注意的細(xì)節(jié)問(wèn)題。在設(shè)計(jì)上雖然還有很多提升空間，但在做過(guò)之后，總能比光想不做學(xué)得更多。2017，新的一年開(kāi)始了！希望今年的你我，都能在自學(xué)設(shè)計(jì)的路上取得更大的進(jìn)步！

如果你正對(duì)網(wǎng)頁(yè)設(shè)計(jì)感興趣，想要自學(xué)前端和設(shè)計(jì)，@酷coo豆 整理的網(wǎng)頁(yè)設(shè)計(jì)自學(xué)教程也許能夠給助你一臂之力：//7.html，趕緊get一下，自學(xué)的走起！

—

以上就是@酷coo豆 整理的有關(guān)“自學(xué)網(wǎng)頁(yè)設(shè)計(jì)，需要了解的網(wǎng)站開(kāi)發(fā)流程”的全部?jī)?nèi)容，歡迎在留言區(qū)留下你的評(píng)論，一起交流學(xué)習(xí)。更多有關(guān)“自學(xué)設(shè)計(jì)”的話題，請(qǐng)持續(xù)關(guān)注「平面設(shè)計(jì)學(xué)習(xí)日記-知乎專欄」。

您所看到的，也許正是別人需要的，感謝你將本文轉(zhuǎn)發(fā)到微博、微信！

（完）