線框圖 ≠ 原型，但連資深設計師也常混淆。實則差別巨大。本文徹底辨析，助你建立專業設計流程。

線框圖：產品的藍圖

定義： 低保真呈現。三大目標：呈現主體信息群、勾勒結構佈局、描述用戶交互界面主視覺。正確創建後，作為產品骨幹存在，如建築藍圖般明確細節。

視覺特性：極度克制

僅用線條、方框、灰階色塊（不同灰階標明層次）。圖片用帶斜線方框佔位，文本用標識性文字替代。

優勢：快、廉、重功能輕美學

UXPin/Balsamiq/Axure 等工具制作快速廉價。收集反饋 > 制作高保真線框圖。團隊關注功能、信息架構、體驗、流程、可用性，而非美學。修改無需動代碼/圖形編輯。

交互式線框圖（可點擊線框圖）

提高保真度，強調關鍵 UI 方面、測試視覺元素交互合理性。用 UXPin 制作。向開發/客戶演示神器：客戶問「點這按鈕怎麼樣」，當場點給他看，「就是這樣」。

謹慎展示給門外漢

非技術背景者可能不懂線框圖與成品關系。演示需拿捏度，或直接跳過此版本。Fernando Guillen 手繪流程圖即最早期版本。

原型：高保真可交互模型

定義： 必須可交互，盡可能貼合最終 UI 的高保真模型。目標：真實模擬用戶與界面交互。按鈕點下 → 操作執行 → 頁面跳轉，模仿完整產品體驗（無需 HTML/CSS/JS、後端、數據庫）。

視覺特征：該有的「眉眼皮膚化妝」都有

主色調/主視覺到位，重點內容呈現，信息架構/版式合理，點擊有交互反饋。如 UXPin 制作的交互原型。

優勢：用戶測試的絕佳工具

早期原型測試省巨量開發成本/時間，避免不合理交互導致後端白做。給真實用戶測試、追蹤反饋，洞察細節、鼓舞團隊。設計師單獨即可快速構建，無需程序員介入。

設計流程整合：從線框圖到原型的凝聚力工作流

最大錯誤：將線框圖視為一次性、非必要環節，急於推進導致線框圖潦草，無法作藍圖，更談不上構建健壯原型與可用產品。

小貼士

• 線框圖創建可編輯、可重用元素，原型階段直接精化。
• 線框圖階段廣泛收集團隊/客戶意見並體現。
• 用最順手的工具。

主流工具速覽

• UXPin： 內置 900+ UI 元素，線框+原型一體。
• Proto.io： 健壯原型工具，可導出 HTML/CSS/觸屏交互原型，便於真機測試。
• Balsamiq： 流行線框工具，僅限靜態線框圖。
• Moqups： 瀏覽器中直接畫線框圖。
• Mockingbird： 簡單線框工具，2010 年停止更新。
• Axure： 產品/交互圈最流行線框+原型工具。
• Protoshare： 瀏覽器端線框+原型。
• InVisionApp： 基於現有設計制作可用原型，屏幕間自由加鏈接，不支持任意繪圖。