Wireframe · 線框稿

---
doc_type: "wireframe"
variant: "light"
status: "draft"
owner: "<your-name>"
last_updated: "YYYY-MM-DD"
upstream:
  required: ["user-flow", "information-architecture"]
  optional: ["prd"]
---

# Wireframe: <product-name>

**Status:** Draft v0.X · **Owner:** <UX name> · **Last updated:** YYYY-MM-DD

> [!IMPORTANT]
> **AI 填寫規則：** 本範本 6 段（編號 1, 2, 3, 6, 10, 12），全部必填——刻意沿用完整版章節編號讓兩版可對照。每 screen 必含 `purpose + key_elements + states_covered`；fidelity 必為 low / mid（不出 high）；每分類行內加 `（依據：user-flow §XXX / IA §YYY）`；每量化欄位加 `[H]/[M]/[L]` badge；缺資料寫 `_TODO: 需要 XXX_` 不編造（不要自行決定品牌色或文案）。

---

## 1. Executive Summary

<!-- ai-fill: 3-5 行：涵蓋 N 個 screen、主要 flow、選用 fidelity 等級與 rationale -->

<3-5 行說明>

> **TL;DR:** <一句話：使用者進入產品到完成核心任務的 layout 骨架>

---

## 2. Screens

<!-- ai-rule: 至少 3 個 screen；每個含 purpose + key_elements + reading_pattern + states_covered -->

### S1: <screen 名稱>

- **Purpose:** <一句話說此 screen 解決什麼>
- **Key elements:** header / primary_action / content_blocks / secondary_action / footer
- **Reading pattern:** F / Z / center / list
- **States covered:** default, empty, loading, error
- **Confidence:** **[H]** — **Source:** user-flow §1

### S2: ...

---

## 3. Content Priorities

<!-- ai-rule: 每個 screen 列 primary / secondary / tertiary 三個元素 + 為何此優先序 -->

| Screen | Element | Priority | Rationale | Confidence |
|---|---|---|---|---|
| S1 | <例：CTA「開始試用」> | primary | <引用 user goal> | **[H]** |
| S1 | <secondary 元素> | secondary | ... | **[M]** |

---

## 6. Breakpoints & Fidelity

<!-- ai-rule: 至少含 mobile_360 + desktop_1280；fidelity 必為 low / mid -->

| Breakpoint | Layout |
|---|---|
| mobile_360 | <stack / 1-col 描述> |
| desktop_1280 | <multi-col 描述> |

- **Fidelity level:** low / mid（**不出 high**）
- **Rationale:** 刻意保持灰階、避免過早討論視覺

---

## 10. Decision Log（key 2-3 條）

<!-- ai-rule: 每條必含 chosen + 至少 1 個 rejected + 拒絕原因 -->

| Date | Decision | Options | Chosen | Rejected why | Confidence |
|---|---|---|---|---|---|
| YYYY-MM-DD | 主導航用什麼 | top-tab / side-nav / hamburger | top-tab | side-nav (mobile 不友善)、hamburger (隱藏功能) | **[H]** |

---

## 12. Confidence & Sources & TODO

- **整份文件最低 confidence 欄位：** <列出所有 [L] 與 [M]>
- **Fabricated assumptions：**
  - <例：假設使用者已登入>
- **Highest-value next input:** <例：實際斷點分析 / mobile gesture 限制>

### TODO（缺資料）

- _TODO: 需要 UI / Brand 提供文案 owner_

---

> [!CAUTION]
> **輸出前 AI 自檢：**
> - [ ] 6 段 H2 章節齊全（編號 1, 2, 3, 6, 10, 12）
> - [ ] 每個 screen 帶 `[H/M/L]` badge + 行內 `（依據：...）`
> - [ ] Fidelity 為 low / mid（**沒寫 high**）
> - [ ] States covered ≥ 4（default / empty / loading / error）
> - [ ] Decision Log ≥ 1 條，每條有 rejected reason
> - [ ] 沒有編造品牌色 / 最終文案
> - [ ] 無 YAML / JSON schema 輸出（wireframe 是給人讀的 markdown）