恭喜你。 终于让领导们信服了。 你的下一个网页设计项目需要回应性的设计。 说服他们是非常困难的，但你现在不能在荣誉上休息。 现在项目最重要的问题是如何领导团队构建响应设计。

响应表达式概述

你可能已经熟悉了典型的“瀑布模型”的开发流程。 从系统需求分析开始，着手设计，然后开始后台开发，最后进行评估并实施。 线性是瀑布式开发的主要特征。 这个阶段完成后，下一个阶段马上开始，两者几乎无缝合作。 瀑布模型的开发过程通过设计一系列阶段依次展开，只需要单一方向开展工作，但遗憾的是，随着问题的积累，为了应对各种棘手的问题必须放慢脚步。

瀑布模式开发过程演示：

所谓的“响应式网页设计”，就是在网站建设过程中，使用相同的代码集，确保网站内容在PC、平板电脑和智能手机的浏览器中正常显示。 为了发布同一内容，制作PC、mobile等多个版本的日子一去不复返了。 现在，通过构建非常灵活的网站，可以满足所有的操作环境。

响应设计过程如下图所示。

那么，为什么要使用响应性设计而不是瀑布模式？ 瀑布模式只是基于标准的桌面浏览器设计，最大的缺点是很少考虑其他设计开发环境。 敏捷的响应设计从一开始就考虑到这些跨平台问题，对前期框架进行更详细的构图、设计和测试，但在瀑布模式中省略了这些工作。 设计响应迅速的网站完成后，将正确显示在PC、移动设备和平板电脑上。

响应设计在各种设备上的效果演示：

那么，如何在团队中实现响应式网页设计呢？ 在此，我们将回顾典型瀑布模型的开发步骤，并说明如何使他们成为响应设计模型。

实现响应性网页设计的第一步：计划

瀑布模式开发

在瀑布模式的开发中，骨架图主要由布局和小部件组成。 它们被设定为特定的大小，通常基于像素，几乎没有调整的余地。 这些框架图显示了具体的网格/布局的大小，但布局会随着屏幕分辨率的变化而变化，一切都变得毫无意义。 最终，导航栏菜单不可用，无法访问表单页面，界面也变得杂乱无章。

回应式网页设计

解决这个问题并不是一件难事。 必须为每个视图设计不同的零件。 此外，请勿将一个页面视为一个“页面”。 页面不是最小的组成部分——，滚动条、文本内容、表单和其他元素是构成整个页面的最小元素。 因为框架图必须考虑不同的画面尺寸，所以布局尺寸也不是一定的。 布局可以从3列更改为2列，最小的显示设备(移动智能手机)也可以调整为1列显示。

此外，还需要改变网站的用户体验——。 小尺寸的画面要求滚动条不仅可以用鼠标操作，还可以用手指控制。 这样的框架图只是一个原型设计工具，应该能够通过一些开发和测试在显示器上运行，而不是模板。 如果在这些初步测试之前开始设计，未知的开发问题就会层出不穷。 无论如何，项目的根本愿景必须保持不变，因此保持部门之间开放的沟通渠道是必不可少的。

第二步：设计

瀑布模式开发

在瀑布模型开发中，我们将按照框架图进行设计，通过字体、颜色、间隔、其他设计工具、手法使之丰富生动。 设计通常会前后修改，设计不断更新，从而逐步完善品牌和设计规范。

回应式网页设计

为了更好地利用分配的项目时间和资源，反应灵敏的网页设计需要设计不同大小的布局和部件。 响应性网页设计不再使用基于像素的完美设计。 我们认为在非固定网格中设计灵活的部件，设计不同尺寸的布局和部件的工作量是可以控制的，但是要完成与桌面浏览器兼容的设计非常困难。

使HTML采用所有环境下的流体布局，提高设计质量。 按照浏览器的宽度来考虑是浪费时间，而不是集中于用户的整体体验。 例如，为了使在小型移动设备上操作rotating banner的原始能够迅速地做出反应，需要针对以业界推荐的最小的44px为标准的人类指尖的尺寸进行设计。 用户体验的设计与所有屏幕尺寸的外观设计同等重要。

步骤3 :开发

瀑布模式开发

瀑布式开发方法在客户确认设计图后，会发现在下一次前端开发中，小型屏幕存在各种各样的问题。 不幸的是，由于瀑布模型的线性特性，这些不可预见的问题只能随着项目的推进而发生。

回应式网页设计

在敏捷响应的开发过程中，设计必须基于灵活的网格。 必须由开发人员进行部件规划和原型设计，并在每个阶段进行测试。 为了确保部件是尽可能最小的组成部分，必须对代码进行优化。 由于可以很容易地在布局中添加和删除部件，因此最初的设计中没有计划。 在开发者、设计师、企划者之间达成良好的合作，避免因必要的修正而引起的各种问题。 这样，团队成员就能达成共识，尽早发现问题并解决问题。

第四步：耐心的测试

瀑布模式开发

在开发标准瀑布模型的最后阶段，将通过单元测试和功能测试来评估站点。 在这个阶段发现的问题可能要求重新规划项目的最初构想，有时新推出的设备也可能对项目造成沉重的打击。 需求分析和设计团队必须重新规划和设计以考虑这些变化，需要更多的时间来修改。

回应式网页设计

响应的开发过程会在每个阶段测试多个浏览器和不同大小的屏幕，从而更快地发现问题。 这样还可以发现框架图与给定移动环境不匹配的问题，并了解不同平台上的设计性能。 响应式网页设计可以提前完成项目原型，让客户更快地检查交付内容，实现双赢。

步骤5 :早期发现问题，早期解决

瀑布模式开发

传统的瀑布式开发过程没有通过设计和接口进行迭代的过程。 瀑布式开发忽略了项目建设中的一些细节，因此出现了一些问题，与客户的期望相矛盾。 通过及时与客户沟通，最终问题得到了解决，但这些糟糕决策的重要性还没有被认识到。

回应式网页设计

响应解决方案在取得类似进展的同时，通过动态代码向客户展示每一步的实现过程。 这样，这些初期工作就有助于推进下一阶段的工作，可以在最后期限之前进行重要的修改。

总结

通过采用反应敏捷的网页设计，从瀑布模式中解放出来。 简化设计和开发，提高工作效率，在所有可能的平台上最大化品牌形象。 真正的挑战是摆脱瀑布式的开发模式，成为回应式的设计团队。 但是，只要经过以上五个步骤，瀑布模式就会变成“bye，bye”，响应型网页设计就会变成“hello”。

嘉宾作家Travis Sheppard是BGT Partners的技术副总裁。 BGT于2010、2011、2012年在《广告时代》被选为15个最好的工作岗位之一。 为全球企业提供交互式营销和技术解决方案，帮助企业加强品牌宣传，挖掘更多合作伙伴，进行业务转型。

详情请访问云服务器、域名注册、虚拟主机的问题，请访问西部数码代理商官方网站： zhuji.chenqinet.cn