02 · 手繪草圖 → App 原型

速覽

產出	移動端或桌面端介面原型
用時	20 到 40 分鐘
型別	「Prototype」
前置	一張草圖，畫得醜沒關係

場景

腦子裡有個介面，說不清楚但能畫出來。或者反過來——你能畫個大概，但不會做視覺。

這個案例的關鍵認知是：草圖承載的是結構和佈局意圖，不是美感。 一個圓圈加一個方塊，它能讀出「這裡是頭像，這裡是內容卡片」。

怎麼做

第 1 步 · 畫

紙筆、iPad、任何畫圖工具都行。畫的時候關注三件事：

• 有哪些塊，各佔多大面積
• 誰在上誰在下，誰在誰旁邊
• 哪個是主要動作（畫個圈標出來）

不用畫圖示，不用畫文字，不用管比例精確。

第 2 步 · 存成檔案

拍照或者匯出成圖片，存到專案目錄裡。

第 3 步 · 提示詞

這是一張手繪的介面草圖。

請按它的結構做一個移動端介面。

草圖裡的元素對應：
- [左上那個圓] = 使用者頭像
- [中間那幾個橫條] = 內容列表，每條是一個任務
- [底部那個方塊] = 主行動按鈕
- [右上角那個小圖形] = 篩選入口

介面用途：[這個介面是幹什麼的]
使用場景：[使用者在什麼情況下開啟它]

要求：
1. 佈局按草圖，不要自作主張重排。
2. 視覺按當前的設計系統。
3. 狀態要全：空態、載入態、錯誤態、只有一條資料、很多條資料。
4. 用真實的示例內容，不要 Lorem ipsum，但示例資料要標註是示例。
5. 觸控目標不小於 44×44。

先只做這一屏。

為什麼這麼寫

逐個說明草圖元素對應什麼，是最關鍵的一步。 不說的話它會自己猜，猜錯了你要重來。花三十秒把對應關係列出來，比重生成兩次划算。

「佈局按草圖，不要自作主張重排」 要寫。它的預設傾向是把你的佈局「改進」成更常見的形態，而你畫那個草圖就是因為你想要那個佈局。

「先只做這一屏」 是為了控制範圍。一次做五屏，你沒法針對性地修。

驗收清單

• [ ] 佈局跟草圖對得上
• [ ] 五個狀態都做了
• [ ] 觸控目標夠大（拇指點得到）
• [ ] 示例資料標註了是示例
• [ ] 在手機實際寬度下看過（375px 和 430px 都試）
• [ ] 主要動作一眼能找到
• [ ] 沒有 Lorem ipsum 殘留

變體

做完一屏之後擴充套件

基於這一屏的設計語言，做出這個流程的其餘屏：
1. 點「新建」之後的表單頁
2. 提交成功之後的反饋
3. 點某一條之後的詳情頁

保持元件、間距、動效跟第一屏完全一致。
每一屏同樣要做全狀態。

加互動

把這幾屏連起來，做成可點選的原型：
- 點主行動按鈕 → 表單頁
- 表單提交 → 成功反饋 → 回到列表
- 點列表項 → 詳情頁，詳情頁有返回

轉場用剋制的滑動，不要彈跳。

從草圖直接出圖而不是介面

同樣的做法也能用來出插畫和海報。畫一個很粗糙的形狀，讓它生成正式的圖。這條路對不會畫畫的人特別有用——你只需要有構圖意圖。

常見問題

它把我的佈局改了。

補一句更強的約束：「草圖裡元素的相對位置和麵積比例是設計決策，不要最佳化它們。如果你認為某處有問題，先告訴我，不要直接改。」

做出來太像通用模板。

草圖給的是結構，氣質要靠設計系統給。先挑一個設計系統，或者做 案例 04 抽自己的。

草圖太抽象，它認不出來。

兩個辦法：一是把元素對應關係寫得更細；二是在草圖上直接標註文字，它能讀。

要做的是複雜的表單頁。

表單單獨說清楚：欄位、校驗規則、錯誤提示的時機。參考 Craft 裡的 form-validation 那條：「按 form validation 的要求處理校驗：說明什麼時候校驗、錯誤怎麼傳給輔助技術、規則住在哪一層」。

相關

• 進階 · 影像與影片 — 草圖輸入的其他用法
• 進階 · Craft — 狀態覆蓋和表單校驗