大多数设计师都以这样或那样的方式将他们的设计框框起来，即使这只是他们在一些草稿纸的背面快速画出草图。线框图是网页设计过程中的一个重要组成部分，特别是对于更复杂的项目。线框图在你与客户沟通时会派上用场，因为它能让他们更容易地将你的想法形象化，而不只是口头描述。
营销不再是公正的直接邮件还有广告牌，远不止这些。你必须能够通过对他们的营销努力的关心和奉献来打动你的客户，否则他们就会去另一家代理公司。这就是为什么线框图如此重要。
本指南涵盖了你需要了解的关于网站线框的所有知识。
为什么你应该线框你的网页设计
线框图真的是设计过程的第一步．除非你设计的网站非常最小的简单地说，线框图有助于明确网站不同类型的页面上需要什么，并向客户保证他们得到了他们想要的钱的价值通过他们的在线营销努力。
通过花时间创建至少一个基本的线框，您可以确保您的设计将考虑到所有需要进入设计的不同页面元素，并以最佳的方式放置它们。
线框图还节省了修改高保真对比所浪费的时间，具有成本效益。线框图可以很容易地修改或丢弃。线框图为你的页面布局提供了一个很好的起点和坚实的基础。
线框vs.模型vs.原型
线框图、模型和原型有时可以互换使用，但它们是三种不同的东西(尽管有时它们之间有一些重叠)。每一个设计过程都有稍微不同的目的。
线框图是网页结构和组成部分的基本插图。这通常是设计过程中的第一步。
模型一般注重网站的视觉设计元素。
这些设计通常非常接近或完全相同于实际的最终网站设计，包括所有的图形、排版和其他页面元素。模型通常只是图像文件。
原型是一个模型/对比的半功能性网页布局，用于提供正在构建的实际网站的高保真预览。原型将有用户界面，通常使用HTML/CSS(甚至JavaScript来展示前端界面如何工作)构建。
这一阶段先于对站点的业务逻辑进行编程。虽然它们可能没有完整的功能，但它们通常让客户能够四处单击并模拟站点最终的工作方式。原型可能也可能不包括最终的设计元素。
移动应用程序用户界面流程的粗略草图Guillen费尔南多．
线框图。
接下来是原型还是模型模型，很大程度上取决于你要构建的网站的类型。如果它是一款网页应用，而不是一个简单的静态网站，它可能会从原型设计中受益。
如何创建线框
创建线框可以非常简单，也可以非常复杂。在其最基本的形式中，你的线框可能只是一些图形纸上的草图。其他“线框图”是通过数字方式创建的，实际上更像原型，具有可点击的对象和有限的功能。
通常情况下，对于只有几个页面的网站(如本地餐厅网站)来说，它是相当简单的，但对于更多样化的网站(如一家大学，会有一个更复杂的线框。您创建的线框类型将取决于个别项目的需求，以及您自己的工作流是什么样的。更复杂的项目可能会有更复杂的线框，而简单的网站可能会有更简单的线框。
线框应该包含什么
你的线框应该包含足够的信息，以反映你网站的每个页面需要出现什么。想想大多数网页的一般元素:头，页脚、侧边栏和内容区域。然后考虑您的特定项目将具有的其他元素:动态小部件、基本的站点功能，如搜索栏和导航、图形等。
一旦你对你的网站将包括什么有了一个想法，开始基于这些元素创建你的线框。你想要得到多详细将再次取决于项目和线框的目的。如果你的线框图只是作为你自己参考的指导文档，那么你就不需要过多地参与线框图的制作过程。
另一方面，如果它将被多个设计师或开发人员使用，或呈现给您的客户，那么它就需要更加正式。
低保真线框与高保真线框
当谈到线框的风格时，你有几个选择。有些设计师选择低保真(低保真)线框，基本上就是在普通背景上加上一些标签的线条。这包括手绘线框图和数字线框图，它们通常都非常简单。
一个web应用程序的低保真线框的例子保罗·唐尼．
高保真(hi-fi)线框更进一步，在线框中使用某些设计元素。
这可能包括logo或其他一些基本图形，以及配色方案和其他视觉设计元素。像这样的线框图开始接近于模型的水平，但它们在传达网站看起来像什么的感觉方面是无价的，特别是对于那些很难根据低保真线框图来可视化网站看起来像什么的客户来说。
线框图的技术
有几十种不同的方法来创建线框，从简单的纸笔草图到更复杂的图表，看起来几乎像制作网站一样精致。创建线框的目的和原因也有不同的方法，这取决于个别设计师和项目的需求。这里有一些关于创建网站线框的不同步骤的资源。
用InDesign和Illustrator绘制线框图
UXmatters有一篇关于如何使用adobeindesign和Illustrator制作线框的好文章。他们讨论了是什么导致他们决定使用InDesign和Illustrator而不是其他产品，以及他们是如何使用这两个应用程序来创建线框的。灰箱方法
Jason Santa Maria有一篇关于创建线框图的“灰盒方法”的文章。
他概述了他创建线框的整个过程，从在纸上素描到在Illustrator中创建灰度线框。他引用了几个不同网站的例子来说明他的观点。虽然这篇文章并不完全致力于创造线框图的过程或方法，但它确实包含了一些关于这两者的有价值的信息，特别是关于如何为设计师、开发者和网站所有者创造更好的线框图过程。
Think Vitamin的这篇文章用20个步骤列出了制作出色线框图的具体步骤。这是一篇很棒的文章，可以帮助你了解你对线框图是否完全陌生，或者只是对当前的过程不满意。
线框图的过程
虽然每个人都不一样，但创建线框有几个基本步骤。你可能会从一个网站需要包含的东西列表或一个正式的设计规范文档开始。有些设计师可能会直接从这里开始，在他们将内容添加到线框中时，在列表中打上勾，无论是在应用程序中还是在纸上绘图。
有些人喜欢从整体设计的“大局”出发，一旦确定了基本布局基础，就添加细节。无论你决定在纸上画草图，还是一开始使用软件，都不要排除任何一种方法。有些设计师在纸上画出粗略的草图，然后用软件创造出更精致的线框图。
其他人则直接使用软件。尽管如此，还有一些人坚持纯手绘纸线框。只要记住，如果你卡住了，改变格式可以为你的创造力创造奇迹。
在确定一个设计之前，你可能想在线框中尝试一些不同的想法。线框图是实现这一目标的最佳阶段，因为你投入的时间和精力最少，可以更容易地进行更改和尝试新的/实验性内容。一旦创建了基本的线框，您可以将其发送给其他团队成员以获得反馈，或者将其放置一两天再进行检查。
一旦你对它感到满意，是时候与客户分享它的反馈或开始工作基于线框的模型。
线框图工具
你可以使用许多很棒的线框图工具。有些是专门为线框图制作的，而另一些则是更通用的，但特别适合这项任务。您决定使用的工具将取决于个人偏好和项目需求。
对于线框图来说，并不存在“最好的”工具;只要你觉得舒服，只要对你有用。
纸和笔
钢笔(或铅笔)和纸是创建线框最基本的工具。图纸的效果尤其好，因为它允许你创建相对干净的线框，而不需要拿出尺子。用网格线按比例创建元素也很有用。
网格笔记本纸上的草图。图像中约翰Manoogian三世．
你可能想用铅笔来画草图，这样你就可以擦掉东西而不必重新开始。
然后，当你确定不同的部分时，你可以用钢笔在它们上面描一遍，以防止擦掉错误的元素。你甚至可以考虑使用彩色钢笔和铅笔来区分元素或通过颜色编码为线框添加更多含义;例如，为一组元素使用一种颜色可能会很有帮助，因为它可以帮助立即识别线框中的项目，因为它们在不同的页面布局中移动。
使用便利贴快速创建原型。
图像中理查德Dallaway．
使用便利贴/便签在你的纸上，线框图过程可以很容易地重新排列不同的设计元素，而不需要重新绘制整体草图。
基于网络的工具
基于web的线框图工具几乎总是包含与其他团队成员或客户共享线框图的能力。它们还具有从任何地方访问和跨平台兼容的额外优势。下面是一些基于浏览器的线框图工具的例子。
只知更鸟》
知更鸟可以在Safari, Firefox和Chrome浏览器上运行，有许多独特的功能。一个更好的节省时间的功能是它具有自动调整文本大小的功能:如果你改变了按钮或类似元素的大小，Mockingbird就会相应地调整文本大小。它还允许您创建带有链接的多页线框。
可爱的图
可爱的图表可以用于线框图或各种其他图表。它有一个直观的拖放绘图界面，这使得它非常容易使用。它还根据您创建的图表类型进行假设，以帮助您更快地创建图表。
Cacoo
Cacoo是另一个免费的在线线框图工具，它使用拖放元素来加快线框图的制作过程。它包括线框的发布选项，允许您与任何知道URL的人公开共享它们，但线框的编辑和管理都是通过SSL连接处理的，以保护隐私。Lumzy
Lumzy可以超越线框图，成为一个功能齐全的原型工具，允许您向控件添加事件，将控件放入其他容器中，并使用由用户操作引起的触发器模拟完成的项目。
它还包括实时聊天、实时协作和图像编辑器。它创建
Jumpchart既适用于线框图也适用于原型，它提供了大量的工具来显示页面层次结构和页面之间的关系。有一个免费的计划，允许最多两个项目和两个合作者。
Jumpchart还允许您将完成的原型导出到WordPress(带有付费版本)。Balsamiq模型
Balsamiq Mockups旨在再现线框草图的体验，因为最终结果看起来更像草图而不是正式的设计，它保持了在纸上画线框草图的比喻。Balsamiq Mockups也有大量的协作和共享工具。
谷歌图纸
谷歌drawing作为一款可行的线框图应用，刚刚开始获得一些吸引力谷歌文档套件软件，并完全免费使用。它的工作原理类似于其他在线绘图应用程序，具有预定义的形状和添加文本的功能。
真正让它有用的是，有一组模板(来自丹麦UX设计师，Morten Just)专门为谷歌绘图，你可以用它来创建网站线框。绘图还允许您与多人协作工作，甚至允许在网上公开共享您的绘图。JustProto
JustProto是为网页和桌面应用程序设计原型的，虽然它也可以用于网站的线框图。
它包括超过200个图标和横幅，你可以在你的线框中使用，你可以创建母版页作为框架使用，以避免重复的工作。有一种免费计划可以让你管理一个项目，而付费计划的起价为每月19美元。Creately
Creately是一个绘图应用程序，它包括一个对象和形状库和一个拖放绘图界面。
它包括各种协作工具，包括版本控制和短URL发布。
桌面和混合应用程序
大多数桌面线框图应用程序都有在团队成员之间共享线框图的方法，尽管有时需要其他人下载特殊的软件，或者线框图只是作为平面图像共享，这使得团队编辑变得更加困难。另一方面，混合应用通常有在线和离线两种模式，两者兼得。MockFlow
MockFlow是一个在线/离线混合应用程序，允许您创建和协作线框图。
它包括一个供您使用的大型模型组件库，以及各种发布选项(包括PDF和PowerPoint导出)。免费计划允许一个最多四页的模型和两个合作者。iPlotz
iPlotz是另一个在线/离线的混合体，它有一个可下载的桌面客户端。
它具有协作和项目管理功能，是团队的绝佳选择。在线版本包括免费计划和付费计划;这款桌面应用售价75美元。铅笔
Pencil是一个用于创建线框图和原型的Firefox插件。它包括一个屏幕上的文本编辑器(支持富文本格式)、导出到HTML、PNG和其他文件格式、内置模板等。因为它是一个火狐浏览器插件操作系统无关。
也有针对Linux和Windows的独立的Pencil版本。原型的作曲家
Prototype Composer是一个web应用程序原型程序。它允许您构建可用的应用程序，这些应用程序非常接近于模拟最终用户将获得的体验，所有这些都使用不需要编码知识的图形UI。
有专业版和社区版(免费)可用。
HTML线框图
在线框中使用HTML和CSS的最大好处是，您可以在编写实际页面代码时领先一步。缺点是很容易陷入实际的网站设计和编码，而不是仅仅创建一个快速的线框。你的线框可以很快成为一个模型或成熟的原型。
但是，HTML线框图确实能让你在设计和编码过程中领先一步。如果你能忍住做太多事情的冲动，这是一个很好的选择。要了解更多关于基于HTML的线框图的知识，请查看以下文章:HTML线框图和原型:所有的收益和没有痛苦
这篇关于Boxes and Arrows(设计主题的领先网站)的文章讨论了使用HTML进行线框图和原型设计的好处。
线框图模板
为你的线框图使用模板和模板可以大大加快这个过程，特别是如果你选择用纸笔来画线框图，或者不是专门为线框图创建的程序(比如Adobe Illustrator)。下面是十几个模板和模板套件，都可以免费使用。OmniGraffle线框模板
这个来自Konigi的OmniGraffle模板集包含了你可能需要的几乎任何UI元素，包括浏览器chrome(围绕web浏览器窗口的边框)，控件，基本形状，选项卡，视频播放器，和更多。
免费的Web UI线框工具包
Fuel Your Interface提供了这个免费的线框套件，包括各种UI元素，包括按钮、面包屑、对话框等。雅虎开发人员网络设计模板
这个线框套件来自Johnny Nines，包括各种形状和元素，如按钮，标题，列表和表格，用于在Adobe Illustrator中创建线框。6页模板
这是一个可打印的手绘线框图模板，包括六个浏览器窗口，加上注释的空间。
免费的素描和线框图工具包
Janko at Warp Speed提供了这组草图线框图模板，有多种文件格式:Adobe Illustrator, SVG, PDF和EPS。网格的草图Ben Martineau发布了这组用于绘制线框图的网格。包括16列、12列、10列、5列、4列和3列网格结构。
A4素描纸
这个草图纸模板包括一个基本的网格浏览器chrome和一个区域在一侧为您的笔记。Sqetch
Sqetch是一个Adobe Illustrator工具包，包含许多模板和元素，包括iPad和浏览器chrome、GUI元素和表单元素。线框模板
这是一个非常基本的线框模板，有草图、标题和注释的空间。
Konigi坐标纸
Konigi提供了几种不同的可打印图形纸模板，包括一个故事板(有和没有注释)，肖像和风景线框图，以及一个带注释的线框图。Dragnet网站线框图套件Adobe Fireworks
Dragnet为Adobe Fireworks提供了这个免费的线框模板工具包，其中包括各种UI元素，如按钮、下拉菜单和选项卡。Keynote的免费线框模板
这是一组很棒的线框模板，用于苹果的Keynote程序。
它包含了你期望找到的所有基本UI元素:按钮、模式窗口、选项卡、标题、对话框等等。
用线框图来思考设计
画出线框图是一种很好的方法，可以让你不需要花很多时间在Photoshop中制作模型或编写初步设计代码。线框图可以让你快速完成许多设计和布局想法，而且成本很低，只需要花费你的时间。
用钢笔在网格纸上画的线框。图像中约翰Manoogian三世．
查看您拥有的设计规范文档，这些文档告诉您站点上需要哪些元素。然后就开始在线框上排列它们。在这个阶段，不要害怕尝试非传统的东西。
记住，这只是一个线框。在这一点上，一个错误或失败的尝试不会让你倒退很多。把这张纸揉成一团，扔进回收箱，然后重新开始。
在这个阶段释放你的创造力。
线框图作为项目可交付物
向客户展示线框图是一种很有价值的方法，可以确保在创建实际设计模型之前，所有人都在同一页面上。在使用线框图时，改变页面上元素的位置要比使用Photoshop设计或编码页面容易得多。线框图作为一种可交付的产品也展示了您在工作中所投入的工艺。
但是，要确保适当地为线框附加到设计过程中的额外时间计费。当然，如果你打算将线框图作为可交付成果使用，你需要确保它们是经过专业设计的，而不是草草写在普通的纸上或发票背面(除非你的客户希望如此)。我们上面已经提到的工具都可以用来创建更专业的线框来展示给客户。
抛光和粗略的
在创建可交付线框时，最大的考虑因素之一是它们的外观应该如何优化。关于这个问题，一般有两种观点。关于“完善vs粗略”争论的一个观点认为，任何交给客户的东西都应该尽可能完善和形式化。另一种观点认为，为客户提供一个经过优化的线框会使他们不太可能要求更改，因为事情感觉更“最终确定”了。换句话说，草图风格的线框感觉不那么正式，更容易得到诚实的反馈。这两种方法都有利有弊。
经过润色的线框通常可以帮助客户更好地将网站的布局形象化。添加颜色或最小图形等元素可以进一步实现这一目标。然而，你要冒着客户不会提供诚实反馈的风险，因为他们觉得项目已经完成了。
抛光线框的例子。图像中罗德里戈•特谢拉．
另一方面，粗略的线框图给人的印象更像是“粗略的想法”，似乎更吸引客户反馈。
这样做的缺点是，如果客户不是特别注重视觉或创造性，或者不熟悉什么是网站线框，可能很难想象他们的网站将是什么样子，或者可能会对为什么他们的网站看起来像手绘的感到困惑。
一个草图风格的线框，作为一个项目交付很好。图像中亚伦T。
特拉维斯。
结合精致和粗略的线框图风格可能对某些人来说是最好的。你也可以使用粗略的线框图结合情绪板这让你对配色方案、纹理、排版和其他视觉元素有了大致的了解。
线框图的资源
作为本指南的总结，这里有一些专门用于线框图设计的web资源供您阅读。我的心线框图Flickr组
I Heart线框图是Flickr的一个群组，展示了来自世界各地设计师的各种线框图。他们目前包括超过780个线框和超过1800个成员。
I Heart线框图Tumblr
这个Tumblr博客展示了来自各地优秀的线框图，也与上面的I Heart线框图Flickr组相关。线框展示
线框展示是一个画廊网站，以线框和它们所代表的已完成设计为特色。线框图杂志
线框图杂志涵盖了所有与线框图相关的东西，包括大量的模板和线框图模板，以及例子和灵感。
Web.Without.Words
Web.without.words采取了一种相反的方法来绘制线框，每周显示一个不同的热门网站，并通过屏蔽实际内容来逆向设计线框。
