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 線框圖工具,快速完成產品草稿圖

留言

這個網誌中的熱門文章

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

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

Google forms 表單字體大小調整教學,可替換中文字型新功能推出

幫助工作專注與放鬆的 9 個大自然、白噪音、 Lo-Fi 免費音樂電台

pyTranscriber 影片自動上字幕免費軟體!10分鐘搞定1小時影片

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

Outlook 職場必備郵件整理圖解教學,網頁版 11 個排程管理技巧

3款一鍵美化截圖工具:Screenzy、 BrandBird、 Pika 功能比較

Supercoloring 免費兒童著色本,五萬張著色圖下載或線上塗鴉

Google 表單的 10 個專業問卷調查設計秘密教學