文章內容
選定設計公司後，下一步就是進入「網站設計」的專案流程！一個網站的誕生，背後有無數的團隊會與客戶來回溝通，而「流程怎麼進行」「要怎麼跟設計公司配合」就顯得非常重要！
在這篇文章中，我們將帶大家透過果思設計的網站設計流程，談談每個環節中，有哪些需要注意的細節，初步建立對專案進行的概念。
一、網站設計流程(一)：專案規劃與啟動
選定合作夥伴後，網站設計公司會進一步釐清客戶提出的需求，擬定專案計劃書交由客戶檢閱。確認後，雙方會簽訂合約以保障彼此的權益與履行責任，定下專案啟動與預計完成日期、專案總金額與付款條件、專案規格、結案交付項目等。
二、網站設計流程(二)：產品定義階段
在產品定義階段，為了深入了解產業背景資訊，網站設計公司通常會針對企業的背景資訊進行調研，並針對產品框架跟視覺風格進行提案。
1. 產品框架提案
網站設計公司會透過文獻探討分析、利害關係人訪談做出客戶的需求彙整報告，有系統地了解專案需求、⽬標與期望。再來藉由質量化的用戶分析，彙整⽤⼾樣態、關鍵情境、User Journey Map 與業務流量圖等，進而提出洞察與產品切入點。
在產品框架提案中，網站設計公司會提出網站的設計目標、Site Map 跟數個 Key Page，來與企業對焦主要設計方向。
2. 主視覺風格確認
在視覺風格產出之前，網站設計公司會邀請客戶的重要專案⼈員與設計公司的團隊共同參與，針對前一階段⽤⼾研究中蒐集到的關鍵情境與關鍵洞⾒，討論發想出核心的設計概念。
再根據客戶提供的企業識別（CIS）資料，以及網站設計公司對產品設計與市場觀察經驗，將客戶鑑別度融入到視覺策略中，產出符合品牌精神的主視覺風格。
三、網站設計流程(三)：UIUX 設計階段
完成產品定義後，網站設計公司會統整出網站的資訊架構，並將專案的視覺風格、用色、字體規範、各種元件、⽂案、⾴⾯佈局的規則等，建立完整的 Guideline，以確保不同功能間能維持使⽤體驗的一致性。完成 Guideline 定義後，即可開始進行 UIUX 設計。
1. UX Wireframe 設計
Wireframe 規劃就像建築施工藍圖，會由 UX 設計師透過線框稿規劃出介⾯佈局，來對焦介⾯的安排與操作流程。Wireframe 中通常會詳細定義：
- 編排介面方式
- 文案細節
- 盤點元件狀態
- 定義操作互動
- 示意跳轉流程
- 標註判斷邏輯
- SEO 標籤位置
2. UI Mockups 設計
待 Wireframe 確認完後，會由 UI 設計師接手產出各介面的 UI Mockups，幫助客⼾體驗⽤⼾會看到的實際產品樣貌。UI Mockups 通常會包含：
- Design Guideline 建置
- 介面元件模組
- 各介面的完整視覺
- 元件切圖與 Auto Layout 標註
- 動態設計與 Lottie 檔案產出
3. 易用性測試
完成 UIUX 設計後，設計團隊會挑選重點流程做成 Prototype，以任務測試使用者的操作流程順暢度，並以有效性、效率、滿意度三項指標評斷設計可用性；測試結束後，也會簡單訪談滿意度，並作為設計調整的依據。
4. 定期討論會議
每個 Sprint，設計團隊都會向客戶進行一次定期 Demo，分別展示設計成果、測試結館，並與客戶跟開發團隊討論開發落實的細節。
四、網站設計流程(四)：前後端開發階段
當雙方確認設計稿沒有問題後，工程團隊就會根據產品設計文件開始進行開發。前後端開發的過程通常會包含以下工作：
- 前端切版與功能實作：可能會使用原生的 html＋css＋javascript，或套用 vue.js、Angular、React 等框架
- API 規劃開發：工程師會針對 Wireframe 上的操作流程跟欄位，進行 api 規劃
- 中台系統串接與資料處理：如果涉及比較複雜的應用，會需要協助客戶開發中台來進行不同系統的串接，並在中台進行資料整合
- 管理後台（CMS）開發：通常也需要針對網站上的動態資料，開發管理後台，方便管理人員未來上稿
- 軟體版本控管：進行不同版本的程式碼控管，以利多人協作
- 主機與網域（Domain）設定：開設放置網站資料的主機，並設定網站的網域名稱（Domain）及各頁面的網址
在開發過程中，如果客戶有 IT 團隊一起參與，則會需要提供工程窗口給網站設計公司，以針對開發可行性與細節進行溝通。
等開發進行到一定階段，網站設計公司便會釋出測試版網站，進入下一階段的測試與 debug。
五、網站設計流程(五)：測試與上線
這個階段，QA 工程師會依據功能流程、規格、介⾯還原度、⾓⾊權限、預期結果等方向，撰寫測試計畫，並規劃網站的單元測試與整合測試，檢視網站的運作正確性、品質與效能，並提交測試結果報告。
視網站安全等級的需要，也可送第三⽅資安掃描、弱點掃描、壓力測試或滲透測試，並依檢測報告對網站進⾏風險項目的修正。
視網站安全等級的需要，也可送第三⽅資安掃描、弱點掃描、壓力測試或滲透測試，並依檢測報告對網站進⾏風險項目的修正。
待一切測試都完成後，便會將網站跟後台安裝到正式環境，並從後台上架資料與素材，讓網站正式上線。
六、網站設計流程(六)：上線後的保固與維運
網站設計公司一般都會提供 6 個月到 1 年不等的保固期，來確保網站運行順暢、沒有問題。
而成功上線後的網站，會隨著真實的使用，會陸續出現新的需求或沒有設想到的情境，因此需不斷蒐集用戶的使用數據跟反饋來調整改版。這時可以選擇跟網站設計公司簽訂維運合約，讓網站設計公司協助即時偵錯與除錯，並進一步觀測網站數據、蒐集用戶問題，從中找尋有價值的 insight 進行迭代，讓產品體驗能越來越完善、順暢。
結語
客製化的網站設計專案，經常需要一定時間的雕琢與打磨，有一套縝密的流程進行討論與確認，才能確保產出的每一個環節都不會偏離目標。
果思設計一直以來都致力於打造符合用戶期待與客戶目標的作品，並堅持「產品策略 x 體驗設計 x 開發落實」三者並重的路線，是少數能精通體驗設計與前端開發的專業團隊。我們擁有豐富的產品設計與市場觀察經驗，擅長透過嚴謹的研究方法，深入了解產業知識與用戶樣態，為許多頂尖客戶打造兼具品質、效能、影響力的最佳網站設計產品。
