与瀑布模式说“再见”5个步骤实现响应式Web设计文库.doc

与瀑布模式说“再见5个步骤实现响应式Web设计响应式简介你可能熟悉典型的“瀑布模式”的开发过程：从系统需求分析开始，然后着手设 计，接着开始前后台开发，最后进行评估并且实施线性性质是瀑布式开发的主 要特点：当这一阶段完成，下一阶段紧接开始，两者配合的几乎天衣无缝瀑布模式”开发过程是通过设计一系列阶段顺序展开的，只需朝一个单一的方 向推进工作，而不幸的是，随着问题的不断积累，不得不放慢脚步，來应付各种 棘手的问题瀑布模式”开发过程演示图:StrategyDesig nCodingsTestingDeployme nt所谓的“响应式Web设计”，它是指在网站建设过程中，利用同一套代码，使网 站内容在PC、平板电脑以及智能浏览器上都能正常的显示那些为了发布 同样的内容，而创建PC, mobile等多个版本的日了一去不复返了现在你可通 过构建一个非常灵活的网站去应付所冇的运行环境响应式”设计过程如下图所示:RequirementsAnalysis & DesignPlanningInitialPlanningImpleme ntationDeploymentEvaluatio nTesting那么，为什么要使用响应式设计而不是采取瀑布模式？瀑布模式只按照标准的桌 面浏览器进行设计，除此之外，几乎没冇考虑任何其它的设计开发环境，这是它最大的缺点。

而敏捷的响应式设计从一开始就考虑到这些跨平台问题，从而进行更详细的前期框架构图、设计和测试，而这些工作恰恰在瀑布模式中被省略了基于响应式设计的网站一旦完成实施，将正确的呈现在pc、移动设备和平板电脑上响应式设计在不同设备上的效果展示图:im it ip n既然如此，那么如何在团队中实施响应式Web设计呢？下面，我们将冋顾典型 的瀑布模式的开发步骤并且说明如何使他们变为响应式设计模式第1步：计划瀑布模式开发 在瀑布模式开发过程中，框架图主要由布局和小部件构成它们被设定为一个特 定的尺寸（通常基于像素），并且几乎没有调整的余地这些框架图给出了具体 的网格/布局的尺寸大小，但是不同的屏幕分辨率会导致布局发生变化，这吋一 切都变得毫无意义最终，导航条菜单无法使用，无法进入表单页面，并且界面 也会变得凌乱不堪响应式Web设计解决此问题并不困难你需要为不同的视图设计不同的部件，并且不要将一个页 面当成一整“页”页而不是最小的组成单元一一而是滚动条、文字内容、表单 和其他成份是组成整个页面的最小元素框架图必须考虑不同的屏幕尺寸，因此 布局尺寸也是不固定的布局可以从三列变至两列，在最小的显示设备上（移动 智能），甚至可将其调整为单列显示。

同时，你也需要改变网站的用户体验——在小尺寸的屏幕上，要求滚动条不仅 仅是可以通过鼠标进行操作，而是人们用手指也能够控制它这样框架图仅仅是 一个原型设计工具，而不再是模板，并且需要通过一些开发和测试来确保其能在 显示屏上执行如果在这些初步测试之前开始设计的话，一些未知的开发问题就 会接輝而至不管怎样，项目根木的愿景必须是保持不变的，因此，保持部门Z 间开放的沟通渠道是必不可少的第2步：设计瀑布模式开发在瀑布模式开发中，接下来将按照框架图来进行设计，并且通过字休、颜色、间 距以及其他设计工具、手法使其变得丰富多彩而富有生机通常情况下，设计会 进行來回的修改，并且通过设计的不断更新，來逐步完善品牌和设计的规范响应式Web设计为了更好的使用分配的项口吋间和资源，响应式的Web设计应该设计不同尺寸 的布局和部件响应式的Web设计不再使用基于像索的完美设让我们认为在 不固定的网格中设计灵活的部件，设计不同尺寸的布局和部件的工作量是可控的, 虽然完成可以兼容桌而浏览器的设计就已经极具挑战性了让HTML在所有环境中采用流体布局来提高设计品质不去专注于用户的总体体 验，而考虑每一•种浏览器宽度是非常浪费时间的做法。

例如，需要确保在小型移 动设备上操作rotating banner的原件是快速反应的，并且按照彳亍业推荐的最小 的44px作为标准的人类手指尖的尺寸来进行设计对于用户体验的设计和针对 所有屏幕尺寸进行外观设计是同等重要的第3步：开发瀑布模式开发 在瀑布式开发方法中，一旦客户确认了设计图，接下來的前端开发中，就会发现 在小型屏幕中存在各种问题不幸的是，由于瀑布模式的线性特征，这些不可预 见的问题只能随着项目的推进而岀现响应式Web设计在皱捷的响应式的开发过程中，设计必须以灵活网格为基础需要由开发者对部 件进行规划和原型设计，并且在每一个阶段都进行测试为了确保部件是可能的 最小的组成单元，需要对代码进行优化因为部件可以容易的加入到布局中和从 中移除，所以在最初的设计中并没有规划出来通过开发者、设计师和策划者之 间良好的协作來规避曲于必需的修改而引起的各种问题这样，团队中的成员达 成共识，就可以早点发现和解决问题第4步：耐心的测试 瀑布模式开发 在标准的瀑布模式开发的最后阶段是通过单元测试和功能测试来评估站点在这 个阶段发现的问题，可能会要求重新规划项目最初的设想，甚至有时候一个新上 市的设备可能对项口造成沉重的打击。

需求分析团队和设计团队不得不重新规划 和设计以顾及到这些变化，并且将花费更多的时间來进行修改响应式Web设计在响应式开发过程中，每一个阶段都会在多种浏览器和不同尺寸屏幕中进行测试, 因此问题可尽早发现这样也可发现某种移动环境与框架图不匹配的问题，以及 了解该设计在不同平台上的性能响应式Web设计会尽早的完成项目原型，让客 户更早的检查成果以实现双赢第5步：尽早发现问题，尽早解决瀑布模式开发 传统的瀑布式开发过程中，没有通过设计和界面迭代的过程瀑布式开发忽略项 口建设过程中的小细节，从而引起一些问题并与客户期望相冲突虽然通过不断 的及时与客户沟通，最终问题解决了，但是这些糟糕决策的严重性却仍未察觉响应式Web设计 响应式解决方法，在取得同样进展的同时，采用动态代码向客户展示每一步的实 现过程这样，这些早期的工作冇利于推动下阶段工作，并冃可以在截至H期Z 前进行关键的修改总结采用皱捷的响应式Web设计，可以将你从瀑布模式中解放出来它将简化你的设 计和开发工作，让你的工作更冇效率，并在所冇可能的平台上最大化宣传你的品 牌形彖真正的挑战是跳出瀑布式开发模式而成为一个响应式设计I才I队但只要 按照以上的五个步骤去做，你就会与瀑布模式说“bye, bye”，而对响应式Web 设计说“hello” o本文作者 Travis Sheppard 是 BGT Partners 的技术副总裁。

BGT 在 2010、2011、 2012年被《广告时代》评为15个最佳工作地点之一它为全球的企业提供互动 营销和技术解决方案，以帮助金业加强品牌宣传，挖掘更多的合作伙伴和进行业 务变革。