UIUX網頁設計流程的反思：設計流程的優化與經驗分享

接收並了解新專案任務的需求

一個新專案的開啟，第一步就是從PM那裡接收到新專案的任務。從接收到任務的那一刻起，設計師就需要詳細去與PM釐清客戶的需求，要設計的網站類型，並確認好要製作的頁面與功能。

網站地圖(Sitemap)與使用者流程圖(User flow)

根據客戶或PM提供的網站地圖，定義出網站整體的頁面流程，並從中考量使用者體驗的流暢度。

蒐集相關網站設計靈感並提供情緒版(Moodboard)

透過大量蒐集相關資料與參考相似類型的網站設計，逐步釐清客戶想要的設計風格，並提供2到3種Moodboard供客戶挑選喜歡的配色與設計，逐漸聚焦設計風格的方向。

時程安排與規劃

根據專案時程表進行頁面製作的時程評估，並在製作的過程中不斷地進行微調與修正，及時與PM核對回饋工作狀況。

頁面初步的線框稿(Wireframe)

確認清楚客戶對網站設計的需求與想要的功能後，就可以初步進行頁面的線框圖規劃。線框圖的用意在於初期讓客戶了解頁面的基本架構，也能用在與工程師初步討論開發的可行性。除了顯示頁面的規劃之外，也需要明確的文字標註，在溝通上能更加清楚。

設計時需考量到前台及後台的對應

網站設計的風格跟架構都確定之後，就正式進入網頁介面的視覺設計。在執行UI設計時，除了依據Moodboard確定的風格去執行設計之外，設計師還需考量到前端工程師切版的可行性，以及與後端工程師溝通清楚後台系統的規劃需求。在前期溝通清楚後，後續就能確保工程師開發的方向不會有太大的誤差。

正式進入開發前，與PM、前端及後端工程師一同確認好開發方向

在設計稿都確認後，非常建議在正式進入開發前，設計師與PM、前端及後端工程師共同組織一場會議，目的是為了確保工程師對於設計稿的理解，以及讓所有相關執行人員對此專案有一定的共識。

開發當中的測試與檢查

網頁開發的過程中，我們需實際的去以使用者的角度去操作前台與後台，同時以設計師的眼光去查看畫面使否與設計稿相符，不斷地進行修正及優化。

小編在執行網頁設計的過程中，就有碰到在前期與工程師沒有溝通清楚，導致後續在開發的過程中，發現前台與後台的欄位無法對應；或是因為彼此的理解不一致，造成開發的方向錯誤的狀況。在真的開發出來之後，才發現跟當初所討論好的完全不同......這完全是小編自己的心路歷程啊！ 還好後來我們及時發現問題，透過大量的開會討論，並把自己當作使用者實際的去操作網站的前台與後台，一一地將所有頁面的細節仔細的討論、確認大家的理解相同，快速的釐清問題並馬上解決，才逐漸地拉回正軌，修正所有的問題，最後將完好成品交接給客戶。

以上就是在網頁設計的過程中，設計師會遇到的流程與狀態。一個好的網頁是由許多細節環環相扣組成的，溝通與團隊合作更是重要。希望今天的分享，能帶給想更了解網頁設計工作內容的大家更詳細的Know how：）