5个步骤实现响应式Web设计.docVIP

5个步骤实现响应式Web设计 　　恭喜你终于使领导们信服：你的下一个Web 设计项目需要进行响应式设计。虽然说服他们相信是一件非常艰难的事情，但是你现在不能在荣誉上休息。现在项目最关键的问题是：如何带领你的团队去构建响应式设计? 　　响应式简介 　　你可能熟悉典型的“瀑布模式”的开发过程：从系统需求分析开始，然后着手设计，接着开始前后台开发，最后进行评估并且实施。线性性质是瀑布式开发的主要特点：当这一阶段完成，下一阶段紧接开始，两者配合的几乎天衣无缝。“瀑布模式”开发过程是通过设计一系列阶段顺序展开的，只需朝一个单一的方向推进工作，而不幸的是，随着问题的不断积累，不得不放慢脚步，来应付各种棘手的问题。 　　“瀑布模式”开发过程演示图： 　　 　　所谓的“响应式Web 设计”，它是指在网站建设过程中，利用同一套代码，使网站内容在PC、平板电脑以及智能手机浏览器上都能正常的显示。那些为了发布同样的内容，而创建 PC，mobile等多个版本的日子一去不复返了。现在你可通过构建一个非常灵活的网站去应付所有的运行环境。 　　“响应式”设计过程如下图所示： 　　 　　那么，为什么要使用响应式设计而不是采取瀑布模式?瀑布模式只按照标准的桌面浏览器进行设计，除此之外，几乎没有考虑任何其它的设计开发环境，这是它最大的缺点。而敏捷的响应式设计从一开始就考虑到这些跨平台问题，从而进行更详细的前期框架构图，设计和测试，而这些工作恰恰在瀑布模式中被省略了。基于响应式设计的网站一旦完成实施，将正确的呈现在PC、移动设备和平板电脑上。 　　响应式设计在不同设备上的效果展示图： 　　 　　既然如此，那么如何在团队中实施响应式Web 设计呢?下面，我们将回顾典型的瀑布模式的开发步骤并且说明如何使他们变为响应式设计模式。 　　如何实现响应式Web 设计 第一步：计划 　　瀑布模式开发 　　在瀑布模式开发过程中，框架图主要由布局和小部件构成。它们被设定为一个特定的尺寸(通常基于像素)，并且几乎没有调整的余地。这些框架图给出了具体的网格/布局的尺寸大小，但是不同的屏幕分辨率会导致布局发生变化，这时一切都变得毫无意义。最终，导航条菜单无法使用，无法进入表单页面，并且界面也会变得凌乱不堪。 　　响应式Web 设计 　　解决此问题并不困难。你需要为不同的视图设计不同的部件，并且不要将一个页面当成一整“页”。页面不是最小的组成单元——而是滚动条，文字内容，表单和其他成份是组成整个页面的最小元素。框架图必须考虑不同的屏幕尺寸，因此布局尺寸也是不固定的。布局可以从三列变至两列，在最小的显示设备上(移动智能手机)，甚至可将其调整为单列显示。 　　同时，你也需要改变网站的用户体验——在小尺寸的屏幕上，要求滚动条不仅仅是可以通过鼠标进行操作，而是人们用手指也能够控制它。这样框架图仅仅是一个原型设计工具，而不再是模板，并且需要通过一些开发和测试来确保其能在显示屏上执行。如果在这些初步测试之前开始设计的话，一些未知的开发问题就会接踵而至。不管怎样，项目根本的愿景必须是保持不变的，因此，保持部门之间开放的沟通渠道是必不可少的。 　　第二步：设计 　　瀑布模式开发 　　在瀑布模式开发中，接下来将按照框架图来进行设计，并且通过字体、颜色、间距以及其他设计工具、手法使其变得丰富多彩而富有生机。通常情况下，设计会进行来回的修改，并且通过设计的不断更新，来逐步完善品牌和设计的规范。 　　响应式Web 设计 　　为了更好的使用分配的项目时间和资源，响应式的Web 设计应该设计不同尺寸的布局和部件。响应式的Web 设计不再使用基于像素的完美设计。我们认为在不固定的网格中设计灵活的部件，设计不同尺寸的布局和部件的工作量是可控的，虽然完成可以兼容桌面浏览器的设计就已经极具挑战性了。 　　让HTML采用在所有环境中的流体布局来提高设计品质。不去专注于用户的总体体验，而考虑每一种浏览器宽度是非常浪费时间的做法。例如，需要确保在小型移动设备上操作rotating banner的原件是快速反应的，并且按照行业推荐的最小的44px作为标准的人类手指尖的尺寸来进行设计。对于用户体验的设计和针对所有屏幕尺寸进行外观设计是同等重要的。 　　第三步：开发 　　瀑布模式开发 　　在瀑布式开发方法中，一旦客户确认了设计图，接下来的前端开发中，就会发现在小型屏幕中存在各种问题。不幸的是，由于瀑布模式的线性特征，这些不可预见的问题只能随着项目的推进而出现。 　　响应式Web 设计 　　在敏捷的响应式的开发过程中，设计必须以灵活网格为基础。需要由开发者对部件进行规划和原型设计，并且在每一个阶段都进行测试。为了确保部件是可能的最小的组成单元，需要对代码进行优化。因为部件可以容易的加入到布局中和从中移除，所以在最初