即便網頁設計師只是一個完整網站背後的小小一角，
但始終是不可或缺的角色，
不論你想自學網頁設計的動機是打算一手包辦整組流程，
還是打算專攻於網頁開發的設計一角，
首先要知道的就是網頁開發流程，就像是概論，一本書的目錄，
你得清楚知道自己的定位，以及這個角色在浩瀚的領域中付出的結果和成效，
這很重要，了解流程不但能使你不容易迷失自己，
了解自已角色的重要性後，你將會更有動力在自己的崗位上！
搭建一個功能完善的網站，從構思到上線，離不開各崗位成員的共同努力。
作為一個準網頁設計師，
需要提前瞭解網站開發的流程，有助於在團隊協作中更好的配合。
通常情況下，任何一個網站的建立，
都會經過「策劃—交互—視覺—前端—後端—測試」六個環節，
其中網頁設計師的核心任務則落在了「視覺設計」這個板塊。
接下來，就來談談每個環節的大致工作內容：
1. 策劃階段
每一個網站的建立同時，都伴隨著諸多尚未解決的需求。
為什麼要做這個網站？是製作之處需要想到的問題，
無論是為了宣傳業務、提升業績，還是表達觀點、傳遞價值，
一個網站都會承載著諸多的功能需求。
那麼，在策劃階段，就要圍繞著需求及功能點，
將其一一解析出來，並整理成冊為：PRD產品需求文檔。
:arrow: 產品需求文檔(PRD)怎麼寫？
通常這部分是由產品經理（PM）完成，
需要在與客戶詳細交談過數次後，才能一併輸出。
如果項目中途突然加個需求，程序和設計的心裡一定會很難過的，
所以一個新站的策劃初期，至少要考慮到未來2~3年，網站的功能添加的可拓展性。
2. 交互設計
這一階段的工作通常由專業的交互設計師來完成，當然也時常可由產品經理兼職。
交互設計師得根據解析出的PDR需求文檔，合理地組織網站框架，
建立一級、二級導航欄目，規劃網站內頁的瀏覽路徑，以及頁面跳轉關係。
通常會用到Sketch :arrow: 點我了解
或OmniGraffle :arrow: 點我了解、mindnode :arrow: 點我了解 等軟體
來梳理頁面邏輯及框架結構，以完成交互設計稿的繪製。
以便網站受眾在瀏覽過程中能高效、愉悅地獲取到他們想要的資訊。
如果是頁面不多，可在白板上或幾張A4中完成這個環節的工作；
頁面過多，則要將交互稿整理出圖，打包為電子手冊，方便下一工作環節的實施。
3. 視覺設計
現在該網頁設計師正式出場了，
這一環節中，設計師主要根據交互設計稿，確定網站內頁的具體設計規範，
包括網站顏色VI的選用、字體字號大小、以及素材的編排、選取及處理、
每一根線條、每一個像素，都是由作為準網頁設計師的你來把控了。
將所有頁面的視覺稿設計完畢後，標註好尺寸、顏色等數值資訊，
輸出必要的圖片、icon等資源，打包好後一併交給Web前端工程師。
4. 前端製作
這個環節的主角是Web前端工程師。
其主要根據網頁設計師出具的設計稿，運用HTML :arrow: 點我了解、
CSS代碼 :arrow: 點我了解實現頁面重構和頁面邏輯跳轉，
運用JavaScript :arrow: 點我了解、
JQuery :arrow: 點我了解等技術優化網站瀏覽體驗，
以及網站界面交互動效、功能實現的製作。
相信你的程序員哥哥定能給你辦得穩妥妥的，當然在這個過程中會遇到些許問題，
作為網頁設計師的你要及時與之溝通，一起將界面的細節做到99%還原設計稿。
5.後端製作
實現後端數據的邏輯處理，比如數據的提交存儲、更新修改、查詢等。
這個環節的主角是Web後端工程師，
通常要用到PHP、java、C語言或C++等編程技術。
6. 測試上線
在網頁重構及後端製作完成後，將代碼模板套入CMS（即：內容管理系統）
完成本地測試，以檢驗其可靠性。在排除bug問題後，就可準備上線了。
買個域名和服務器，做些必備的服務器配置工作，
完成DNS解析，將域名和服務器連接起來，
最後再運用FTP工具上傳資料到服務器。於是該網站就可以正常訪問了。
:arrow: 最後，想瞭解更多網頁設計教學：點我
《延伸閱讀》
[sc name="Email"]
主圖 Photo by NordWood Themes on Unsplash/ 資料來源 XXRIJI.CN
作者：@酷coo豆 ，公眾號：followdesign；原文地址：https://zhuanlan.zhihu.com/p/25097044；
部分內容為TC整理及創作，未經允許不得轉載。
留言列表
