在 UI/UX 設計流程裡，介面設計不是一開始就畫精緻的畫面🙅‍♀️。

我們通常會先做 Wireframe、Lo-Fi Prototype、Hi-Fi Prototype 這三個不同層級的設計工具，目的都是為了確認資訊呈現、操作流程以及使用者體驗。

三者的差異主要在於「精細程度」與「互動性」，了解這些差異能幫助設計師決定在不同階段應該投入多少時間和精力💪。

( 拿我幾年前練習做的 Redesign 來做示意 )

Wireframe

Wireframe 可以理解成「介面藍圖」，是用最簡單的線條和框架來呈現畫面佈局。它通常沒有色彩、沒有細節，重點是標示出 資訊架構、功能位置與層級關係。

• 適合使用時機：
  • 初期需求釐清，還在確認資訊結構或主要功能時
  • 和團隊、利害關係人討論大方向，而不是細節美感
  • 減少溝通誤差，避免一開始就被顏色或排版分散焦點

例如：外送平台首頁要有餐廳種類選單、優惠專區、探索區域、重新下單、搜尋框...，這時候就用 Wireframe 畫出區塊位置即可。

Lo-Fi Prototype

Lo-Fi Prototype 在 Wireframe 的基礎上，加入了 互動流程。雖然畫面還是簡單（灰階、方塊圖形），但可以模擬按鈕點擊、頁面跳轉，甚至表單輸入。

• 適合使用時機：
  • 測試資訊架構與操作流程是否合理
  • 初步使用者測試
  • 與 PM 或工程師確認邏輯與需求

Lo-Fi Prototype 的好處是「快速、低成本」。因為還沒進入視覺設計，所以修改起來很方便，能讓團隊更專注在使用體驗的流暢度。

Hi-Fi Prototype

Hi-Fi Prototype 則是最接近最終產品的版本，通常會包含 完整的色彩、字體、圖片、互動效果，甚至能夠模擬實際使用狀況。這類原型不僅能展示介面，也能傳達品牌感受。

• 適合使用時機：
  • 專案進入中後期，需要與利害關係人展示設計成果
  • 提供工程師更精準的設計規格
  • 正式的使用者測試，觀察真實互動情境
  • 對外提案、客戶 Demo

Hi-Fi Prototype 雖然製作成本較高，但能夠 真實呈現使用體驗，讓人能夠更好的去想像最終產品的樣貌，對於說服客戶特別有幫助👍。

💡 三者差異

• Wireframe：畫骨架 → 解決「資訊怎麼擺」的問題
• Lo-Fi Prototype：補流程 → 測試「操作合不合理」
• Hi-Fi Prototype：加細節 → 呈現「實際使用體驗」

👉 可以把三者的關係想成「蓋房子」：

• Wireframe 是房子的結構草圖。
• Lo-Fi Prototype 是簡單的模型屋，可以模擬人走動的動線。
• Hi-Fi Prototype 是已經上好裝潢的樣品屋，能完整呈現住進去的感受。

📌 總結

簡單來說：Wireframe 解決「要放什麼」，Lo-Fi 解決「怎麼走流程」，Hi-Fi 解決「實際體驗好不好」。

最後要提醒的是，這些產出不是每個專案都會完整走一遍，而是根據專案時間、資源、需求來決定要到哪個階段。重點不是形式，而是能幫助團隊和使用者理解、驗證設計。