「我想個 website 靚啲！」 ——「靚」呢個字，香港老闆每日同網頁設計公司講 N 次。但「靚」其實只係視覺設計（Visual Design）嘅範疇，喺一個成功網站入面只佔 30%。剩低 70% 係 UI（User Interface）同 UX（User Experience），呢兩樣才係真正決定用戶會唔會留低、會唔會買、會唔會推薦嘅關鍵。EC Shop City 自 2006 年起服務超過 18,000 間香港企業，呢 20 年發現一個共通現象：搞錯 UI / UX / 視覺設計嘅分別，係導致中小企網站「睇落靚但賣唔到嘢」嘅最大原因。今日將三者徹底拆解，配 Wireframe → Mockup → Prototype → Final Design 完整流程示範，俾你下次同設計公司溝通時，知道應該用咩語言、要求咩成果。
目錄
一、點解 90% 老闆都會搞錯？
因為三者表面睇都係「設計」，但實際上係3 個完全唔同嘅職業 + 3 套唔同嘅工具 + 3 種唔同嘅思考方式：
- UX Designer：用戶研究、資訊架構、流程設計（思考用）
- UI Designer：互動模式、操作邏輯、組件規範（操作用）
- Visual Designer：色彩、字體、圖片、品牌一致性（感受用）
大公司會分 3 個專員處理，中小企網頁設計公司多數係 1 – 2 個全才設計師包辦。問題唔係「邊個做」，而係有冇分階段做。如果跳過 UX 同 UI 階段，直接做 Visual Design，等於起樓唔起地基直接髹漆 —— 表面美觀，但功能性災難。
呢類「靚但唔好用」嘅網站，喺 2026 年 Core Web Vitals + AI Overview 主導嘅 SEO 環境下會吃大虧，詳見 Core Web Vitals 優化攻略。
二、UX 設計：用戶體驗（隱形但決定一切）
定義
UX（User Experience）= 用戶從第一秒接觸網站到完成目標（購買 / 報名 / 聯絡）嘅整體心理同操作旅程。包含：用戶研究、Persona、User Journey、資訊架構、Flow Chart。
UX 主要工作
- 用戶研究：訪問真實目標客戶，了解佢哋嘅痛點、需求、決策邏輯
- 建立 Persona：定義 3 – 5 個典型用戶形象（年齡、職業、預算、痛點）
- User Journey Map：畫出用戶由「需要 → 搜尋 → 比較 → 決定 → 購買 → 售後」每一步嘅情緒同行為
- 資訊架構（IA）：決定網站有幾多 page、每 page 之間嘅 hierarchy
- Flow Chart：用戶完成目標需要幾多 click、每個 click 落到邊度
真實案例：補習社網站 UX 失敗
有客戶之前嘅補習社網站「好靚」—— Hero banner 用 video、字體用流麗手寫體、用大量學生笑容相片。但家長搵唔到「點樣報名」—— 報名 button 喺第 5 個 scroll 之後、要點兩次先見到電話、價錢表埋藏喺 sub-menu 第 3 層。結果月均 inquiry 只有 5 個。
我哋幫佢哋重做 UX：將「免費試堂」CTA 放到 Hero 中央、價錢表喺第 2 個 fold、加 sticky WhatsApp button、簡化報名表單由 12 條問題減到 4 條。同樣嘅「靚 UI + 靚視覺」唔變，只係UX 重整，月均 inquiry 升到 35 個。詳見類似案例 $1,500 廣告換 861 查詢。
UX 對 SEO 嘅影響
2026 年 Google 嘅 ranking 因素入面，用戶停留時間、跳出率、深度 scroll、CTA click 率係極重要嘅 behavioral signals。靚但 UX 差嘅網站 = 跳出率高 = SEO 排名跌。詳細可參考 技術 SEO 入門指南。
三、UI 設計：界面互動（可見但唔等於靚）
定義
UI（User Interface）= 用戶實際 click、type、swipe、scroll 嘅操作介面。包含 button 形狀、表單欄位、navigation menu、Modal popup、Loading state、Error state、Hover effect、Animation transition 等所有 interactive elements。
UI 主要工作
- Component Library：定義 button、input、card、modal 等可重用組件
- Interaction Pattern：hover / active / disabled / loading / error 5 大狀態
- Responsive Breakpoint：手機 / 平板 / 桌面 3 個視窗嘅排版
- Micro-interaction：細節 animation、feedback、transition
- Accessibility（A11y）：色盲友好、鍵盤操作、screen reader 支援
UI 同視覺設計嘅關鍵分別
UI 注重「點樣用」：button 夠唔夠大易 click？form 夠唔夠清楚輸入？error message 夠唔夠 actionable？而視覺設計注重「點樣睇」：color palette、typography、imagery。
例子：一個極靚嘅 hero banner（視覺設計滿分），但 CTA button 用低對比度灰色字（UI 失敗），用戶根本見唔到 button = 直接 conversion 災難。
響應式 UI 設計係 2026 年基本要求
香港 70% 流量嚟自手機，UI 設計必須由 mobile-first 出發。詳細可參考 響應式網頁設計完全指南。
四、視覺設計：美學表達（最後 30%）
定義
Visual Design = 喺 UX 同 UI 框架基礎上，加入美學、品牌、情感嘅最後一層。包含：色彩搭配、字體選擇、圖片風格、icon set、illustration、animation style。
視覺設計主要工作
- Brand Color Palette：主色 + 副色 + accent color + neutral palette
- Typography System：標題字體 + 內文字體 + 字級階層
- Imagery Style：相片風格（明亮 / 柔和 / 大膽 / 文藝）
- Icon System：統一 line / filled / duotone style
- Visual Identity：成個網站嘅情緒同性格
視覺設計做得好嘅指標
- 用戶第一眼能否識別你個品牌？
- 網站感覺同你個行業 / 目標客戶夾唔夾？
- 同你嘅 logo / 卡片 / 包裝視覺一致？
- 有冇情緒衝擊力（例如奢侈品要尊貴感、補習社要信任感）？
美容業點解咁重視視覺設計？
美容、時裝、餐飲、奢侈品行業，視覺設計嘅權重會由 30% 升到 50% – 60%，因為呢啲行業消費決策有強烈情緒成分。詳細各行業視覺重點分析可睇 5 大行業網頁設計實戰案例。
五、三者徹底對比表
| 維度 | UX 設計 | UI 設計 | 視覺設計 |
|---|---|---|---|
| 核心目標 | 解決用戶問題 | 讓用戶易於操作 | 讓用戶感受品牌 |
| 產出物 | Wireframe / Flowchart / Persona | Mockup / Prototype | Final Design / Style Guide |
| 主要工具 | Miro、FigJam、Balsamiq | Figma、Sketch、Adobe XD | Figma、Photoshop、Illustrator |
| 技能要求 | 心理學、用戶研究 | 互動設計、前端認知 | 美學、色彩、品牌 |
| 項目佔比 | 30%（決定方向） | 40%（決定可用性） | 30%（決定情感） |
| 對 SEO 影響 | 極高（停留時間） | 高（轉化率） | 中（品牌記憶） |
| 常用 KPI | Bounce Rate、Time on Page | Conversion Rate、CTR | Brand Recall、NPS |
六、完整設計流程：4 階段示範
正規嘅網頁設計項目，必須順序經歷以下 4 個階段。跳階段 = 災難。EC Shop City 嘅標準流程同國際 4A Agency 一致：
- Wireframe（線框圖）→ UX 階段成果
- Mockup（視覺稿）→ UI + 視覺融合
- Prototype（互動原型）→ UI 互動驗證
- Final Design（最終交付）→ 視覺定稿 + Dev handoff
七、階段 1：Wireframe（線框圖）
產出物樣貌
純黑白灰嘅低保真草圖，用 placeholder（灰色框）代替真實內容。重點唔係「靚」，而係「結構」。每一頁嘅佈局、區塊位置、CTA 按鈕位置、訊息層級全部喺呢階段定。
呢階段討論咩？
- 首頁 above-the-fold 應該放咩？
- 用戶最緊急嘅 3 個資訊係咩？
- CTA 喺邊個位置？用咩文案？
- Navigation 包含幾多項？階層深度？
- Footer 放咩 link？
常見錯誤
老闆睇到 Wireframe 嘅黑白稿，第一反應係：「咩嚟㗎？呢啲灰色咁醜，可唔可以快啲俾我睇靚嘅版？」千祈唔好跳！Wireframe 階段討論定咗結構，後面省返 70% 修改時間。如果一開始就 jump 落 visual，後期改 layout 等於成個項目重做。
建議簽核時間
客戶應該喺 Wireframe 階段花 1 – 2 週討論，確認所有頁面結構同邏輯先 sign-off。冇做呢步嘅項目，後期返工次數係正常項目嘅 3 – 5 倍。
八、階段 2：Mockup（視覺稿）
產出物樣貌
高保真嘅靜態圖（PNG / JPG / Figma frame），完整應用品牌色彩、字體、真實內容、真實相片。睇落同最終網站幾乎一模一樣，但仍然係靜態圖片，唔可以 click。
呢階段討論咩？
- 視覺風格同品牌定位夾唔夾？
- 色彩、字體、相片風格符唔符合目標客戶？
- 每個 section 嘅視覺權重正唔正確？
- Hero / 產品卡 / FAQ 等組件嘅美學表達？
標準交付
- 桌面版 Mockup（1440px / 1920px）
- 手機版 Mockup（375px / 414px）
- 平板版 Mockup（768px / 1024px）
- 每個重要頁面 1 個（首頁、About、產品列表、產品詳情、聯絡）
呢階段嘅修改邏輯
Mockup 階段嘅修改應該集中喺視覺層次（color、typography、spacing），唔應該再返去改 layout 或 structure（嗰啲應該喺 Wireframe 階段已 sign-off）。如果客戶喺 Mockup 階段話「我想將個 navigation 由頂改去左邊」，呢個係 Wireframe 嘅工作，會大幅延長項目時間。
九、階段 3：Prototype（互動原型）
產出物樣貌
用 Figma / ProtoPie / Adobe XD 製作嘅可互動點擊原型。用戶可以喺瀏覽器入面真實 click button、navigate 頁面、開 modal、填表單，但背後冇真實資料庫。
呢階段測試咩？
- 用戶完成「目標任務」（例如報名、結帳）需要幾多 click？
- 每個 click 後嘅 feedback 清晰嗎？
- 表單 validation 同 error message 易明嗎？
- Loading state、Empty state、Error state 都有處理嗎？
- 手機嘅 swipe / scroll 體驗順唔順？
用戶測試（User Testing）
呢階段建議搵 3 – 5 個真實目標客戶做測試，俾佢哋一個 task（例如「搵到適合 6 人聚會嘅套餐並訂位」），紀錄佢哋嘅完成時間、卡住嘅位置、提出嘅疑問。30 分鐘嘅用戶測試，可以發現 80% 嘅 UX 問題。
跳過 Prototype 嘅後果
好多公司會跳呢個階段直接進入 Dev，結果上線後發現「結帳流程太多 click」、「mobile menu 開唔到」、「表單 error 唔清楚」。呢啲問題喺 Dev 之後再改，成本係 Prototype 階段改嘅 5 – 10 倍。
十、階段 4：Final Design（最終設計交付）
產出物
- Final Mockup：完整所有頁面、所有狀態（含 hover / active / disabled / error / loading / empty）
- Style Guide：色彩 system、字體階層、spacing system、icon set
- Component Library：每個可重用組件嘅完整 spec
- Dev Handoff Document：Figma Dev Mode、Zeplin、或者切圖文件
- Asset Library：所有 SVG icon、PNG / WebP 相片、Animation Lottie file
Dev Handoff 嘅關鍵
正當公司會交付完整嘅 design tokens：
- 所有色彩 hex code（例如 primary-blue: #1E40AF）
- 所有 spacing system（例如 4 / 8 / 16 / 24 / 32 px）
- 所有字體 size / line-height / letter-spacing
- 所有 breakpoint（例如 mobile: 0-767, tablet: 768-1023, desktop: 1024+）
客戶應該攞到嘅文件
項目完成後，客戶應該擁有：
- 所有 Figma / Sketch 原檔（可編輯）
- 所有 PNG / SVG 切圖
- Style Guide PDF
- Component Library
如果設計公司唔肯交付呢啲檔案，呢個係 red flag。詳細擁有權保障可參考 網頁設計合約條款 10 大要點 同 網頁設計報價單 7 大隱藏收費。
十一、老闆同設計公司溝通正確語言
錯誤 vs 正確嘅溝通方式
| 場景 | 錯誤講法 | 正確講法 |
|---|---|---|
| 結構問題 | 「個版唔靚」 | 「Wireframe 階段嘅 information hierarchy 唔啱」 |
| 互動問題 | 「點解 click 唔到」 | 「呢個 button 嘅 hover state 同 active state 冇分別」 |
| 視覺問題 | 「色唔靚」 | 「呢個 primary color 太冷，同我 brand 嘅情緒唔夾」 |
| 用戶問題 | 「家長搵唔到報名喎」 | 「目標 persona 嘅 user journey 第 3 步有 friction」 |
| 修改要求 | 「全部重做」 | 「Wireframe 重做」或「只改 visual layer」 |
分階段嘅修改 mindset
- Wireframe 階段：盡情改 structure
- Mockup 階段：只改 visual
- Prototype 階段：只改 interaction
- Final Design 階段：只做 minor polish
用呢套方法溝通，項目時間可以縮短 40%、修改成本降低 60%。同設計公司溝通效率高咗，自然慳到錢。詳細項目時間預期可參考 網頁設計公司收費 2026 完整價錢表。
十二、常見問題 FAQ
Q1：中小企真係需要做完整 4 階段嗎？
視乎項目規模：$15,000 以下嘅小型項目可以簡化（合併 Wireframe + Mockup）；$30,000 以上嘅項目必須完整 4 階段，否則後期返工成本會超過慳到嘅時間。
Q2：Wireframe 階段一定要黑白嗎？
建議係。黑白可以強迫客戶只關注 structure，唔會被視覺分心。如果用埋色彩，老闆通常會開始討論「個藍色靚啲還是綠色靚啲」，反而 derail 結構討論。
Q3：UI 同 UX 一定要分開嗎？
大公司會分，中小企網頁設計公司多數係 1 個全才設計師處理。重點唔係「邊個做」，而係有冇按階段做、有冇按用戶需求驗證。
Q4：跳過 Prototype 直接 Dev 可以嗎？
可以但風險高。簡單 brochure site（10 頁以下、純展示）可以跳；任何涉及 transaction（網店、會員、報名）必須做 Prototype，否則 Dev 後改 interaction 成本極高。
Q5：點知道間公司係咪有完整 UX 流程？
3 個指標：（1）有冇 dedicated UX designer 或 UX 階段？（2）會唔會做 user research / persona？（3）報價有冇 Wireframe 同 Prototype 階段獨立 deliverable？正當公司一定會有。
Q6：Figma 同 Adobe XD 邊個好啲？
2026 年市場標準係 Figma，全球設計師超過 70% 用緊。Adobe 已停止獨立發展 XD（2023 年），現喺併入 Adobe Suite。如果設計公司仲堅持用 Photoshop 出設計稿，呢個技術上已經落後 10 年。
Q7：UX 報告應該包含咩？
標準包含：3 – 5 個 Persona、1 個 User Journey Map、Information Architecture diagram、Flow Chart、Wireframe（每頁）。$30,000 以下嘅項目可以簡化版，但唔可以完全冇。
Q8：點解我哋之前嘅網頁設計公司直接俾 Mockup？
2 個可能：（1）公司唔識 UX，淨係識做 visual；（2）公司知 UX 但偷工省時。兩者都係 long-term 客戶利益受損。建議下次揀公司時對照 中小企網頁設計 5 大選擇準則 + 黑店避雷清單。
結語：理解 UI / UX / 視覺，係老闆嘅必修課
20 年累積服務 18,000 間香港企業嘅經驗教識我哋一件事：網頁項目嘅成敗，70% 取決於老闆能唔能夠用正確語言同設計公司溝通。識得分清 UX、UI、視覺，知道每個階段該討論咩、該批准咩，項目時間可以縮短 40%、修改成本降低 60%、最終成果同預期接近 90%。EC Shop City 嘅標準流程包含完整 4 階段（Wireframe → Mockup → Prototype → Final Design），每階段都有客戶 sign-off 制度，避免後期返工。
如果你想搵一間真正識做 UX、UI、視覺 三層次設計嘅公司，歡迎 免費諮詢報價，或打 3111-0822、WhatsApp 6205-3555。
延伸閱讀：