易口袋Pockez
線框圖工具
免費線上線框圖工具：拖放按鈕、輸入框、導覽列等 27 種元件畫出網頁與 App 介面草圖，匯出 PNG 或 JSON，也能產生分享連結給同事。免註冊，資料不上傳。
- 27 種介面元件
- 分享連結給同事
- 匯出 PNG
- 自動儲存草稿
點元件插入畫面中央，或直接拖進畫布。雙擊文字可以直接編輯；元件上的文字請在屬性面板的「文字」欄修改。
按住空白鍵或滑鼠中鍵拖曳可移動畫面，Ctrl＋滾輪縮放；全螢幕時滾輪也能移動畫面。手機請用「⋯ 更多」裡的「拖曳移動畫面」。
草稿只自動儲存在這個瀏覽器（localStorage），不會上傳；換裝置或清除瀏覽資料前請先匯出 JSON。
🔒 所有計算都在你的瀏覽器內完成，資料不會上傳到任何伺服器。
什麼時候會用到
- 網站與 App 提案：開發前先畫出頁面配置，和客戶或主管確認需求。
- 課堂與作業：UI／UX 課程快速畫出介面草圖，不用安裝任何軟體。
- 需求溝通：PM 畫好草圖後按「複製分享連結」，工程師與設計師打開就能看到。
- 個人專案：寫程式前先規劃部落格或作品集網站的版面。
使用說明
- 先在右側「畫布設定」選好桌機、筆電、平板或手機尺寸，再從左側元件庫點一下元件放到畫面中央，或直接把元件拖進畫布。
- 點選物件後在右側屬性面板修改填色、框線、文字、字級與位置大小；一次選多個物件可用「⋯ 更多」裡的「對齊」「群組」排整齊，做錯按 Ctrl＋Z 復原。
- 完成後按「匯出 PNG」下載圖片（可選 1～3 倍解析度），或按「匯出 JSON」保存可再編輯的檔案，之後用「匯入 JSON」接著畫。
實際範例
在 800×600 的編輯區打開 1440×900 的桌機畫布，按「符合畫面」時縮放 = min((800 − 80) ÷ 1440, (600 − 80) ÷ 900) = min(0.5, 0.58) = 50%，畫布置中後左右各留 40px、上下各留 75px；換成 375×812 的手機畫布則是 (600 − 80) ÷ 812 ≈ 64%。
物件 A（X 100、Y 50、寬 200、高 40）與 B（X 400、Y 120、寬 100、高 100）一起選取後按「靠左」，B 往左移 300 到 X 100；改按「靠下」，兩者下緣都對齊到 220，A 往下移 130。只選 A 按「靠右」時改成對齊畫布右緣，A 往右移 1140 到 X 1240。
開啟「對齊格線」後把物件拖到 X 14 會吸附到 10、拖到 X 15 會吸附到 20。2026 年 10 月 14 日 15:30 匯出的圖片檔名是 wireframe-20261014-1530.png，同一分鐘匯出的 JSON 則是 wireframe-20261014-1530.json。
結果怎麼看
- 上方的縮放百分比只影響畫面顯示，不影響物件的實際尺寸與匯出結果；屬性面板的 X、Y、寬、高一律是 100% 時的像素，X、Y 是物件左上角相對畫布底板左上角的位置。
- 按鈕、卡片、表格這類元件是由多個圖形組成的群組：屬性面板的填色與框線改的是主體（例如按鈕底色），文字欄改的是主要標籤；要修改其中的小零件，先按「解散群組」。
- 狀態列顯示「已自動儲存在這個瀏覽器」代表草稿已寫入；若出現紅字的無法儲存提示（無痕模式或儲存空間已滿），請立刻用「匯出 JSON」備份。
原理與計算方法
- 畫布使用開源的 Fabric.js 6 在 HTML canvas 上繪製，每個元件是一組向量圖形（矩形、圓形、線條、文字），縮放檢視時不會模糊。
- 對齊：只選一個物件時以畫布底板為基準，選多個時以所有物件外框的聯集為基準，計算每個物件外框（含旋轉後的範圍）需要的水平或垂直位移。
- 復原與重做：每次修改後把整份畫布存成一筆 JSON 快照，最多保留 100 筆；內容沒有變化不記錄，復原後再做新修改會捨棄後面可重做的紀錄。
- 存檔：自動儲存與匯出都是 {app, version, canvas} 格式的 JSON。匯入時檢查格式版本與每個物件的類型，只接受本工具會產生的圖形與文字，圖片、圖樣等會載入外部資源的內容一律拒絕。
- 匯出 PNG：暫時把檢視還原成 100%，只裁切畫布底板範圍並依倍率放大繪製，再用瀏覽器的 canvas.toBlob 產生 PNG，全程不經過伺服器。
適用限制
- 只適合規劃版面與資訊架構，沒有可點擊的互動原型、多頁面切換、共用元件或多人協作。
- 不能插入真實圖片或圖示，也不能匯出 SVG、PDF；需要清晰的圖片請選 PNG 3×。
- 草稿存在單一瀏覽器的 localStorage（容量通常約 5 MB），內容非常多時可能存不下；匯入檔案上限 10 MB，畫布寬高上限 5000 px，用 3× 匯出超大畫布可能超過瀏覽器的 canvas 尺寸限制而失敗。
- 文字使用裝置上的系統字型，同一份 JSON 在不同電腦或語言環境開啟，字寬與換行可能略有不同。
常見問題
畫到一半關掉頁面，內容會不見嗎？
不會。每次修改都會自動存成這個瀏覽器裡的草稿，下次打開會自動載入。但草稿只存在這台裝置的這個瀏覽器，清除瀏覽資料、用無痕視窗或換電腦就看不到，重要的版面請按「匯出 JSON」備份。
匯出的 PNG 範圍是什麼？為什麼沒有格線？
只輸出畫布底板範圍內的內容，超出底板的部分會被裁掉；格線與選取框只是編輯輔助，不會出現在圖片裡。倍率選 2× 時，1440×900 的畫布會得到 2880×1800 像素的圖片。
手機上可以用嗎？
可以檢視與做基本編輯：點元件庫插入元件、拖曳物件移動、在屬性面板修改文字。手機不支援把元件拖進畫布與雙指縮放，請用「＋／－」縮放、「⋯ 更多」裡的「拖曳移動畫面」平移，或按「全螢幕」取得更大的畫布。
可以匯入 Figma 或其他工具的檔案嗎？
不行，只能匯入本工具匯出的 JSON 檔。為了安全與離線使用，含圖片或外部資源的檔案會被拒絕；需要放圖片的地方可以用「圖片佔位」元件標示。
怎麼把線框圖分享給同事討論？
按「複製分享連結」，整個畫布會壓縮後放在網址的 # 後面，對方打開就能看到同樣的草圖，並在自己的瀏覽器修改；這段不會傳到伺服器。連結是當下的快照，之後修改不會同步。元件很多、連結太長時會提示改用匯出 JSON。
線框圖和設計稿有什麼不同？
線框圖用灰階方塊表示版面與功能位置，用來確認結構；設計稿（Mockup）則加上配色、字型與圖片，是最終的樣子。先畫線框圖可以避免太早糾結在美觀細節。
有免費、免安裝的 Figma 替代工具嗎？
本工具適合快速畫低擬真的線框圖，免註冊、打開就能用；需要多人即時協作、元件系統或高擬真設計時，Figma、Penpot 等專業工具會更適合。
可以畫手機 App 的畫面嗎？
可以。在「畫布設定」選手機尺寸，就會用手機畫面大小作畫，按鈕、輸入框、導覽列等元件都能使用。