网站的线框基本上是使用基本形状，线条，颜色和样式组装的网页的骨架。线框的重点是专注于制作有利于内容放置的布局，同时以易于调整的格式计算功能和导航问题。在为响应式网站规划设计时，不可能从桌面的角度考虑线框，但改变这些布局的构建和方式确实会带来挑战。多年来，设计师已经制作出适合电脑屏幕的线框。首先为移动设备制作线框图时，这有助于网站管理员在网站上显示较小屏幕上的元素时优先考虑它们。

响应式设计允许在移动设备或智能手机而非桌面上浏览网站或应用程序的易用性。它允许开发人员确定其网站元素的优先级，同时决定哪些内容最适合他们的网站。在决定网站中每个内容的重要性时，考虑客户的目标非常重要。这就是决定哪些元素对于桌面版本的网站以及移动版本最重要的因素。

通常，线框不是彩色的，因为焦点需要保持各种元素的关系而不是实际设计。一旦线框建立起来，设计师就会着眼于颜色和形状。他们将需要留在循环中，这样他们就可以在骨架建立后成功渲染颜色的情绪和任务。构建线框并不是一门精确的科学，通常有时会进行大量修改，直到客户对布局感到满意为止。因此，重要的是要注意线框布局背后的逻辑，以便客户端和开发团队能够看到基本原理。

线框所需的工具

对于良好的线框设计，首先需要做的是绘制想法以确定应该在页面上放置所有不同元素的位置。有许多类型的工具可用于帮助进行线框图，以及使应用程序快速而简单的应用程序。如果使用程序不是你将要做的事情，只需使用笔和纸就足够了。这种看似原始的方法是将所有想法写在纸上的好方法，因为您可以快速地说明您的想法。据说，该过程的线框部分缺乏样式将使客户不会过于特别关于布局的精确度。

要避免的事情

1. 线框图是通过思考问题和定义接口的组合。像开发过程的所有方面一样，当没有以正确的方式完成时，线框图存在缺陷。这些是在创建响应式线框时应该记住的一些事项。
   
   

2. 不要强调设计和颜色。线框的目的是决定布局以及元素在网站上的位置。当工作以黑白或灰度完成时，有助于关注完成布局的主要原因 - 最终确定布局而不是设计。最好从简单的线框开始，因为当需要移动物体时更容易使用。
   
   

将细节保持在最低限度

总是可以添加更多细节，以便稍后在过程中向客户显示项目，但在开始阶段有太多细节可能会导致混淆。在纸上绘制线框时，这是一个很好的入门方式，粗略的草图将允许快速更改，使解决方案更有趣。

不要对每一页进行线框化

通常，不需要对每个页面视图进行线框化。了解网站的内容非常重要，这样才能清楚地了解网站和用户正在尝试实现的目标。从内容审核，利益相关者访谈和研究中收集的重要信息对于优先考虑网页上的元素至关重要。并非所有页面都需要线框化，只要所做的工作将有助于推进项目。

线框图的好处

线框图项目是在Web或应用程序项目上进行通信的重要工具。它允许开发人员，设计人员和客户端查看网站的构造，而不会分散图像和颜色等设计元素。从长远来看，简单的线框将说明时间，并使所有相关人员的开发过程更容易。这些是拥有线框的一些巨大好处：

线框将让客户思考他们的网站需要什么，并将帮助他们定义项目的最终目标以及主要关注点。它们为项目带来了清晰度，使您可以处理站点的所有交互和布局需求。

为项目准备一个线框将使网站管理员更容易将他们的想法传达给团队，以及它在响应性方面的工作方式。线框图还将有助于以最有效的方式传达网站的主要信息，并允许在早期阶段收集反馈。

开发人员将能够更清晰，更简洁地了解编码所需的元素。它将回答诸如如何针对较小的设备调整布局，内容层次结构以及导航如何与较小的屏幕一起工作等问题？设计师将能够规划站点内许多部分的布局，这将使流程更加流畅。

响应式网页设计工具

今天，很少有网站没有被某种移动设备或智能手机取出。因此，智能网页设计师将利用响应式网页设计作为与布局或排版相关的所有问题的补救措施。拥有一个响应式网站可以节省时间，金钱和工作量，但它也为移动用户提供了与台式机/笔记本电脑用户习惯的易用性相同的考虑因素。线框，原型设计和布局- 在考虑如何放置页面上的所有元素时，这些是必要的第一件事。

响应式设计线框工具：

1.响应性线框

在这里，您可以学习如何生成在布局中高效工作的设计元素，并且您将能够确定布局的区域将在不同类型的设备上获得网站的中心点。该计划为桌面和移动版本提供线框模型，这些版本具有主页，促销条目，引导条目，比较页面和产品详细信息。有一个切换按钮，可以让您根据正在查看的设备查看不同元素的更改方式。

2. Wirefy

对于那些首先关注内容，然后关注布局的开发人员来说，这是一个很好的选择。内容可以进行规划和结构化，线框允许客户端准确查看其响应式网站的工作方式以及用户的外观。唯一需要注意的是，您需要具备HTML和CSS以及基本代码编辑器的知识。

3.界面草图

在这里，您将能够绘制布局草图，就像在带笔和纸的笔记本中完成它一样。从桌面浏览器到平板电脑，目前许多最常用的移动设备都有许多免费的打印机。

4.引导程序

原型设计很简单，这个程序是由构建Twitter的相同设计师构建的。用户可以选择他们想要构成页面的特定响应元素。然后，下载已完成的版本，其中包含编译和紧凑的CSS，插件以及简化工作所需的其他元素。

5.样式瓷砖

这比简单的情绪板更清晰，但它不需要像完整模型那样多的劳动力。它将弥补设计师制作的线框与客户要求的风格之间的差距。用户界面类似于Photoshop，因为您可以调整布局，徽标和颜色以满足每个项目的需求。

使图形，字体和视频响应

将整个布局作为响应是一回事，但是有可能使图形，文本和电影响应吗？其实，是！这些是可用于帮助简化此过程的一些工具。

1.视网膜图像

该系统易于设置。它将在支持它的设备上显示高分辨率图像作为替代。它一次只下载一个图像，这样就不会在服务器上为可能显示或不显示的图像提供长时间的加载时间。

2.自适应图像

该程序将读取和解释查看器的屏幕大小，然后自动向上或向下缩放嵌入的HTML图像以便最佳地查看 - 无需额外的标记。程序中只有3个简单步骤才能实现。

测试响应性

您已经构建了一个线框，并且已经  得到了客户的批准 - 现在它需要进行测试。布局适合用户的需求，并且您已将其编码为完美 - 也许。你已准备好向世界展示它，但是它已经过适当的测试了吗？这些是您可以用来测试响应性的一些工具。

1.责任人

在这里，您将能够看到您的网站在各种移动设备上的外观和加载方式。所有您需要做的就是输入网站的网址，以便准确了解移动浏览器的横向视图和纵向视图。

2. Matt Kerley的响应式设计测试

这是互联网上最流行的响应式测试工具之一。它可以与任何网站一起使用，使其超灵活。它甚至可以安装在自己的服务器上，以便更快地完成故障排除。可以针对内容的断点测试宽度，并且可以针对流行的移动设备测试高度和宽度。

总而言之

为响应式网站开发线框是确保网站成功的最有效步骤之一。网络用户越来越多地从他们的移动设备访问网站，只使用他们的桌面作为备份。因此，网站应该针对各种设备进行优化，最好的办法是根据这个想法从头开始准备网站。客户端可能对查看线框不感兴趣，但在创建线框时仍然至关重要，以便参与项目的所有开发人员都在同一页面上。

响应式设计以他们考虑规划网页的方式挑战Web开发人员 - 这些页面需要能够成功地与许多不同的设备一起使用，并且随着技术的进步，这个数字可能会不断增长。