線框圖基礎
概述
保真度應與確定性相符：永遠不要在未經驗證的決策支持下，投入比所需更精緻的細節。線框圖的產出是共識，而非成品本身——它是一種草圖/原型混合體，設計目標是「製作便宜、修改便宜、丟棄便宜」，以便在任何人開始編寫程式碼之前，就能浮現出結構上的缺陷。
何時使用
- 開始任何新的畫面、功能或產品時——在視覺設計之前、在程式碼之前
- 為下一個設計成品選擇保真度，或決定是提升還是降低一個層級
- 挑選線框圖的方法或工具（紙本、白板、專用軟體）
- 當團隊因直接跳至精美模擬圖而陷入像素細節的爭論時，協助解套
- 在開始建置之前，讓開發人員和利害關係人對結構和流程達成共識
- 不適用於： 視覺精雕細琢——字型、顏色、品牌、動態效果。這些是合成圖/模擬圖的範疇（需協同觸發 hallmark）
- 不適用於： 與使用者驗證精細的互動細節——這需要原型，而不是線框圖
為什麼低保真度勝出
- 精雕細琢會製造虛假的信心。 一個看起來非常真實的設計，會讓每位審閱者覺得「快完成了」：意見回饋會從結構轉向品牌識別，而簽核也會基於錯誤的面向進行。那些從規格直接跳到精美原型的團隊，經常報廢數月的工作成果，而這些問題本可以透過三輪可拋棄的線框圖就被發現。線框圖工具刻意營造的手繪風格，正是為了防止這種誤解。
- 省略是特色。 故意遺漏細節，以便注意力集中在結構、內容和流程上。一個不會被誤認為最終產品的線框圖，才能引導出關於結構的評論；反之，則會引來關於字型的意見。
- 易於修改勝過易於製作。 紙本草圖製作快但修改慢；原型則兩者都慢。數位線框圖是唯一在製作和修改上都很快的成品——這使它能夠在發散和收斂兩個階段都發揮作用。
- 你腦中的畫面遠比你想像的模糊。 將想法具體化的過程會暴露其中的缺口——那些被遺忘的狀態、缺失的步驟、未處理的情況——這些在想法只存在於腦中時是看不見的。如果第一個線框圖沒有揭示任何缺失，那表示你是在複製而非思考。
- 數量是方法，不是浪費。 在皮克斯，一個九十分鐘的影片需要大約一萬兩千張分鏡圖，而每部電影會製作多達十個版本的影片——也就是在動畫開始前，需要繪製高達十二萬張圖（艾德·卡特莫爾稱失敗為「學習與探索的表現」）。諾瑪餐廳的瑞內·雷澤比則明確指出了比例：每一個絕妙想法的出現，都需要十個想法作為輸入。如果你期待第一個概念就能成功，請將此視為一個危險信號，而不是效率。
保真度階梯
| 層級 | 外觀 | 所編碼的確定性 | 用途 |
|---|---|---|---|
| 無保真 | 方框、箭頭、流程圖、內容清單——無 UI 元素 | 問題和流程仍未知 | 探索階段：繪製選項、畫面、內容模型 |
| 低保真 | 粗略的單色框架、不精確的線條、佔位文字 | 候選結構正在形成 | 快速發散：每分鐘產出多個版面概念 |
| 中保真 | 真實 UI 元件、真實標題/標籤/CTA、有限色板、Lorem 本文 | 結構已獲同意；互動細節正在調整 | 合併與精煉、版面/元件變體、早期回饋 |
| 後期階段 | 中保真 + 註解、畫面間的箭頭、完整流程、範例內容 | 結構和流程已確定 | 利害關係人審查、開發人員交接——必須能獨立存在 |
| 高保真 | 與最終產品難以區分，可能具互動性 | 視覺和互動決策已鎖定 | 現在是原型/合成圖，不再是線框圖——不同的成品，不同的規則 |
僅在以下情況提升一個層級： 當前層級旨在回答的問題已被回答：流程在佈局細節之前被驗證，佈局在組件選擇之前被同意，結構在任何真實感之前被簽核。
當以下任一情況發生時，降低一個層級：
- 審閱者評論顏色、字型或間距，而非結構——成品對當前決策而言過於精緻
- 辯論圍繞著缺失的功能或流程順序，而非眼前的畫面
- 一個概念走入死胡同，或新的需求出現——重新開始代價低，不要昂貴地翻新
- 你發現自己在流程尚未確定之前，就開始調整像素
如果利害關係人要求「高保真線框圖」： 這是在要求一個合成圖或原型。將其作為一個獨立的成品來建置——不要為了迎合需求而提升線框圖的保真度，否則你將失去它「可隨意變更」的特性。
線框圖在流程中的角色
數量在發散階段增加，在收斂階段減少——而保真度只會在決策鎖定後才提升。收斂並不是一個平滑的漏斗：應交替進行小規模的收斂/發散步驟（普氏受控收斂），讓新的變體從評估倖存者的過程中湧現。
| 階段 | 保真度 | 線框圖數量 | 退出標準 |
|---|---|---|---|
| 探索 | 無保真 | 許多碎片 | 畫面、流程和內容已被列舉；選項已被繪製 |
| 定義 | 低保真 | ≥3 個不同的概念 | 團隊可以在不爭論視覺的情況下，討論結構 |
| 設計 | 中保真 | 1–2 個合併的倖存者 + 變體 | 一個結構已被同意；互動和導航已被解決 |
| 建置/交接 | 後期階段 | 完整的註解流程 | 開發人員可以在作者缺席的情況下，根據它進行建置 |
- 探索——無保真。 目標：將想法從腦中取出，並利用湧現出的東西產生更多想法。流程圖、畫面連接圖、內容佔位符。使用最快的工具快速前進；更多的初始想法絕對更好。如果你在這裡添加 UI 細節，表示你在一個想法上花費了太多時間——請退後一步。
- 定義——低保真。 在收斂於任何一個解決方案之前，針對每個問題產生 ≥3 個結構上不同的概念。根據一個概念所引發的對話來判斷它，而非其工藝水準。破除設計成品必須看起來完成的下意識規則。
- 設計——中保真，「合併與精煉」。 請勿直接推廣上一輪最喜歡的概念——而是合併數個概念的強項，並在不確定性中多停留一輪，直到感覺比平常更不自在。引入真實的文字和真實的元件；保持有限的色板，以使細節保持在可控範圍內。開始處理畫面間的導航和每個畫面的互動，並在元件層級引入變體。
- 建置/交接——後期階段。 為新的受眾進行優化：同事和利害關係人，而非你自己。添加註解，用箭頭連接畫面，包含工作流程中的每個畫面，並僅在關鍵或新穎的互動處添加細節。線框圖必須能在沒有作者的情況下被理解。此階段的危險：依戀——領域專家和開發人員仍必須能夠自由地判斷、刪減和否決它。
什麼是好的線框圖
根據線框圖所引發的結果來判斷它，而非它與最終產品有多相似。
- 它在存在之前就回答了三個問題。 在檔案的第一頁寫下：誰使用它（人物誌或具體角色——「管理員」、「捐贈者」）？他們的目標是什麼（以使用者需求來定義——沒有人想要註冊；他們想要保存進度）？它解決了什麼問題（當前的痛點、競爭對手的差距）？一個針對定義不清問題的絕佳解決方案，輸給一個針對定義良好問題的普通解決方案。跳過這個註記是整個過程中影響最大的錯誤。
- 它經歷了迭代。 好的線框圖是多次迭代的倖存者，而非第一版草稿的打磨品。將每個版本視為可丟棄的；願意刪除是品質的引擎。
- 它暴露了缺口。 一個向你展示了缺失狀態、步驟或使用案例的線框圖，已經值回票價。開放式結尾是一個特色：它促進了填補這些缺口的構思過程。
- 它能引發行動。 添加註解，刻意留下明顯未完成的部分，標明與當前產品的差異以及最不確定的領域。細節預算：當傳達所需付出的努力超過了受眾需要知道的內容時，就停止。失敗的反應是「好的——然後呢？」；成功的測試標準是下一個人可以在沒有你的情況下接手並繼續。
選擇工具
- 唯一強制性的功能：它不能打斷你的思路。 正確的工具能將想法以思維湧現的速度可視化出來。早期階段：紙筆或白板與軟體完全具有競爭力。
- 如果使用軟體，需要具備： 一個標準 UI 元件的庫（以便中/後期階段的框架能對應到開發人員可以建置的東西）——並且需要避免精細調整：沒有像素尺寸、沒有 CSS 屬性、沒有互動行為。這些選項在構思階段是「追求精緻」的誘餌。
- 功能更強 ≠ 更好。 限制能驅動速度和創造力；一個能夠渲染出真實產品的工具，會誘惑你這麼做。
- 工具要與階段匹配，而不是個人偏好： 個人發散 → 對你來說最快的任何工具，包括紙本；團體構思 → 白板（實體或數位），以便每個人都能畫；任何需要修改、共享或添加註解的東西 → 數位線框圖工具；任何需要互動的東西 → 你已經離開了線框圖的範疇，請使用原型工具並明確告知。
- 團隊參與測試： 如果只有設計師能操作這個工具，那麼它在早期階段就是錯誤的工具——線框圖之所以有效，是因為每個人（PM、開發人員、利害關係人）都能夠建立和編輯它們。
所需的背景資訊
- 待解決的決策是什麼——保真度是根據一個決策來選擇的，而非憑空選擇。
- 哪些已經驗證，哪些仍為開放問題。保真度不得超過確定性。
- 下一個審閱者是誰，以及他們會如何解讀成品所傳達的「完成度」信號。
- 它必須存活多久——可拋棄的探索，還是持久的參考依據。
- 誰需要編輯它——如果非設計師必須貢獻，工具選擇的範圍會變窄。
評估程序
- 撰寫「誰 / 目標 / 問題」的註記。如果你做不到，就停下——這就是你的發現。
- 明確指出待解決的決策，以及能夠回答該決策的最低保真度。
- 根據階梯檢查確定性：是否有任何東西被渲染得比它實際被決定的程度更精細？
- 計算概念數量。在定義階段低於三個，表示你尚未充分發散。
- 解讀你收到的回饋：對字型或顏色的評論意味著成品過於精緻——請降低一個層級。
- 確認在構思階段，工具沒有提供像素或 CSS 的精細調整選項。
- 在分享之前，檢查它是否能在沒有你的情況下獨立存在。
輸出格式
決策待定：<此成品必須回答的問題>
誰 / 目標 / 問題：<三個答案>
保真度：<層級>——因為確定性是<已驗證的內容>
探索的概念數量：<n> (定義階段時 ≥3)
工具：<選擇>——因為<速度 / 可編輯性 / 誰必須貢獻>
提升層級的條件：<解鎖提升層級的情況>
快速參考
| 情況 | 規則 |
|---|---|
| 新功能或新產品 | 從無保真/低保真開始；在收斂之前，需有 ≥3 個不同的概念 |
| 不確定該用哪種保真度 | 讓保真度與確定性匹配；有疑慮時，選擇較低的保真度 |
| 回饋集中在字型/顏色 | 成品過於精緻——降低一個保真度層級 |
| 結構已同意，正在調整互動 | 提升至中保真：真實元件、真實標籤、有限色板 |
| 收到「讓它看起來真實」的要求 | 分離為合成圖/原型；永遠不要提升線框圖的保真度 |
| 交接給開發人員 | 後期階段：有註解、有箭頭、完整流程、能獨立存在 |
| 第一個想法感覺是贏家 | 危險信號——產生另外九個想法 |
| 第一輪結束，有一個最喜歡的 | 跨概念合併與精煉；在鎖定之前，再進行一次發散 |
| 後期階段要添加多少細節 | 僅在關鍵或新穎的互動處添加；在報酬遞減點停止 |
| 在畫任何東西之前 | 在第一頁寫下「誰 / 目標 / 問題」 |
| 挑選工具 | 最快的、不中斷思路的工具；需有元件庫，無精細調整選項 |
| 非設計師想要貢獻 | 把工具交給他們——低保真度是讓每個人都能畫畫的許可證 |
| 審閱者問「這是最終設計嗎？」 | 保真度校準錯誤——讓成品變得更粗糙，或重新定位審查的意圖 |
| 早期向終端使用者展示概念 | 對於結構和流程問題，低保真/中保真就足夠；僅在需要驗證互動細節時才用原型 |
| 專案在程式碼開始後出現動盪 | 線框圖已經來不及節省成本——在下一個變更開始撰寫程式碼之前，用線框圖規劃它 |
反模式
| 錯誤 | 修正 |
|---|---|
| 規格 → 精美模擬圖 → 程式碼，沒有經過構思階段 | 探索 ≥3 個低保真概念；在投入真實感之前，先測試結構 |
| 在探索階段追求精緻（字型、顏色、像素） | 使用單一顏色、粗糙線條，在結構被簽核之前不做任何樣式設定 |
| 一輪過後就推廣最喜歡的概念 | 結合數個概念的強項；交替進行收斂和發散 |
| 「高保真線框圖」 | 那是原型/合成圖——將其作為一個獨立的成品來建置 |
| 線框圖需要作者解釋 | 添加註解、畫面連接箭頭、包含流程中的每個步驟 |
| 為一個多畫面的流程只做一個畫面的線框圖 | 從入口到出口都做線框圖；缺口存在於畫面之間 |
| 跳過「誰/目標/問題」的註記 | 在畫第一個方框之前，就在第一頁寫下這三個答案 |
| 對後期階段的線框圖產生依戀 | 這是該構想的最終考試，而不是它的獎盃——讓專家來刪減它 |
| 利害關係人為品牌簽核 | 先在低保真度下審查結構；保真度會傳達「完成度」的信號，無論你是否意圖如此 |
| 在構思階段使用具有像素/CSS 精細調整功能的工具 | 切換到紙本或僅使用元件的線框圖工具 |
| 在中保真階段到處使用 Lorem Ipsum | 使用真實的標題、標籤和 CTA；僅對本文內容使用 Lorem Ipsum |
| 一個概念的三個裝飾性變體 | 變化結構（佈局、流程、層級），而不是裝飾——否則那只是同一個概念 |
| 只有收斂的漏斗，沒有重新發散 | 每次刪減後，允許對倖存者進行一次小規模的發散（受控收斂） |
| 添加互動功能「以便他們理解」 | 互動功能使它變成原型——改為用註解來說明行為 |
| 將線框圖視為可交付成果 | 共識才是產出；檔案只是載體 |
伴隨技能
| 情況 | 協同觸發 |
|---|---|
| 定義問題（後續內容被截斷） |
...