英文原文: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操作系统。