個人網站設計的六个步骤

　一個優秀的個人網站或企業網站，從想法策劃到設計、執行並不是一件簡單的工作，對於很多外行來說，感覺網站設計非常簡單，事實真的是這樣嗎？下面給大家分享一下我的網站設計流程。

第一步：明確網站的定位。

我們要明確網站的定位，清楚自己的優勢以及目標人群的情況。只有根據自己的實際情況结合目标人群情况製作的網站才能做出靚麗的網站。簡單來說網站可分個人博客、營銷型網站、品牌型網站、電商網站、平台網站等，當你明確定位後，就開始收集相關的網站案例，作為下一步工作的參考。

第二步：製作網頁原型圖。

這是一個關鍵，用多張A4張手畫或者用軟件畫都可以，目前大多數人都是採用Axure的軟件製作，畫原型圖需要參考很多網站風格，通過不斷的借鑒，才能總結自己的網站風格。目前設計流行的元素是採用圖片配文字，界面扁平化，儘量考慮不同屏寬顯示的情況。在製作原型圖的過程中，我們需要看很多的網站風格，如果你是要做外貿網站，需要尋找外貿做得比較好的網站參考，要注意看一下他們網站的細節，相似的網站給人感覺不同都是細節造成的。進一步可以考慮一些交互動畫效果，例如滑鼠經過文字變立體等。

原型圖製作類似這樣：

第三步：上色/美術界面設計。

　　當原型圖做好以後，可以開始交給美術設計師出設計圖，設計師會根據原型圖的佈局進行上色設計，但是不局限於原型圖，優秀的設計師不會按部就班執行，會根據自己的經驗適度做一些細節佈局上的更改，此舉的目的是為了提高界面美觀和用戶體。

第四步：DIV+CSS切圖/排版。

　　當設計工作完成後，要開始做切圖，如果網站只是PC站，切圖只要做一套樣式，如果是響應式(Responsive)網站開發，切圖就需要做三套樣式，分別為PC端、平板、手機端。響應式網站會根據不同分辨率和屏幕大小自動適應，以達到最好的體驗效果，但是在這裡我需要補充一句，不是所有的網站都適合做成響應式，它有一個適用範圍，如果不規則的圖形多，就無法做響應式，只能電腦、手機、平板各做1套。

第五步：程序開發。

　　切圖完成後，就進入程序開發階段，程序開發就是做後台管理，讓網站後期能有一個管理後台來更新前端的資料內容，目前開發網站的開發語言比較流行的有兩種：一是PHP語言，二是.net語言。或者找一種你能夠掌握的，例如Python、Java都沒問題，沒有最好，只有最合適。

第六步：網站Bug測試和資料填充。

　　程序開發出來後，交給專職客服來測試Bug，邊填充資料邊測試頁面效果，剛開發出來的網站都會存在Bug漏洞，因為是純手工製作的項目，靠鍵盤一個一個字母敲出來的代碼，有Bug實屬正常現象，所以就需要客服進行測試，測試出來的問題點整理文檔形式交給程序員進行修復。

如果沒有美術能力或朋友，可以付點費用找網上兼職的人做，或者找現成的網頁模板直接修改就可以。

如果沒有程序開發能力，我試過直接放一張相片作為網頁，希望你不會這樣。

　　以上是個人網站設計的六個步驟是網站製作的完整流程，對於專業的網站設計公司來說，缺一不可，因為每個環節都很重要。所以，拜託以後外行的客戶朋友不要再說做個網站很容易，對於我們這些苦逼的IT男來說，太受打擊了。