十個免費的網頁草圖設計工具

作者 : Fred Wang
線框(Wireframing)是網頁設計和開發的一個關鍵步驟，它可以作為快速雛型設計，有助提早點出潛在的問題。可以視覺化的方式呈現內容，階層與佈局。

線框讓意見溝通更容易，減少範圍蔓延，降低因後續設計改版造成的專案成本，並提供更早的前端可用性和功能測試。

下面介紹一些免費的線框與草圖繪製工具。

1. Mockingbird

這是以Cappuccino框架為基礎的網頁測試版軟體，用來建立，連結，預覽和分享網站或應用程式的線框/草圖。

2.Lovely Charts

這是一個線上繪圖工具，可以建立flowcharts, sitemaps, 組織圖和線框等圖形。

3. Cacoo

這是一個線上繪圖工具，可以建立sitemaps, wireframes, network charts等圖形。

4. Gliffy

這是一個網頁應用程式，可以建立process flow diagrams，組織圖，Floor plans，商業流程，網路圖，技術圖，網站線框等
5. Lumzy

這是一個網頁與應用程式模擬與雛型建立工具，可以增加事件來模擬使用者的動作。也提供即時協作功能，如團隊編輯，對談等功能。
6. Mockflow

這是Adobe Flash平台的應用程式，具備乾淨簡約有組織的介面，編輯功能廣泛。可以拖拉元件模擬網頁的線框。

7. Pencil Project

這是一個open source工具，用來繪製圖表，GUI雛型等。有Firefox add-in與獨立的應用程式(linux and windows

8. SimpleDiagrams

這是一個小型的桌面應用程式，可以幫助你快速地表達想法。建構在Adobe AIR平台上可以在Mac, Windows和Linux上運行。輸出成PNG檔。

9. Denim

這是一個免費跨平台的桌面應用程式，提供素描，允許在不同的精細水準下設計，是早期腦力激盪與繪製線框的有效工具。

10. Website Wireframe

這是一個簡單快速建構網頁線框的工具。可以透過eMail,簡訊等傳送wireframe的連結提供意見回應，討論與建議。

參考資料 :

1.Grace Smith, “10 Free Wireframing Tools for Designers”, Mashable Tech. (http://mashable.com/2010/07/15/wireframing-tools/)