什麼是線框設計工具?

一款基於本機的線框圖工具,可快速勾勒頁面版面配置與 UI 原型。將按鈕、文字區塊、圖片、輸入框等常見 UI 元件拖放至畫布,建立線框圖後可匯出為 PNG 或 JSON 供後續編輯。

使用方法

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

結果

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

相關工具