# Wireframing

> 建立低至中保真的介面線框圖,用於快速規劃版面、資訊層級與互動骨架。當任務涉及頁面草圖、版面配置、功能結構討論、設計初稿或高保真前的方案驗證時使用。

- Skill: `candy14432/wireframing` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add candy14432/wireframing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/candy14432/wireframing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: candy14432 (https://skillmd.com/u/candy14432)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/candy14432/wireframing

---


# 線框圖設計法則

## 任務定義

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

## 何時使用

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

## 必要輸入

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

## 預期輸出

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

## 完成條件

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

## 不適用情境

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

## 常見誤用

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

## 觸發條件

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

## 高複雜度觸發

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

## 必要澄清

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

## 可搭配技能

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

## 執行步驟

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

## 執行檢查

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

## 精簡範例輸出

```markdown
# 線框圖摘要

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

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

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

## 範例資料庫

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

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

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

## 資料使用規則

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