线框图是web开发过程中极其重要的阶段。在你看到你网站的结果和流量之前报告，后退一步，创建一个用户友好和精心设计的网站。虽然人们很容易跳过这一步，从设计概要开始信息架构直接进入设计，在概念网站规划和网站实际开发之间创建线框会带来巨大的收益。
线框图可以让你更有效地做一些事情，你在这个阶段投入的时间和精力会在更大的计划中得到回报。在这篇文章中，我将介绍网站线框图的五个主要好处。我将讨论的是基于我们在我工作的机构所经历的直接观察。
什么是线框?
在更详细地探讨这些线框图的优点之前，让我们先停下来讨论一下什么是线框．一个线框是一个低保真的视觉表示网站布局设计，有时被称为骨架，大纲或蓝图．通常，线框表示基本的页面布局结构和站点页面的导航方案，以及站点的主要组件(如web表单而且广告单元）.
线框本身并不包含已完成的设计元素，但会显示设计元素将在页面上出现的位置。线框图通常使用现成的线框图软件，如只知更鸟》或者，用最简单的形式，纸和铅笔。线框图允许项目团队成员和客户做这样的事情:
- 测试和优化导航
- 看看内容是如何在页面上布局的
- 研究并快速完善网页表单和交互元素的用户界面设计
- 根据可用性最佳实践评估页面布局的整体有效性
- 确定web开发/编程需求
下面是一个主页线框的例子:
下面是一个内页线框的例子:
要了解更多关于线框图的知识，以及关于线框图的工具、软件和资源，请阅读网站线框图的终极指南．
现在让我们来看看线框图网页设计的主要好处。
线框使设计更改更有效
它需要更多的时间，精力和专业知识来创建一个网页设计比线框。当客户看到的第一件事是一个完成的设计，他们看到的东西已经花了相当多的时间来制作，并将涉及(潜在的)相当大的费用来修改。
坏消息是，尤其是从成本的角度来看，设计的改变几乎是不可避免的。我在代理机构和客户端从事网络开发项目超过15年，我还没有看到一个不涉及多次(通常是广泛的)设计更改的项目。然而，当我们检查线框时，无论是在内部还是与客户一起，设计更改都可以在几分钟内重做。
不喜欢这个尺寸头？让它小一点。现在太小了?
让我们看看它大一点。转换区域是否被logo所掩盖?让我们这样看。
像上面这样的改变，如果是完全的、高保真的设计，可能会花费数千美元(更不用说延长完成项目的时间)。客户和web开发团队成员了解了设计更改对时间和成本的影响后，几乎不愿意表达他们的担忧，因为他们担心解决设计问题所涉及的时间和成本。需要记住的一点是:线框图可以让你在想要进行重大更改和微调的时候快速且廉价地调整甚至彻底检查设计。
线框使网站导航设计更好
最重要的因素之一网页设计内容的可查找性，直观的网站导航设计在这方面很重要。如果用户不能很容易地到达他们想去的地方，他们就会离开。随着用户越来越精通网络，劣质导航的负面影响也在增加。
不幸的是，客户、设计人员甚至开发人员都很难评估导航，直到他们真正有机会使用它。线框图可以让人们对新网站进行测试:看看定位关键页面的难易程度;确定下拉菜单是否让用户感到困惑;来找出是否面包屑有用或分散注意力;了解整体导航方案是直观的、难以理解的还是介于两者之间。当网站导航问题在设计完成后暴露出来时，这有点像房子建好后才意识到天花板太低了。
对导航的更改可以涵盖所有范围，但其中许多更改的纠正成本几乎高得令人望而却步。我认为这就是为什么我们看到如此多的网站——即使是那些展示了极具创意的内容和令人眼花缭乱的设计的大型复杂网站——仍然设法提供总体上较差的用户体验的原因之一。
线框使内容开发更加友好
作为一个内容丰富的人，我喜欢线框图搜索引擎优化的目的或者对于人类读者来说(优秀的内容满足了两者的需求)——可能看起来笨拙，也可能看起来优雅。笨拙内容的一个例子是你每天都能看到的:大块无区别的文本。
没人会看的。优雅的内容——提供信息和说服力的内容——利用设计元素，如可读的字体、适当大小的字体、编号列表、项目符号和位置良好的副标题。在线框图中，很容易处理这些元素，并达到一个将最大限度地提高可读性和说服力的格式方案。
线框图如何改善用户界面复制
对于用户界面来说，小段文案比大段文案更重要。示例:号召行动按钮应该说了解更多，更多的信息或点击这里？客户和设计团队如何回答这个问题将对转换产生巨大的影响。
然而，当内容和用户界面复制问题在审查完成的设计时，为了控制成本和保持项目进度，就会倾向于与问题生活在一起，并妥协副本的有效性。当在线框图阶段处理内容问题时，进行更改是小菜一碟。结果:一个网站，融合了最好的文案和设计，最大限度地提高用户体验在每个页面。
线框帮助客户帮助他们的事业
线框图是评估一个新网站的一种视觉方式，众所周知，一张图片胜过千言万语。当客户根据站点地图和一些静态的设计布局为项目的设计阶段开绿灯时，他们在一定程度上是盲目的。根据我的经验，这导致许多web开发项目达不到客户的期望。
作为一个代理机构，我们有义务让客户清楚地了解将要开发的内容，基于上述所有原因，线框让我们能够做到这一点。我们希望我们的客户看到站点看起来是什么样子(至少大致)，感受导航并在上下文中阅读内容。当客户面对线框时，他们的反应从震惊到完全满意(通常介于两者之间)。
从我们的角度来看，没有错误的回应。在项目的早期阶段解决问题要比后来解决问题容易得多，成本也低得多，对关系的压力也小得多，或者更糟的是，在推出一个网站时知道它有严重的缺陷。几乎不可避免地，线框图生成了一个有用的变更列表，这些更改是早期的例行公事。
在某些情况下，线框会引导客户在更具战略意义的层面上重新思考他们的方法。我们通常听到的评论包括:
- 我不知道我们的生产线这么混乱
- 我们在导航中有太多的选项:我们的关键页面在混乱中丢失了
- 我们对行动的呼吁是微弱的
- 我们的联系表格填写时间太长了
- 我们对自己谈得太多，对客户谈得不够
- 我们最重要的产品照片都在下面:没人会看到它们
当我们在线框图阶段围绕上述主题进行对话时，它们会带来令人愉快的解决方案。当这些对话发生在设计和开发完成之后，通常不会发生。
线框图帮助Web开发人员
我离程序员还差得远，但我的感觉是，当你在没有线框的情况下给程序员下命令时，你就是在要求他们孤身工作。如果所有的web开发人员所要做的只是一个站点地图，设计模板和一堆来自客户和项目经理的口头指示，那么随着构建过程的推进，将会有很多问题和假设。线框图为web开发人员提供了一条明确的路径，让他们知道要做什么。
它明确了网站建设的方向和目标，并允许更好的决策，即应该使用哪些web技术、技术和流程，以实现一个优秀的结果。
总结
一个网页开发项目很像盖房子。这两个项目都很复杂。
两者都需要专家团队齐心协力，为客户的愿景提供具体的形式。如果你要盖房子，你自然会想找最好的建筑工人。但是你也要为建造者配备正确的工具。
你要确保建造者有正确的流程，以便在预算内按时完成工作。线框图不是包治百病，但我们发现它是一个非常有价值的工具——一个我们永远不会放弃的工具，因为它是一个伟大的过程，通过它来布局你的网站，无论你是为it服务还是网络服务船零售商．
