自學網頁設計，需要了解的網站開發流程

搭建一個功能完善的網站，從構思到上線，離不開各職位成員的共同努力。作為一個準網頁設計師，提前了解網站開發的流程，有助於在團隊協作中更好的配合。通常情況下，任何一網站的建立，都會經過「策劃—交互—視覺—前端—後端—測試」六個環節，其中網頁設計師的核心任務則落在了「視覺設計」這個板塊。接下來@酷coo豆 就簡要的談談每個環節的大致工作內容。

1. 策劃階段

每一個網站的建立同時，都伴隨著諸多尚未解決的需求。為什麼要做這個網站？是製作之處需要想到的問題，無論是為了宣傳業務、提升業績，還是表達觀點、傳遞價值，一個網站都會承載著諸多的功能需求。那麼，在策劃階段，就要圍繞著需求及功能點，將其一一解析出來，並整理成冊為：PRD產品需求文檔。通常這部分是由產品經理（PM）完成，需要在與客戶詳細交談過數次後，才能一併輸出。如果項目中途突然加個需求，程序和設計的心裡一定會很難過的，所以一個新站的策劃初期，至少要考慮到未來2~3年，網站的功能添加的可拓展性。

2. 交互設計

這一階段的工作通常由專業的交互設計師來完成，當然也時常可由產品經理兼職。 交互設計師得根據解析出的PDR需求文檔，合理地組織網站框架，建立一級、二級導航欄目，規劃網站內頁的瀏覽路徑，以及頁面跳轉關係。通常會用到Sketch、或OminiGraffle、mindnote等軟體來梳理頁面邏輯及框架結構，以完成交互設計稿的繪製。以便網站受眾在瀏覽過程中能高效、愉悅地獲取到他們想要的信息。如果是頁面不多，可在白板上或幾張A4中完成這個環節的工作；頁面巨多，則要將交互稿整理出圖，打包為電子手冊，方便下一工作環節的實施。

3. 視覺設計

現在該網頁設計師正式出場了，這一環節中，設計師主要根據交互設計稿，確定網站內頁的具體設計規範，包括網站顏色VI的選用、字體字型大小大小、以及素材的編排、選取及處理、每一根線條、每一個像素，都是由作為準網頁設計師的你來把控了。將所有頁面設計稿完畢後，標註好尺寸、顏色等數值信息，輸出必要的圖片、icon等資源，打包好後一併交給Web前端工程師。

4. 前端製作

這個環節的主角是Web前端工程師。其主要根據網頁設計師出具的設計稿，運用HTML、CSS代碼實現頁面重構和頁面邏輯跳轉，運用JavaScript、JQuery等技術優化網站瀏覽體驗，以及網站界面交互動效、功能實現的製作。相信你的程序員哥哥定能給你辦得穩妥妥的，當然在這個過程中會遇到些許問題，作為網頁設計師的你要及時與之溝通，一起將界面的細節做到99%還原設計稿。那麼 @酷coo豆 平時上班時，程序員哥哥就坐在我的旁邊，上班交流，開小差，那簡直是親切得很啊！！！哈哈哈...

5.後端製作

實現後端數據的邏輯處理，比如數據的提交存儲、更新修改、查詢等。這個環節的主角是Web後端工程師，通常要用到PHP、java、C語言或C++等編程技術。作為網頁設計師的我，對於這一環節的工作是持仰望態度，無法展開來講了。

6. 測試上線

在網頁重構及後端製作完成後，將代碼模板套入CMS（即：內容管理系統）完成本地測試，以檢驗其可靠性。在排除bug問題後，就可準備上線了。買個域名和伺服器，做些必備的伺服器配置工作，完成DNS解析，將域名和伺服器連接起來，最後再運用FTP工具上傳資料到伺服器。於是該網站就可以正常訪問了。

實操案例

@酷coo豆 在去年的工作中，公司網站經過了一次大的改版。我所在公司是傳統實業型，網路部門的技術人員不多，在協作過程中主要有：經理、設計師、程序員三個角色。其中功能需求由經理提出，其負責策劃、交互事宜。以口頭闡述及Word線框圖為主要溝通方式。而我（設計）則主要負責視覺稿的輸出與素材處理，與程序員間的溝通以圖片、標註文檔、及口述為主；程序員則負責了前端製作以後的所有工作。在辦公室里程序員在左、我在中間，右邊是經理，這樣位置安排剛好符合工作流程，且有助於溝通效率的提升。

因為是在小公司，在工作對接上沒有太多的規範標準，不過大家在一起合作還是蠻開心的。去年在程序員哥哥的的技術熏陶下，@酷coo豆 重拾了曾學過的前端知識，嘗試著做了「平面設計學習日記網」用作分享自學平面設計相關的經驗及資料，也算是去年獨自完成的一個大工程吧。

第一次嘗試著用代碼去100%的還原自個兒做的設計稿，讓我習得了更多團隊協作需要注意的細節問題。在設計上雖然還有很多提升空間，但在做過之後，總能比光想不做學得更多。2017，新的一年開始了！希望今年的你我，都能在自學設計的路上取得更大的進步！

如果你正對網頁設計感興趣，想要自學前端和設計，@酷coo豆 整理的網頁設計自學教程也許能夠給助你一臂之力：http://www.xxriji.cn/career/7.html，趕緊get一下，自學的走起！

——

以上就是@酷coo豆 整理的有關「自學網頁設計，需要了解的網站開發流程」的全部內容，歡迎在留言區留下你的評論，一起交流學習。更多有關「自學設計」的話題，請持續關注「平面設計學習日記-知乎專欄」。

您所看到的，也許正是別人需要的，感謝你將本文轉發到微博、微信！

（完）

版權聲明

作者：@酷coo豆 ，公眾號：followdesign；

原文地址：https://zhuanlan.zhihu.com/p/25097044

本文由@酷coo豆 原創，首發於「知乎專欄」與「平面設計學習日記網」。非商業轉載請註明作者、原文地址，若需商業轉載或用於培訓轉載請聯@酷coo豆 獲得授權。