網頁設計的 wireframe 全攻略！6大 wireframe 工具推薦

擁有網頁設計需求的你，想必對 wireframe不陌生吧！wireframe 是網頁設計前最重要的構圖，主要是使用單一的灰階顏色、線條、符號和框線，來構出網頁的初步排版，簡單的排版，正是建立頁面時的最好設計圖。所謂工欲善其事，必先利其器，在進行網頁設計前，找到實用的 wireframe 工具也很重要！在今天的文章中，我們將會為大家進行6個 wireframe 工具推薦，將以下的 wireframe 軟體納入口袋名單中，為網站畫出完整藍圖！

市面上的 wireframe 軟體分類

目前，網路上大家熟知的 wireframe 工具可分為3大種類：免註冊型、註冊型與付費型。免註冊型 wireframe 軟體為線上平台，不需帳號即可使用，但功能通常較簡略。註冊型 wireframe 軟體通常只需要一個帳號，便可免費使用 wireframe 工具的齊全功能。而付費型的 wireframe 軟體雖然顧名思義為需要付費才能使用，但通常有試用版，可供用戶使用，不過功能較不齊全。

2種 wireframe 工具免費使用、免註冊

framebox

在 frame box 上，用戶僅能畫簡單的 wireframe 圖，並線上分享。由於操作界面不是很完善，因此用戶也無法下載完成的圖檔。

frame box 平台網址：http://framebox.org/

wireframe.cc

用戶不用註冊，便可使用 wireframe.cc 。 wireframe 的工作版面簡單清晰，而畫好的圖可以儲存在 wireframe.cc 的伺服器，並透過網路分享，但此平台的缺點是無法將你設計完的圖檔下載。

wireframe.cc 平台網址：https://wireframe.cc/

2款註冊型 wireframe 工具

以下整理出只需註冊不需額外付費，且功能較齊全的 wireframe 軟體。

Gliffy

在 Gliffy 註冊帳號，便可畫 wireframe 圖和 diagram 圖。同時，又可將你的設計下載為 svg 向量圖或 jpg 與 png 圖檔，可謂是很方便的工具。

Gliffy 平台網址：https://www.gliffy.com/

Google Drawing（Google繪圖）

由Google開發的免費在線繪圖軟體Google Drawing，可繪製流程圖、Landing Page Wireframe….等各類圖表，最大的好處在於Google Drawing支援多人編輯，你可以與你的團隊共同完成Wireframe，且檔案是儲存在雲端上，不需要下載再轉傳給其他人，只要有Google帳號，任何人都能免費使用Google Drawing。

Google Drawing 網址：https://docs.google.com/drawings/create?hl=zh-TW

功能最齊全！2個付費型 wireframe 工具

Cacoo

Cacoo 算是一款功能多樣化的 wireframe 工具。除了可以多人同時編輯、遠端即時協作，Cacoo的工作版面也簡單明瞭，讓人可以一眼找出自己所需的功能。除了 wireframe ，也支援 diagram 的設計。而在下載圖檔方面，如果你是免費版的用戶，只能下載 png 檔，如果要下載向量圖，需每月付費美金5元的會員費，升級帳號。

Cacoo 平台網址：https://cacoo.com/

MockFlow

MockFlow 也是一款多功能的付費 wireframe 工具。在設計 wireframe 時，可依照自身的設計風格，以素描、線條或是高保真度的呈現方式，完成設計圖。如果你的網頁設計涵蓋較多頁面，則需要每年付費16美金，升級成進階會員，才能使用更多附帶功能。

MockFlow 平台網址：https://mockflow.com/

戰國策網站設計，協助你輕鬆設計網頁

網頁設計與架設是一項非常需要技術與專業知識的功夫，對於許多初次接觸的經營者而言，若要一個人自己包下全部的工作，將會耗費龐大的心力與時間成本。此時將網頁設計交給專家來做，會是你很好的解決方法！同時我們也提供你WordPress虛擬主機租用服務，讓你的網站運行更加順利。月底前訂購WordPress虛擬主機租用服務輸入以下折扣碼，享有更多優惠：
折扣碼：mkt-c7707　＞＞＞戰國策全系列商品服務85折
折扣碼：mkt-c7708　＞＞＞WordPress全系列主機享折價1000元
歡迎加本公司官方LINE:@119m 或致電0800-003-191

直接上網訂購 

歡迎您隨時聯繫我們，讓戰國策集團為您打造精美的網頁。