网站线框图工具

英文原文:http://www.editorial.co.in/wireframes/wireframes.php

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

可以在纸上画线框图,这是最快而且最简单的方法。如果时间有限,就把布局摄像画在页面上,重点表现每一个元素指向何处。

一些人更喜欢用Visio,Adobe Illustrator, Photoshop, Freehand, Fireworks,当然还可以是PowerPoint,Dreamweaver, Adobe Indesign等等。这里列出一些另外的工具,是世界上其他人可能在是用的。在此之前,首先大概了解这些工具都能带来什么好处:

  • 在开发的前期,线框图是非常重要的组成部分,它能(影响)用户的期待,由于对网站了解更多,促进对网站的理解和流程规划。
  • 在项目进程中,能够在线框图的基础上考虑变更和提出新的需求。使用线框图可以容易的表达常见的页面结构和单独页面内容需要。
  • 线框图多数情况能够由于更好的输出引致更加卓越的产品,因为它在获得有价值的和准确的输入方面非常有帮助。
  • 线框图/原型使得评价和对比不同的想法和不同的设计更加容易,更进一步的,他也能更加容易的改进。
  • 由于线框图被审核通过,则会避免因为程序员对代码的无尽修改而造成的时间和费用的浪费。

Website Wireframes Tools (Web)--网站线框图工具

这是一个基于web的工具,用于构建网站的线框图。线框图就是一种对网站内容的简单视觉表现形式,节省开发者和客户去设计网站内容布局的时间。这个工具可以在几分钟内构造线框图,如果需要的话,可以通过email、即时消息或者电话的形式将线框图预览地址发送给他人。即使是不同地方的人也能够同事看到它,根据回馈、讨论、想法、建议等进行快速的修改。对于我来说两个非常有用的功能——首先是你可以每次修改的时候建一个信的版本,易于比较,也可以很容易的回到先前的任何一个版本去。第二个是上面说过的,结果可以分发给其他不同地方的人。

只需提供邮箱新建一个账户,就可以免费使用这个工具了!

Oversite (Mac, Win, Linux)

OverSite  提供了控件菜单,用于为网站创建线框图、概念图或者软件原型。OverSite有很多组件和形状以供选用来创建线框图。他的拖曳功能很像切蛋糕。另一个我个人非常喜欢的功能就是你可以为你创建的组建添加标注,在耗时较长的开发中这是非常有用的,也能够帮助理解情景概念。它有很多围绕软件原型的功能。如果你需要使用它创建网站构架,则OverSite能够自动生成网站地图表示构架。可以将网站构架和线框图导出到HTML(也可以导出成PDF格式,当然PDF格式就没有点击链接功能了)。这个软件最低35美元,适用mac,window 和linux操作系统。

时间: 2024-10-25 10:49:28

网站线框图工具的相关文章

11个完全免费的线框图工具

译文出自:rockux.com

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

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

20个出色应用程序的移动线框图设计工具(图)

如果你想成功完成一套设计流程,网站或应用程序的线框图设计,以及有效的规划是必不可少的.这不仅可以帮助你减少开销(尤其体现在设计和开发成本上),而且可以进一步扩展最初的创意,并有效构建网站或应用程序的功能和架构,更重要的,还可以有效地收集到一些极具价值的早期反馈信息. 笔者收集了20个最好的移动网站和App应用的线框图设计工具,每一款工具都具有一些独特的功能特点,看看这些工具的界面吧: 1.Proto .2.Protoshare. 3.Mockflow.4.Axure. 5.Fluid.6.Jus

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

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

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

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

网站设计分析:画线框图容易忽略的几件事

通过工作中的观察与总结,我发现不少新人交互设计师以及产品人员,在画线框图时都会忽略一些重要内容,导致和视觉设计师的沟通成本增高.返工增多.工作效率下降.设计质量下降等重要问题.为了解决这些问题,一方面需要加强沟通,另一方面还需要多站在视觉的角度考虑线框图的设计,使大家的配合更默契. 那么具体怎样做呢?以下就是我工作中积累的一些心得,希望对大家有所帮助. 一.通过明暗对比表达 以前,我是这样画线框图的,这样能非常清晰的展示各模块元素之间的布局关系.然后我会告诉视觉,这些模块或元素之间的优先级关系是

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

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

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

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

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

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