元伸科技
「設計師畫一張稿給我看，我覺得 OK 就開始做」——老實說，這是多數客戶對 客製化網站設計 的想像，但實際運作完全不是這樣。
跟客戶聊時最常聽到的場景是：「上次找的設計師直接給我看 3 個版本，我選了一個就開始做，結果上線後業務說『客戶找不到聯絡電話』『產品分類訪客看不懂』。」這就是跳過前期流程的代價。
專業的 UI/UX 流程是 5 個有先後順序的階段，每階段解決不同層級的問題：先確認「使用者要什麼」，再確認「資訊怎麼組織」，再確認「視覺怎麼表現」，再確認「互動怎麼運作」，最後驗證「真的能用嗎」。本文拆解每個階段的工作內容、客戶責任與常見地雷。
階段 1：User Research（用戶研究）— 1-2 週
設計開始前，先研究你的目標使用者是誰、他們的需求、痛點、行為模式。產出：
- Persona（人物誌）：3-5 個典型使用者畫像（職業、年齡、目標、痛點、使用情境）
- User Journey（用戶旅程）：使用者從「不知道你」到「成為客戶」的完整旅程，標出每個觸點的需求與情緒
- 競品分析：3-5 家同產業競爭對手的網站體驗 audit
- 數據訪談：分析客戶過去的客服紀錄、業務 Email、Google Analytics（如有舊網站）
客戶要做的事：派出 1-2 位真正了解客戶的同仁參與訪談（業務 / 客服 / 客戶成功）、提供過去半年的客戶問題清單、誠實揭露現有網站問題（不是「我們網站很好只是想改版而已」）。
常見地雷：老闆最常踩的坑是用「我想要服務的高端客戶」當 Persona，但實際業績九成來自另一群「沒這麼高端但需求明確」的客戶。實務上我們服務過一家做工業設備的台中客戶，老闆堅持要鎖定「上市櫃大企業採購主管」，但業務團隊翻 CRM 一看，過去 3 年最賺錢的反而是「中小企業二代接班人」——Persona 要從真實成交數據推導，不是創辦人想像。
階段 2：Wireframe（線框稿）— 1-2 週
把研究結果轉成具體的網站結構——有哪些頁面、頁面之間怎麼連、每頁有哪些區塊、區塊內元素的優先順序。Wireframe 是黑白方塊圖，沒有色彩、沒有圖片、沒有字型，只有結構。
為什麼要黑白方塊：強迫客戶與設計師討論「動線與資訊架構」而非「美不美」。一旦進入彩色階段，客戶的注意力會被「Hero 圖好不好看」「字級對不對」吸走，動線問題就被忽略，等到上線後才發現「客戶找不到聯絡方式」「CTA 位置不對」。
產出：Sitemap（網站樹狀圖）、各頁面 Wireframe（手機 + 桌機）、規格書（Functional Specification）、互動標註（哪些是按鈕、哪些是連結、點下去去哪）。
客戶要做的事：拿著 Wireframe 模擬「我是新訪客，我要找 X 資訊」走一遍動線、檢查 CTA 位置是否合理、確認資訊優先順序符合業務目標。
老實說，跟客戶聊 Wireframe 時最常聽到的反應是「這黑白的看不出來啊，能不能直接給我看彩色的？」我會建議：撐過這一關。Wireframe 看起來簡陋是「刻意」的——讓你專心看動線而不是被視覺干擾。詳見 客製化網頁設計流程的 8 階段 對 Wireframe 階段的時程定位。
階段 3：Mockup（高保真設計稿）— 2-4 週
把 Wireframe 變成有顏色、有字型、有圖片、有動畫感受的高保真設計稿。這個階段套用前一階段建立的 品牌視覺一致性系統（色彩、字型、元件），讓網站「看起來像你的品牌」。
設計師通常先做 1-2 個「核心頁面」（首頁 + 重要 Landing Page）讓客戶確認方向，方向確認後再依此標準完成全站所有頁面。這個策略避免「全做完才發現方向錯，全部重做」的災難。
產出：Figma 全頁面設計稿（手機 + 平板 + 桌機）、Style Guide（色彩、字型、間距規範）、視覺標註（spacing、字級、顏色 hex）。
客戶要做的事：看設計稿時區分「客觀問題」（資訊錯誤、品牌色不對）vs「主觀偏好」（這個顏色我比較喜歡）——前者必須改、後者要適度尊重設計專業。把回饋整理成具體可執行的指示（「再溫暖一點」太抽象，「Hero 圖換成有人物的場景照」才能執行）。
常見地雷：客戶內部多人各自提意見，最後形成「四不像」設計。實務上業界一個常見現象是：老闆說一套、行銷主管說一套、業務說一套，設計師為了「都不得罪」每個意見都加一點，結果視覺風格完全失焦。我會建議：客戶內部先開會收斂意見，由 1-2 位決策者出面跟設計師對焦——對外只有一個聲音。
階段 4：Prototype（互動原型）— 1-2 週
把 Mockup 串成「可點擊的網站」。使用 Figma 的 Prototype 功能或 ProtoPie，讓客戶從首頁點進去，模擬完整使用流程：點選單、滾動頁面、開 modal、填表單、收到 confirmation。
這個階段的價值：客戶可以「使用」網站，不只是「看設計稿」。Mockup 階段客戶看的是「美不美」，Prototype 階段看的是「順不順、迷路嗎、找得到嗎」——後者才是真正預演上線體驗。
產出：可點擊的互動原型（Figma share link）、互動規範（hover / click / loading / error 狀態的視覺與行為）、動效時長與緩和曲線標準（呼應 動效節奏標準化）。
客戶要做的事：在 Prototype 上模擬 5-10 個常見使用情境（如「我是新客戶，我想預約諮詢」「我是回頭客，我想下單」），記錄每個卡頓點。即使是非工程背景，也能感受「這裡卡了」「這個按鈕應該更明顯」。
階段 5：User Testing（使用者測試）— 1 週
最後一道防線：找 5-8 位真實使用者試走 Prototype，記錄他們的行為與反應。經典方法：
- 任務測試：給使用者 3-5 個任務（「請預約 5 月 10 日下午的諮詢」「找出最便宜的方案」），觀察完成度
- think aloud：使用者邊操作邊說出想法（「我以為這個是按鈕但點不下去」）
- 5 秒測試：給使用者看首頁 5 秒，問他「這家公司是做什麼的？」（測首頁訊息清晰度）
- 問卷收尾：System Usability Scale（SUS）量表評分
為什麼 5-8 位就夠：Nielsen 的研究顯示 5 位使用者能找出 85% 的可用性問題，超過 5 位邊際效益遞減。中小企業沒必要做 50 人大規模測試，5-8 位精準觀察即可。
產出：使用者測試報告、優先級分類的優化清單（critical / major / minor / nice-to-have）、針對 critical 與 major 的修改建議。
5 階段總時程與「能不能跳過」決策
| 階段 | 時程 | 必要性 | 跳過的代價 |
|---|---|---|---|
| 1. User Research | 1-2 週 | ★★★★☆ | 設計可能脫離真實客群 |
| 2. Wireframe | 1-2 週 | ★★★★★ | 動線錯誤要全部重做視覺 |
| 3. Mockup | 2-4 週 | ★★★★★ | 不能跳，這是視覺設計核心 |
| 4. Prototype | 1-2 週 | ★★★★☆ | 上線後才發現互動不順 |
| 5. User Testing | 1 週 | ★★★☆☆ | 初版 ROI 訊號失真 |
完整跑完 5 階段約 6-11 週，含開發階段加總總時程約 16-22 週。預算緊的中小企業可考慮：保留階段 2、3、4，簡化階段 1（用客服資料替代）、跳過階段 5（用內部試走替代）——時程可壓到 4-7 週。
結語：UI/UX 流程是「決策成本管理」
5 個階段的本質不是「設計步驟」，而是「在哪一階段發現錯誤的成本最低」：
- 階段 1 發現「Persona 錯了」：成本 0（還沒開始設計）
- 階段 2 發現「動線錯了」：成本低（改 wireframe 1-2 天）
- 階段 3 發現「視覺方向錯了」：成本中（重畫設計稿 1-2 週）
- 階段 4 發現「互動不順」：成本中高（改 Prototype + Mockup 1-2 週）
- 階段 5 發現「使用者不會用」：成本高（多階段返工 2-4 週）
- 上線後發現問題：成本極高（修 production code + 影響客戶體驗）
講白一點，5 階段的順序，是讓「容易發現的錯誤」在「成本最低的階段」就被抓出來。跳過早期階段，就是把問題往後推到成本更高的階段。
元伸 24 年、3,000+ 企業實績的 客製化網頁設計 累積經驗：完整跑流程的專案，上線後 6 個月內的「重大改版需求」比跳階段的專案少很多。我會建議：如果你正在規劃 企業形象網站方案，至少完整跑階段 2-4，預算允許就把 1 與 5 也加上。
如果你對自己的網站改版該跑哪些階段有疑問，歡迎聊聊。
📞 03-366-1000 ｜ 🌐 www.ozchamp.com ｜ 免費諮詢，24hr 內回覆
