使用一个真实的酒店网站作为案例，郑州网站建设公司伟之琦详解响应式网页设计流程。这个网站在整个设计开发流程中，有几个关键步骤接下来需要我们逐一展开学习：

响应式网页设计流程一、 使用者研究与设备规格预估

前期，通过用户调研，我们可以了解到使用者群所使用的设备类型分布情况，并预估出几种典型的规格，用来规划不同的呈现方式。有几个问题需要特别考虑下：

1、使用者在不同设备上的目标有多大区别？

过去，通常会假设使用者在使用移动设备访问网站时，其行为都是高度目标驱动化的，例如在旅途中获取酒店地址、预订房间一类。但实际情况智能手机、平板电脑等各类移动设备的使用者会越来越多，在相对稳定从容的状态下使用网路，所以很多时候，使用者使用不同设备的目标差别并没有想象的那么大，我们不能片面的假设不同类型设备的使用者对功能的需求差异。

2、关于功能与内容呈现，从技术的角度出发，需要考虑哪些？

对于功能繁多复杂的网站，需要针对不同的设备类型进行功能和内容的优先顺序排序，以便在开发阶段通过CSS定义不同的规则，以最合理的样式规格和布局方式进行呈现；尤其对于手机等小屏幕设备，需要多花些心思。

响应式网页设计流程二、制作线框原型

通过线框图，可以对响应式的视觉效果背后的逻辑结构进行规划和定义。根据之前的研究和预估结果，规划出几种比较典型的屏幕尺寸规格，本次案例中，选择了三款具有代表性的主流设备，包括台式显示器、iPad和手机，因为根据我们的使用者研究结果，使用这三种设备的使用者占绝大部分。

需要强调一下，响应式的目的在于针对不同设备的屏幕规格区间，进行功能及内容的输出格式预设。所以我们只需要选取一些具有代表性的设备，而不必顾全所有已知的规格类型；我们制作线框原型的主要目标是规划样式背后的逻辑。在这个阶段，我们必须清楚，整个网站中有哪些关键页面是在功能和布局方面具有代表性的。对于这次的案例网站，“关键页面”包括首页、预订流程中的页面、酒店详情页面等。

1、开始规划

首先定义每种关键规格中的结构。我们制作三个页面范本，宽度分别为1024px(PC电脑宽度)、768px(iPad宽度)、320px(手机宽度)。从每列等宽的情况入手，可以让规划工作相对简单一些，帮助我们将注意力放在响应式的布局改变上。

2、沟通

接下来我们需要考虑的是，每一列中的模组元件应该以怎样的方式随着页面的宽度缩放而响应式的适应和调整。在这个过程里，保持团队成员之间的沟通是非常重要的，包括视觉设计师、开发人员等；使用初步的线框原型，与大家交流模组元件在布局和样式方面的调整计画，尽量在初期就让相关成员对整个规划做到心中有数，并尽早发现前端实现等方面的潜在的问题。

3、首页规划

也许对于自己的实际专案来说，其他页面的重要程度或代表性是超过首页的。这不是问题，可以调整具体的页面规划次序；我们的这个项目案例是从首页开始入手的。

4、主选单规划

我们设计了一个简单的横向主选单，其宽度可以随着萤幕宽度的变化而调整；在最后一种规格的范围里(320px以下)，主选单会折行显示，以保证主选单的可读性。Header中其他元素的调整方式与主选单的类似。

在这一步中，最好提前考虑一下关于元件元素的样式问题，做好与视觉设计师的交流沟通。例如：对于导航元素，如果使用复杂的tab式背景，就很有可能在小屏幕设备中、特别是导航条折行的情况下产生样式问题。

5、页脚部分

预设尺寸下，页脚由四列内容组成；另外两个规格范围中，布局分别为三列和一列；内容模组随资料内容向下扩展即可。

6、其他模组元件

全域的四列等宽网格布局使其他组件的规划也非常轻松。在首页中有一个元件，其中包含若干内容模组。预设尺寸下，可以并排显示四个模组；左右两边各有一个触发滚动的按钮，以点击之後模组清单会前後滚动，以显示更多内容。在平板电脑类型的布局中，预设显示的数量变为三个；而在手机的小尺寸屏幕中，内容模组清单会变为单列，并去掉了左右滚动的按钮，使用者可以上下滚动页面，依次查看不同的模组。

类似的，其他涉及到多列显示的元件和模组都需要做这样的考虑。要了解不同设备的使用者所习惯的操作方式，同时结合该设备的萤幕宽度规格，设计出最合理的布局及对话模式。

7、测试线框原型

我们可以线上框原型的初稿完成后，将其图片导入对应的设备中，进行一些简单的初步测试。试着上下或左右滚动原型介面，感受导航与功能、内容的布局，完成一些假设的获取资讯的目标。这样的测试可以说明我们尽早的检验页面在可访问性及可读性等方面的潜在问题。

对手机用户来说，有一个问题：多数页面在首屏中只能显示网站名、全域导航和搜索等功能；使用者点击全域导航中的连结后，即使页面正常的进行了跳转，也会给人一种错觉，好像页面并没有发生变化；除非滚动页面，通过查看页面的主要内容部分，来判断当前是否处于自己的目标页面。一个常见的解决方法是，对于小屏幕设备，将全域导航与主要内容之间的部分设计为可以展开或收起的容器，预设状态为收起，这样即能使主要内容可以呈现在首屏中，也可以保证功能的可用性。

8、网页视觉设计

相比于传统的网页视觉设计过程，在这里我们不仅要打造出风格恰当的UI元素，而且要根据前面制定下来的几种规格方案，对某些关键性的UI元素进行样式扩展或改造。在小屏幕版本中，最佳实践方式是做成可展开和收起的模式，而这种对话模式在平板电脑或桌面设备中是不需要的。类似这样情况，在视觉设计方面需要花些额外的功夫。

在视觉设计过程中，有一些很实际的经验和原则：

（1）尽量保持小屏幕规格样式的简洁；在UI元素风格方面，可以多与前端开发人员交流，尽量采用可以通过CSS3实现的常规风格样式，减少背景图片的使用。

（2）要保证内容的字体字型大小在所有设备中都足够可读，尤其是在手机上。

（3）与传统网页设计开发相似，最终产出的页面必定会与视觉稿有所出入；尤其对于响应式网站来说，在布局结构和细节样式等方面都需要有调整变化的能力，所以在开发过程中产生设计还原度方面问题的几率会更大。仍然要强调一点，就是在专案前期和中期保持设计师与开发者之间的交流与沟通，尽可能早的发现各类潜在问题。

响应式网页设计流程三、前端构建

来看一些在前端构建的过程中需要注意的问题：

 1、关于图片尺寸

对于小屏幕规格的设计方案，即使我们通过CSS缩小其显示尺寸，在资源方面仍然是要载入完整的大图的。所以我们在优化保存档图片的时候要尽可能的让文档更小。不过另外有些方法，可以说明我们真正实现图片档的响应化。大致思路是，通过JavaScript判断当前设备的解析度规格范围，并根据预设的规则载入不同尺寸的图片档。

2、使用高级CSS

让客户或需求方理解“渐进增强，平稳退化”的思路是很重要的，对于传统Web设计开发也是如此。对响应式网站来说，CSS3在降低资源消耗、提高页面载入速度等方面的作用尤为重要。

3、及时沟通

正如我们在前文中多次强调的，保持设计师与开发者之间的密切沟通和交流，对于专案的顺利进展会起到不可估量的作用；换个角度说，如果这方面做的不好，很多致命的潜在问题则有可能在专案后期集中爆发出来。