candy14432 線框圖設計法則
任務定義
用低至中保真畫面定義頁面骨架、資訊層級、主要任務與核心互動,讓團隊先討論結構而不是視覺細節。
何時使用
- 概念發想和快速迭代階段
- 與團隊討論介面結構時
- 在投入高保真設計前驗證想法
- 向利害關係人展示初步構想時
必要輸入
- 頁面目標與核心任務
- 必要功能與內容區塊
- 使用者流程或導航結構
- 平台尺寸需求
- 需要溝通或驗證的重點
預期輸出
- 線框圖範圍與層級規劃
- 主要版面與區塊配置
- 基本互動標註
- 不同保真度的建議做法
- 可供討論與迭代的初版方案
完成條件
- 已明確呈現頁面目標、主要任務與核心 CTA
- 已定義主要內容區塊、資訊層級與版面結構
- 已標示必要互動、狀態或例外情境
- 已讓團隊可直接用此線框圖討論流程、需求或優先序
- 已保留低保真特性,避免過早陷入視覺細節
不適用情境
- 已經要定義完整品牌視覺與元件外觀,更適合 ui-visual-design
- 主要問題是互動流程驗證,更適合 prototyping
- 內容與架構都未定義,應先處理 information-architecture
常見誤用
- 把線框圖做得太像高保真設計,分散討論焦點
- 只畫版面,卻沒有標示任務流程或互動狀態
- 所有資訊都放在同一層,沒有視覺優先順序
- 過早決定元件外觀,卻尚未驗證結構是否正確
- 缺少註解,導致團隊無法理解每個區塊存在的原因
觸發條件
- 使用者提到「線框圖」、「wireframe」、「頁面草圖」、「低保真」、「版面配置」
- 任務需要先快速確認畫面結構與內容優先順序
- 任務需要在正式視覺設計前先討論頁面骨架
高複雜度觸發
- 任務涉及 B2B 後台、管理介面、資料密集頁面或跨角色操作流程
- 使用者提到儀表板、審核台、設定中心、權限管理、報表或多步驟表單
- 問題包含資訊過多、欄位複雜、操作順序不清楚或角色之間使用同一頁面但需求不同
- 團隊需要先快速把複雜業務流程轉成可討論的頁面骨架與區塊配置
必要澄清
- 這個頁面的主要任務是什麼?成功完成後代表什麼業務結果?
- 主要使用者是誰?是否還有其他角色會看同一畫面?
- 畫面上必須出現哪些資訊、欄位、操作與狀態?
- 哪些資訊要優先看見?哪些是進階或低頻資訊?
- 這個流程是否有審批、例外處理、批次操作或權限差異?
- 這份線框圖是用來對齊需求、驗證流程還是準備進一步做原型?
可搭配技能
information-architecture: 先整理內容層級與導航再畫線框圖prototyping: 將線框圖延伸為可測試的互動流程usability-testing: 用線框圖或原型驗證操作是否清楚design-system: 讓線框圖更容易對應後續元件與版型規範
執行步驟
- 定義目標: 寫清頁面目的、主要任務、主要角色與核心 CTA。
- 列出必要內容: 只保留完成任務所需的區塊、欄位與操作。
- 安排版面: 先決定資訊層級、區塊順序與高頻操作位置。
- 標註互動: 補上狀態、驗證、錯誤回饋與必要說明。
- 快速審查: 檢查是否清楚、可討論、可延伸成原型或 UI。
執行檢查
- 已定義頁面目標與主要角色
- 已列出必要內容與操作
- 已建立資訊層級與版面結構
- 已標註關鍵互動與狀態
- 已保留低保真討論空間
精簡範例輸出
# 線框圖摘要
- 頁面: 後台儀表板
- 主要任務: 快速查看 KPI 與待處理事項
區塊:
- 頂部 KPI
- 待辦清單
- 異常警示
- 詳細分析入口
標註:
- KPI 卡片可點擊進詳細頁
- 異常警示需有高優先視覺層級
範例資料庫
本技能提供完整的線框圖範例庫，請參考 examples.yaml：
- 版面模式：Hero 區塊、卡片網格、側邊欄、儀表板、表單等常見佈局
- 元件庫：導航、內容、輸入、回饋、操作等元件清單
- 標註指南：互動、內容、狀態、響應式等標註方式
- 保真度層級：低、中、高保真的使用時機和工具建議
- 常見模式：落地頁、產品頁、結帳流程等完整範例
使用方式：選擇適合的版面模式和元件，快速組建線框圖結構。
資料使用規則
- 產出內容前，先閱讀
TEMPLATE.md，確認欄位結構、最小必要欄位、品質標準與驗證方式。 - 接著再閱讀
examples.yaml，從既有版面模式、元件分類、標註方式與頁面範例中選取最適合的內容。 - 若要新增資料，優先沿用
TEMPLATE.md的格式與命名規則，避免建立重複或過度碎片化的模式。 - 最終輸出必須優先對齊
TEMPLATE.md的格式要求，其次再引用examples.yaml的內容細節。