wireframing

name	wireframing
description	建立低至中保真的介面線框圖,用於快速規劃版面、資訊層級與互動骨架。當任務涉及頁面草圖、版面配置、功能結構討論、設計初稿或高保真前的方案驗證時使用。
license	MIT
metadata	{"author":"goodux","version":"1.0.0","category":"interface-design","language":"zh-TW"}

線框圖設計法則

任務定義

用低至中保真畫面定義頁面骨架、資訊層級、主要任務與核心互動,讓團隊先討論結構而不是視覺細節。

何時使用

• 概念發想和快速迭代階段
• 與團隊討論介面結構時
• 在投入高保真設計前驗證想法
• 向利害關係人展示初步構想時

必要輸入

• 頁面目標與核心任務
• 必要功能與內容區塊
• 使用者流程或導航結構
• 平台尺寸需求
• 需要溝通或驗證的重點

預期輸出

• 線框圖範圍與層級規劃
• 主要版面與區塊配置
• 基本互動標註
• 不同保真度的建議做法
• 可供討論與迭代的初版方案

完成條件

• 已明確呈現頁面目標、主要任務與核心 CTA
• 已定義主要內容區塊、資訊層級與版面結構
• 已標示必要互動、狀態或例外情境
• 已讓團隊可直接用此線框圖討論流程、需求或優先序
• 已保留低保真特性,避免過早陷入視覺細節

不適用情境

• 已經要定義完整品牌視覺與元件外觀,更適合 ui-visual-design
• 主要問題是互動流程驗證,更適合 prototyping
• 內容與架構都未定義,應先處理 information-architecture

常見誤用

• 把線框圖做得太像高保真設計,分散討論焦點
• 只畫版面,卻沒有標示任務流程或互動狀態
• 所有資訊都放在同一層,沒有視覺優先順序
• 過早決定元件外觀,卻尚未驗證結構是否正確
• 缺少註解,導致團隊無法理解每個區塊存在的原因

觸發條件

• 使用者提到「線框圖」、「wireframe」、「頁面草圖」、「低保真」、「版面配置」
• 任務需要先快速確認畫面結構與內容優先順序
• 任務需要在正式視覺設計前先討論頁面骨架

高複雜度觸發

• 任務涉及 B2B 後台、管理介面、資料密集頁面或跨角色操作流程
• 使用者提到儀表板、審核台、設定中心、權限管理、報表或多步驟表單
• 問題包含資訊過多、欄位複雜、操作順序不清楚或角色之間使用同一頁面但需求不同
• 團隊需要先快速把複雜業務流程轉成可討論的頁面骨架與區塊配置

必要澄清

• 這個頁面的主要任務是什麼?成功完成後代表什麼業務結果?
• 主要使用者是誰?是否還有其他角色會看同一畫面?
• 畫面上必須出現哪些資訊、欄位、操作與狀態?
• 哪些資訊要優先看見?哪些是進階或低頻資訊?
• 這個流程是否有審批、例外處理、批次操作或權限差異?
• 這份線框圖是用來對齊需求、驗證流程還是準備進一步做原型?

可搭配技能

• information-architecture: 先整理內容層級與導航再畫線框圖
• prototyping: 將線框圖延伸為可測試的互動流程
• usability-testing: 用線框圖或原型驗證操作是否清楚
• design-system: 讓線框圖更容易對應後續元件與版型規範

執行步驟

1. 定義目標: 寫清頁面目的、主要任務、主要角色與核心 CTA。
2. 列出必要內容: 只保留完成任務所需的區塊、欄位與操作。
3. 安排版面: 先決定資訊層級、區塊順序與高頻操作位置。
4. 標註互動: 補上狀態、驗證、錯誤回饋與必要說明。
5. 快速審查: 檢查是否清楚、可討論、可延伸成原型或 UI。

執行檢查

• 已定義頁面目標與主要角色
• 已列出必要內容與操作
• 已建立資訊層級與版面結構
• 已標註關鍵互動與狀態
• 已保留低保真討論空間

精簡範例輸出

# 線框圖摘要

- 頁面: 後台儀表板
- 主要任務: 快速查看 KPI 與待處理事項

區塊:
- 頂部 KPI
- 待辦清單
- 異常警示
- 詳細分析入口

標註:
- KPI 卡片可點擊進詳細頁
- 異常警示需有高優先視覺層級

範例資料庫

本技能提供完整的線框圖範例庫，請參考 examples.yaml：

• 版面模式：Hero 區塊、卡片網格、側邊欄、儀表板、表單等常見佈局
• 元件庫：導航、內容、輸入、回饋、操作等元件清單
• 標註指南：互動、內容、狀態、響應式等標註方式
• 保真度層級：低、中、高保真的使用時機和工具建議
• 常見模式：落地頁、產品頁、結帳流程等完整範例

使用方式：選擇適合的版面模式和元件，快速組建線框圖結構。

資料使用規則

• 產出內容前，先閱讀 TEMPLATE.md，確認欄位結構、最小必要欄位、品質標準與驗證方式。
• 接著再閱讀 examples.yaml，從既有版面模式、元件分類、標註方式與頁面範例中選取最適合的內容。
• 若要新增資料，優先沿用 TEMPLATE.md 的格式與命名規則，避免建立重複或過度碎片化的模式。
• 最終輸出必須優先對齊 TEMPLATE.md 的格式要求，其次再引用 examples.yaml 的內容細節。