19 4 月

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

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

 

市面上的 wireframe 軟體分類

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

 

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

framebox

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

wireframe 軟體

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

 

wireframe.cc

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

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

 

2款註冊型 wireframe 工具

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

Gliffy

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

wireframe工具推薦cacoo

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

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

 

MockFlow

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

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

 

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

在互聯網的時代下,想在短短時間內留住客戶的心,吸引人的網頁設計就非常重要。還在煩惱要如何開始設計網頁嗎?那就將網頁設計交給戰國策集團,我們具備 UI Designer 及 UX Designer 等專業資源,相信能為您的品牌帶來最大效益,加深企業形象於客戶心中,為您降低行銷成本並搶占市場先機。

 

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

 

想了解網頁設計的精髓嗎?這些文章你可能會有興趣:

網頁設計六大關鍵,你的網站擁有這些網頁設計必備元素了嗎?

即將執行網頁設計?首先你需要了解自己的需求以及找到對的網頁設計公司

Share this