如何创建网站线框

网站线框是简单的线条图,显示网页上元素的位置。 通过在设计过程开始时编辑简单线框的布局,而不是稍后的复杂设计,您可以节省大量时间。

使用线框是开始网站项目的好方法,因为它可以让您和您的客户专注于布局,而不会分散色彩,类型和其他设计元素。 专注于网页上的内容以及每个元素占用的空间百分比,这可以根据客户的需求来确定。

03年3月

什么包含在网站线框中

简单的线框示例。

一个网页的所有重要元素都应该在你的网站线框中表现出来。 使用简单的形状而不是实际的图形,并标记它们。 这些要素包括:

02 03

如何创建网站线框

OmniGraffle截图。

有多种方法可以创建网站线框。 他们包括:

用手在纸上画它

这种方法在与客户面对面时派上用场。 在纸上画出你的布局想法,重点在哪些元素应该去哪里。

使用Adobe Photoshop,Illustrator或其他软件

大多数图形软件包都配备了创建线框所需的所有基本工具。 只需简单的线条,形状和文本(用于标记元素)即可创建可呈现的线框。

使用为此类任务创建的软件

虽然Photoshop和Illustrator可以做到这一点,但一些软件包是专门为这类工作开发的。 OmniGraffle是一款通过在空白画布上提供形状,线条,箭头和文字工具来简化线框创作的软件。 您甚至可以在Graffletopia下载自定义图形集(免费),这样可以为您提供更多元素,例如常用网页按钮。

03年03月

好处

通过网站线框,您可以调整简单的线条图以实现所需的布局。 而不是在一个页面上移动复杂的元素,可能需要很少的时间将几个框拖入新的位置。 对于您或您的客户来说,首先关注布局也会更有效率......您不会从“我不喜欢那种颜色!”这样的评论开始,而是从最终的布局和结构开始这基于您的设计。