Zen Wireframe 極簡 Wireframe 線框圖工具,快速完成產品草稿圖



要開始討論宣傳網頁的版面,要確認新產品網站的 Landing Page 規劃,或是要思考產品 App 初期的功能架構,還是任何跟設計初期的版面架構規劃有關的草圖需求,這時候都可以先畫出一個「 Wireframe 線框圖」,在這樣的「 Wireframe 線框圖」中還不需要太精細的設計或真的做出功能,反而是先用簡單的線條畫出草稿,讓大家腦中的想法有一個基礎但具體的討論圖像即可。這樣的「 Wireframe 線框圖」除了手繪,或是用任何可繪圖軟體(例如簡報軟體)製作外,也有專門的「 Wireframe 線框圖」工具。

今天要分享一個專門用來製作「 Wireframe 線框圖」的線上工具,他的名稱是「Zen Wireframe」,正如其名,他希望避免掉我們花太多時間在其他「不是初期草稿階段要討論的功能與設計」,以免基本功能、架構還沒確定,就在討論可能不是未來真正需要的細節。

所以這款訴求「 Zen (禪風、極簡風)」的工具,把功能限縮在就是剛剛好、最快速完成「 Wireframe 線框圖」的需求上。




Zen Wireframe」有免費版本、付費版本,可以用 Google 帳號註冊一個免費帳戶,這時候可以擁有:
  • 所有「 Wireframe 線框圖」繪製功能。
  • 可匯出 PNG、 JPG 圖檔。
  • 可分享網址讓其他人查看即時更新的草圖。
  • 可繪製三份草圖文件。



「Zen Wireframe」的工具介面非常簡潔易懂,主要操作三大功能即可:
  • 左邊可以插入各種「 Wireframe 線框圖」元素,內建了大約 56 種以上的常見內容。
  • 上方可以快速插入最常用的基本框線。
  • 右方可以針對某一個元素(例如按鈕、搜尋欄等),調整大小、顏色等。




在左上方的「 Add Frame 」選單,可以選擇常見的幾種版面格式,例如網頁、手機、平板等。




雖然是英文工具,但是在製作內容時可以輸入中文。




「Zen Wireframe」還內建了一個快速插入 ICON 的工具,可以讓我們在版面上快速設定一個圖示的大概樣貌。




「Zen Wireframe」提供了匯出成圖檔的功能,利用右上方的「 export 」即可操作。

如果想要分享成網頁,讓其他人看到即時更新,則可以利用右上方的「 Share 」進行設定。免費版提供一個可公開分享的網址,只要把網址分享給其他人,就能不需帳號查看內容。




如果工作上需要快速繪製「 Wireframe 線框圖」,那麼「Zen Wireframe」是一個簡單好上手,幫我們專注、快速完成草圖的工具。

有興趣的朋友,還可延伸參考:
(歡迎社群分享。但全文轉載請來信詢問,禁止修改上述內文,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang 異塵行者,及附上原文連結:Zen Wireframe 極簡 Wireframe 線框圖工具,快速完成產品草稿圖

留言

這個網誌中的熱門文章

時間管理Q&A:下班後如何避免滑一下手機就沒時間了?4步驟調整習慣

只需準備一本空白筆記本,讓年度計畫有效實現

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

[高效能職場筆記法-3] 練習五個覆盤步驟,用解決問題取代空想計畫

Wordle 正在風靡網路圈的每日一單字益智猜謎遊戲

上千個兒童免費數學遊戲,不只線上數學練習,可列印數學學習單

內建 Windows 10 螢幕錄影功能:用遊戲列錄製軟體教學影片

Draw.io 中文線上製作流程圖首選!專業水準完全免費

2022 起始:停止花太多時間做計畫與整理,執行就是你的計劃

Pomotimer 最簡單番茄工作法計時器,需要時開啟立即可用