10个用于设计网页线框图的优秀工具

线框图是一个可视化的导图,可以用其来诠释出一个网站的龙骨,同时也可以称其为一个页面的示意图或屏幕的蓝图。线框图非常容易创建和进行有必要的修改。帮助设计师以低成本且高效率来进行迭代设计。 

为了对线框图进行更好的设计与修改,我们会选择一些优秀的工具,当然少不了的就是Axure、MockFlow以及Balsamiq Mockups等。 

在设计初期,你可以在纸上或白板上绘制基本的草图,来帮助完成一些用户界面和任务流程概念。这些类型的线框图可以很好满足小型的项目,使你可以直接 开始进入到开发的阶段。但是,对于大多数的项目,我们就必须借助一些设计软件的帮助,如Adobe Illustrator,Visio或 OmniGraffle。 

这些线框图具有非常高的价值,因为它们便于修改,也可以使设计团队更容易的在项目中进行沟通和管理。 

一个线框图成品所显示的网页布局样板 

为了做出一个优秀的线框图和网页草稿,我们可以考虑从以下10个优秀的工具中做出选择,帮助你进行网页页面创作、线框图草图设计: 

Axure 

Axure是一款非常适合设计师的工具,它能够创建线框图、设计流程图、进行交互设计、自动输出网站原型、自动输出word格式规格文件。拥有现成 的部件包括按钮,表单域,形状和动态元素,您可以选择在一个自己熟悉的环境下进行编辑,甚至你可以创建自己的自定义widget库。 

感兴趣的童鞋可以试着学习使用一下 

Windows版:http://axure.cachefly.net/AxureRP-Pro-Setup.exe 

MAC版:http://axure.cachefly.net/AxureRP-Pro-Setup.dmg 

Axure6.5汉化语言包下载地址:http://www.axure.us/283/ 

MockFlow 

MockFlow是一款很优秀的工具,类似于 Axure ,不过它是一款完全基于Web浏览视窗的产品原型制作工具,可以帮助你对自己的软件用户界面以及在网页重构时进行设计和实时协作。它配备了大量的内置组件 和图标,如按钮(Button)、图片(Image)、文字面板(Text Panel)、下拉式菜单(Droplist)、进度条(ProcessBar)等等。 

Balsamiq Mockups 

使用Balsamiq Mockups就像是进行数码绘画,但有略有不同。你可以轻易的进行调整和重新编排,最终的结果就像是一幅赏心悦目的涂鸦,除了真实的纸笔,目测它是最方 便的工具了。软件带有75个预置控制可供选择,你可以用它设计出一个超级简单的对话框。也可以用它设计出任何一个成熟的应用程序,无论是一个简单的网站, 还是一个富互联网应用都可以用它来完成。

 Pencil Project

 

作为一款免费的Firefox插件,这款工具具备一些关键的功能,如内置的模板,支持多页文件,以及多个导出选项。虽然简单但是非常实用,适合绘制一些简单的界面(这当然不包括那些爱好用wrod绘制高达的软件使用者)。 

HotGloo 

这是一个完全基于Web的设计工具,有很多实用的功能,包括让各个项目可以进行拖放以及便于对整个设计进行规块化管理。同时它也支持实时协作。 

Mockingbird 

这个工具也是基于Web,可以把多个版面编排在一起,以帮助你连接多个实体模型。(在这里提一下,开发这个工具的是一男一女两个印度人) 

Cacoo 

这是一个很酷的在线绘图工具,可让你绘制不同类型的图表,如网站地图,线框,UML图和网络图。

 ProtoShare 

ProtoShare是一个十分便捷的在线原型制作工具,侧重于团队协作。团队成员可以通过这个工具对工作进行审查,并及时提供反馈,对线框图或内容进行建议. 

iPlotz 

iPlotz是一个很棒的工具,可以让你快速允许您为网站和应用软件快速的创建可点击的原型,导航,页面排版和线框图。 

OmniGraffle 

这是一个Mac OS的应用程序,拥有的各种工具,可以让你建造出优秀线框模型、绘制图表、流程图、组织结构图以及插图。如刚才所言,我们需要注意,OmniGraffle只支持苹果的设备,在其主页页面就有提供下载。 

Via:smashinghub

编译:oschina.net

时间: 2024-09-11 06:04:43

10个用于设计网页线框图的优秀工具的相关文章

设计网页线框图的十个优秀工具

线框图就是一个可视化的导图,它可以用来诠释出一个网站的龙骨,同时它也可以称作为一个页面的示意图或屏幕的蓝图.而线框图则非常容易创建和进行有必要的修改.从而帮助设计师以低成本且高效率的来进行迭代设计. 而为了对线框图进行更好的设计与修改,我们就会选择一些优秀的工具,其中当然少不了的就是Axure.MockFlow以及Balsamiq Mockups等. 在你的设计初期,你可以在纸上或白板上绘制最基本的草图,从而来帮助完成一些用户界面和任务流程概念.而这些类型的线框图还可以很好满足小型的项目,然后使

【设计】线框图、原型和视觉稿的区别

在平时我们会遇到线框图.原型.视觉稿等.高保真.低保真.PRD.UI.贴图等不同的概念,那么他们究竟有哪些细节方面的差异呢? 本文做一些简单的分析和说明,如下: ================================================== 本文介绍了线框图 (Wireframe).原型 (Prototype) 和视觉稿 (Mockup) 它们三者之间严谨的功能区别. 对于很多搞信息技术的朋友们(非设计师)在交付设计时,就混淆了这几个词汇,认为它们都代表同一样东西:表达自己

网站交互设计:线框图、原型和视觉稿的区别

中介交易 SEO诊断 淘宝客 云主机 技术大厅 [编者按]本文译者@小轰同学 .文中介绍了线框图 (Wireframe).原型 (Prototype) 和视觉稿 (Mockup) 它们三者之间严谨的功能区别. 对于很多搞信息技术的朋友们(非设计师)在交付设计时,就混淆了这几个词汇,认为它们都代表同一样东西:表达自己创意的线框手绘设计稿.那么如果希望在工作中更好的表达自己的想法,我们需要对这三者有更好的认识. 混淆概念便带来麻烦:他们分不清用户体验设计师的作品,常常感到困惑.「这按钮他妈的怎么点不

一分钟就能制作出漂亮的网页按钮(图)_常用工具

    一分钟就能制作出漂亮的网页按钮(图),Crystal Button水晶按钮可以帮你在一分钟内打造出晶莹剔透的网页按钮.    Crystal Button水晶按钮可以帮你在一分钟内打造出晶莹剔透的网页按钮.  Crystal Button小档案 软件版本:2.20 软件大小:1034KB 软件性质:共享软件 适用平台:Windows 9x/Me/NT/2000/XP 下载地址:http://sq2.onlinedown.net/down/HA-CrystalButtonv2.20.exe

10款线框图和原型图设计软件

  不管你设计网站也好,设计应用界面也好,都需要有出众的视觉设计,从而吸引用户.但在视觉稿输出之前,比如首先要进行线框图设计和原型图设计,来规划站点地图和应用流程 我们来盘点一下最好用的十款线框图和原型图设计软件,提高你的设计效率 Solidify ZURB旗下的一款产品, Solidify 允许用户将草图.模板.线框图转化为可点击的原型图.而且,很容易测试,节省时间.还可以与其他设计师分享你的工作成果,以便最快得到反馈. PowerMockup 另外一款要推荐给大家的就是 PowerMocku

交互设计师必用50个线框图套件和在线设计工具

  在线设计模板 Wirefy 以内容优先为原则的线框图在线设计工具.允许你运用标准元素设计出响应式线框图. Lumzy 网页设计和界面设计的原型设计工具. Mockup Builder 另一款原型设计工具 Mobilizer 选择设备,输入网址,立即呈现出设备中的效果图. 列表框交互"> Proty 实现快速交互线框图的好工具,可定制化 Solidify 可点击的原型设计工具.可验证用户流程. Frame Box Mockup Designer 使用本地存储的模型工具 hhhhold 只

聊聊线框图——为线框图多留点时间

线框图是交互设计师必不可少的产出物,它在交互设计师的工作中扮演了如此重要的角色,以至于交互设计师经常被认为是个画线框图的,但是无论是设计师本人还是项目组成员,对于线框图存在的意义未必有足够的认识. 项目为何需要线框图? 为什么不缩短周期,直接跳转到视觉设计呢? 对于设计师而言,疑问一样存在: 线框图给我们带来什么价值? 在我们想进行线框图培训时,疑问有: 不就是画个草图吗?还需要学习? 如果大家都把线框图理解成"草图",那么按照正常逻辑,草图的产出一定是比视觉稿更快而不是更慢才对,但是

交互设计师经验:为线框图多留点时间

注:heidi写这系列的专业文章,并不说明目前heidi做得有多好,相反,每当我发现自己做得不够好时或者遇到问题时,都喜欢反思并总结,可是由于以前养成的不良习惯,导致我最终写出来的东西总是像专业教程,这也导致会有一些小朋友误认为我是专业人士,其实真的不是这样,我写出来未必是专业文章(有时只不过表现如此),我只是觉得这个话题值得探讨,值得分享,也值得自己继续努力而已.所以,也请不要四处转载. ----------------------低调的分割线------------------ 线框图是交互

网站线框图工具

英文原文:http://www.editorial.co.in/wireframes/wireframes.php 当你需要为网站快速创建一个直观和可用的用户界面的时候,在写代码之前做好设计是基础.一个普遍的方法就是通过线框图来展现你的设计,线框图是一种使用线条为基本元素的绘画,与蓝图相对,像框图表现基本的导航和功能块,比如内容.功能等,这些都已经进入网站的创建.线框图的主要原理就是通过归类每一个页面上的入口和出口来保证设计的逻辑流程与功能. 可以在纸上画线框图,这是最快而且最简单的方法.如果时