當人們全身心的投入到某個活動中時，他會對其他不相關的物體視而不見，我們把這種狀態叫做“流”（Flow）。交互設計的過程，無非是把用戶的使用 流或者工作流表達出來，方便研發團隊理解。 產品設計師對于wireframe應該非常熟悉不過，無論項目大小，人員多少，都離不開交互框架的繪制，也就是我們說的wireframe design。

Wireframe是整合在結構層的全部三種要素的方法：通過安排和選擇界面元素來整合界面設計；通過識別和定義核心導航系統來整合導航設計； 通過放置和排列信息組成 部分的優先級來整合信息設計。通過把這三者放在一起，wireframe可以確定一個建立在基本概念結構上的架構，同時指出了視覺設計應該前進的方向。

1、Justinmind – 用于創建網站交互框圖

2、iPhone Mockup

3、Lumzy

4、Cacoo – 創建在線實時的協作系統的框圖

5、fluidIA

6、Serena Prototype Composer

7、MockFlow – 在線框圖工具

8、Website wireframes – Mockingbird

9、DUB – DENIM

10、Future of Wireframing – HotGloo

11、Pencil Project

12、Mockup Builder – Free online web prototyping tools, software

13、Tiggr Mobile Apps Builder

14、Frame Box

15、Mockabilly – App for creating mockups on iPhone

16、Online UI Mockups and Wireframes

17、Wireframes and Prototypes for Web and Mobile Applications

18、Balsamiq Mockups

19、Online Diagram Software and Flowchart Software

20、A GUI Design Software for clickable Wireframes

21、GUI Design Studio

Source: http://designmodo.com/free-wireframe-mockup/

原文鏈接：http://www.oschina.net/news/24587/free-wireframe-mockup

【編輯推薦】

1.  敏捷開發中比每日會議更瘋狂的半日會議！
2. 繼續工作 還是辭職做移動游戲開發者？
3. 細數2011年對開發者而言的十個重大事件
4. 51CTO美國現場報道：微軟Build 2011開發者大會
5. 誰將開發出中國第一個互聯網OS