什麼是線框設計工具？

幾秒鐘內勾勒頁面版面配置與 UI 原型。將按鈕、文字區塊、圖片、輸入框等常見 UI 元件拖放至畫布，然後匯出為 PNG 或儲存為 JSON 以便繼續編輯。

畫布以 fabric.js 為基礎,內建一整套元素:矩形、文字塊、按鈕、圖片佔位、輸入欄、導覽列、卡片、核取方塊、下拉選單、單選組、進度條、滑桿,以及用來標註的便利貼。縮放與符合畫面讓複雜版面也看得清楚,還能把畫布框成手機、平板或桌面寬度。復原、重做、群組、解組、層級調整全部可用鍵盤。可匯出 PNG 或 SVG 分享,或匯出 JSON 保留完整狀態,下次打開繼續編輯。

使用方法

1. 從工具列選取 UI 元件（例如矩形、文字區塊、按鈕、圖片佔位符或輸入框），點擊畫布將其放置。
2. 拖曳元件調整位置，拉動控制點調整大小，雙擊編輯文字。將多個元件群組以便整體移動。
3. 將線框圖匯出為 PNG 圖片以便分享，或儲存為 JSON 格式，方便之後重新載入並繼續編輯。

何時使用

• 簡報前 15 分鐘畫出三個畫面變體,先把方向定下來。
• 在 Slack 上貼張排版草圖,比用文字描述清楚太多。
• 教新進設計師理解低保真稿和高保真稿的差別。

結果

一位產品經理為行動版登入頁面勾勒草稿：放置 Logo 佔位符、電子郵件與密碼輸入框、登入按鈕以及「忘記密碼」連結，接著匯出 PNG 分享至 Slack 頻道。

常見問題

這個工具跟 Figma 有什麼不同?

Figma 適合做高保真:元件、原型、團隊協作都很完整。這邊刻意維持低保真,一小套基本形狀,不讓你陷在樣式細節裡。幾分鐘就能把一個畫面想法落下來。產出是用來釐清思路,不是用來交付。

怎麼一像素一像素地移動元件?

選取元件後用方向鍵,一次移動 1 像素。按住 Shift 加方向鍵變成 10 像素一階。要改尺寸就拖角落把手,按住 Shift 拖動可保持比例。

可以把一份原型裡的元件複製到另一份嗎?

兩份都先匯出 JSON,在文字編輯器把要的元件片段從第一份貼到第二份,再重新匯入就能看到新形狀。大多數人不會這麼麻煩,直接用 Ctrl+D 在同一份原型內複製。

為什麼 JSON 檔有時比 PNG 還大?

JSON 把每個形狀的位置、填色、描邊、字體與文字內容都用可讀文字存起來。PNG 則是單層點陣圖。文字多、形狀多的原型,JSON 可能比 PNG 更大,但只有 JSON 能讓你之後繼續編輯。

可以新增自訂形狀嗎?

工具裡沒有直接新增自訂形狀的入口,但你可以把現有元素群組(Ctrl+G)成一個可重複使用的單位,例如搜尋列或標籤列。匯出 JSON,把那段群組複製出來貼進新檔,就是一套自己的小元件庫。

相關工具