網站製作的5個階段
網站製作流程5階段》需求溝通、網站設計、網站開發、網站測試到正式上線！｜天矽網頁設計
階段一：需求溝通、擬定網站單元內容
在規劃網站建置前，第一步建議先確認網站類型與建置目標。不同網站類型，除了功能需求與設計方式不同外，所需投入的開發成本、製作時程及規劃內容也會有所差異。常見網站類型包含：形象型網站、購物型網站、系統型網站，每種類型都有不同的使用情境與規劃方向。
例如，形象型網站著重品牌展示與企業資訊傳遞；購物型網站則以商品銷售與線上結帳為主要核心；系統型網站則更強調功能流程與資料管理。因此，在專案初期先確認網站定位，不僅能幫助釐清需求，也有助於後續預算與功能範圍評估。
(1)形象型網站
形象型網站主要以企業品牌曝光、公司資訊介紹與提升企業信任感為目的，適合企業官網、品牌網站、製造業、服務業或 B2B 公司使用。除了提供企業基本資訊外，也能作為客戶了解品牌形象、產品內容與服務項目的重要入口。
常見網站單元包含：公司簡介、關於我們、最新消息、產品介紹、服務項目、成功案例、常見問題、聯絡我們、人才招募等；若有需求，也可增加多語系、投資人專區、下載專區、影片介紹、企業沿革、據點資訊或表單諮詢等功能。
另外，不同產業因產業屬性不同，網站規劃方向也會有些微差異。例如：
- 製造業：常搭配產品分類、產品規格下載、應用案例。
- 醫療/生技：可能著重技術介紹、研究成果、專業資訊。
- 建築/室內設計：常搭配作品案例、專案成果展示。
- 服務業：強調品牌形象、服務流程與預約諮詢功能。
- 電商：強調產品階層分類、行銷活動、購物車結帳、金流、物流...等。
▲形象型網站範例(以千日為例)
看更多天矽實際開發案例作品 - 形象型網站
✔ 億康生物科技股份有限公司
✔ 康聯生醫科技股份有限公司
✔ 竣鑽國際企業有限公司
✔ Mosun2墨賞集團新鐵板料理(古亭店)
✔ 瑪麗蓮塑身衣
(2)購物型網站
購物型網站主要以商品銷售與線上結帳流程為主要核心，除了展示商品資訊外，更重視消費者從瀏覽、加入購物車到完成結帳的整體購物體驗。此類型網站通常需具備完整的商品管理與交易機制，讓消費者可直接於網站完成商品選購與下單流程。
網站內通常會有大量商品資訊，因此商品分類、價格、規格、庫存狀態、商品圖片及詳細介紹都需清楚呈現，以協助消費者快速找到所需商品並提升購買意願。
常見功能包含：
- 商品分類與商品搜尋功能
- 商品詳細頁（價格、規格、商品介紹）
- 加入購物車
- 收藏/我的最愛功能
- 會員登入與註冊
- 訂單查詢與歷史購買紀錄
- 金流付款功能（信用卡、第三方支付等）
- 物流配送設定
- 折價券、優惠活動機制
- 會員分級與優惠制度
▲購物型網站範例(以CLA為例)
看更多天矽實際開發案例作品 - 購物型網站
✔ 興田企業股份有限公司 - 企業直銷購物平台建置
✔ cuzcuz安寶線上家具訂製，讓生活更美好
✔ 由申甲文具購物商城-串接ERP金流系統
(3)系統型網站
系統型網站主要以「流程管理」與「功能操作」為核心，相較於形象型網站著重品牌展示、購物型網站著重交易流程，系統型網站更重視使用者操作流程、資料管理及系統邏輯設計。此類網站通常需依據企業實際作業模式進行客製化規劃，因此功能彈性與流程整合需求相對較高。
常見類型包含：企業內部EIP系統、課程報名網站、活動報名系統、線上預約系統、場地租借系統、會員管理平台、企業內部系統、串接醫院HIS系統、申請流程系統或線上表單平台等。
常見功能包含：
- 課程/服務介紹
- 課程特色說明
- 常見問題（FAQ）
- 線上報名功能
- 預約時段選擇
- 可瀏覽已報名項目
- 會員登入/管理
- 名額與人數限制
- 報名狀態查詢
- 通知信或簡訊提醒
- 後台管理與報表功能
▲系統型網站範例(以文生美術為例)
看更多天矽實際開發案例作品 - 系統型網站
✔ 葡萄王生技股份有限公司 - 企業EIP內部系統
✔ 一方鴻達-線上代購&集運管理系統
✔ 響藝｜專屬藝術完整線上課程影音營運平台
✔ 旺英基金會課程報名及上課歷程結業證書系統
✔ 萬芳醫院官網建置暨串接HIS掛號系統
✔ 澄清綜合醫院官網建置及串接HIS病例系統
得知網站需求要呈現的內容有哪些，接著就能擬定網站地圖(Sitemap)或網站架構圖，此階段，業務人員也會依網站架構進行詳細報價。如果是全新製作網站、不知道怎麼繪製網站架構，可參考XMIND免費軟體快速製作喔!
▲網站Sitemap範例
階段二：網站視覺設計、切版
確定網站製作，業務或專案人員會將設計需求轉給設計師，此階段，也會與客戶進行詳細需求討論、向客戶瞭解網站想呈現的風格、色系、版面如何安排等。
瞭解需求後，設計師就會著手進行設計，天矽會先提供首頁及首次頁給客戶確認整體排版、設計等，待客戶確認風格與視覺，設計師就會開始進行切版。這個階段，網站的雛形將會完成。
階段二的網站視覺設計與切版，大致如以下說明：
1. 專案成立與風格需求蒐集
- 確認網站製作後，專案正式啟動。業務單位將提供「網站風格問卷」供客戶填寫，以了解品牌形象、偏好風格及參考網站方向。
2. 需求整理與設計評估
- 業務或專案人員將依據客戶填寫內容進行需求整理，並提供設計師評估，作為後續視覺設計規劃依據。
3. 訪談確認網站風格方向
- 專案期間將安排會議訪談，與客戶進一步討論網站定位、品牌形象及視覺需求，協助釐清整體設計方向。
4. 首頁設計稿製作與確認
- 設計師將優先製作首頁設計稿，完成後由客戶確認首頁版型配置、色彩風格、視覺呈現及整體設計方向。
5. 依首頁風格延伸內頁設計
- 待首頁設計稿確認後，設計師將依據已核定之設計風格與版型，延伸製作其餘內頁版面與切版作業，以維持網站整體視覺一致性。
▲網站製作 - 階段二設計流程
※備註：切版係指依據設計師提供之設計稿，透過前端程式語言（如 HTML、CSS、JavaScript）將畫面實際製作為可於瀏覽器中瀏覽的網頁。內容包含將設計稿拆分為不同區塊，並完成版面排版、響應式（RWD）調整，以及基本互動效果（如滑動、點擊、展開收合等），使網站呈現與設計稿一致之實際瀏覽效果。
階段三：網站開發(程式撰寫)
進到階段三，工程師開始依客戶需求，客製化撰寫後台程式，使用程式語言php，將撰寫完成的程式串接網站前台，此時，若在後台新增、編輯資料，前台就能顯示相對應的內容了! 一個專業且富有強大功能的網站就此誕生。
後端程式人員，主要是讓網站整體功能可以順暢運行，像是資料庫建立、串接金流、API，或是撰寫加密、具安全的驗證系統，皆是後端工程師的範疇；與網頁設計不同的是，網頁設計主要負責網站整體視覺風格設計、切版；網站開發則是將程式與前台資料進行串接。
網頁設計、網站開發、網站測試的名詞定義：
| 網頁設計 | 網站開發 | 網站測試 |
|
主要負責網站整體視覺設計、UI & UX設計、切版(含RWD) |
使用者在前台看不到的部分，就屬網站開發(後端程式)，例如 : 資料庫建立、安全驗證、金流串接..等 | 網站測試係指網站正式上線前，針對網站功能、畫面顯示、操作流程與系統穩定性進行全面驗證的流程。主要目的在於確認網站於不同使用情境下皆能正常運作 |
階段四：網站測試、上線準備
網站正式上線前，天矽會提供一至兩周的時間，給客戶進行網站功能測試，確保網站能正常營運。此階段，若測試時有遇問題，開發人員也會在此時進行調整，讓網站能正常運作，同時，該專案客服人員也會同步協助網址、主機空間申請作業，為網站正式上線做準備。
通常會有的測試內容包含以下：
網站測試
- 各頁面瀏覽與版面顯示是否正常
- 表單功能（如聯絡表單、會員註冊等）是否可正常送出與接收
- 會員系統登入、註冊及權限功能驗證（如有）
- 購物車、訂單或相關交易流程測試（如有）
- 後台管理功能操作確認（新增、修改、刪除資料等）
- RWD（手機／平板／電腦）跨裝置顯示檢查
- 系統連結、按鈕導向與互動功能確認
天矽亦會提供「異動單」予客戶使用，作為測試期間之回饋與修改紀錄工具。客戶於網站測試階段若有功能調整、畫面修改或異常回報等需求，可統一填寫於異動單中，方便專案團隊進行彙整與追蹤處理。
透過「異動單」制度，可有效集中管理修改需求，避免溝通分散，並確保每一項回饋皆有紀錄可循，同時提升開發與修改效率，使調整內容更明確且可追蹤。
上線準備
網站正式上線前，會進入最終準備與驗收階段，以確保系統穩定性與功能完整性，並順利完成正式對外發布。在正式上線前，仍有一些項目需要事先準備好，確保各項功能都能正常運作。
最後階段的上線前準備，主要包含以下作業項目：
1. 功能測試與驗收確認
- 提供客戶約一至兩週之測試期間，針對網站前台與後台功能進行全面測試，包括頁面顯示、表單功能、會員系統、資料呈現及各項互動功能，確保符合實際需求與操作流程。
2. 異動單項目調整
- 客戶可將測試回饋撰寫於「異動單」，天矽會區分級別評估哪些為範圍內的修改，如有需要追加功能也可與天矽討論。
3. 網域與主機設定作業
- 專案人員將協助進行網站正式上線所需之基礎設定作業，包括網域DNS指向設定、主機環境建置與系統部署，確保網站可正常對外存取。
4.SSL安全憑證與基礎安全設定
- 如果主機為天矽科技代管，我們會協助申請 SSL 憑證安裝與相關安全設定，確保網站資料傳輸安全性，並提升網站可信度與搜尋。
5. 網站正式對外公開前最終確認
- 網站正式對外公開前進行最後系統檢查，包括頁面連結、功能運作、跨裝置顯示及資料正確性確認，確保網站於公開環境下可穩定運行。
階段五：網站正式上線、後續維護
在客戶指定的時間完成網站上線作業，客戶即可開始進行網站行銷推廣，正式上線後的網站能被消費者搜尋到。網站正式上線後，天矽也會提供網站維護等工作，UX方面如有需優化或像是功能的追加，也可以再向天矽提出！
若於實際使用過程中，客戶針對使用者體驗（UX）、介面操作流程或功能需求有進一步優化或調整需求，亦可再向天矽提出評估與討論，視需求進行優化調整或功能擴充開發，以持續提升網站整體使用體驗與商業效益。
