响应式网页设计流程

响应式设计的目的在于，针对不同设备的屏幕规格区间，进行功能及内容的输出格式预设，所以我们只需要选取一些具有代表性的设备，而不必顾全所有已知的规格类型，我们制作线框原型的主要目标是规划样式背后的逻辑。

在这个阶段，我们必须清楚，整个网站中有哪些关键页面是在功能和布局方面具有代表性的，对于这次的案例网站，“关键页面”包括首页、预订流程中的页面、酒店详情页面等。

1、开始规划

首先来定义每种关键规格中的结构网格，我们创建了三个页面模板，宽度分别为1024像素(桌面显示器)、768像素(iPad竖屏宽度)、320像素(iPhone竖屏宽度)。

从每列等宽的情况入手，可以让规划工作相对简单一些，帮助我们将注意力放在响应式的布局改变上。

2、沟通与评审

接下来我们需要考虑的是，每一列中的模块组件应该以怎样的方式随着页面的宽度缩放而响应式的适应和调整，在这个过程里，保持团队成员之间的沟通是非常重要的，包括视觉设计师、前端开发人员等。

使用初步的线框原型，与大家交流模块组件在布局和样式方面的调整计划，尽量在初期就让相关成员对整个规划做到心中有数，并尽早发现前端实现等方面的潜在的问题。

3、首页

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

4、全局导航

我们创建了一个简单的横向导航条，其宽度可以随着屏幕宽度的变化而调整，在最后一种规格的范围里(320像素以下)，导航条会折行显示，以保证导航元素的可读性。

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

5、页脚

默认尺寸下，页脚由四列内容组成；另外两个规格范围中，布局分别为三列和一列；内容模块随文档流向下依次扩展即可。

6、其他模块组件

全局的四列等宽网格布局使其他组件的规划也非常轻松，在首页中有一个组件，其中包含若干内容模块，默认尺寸下，可以并排显示四个模块，左右两边各有一个触发滚动的按钮，以点击之后模块列表会前后滚动，以显示更多内容。

在平板电脑类型的布局中，默认显示的数量变为三个；而在手机的小尺寸屏幕中，内容模块列表会变为单列，并去掉了用于左右滚动的按钮，用户可以上下滚动页面，依次查看不同的模块。

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

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

对于手机用户来说，有一个问题：多数页面在首屏中只能显示网站名、全局导航和搜索等功能；用户点击全局导航中的链接之后，即使页面正常的进行了跳转，也会给人一种错觉，好像页面并没有发生变化；除非滚动页面，通过查看页面的主要内容部分，来判断当前是否处于自己的目标页面。

一个常见的解决方法是，对于小屏幕设备，将全局导航与主要内容之间的部分设计为可以展开或收起的容器，默认状态为收起，这样即能使主要内容可以呈现在首屏中，也可以保证功能的可用性。