网页的线框图是非常直观、但是也没什么技术上难点的东西。只需要你大概描出页面上需要的一些元素，比如头部、导航、页脚等等，最多再就是一些交互、内容区域什么的。但这对于任何网络应用的开发都是非常重要的。

当然有很多种方法可以做这件事情，最简单的就是拿起纸和笔，但是在这篇文章中，我们要介绍的是一些非常高效好用的在线原型工具，并且他们完全免费。

1.Lumzy快速制作原型的工具

使用Lumzy你可以为你的应用创建原型图，还能添加一些交互事件。有了它，你可以创建弹出框，交互的页面导航，添加外部链接等等。他对于团队协作设计和交流提供了一个很好的平台，而且他完全免费。

2.Mockup Builder杀手级的原型工具

MockupBuilder最近才发布，很值得期待。他有非常多的功能：UI模型，交互的线框图，页面布局，客户端原型甚至站点地图和屏幕导航。当然，对于与客户和团队成员交流也是非常强大的。并且，他全部免费。

3.Tiggr协作制作原型图

Tiggr的思想是给你需要做成最终稿的所有资源。你可以设计很多的元素，然后分享，其他的协作用户会帮你制作相应HTML/CSS代码，以达到最快生成。花10秒钟注册，你就能享用这个免费的东东了。

4.Frame Box轻量级原型在线制作

FrameBox并没有多么特别的特色。你可以拖放、设置大小、复制粘贴这些UI组件，但是他的特色在于你可以非常轻松的通过它的拖拽很容易就完成你的原型制作。想要用这个轻量级的免费的工具，也需要注册一下。

5.SimpleDiagrams 免费版 (Adobe Air App)

simplediagrams是一个非常小巧的Adobe Air程序，通过他你可以非常轻松的实现自己的想法。拖拽组件，添加图片或者便签，导出PNG图都是他的特色，通过添加一些小功能就能实现一个非常不错的原型图。

6.iPhone Mockup iPhone原型制作

在iPhone Mockup里面你可以使用铅笔模式，也可以使用图表模式的编辑器。不管你选择什么，功能都是一样的，都可以很简单很方便的生成iPhone上的应用原型。你也可以分享给别人，就算你更改了设计，别人通过那个链接也一样可以看到。

7.fluidIA

fluidIA是一个在线的但是可以下载的富用户界面原型设计工具。它基于面向对象的理念，可以让你快速完善。它设计的基本思想是团队中的任何成员，无论是设计师还是工程师都可以自由的设计自己的原型。最近fluidIA的更新稍微慢了点，但是它仍是一个非常优秀的线框图工具。

8.Pencil Project FireFox插件

Pencil Project是一个原型界面设计的Firefox插件，通过它内置的模板，你可以创建可链接的文档，并输出成为HTML文件、PNG、OpenOffice文档、Word文档、PDF。还有什么可说的呢?这么优秀的插件，是每个设计师和开发人员必备啊。

9.CogTool Win MAC下应用程序

CogTool是一个强大原型生成工具，他与别的工具还有一些不同，他可以对你的设计自动根据人类认知模型进行评估。你可以通过一些图标啊按钮啊图片，生成一个描述，然后点击评估的按钮，他就会对你的设计进行人类认知模型的评估，他会告诉你一般人需要多久才能理解你的意图。CogTools有很多用户引导的文档，还有很多教程，论坛上也能让你很快的成长起来。

10.Prototype Composer

Prototype Composer可以让你在真正的代码编写之前就看到网站是如何运行的。以前的那些无数的文字入口，复杂的数据结构以及技术含量不低的UML图，这个工具可以让你很方便的协作完成一个看起来能运行的程序。

社区版本是免费的，他可以让你以用户定义的一个项目做一个样例程序。

11.DUB – DENIM(跨平台应用程序)

DENIM是一个跨平台的桌面程序。他自己的介绍是为早期网站设计提供帮助的非正式工具。他有很多理念来自于纸笔设计原型。你可以快速的画出草图，保证重要的功能优先。但是跟纸笔的草图不同的是，他还可以有交互和动画。

【编辑推荐】

1. 5种超酷的Web页面中Hover效果
2. 19个很有用的JavaScript库强烈推荐
3. 开发者应知的15个很有用的信息图形
4. 推荐5款改善用户体验的jQuery插件