案例学习 响应式网站的产品需求和设计流程详解

作为范例，来演示响应式Web设计的流程。这个网站是我们在九月份刚刚为Macdonald连锁酒店创建的。在整个设计开发流程中，有几个关键步骤，是我们接下来要逐一展开学习的：

1．用户研究与设备规格预估

2．制作线框原型

3．视觉设计

4．前端构建

用户研究与设备规格预估

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

用户在不同设备上的目标有多大区别？

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

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

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

制作线框原型

通过线框图，我们可以对响应式的视觉效果背后的逻辑结构进行规划和定义。（关于线框原型，可以参考我们之前的“线框原型的本质及实践应用概述”）

我们根据之前一步的研究和预估结果，规划出几种比较典型的屏幕尺寸规格。本次案例中，我们选择了三款具有代表性的主流设备，包括桌面显示器、iPad和iPhone，因为根据我们的用户研究结果，使用这三种设备的用户占了绝大部分。

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

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