Logo | Tech Monkey

小貼士:

不失敗的網頁製作流程

或許你或你身邊總會有人經歷過以下情況:網頁設計公司所製作的成品不如人意、時間表比起預期落後很多、溝通困難和反應慢等等。除了是網頁公司出了問題之外,也有可能是以下4個階段出了問題。

延伸閱讀:3點教你判斷網頁設計公司的好壞

目錄

預備階段

只有充足的準備,才會有稱心如意的網頁。確定製作網站的目的(Purpose),誰是受眾(Target Audiance)及因為業務而需要的特別功能(例如財務借貸公司可能需要貸款計算;餐廳需要網上預約系統)。

延伸閱讀:在開始網頁設計之前,6個你必須要知的重要觀念

除了以上預備,你還要留意時間管理,不論在任何一個階段都有可能有設計上的加減或更改。在之後的階段過於頻繁的更改只會令進度拖後,甚至影響網頁開發。所以無論是網頁設計公司或是客人,雙方都應該在開始進入設計階段前有良好的溝通並清楚要求和期望。

預備階段

 

Wireframe及介面設計(UI Design)

根據項目的規模大小去,有時wireframe和設計會分為2個階段或者直接把wireframe包含在網頁設計決內。

Wireframe 主要用處是讓網頁設計公司以簡單的草圖,把功能、佈局規劃在每一頁面上並讓客人可以初步釐清需求,確認最終頁面上必須出現的主要功能。在 Wireframe 階段不會出現過度的細節,比如不會糾結在字型選擇、 按鈕的方角或圓角、首頁輪播圖的大小,以免分散注意力。

之後,設計師會根據確定好的 Wireframe 介面,使用 Adobe Illustrator、Adobe Photoshop、Adobe XD 等繪圖軟體進行視覺設計上的配色、動畫特效、版面調整等,以增強使用者體驗。此時設計出來的 UI 圖經過客戶確認後,下一步就是直接交由工程師根據視覺稿進行開發。

在此階段,很大機會有數次甚至十數次來回的更改。別擔心,這是正常的,也是最易被誤會的。有人會認為要等到測試階段才去審視整個設計,這樣只會令開發者花更多時間去重新製一個或多個功能,最終可能拖累整個進度。

Wireframe及介面設計(UI Design)

 

原形 Prototype

此階段是工程師實際的開發階段。幸運的話 (在沒有變動的情況下),工程師不眠不休努力一段時間後,就能依照預計的時間上線。

如果不幸有變動,在這時,工程師只可以接受有限度的功能或設計更改。網頁製作公司也會與客戶商討折衷方案以致不會影響上線日子。

通常網頁製作公司每個專案也才 2 – 5 人左右,在工程師的時間成本上,多做超過一天、也就等於這項目的成本瞬間增加,甚至影響到下一個項目的排程。

 

測試,測試,測試!

測試很重要,測試很重要,測試很重要!重要的要說三次!盡管之前的階段都做好做滿了,測試階段也是必要的一環。測試目的是確保功能達到預期目標以及Debug 問題,工程師根據測試出來的問題來調整修復,使用者測試是一個長期工作,非一兩次測試就可以結束的。

 

上線及後續工作

經過了以上4個階段,網站上線了,但只是個開始,這又是另一個話題了,日後有機會再詳談。