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

今次的译文中，我们继续响应式Web设计方面的话题。前面的几篇相关文章以概念诠释、方法说明为主，本篇则围绕一个实际网站案例展开，从需求、流程、步骤细节等方面描述了响应式设计在项目中的实践方式。

本篇的部分内容要点会与之前几篇产生交集；我们会在这些地方提供相应文章的入口，便于深入参考阅读。接下来进入正文。

根据DailyTech的统计，到2015年，移动互联网的用户数量将会超过桌面用户。除了智能手机之外，使用平板电脑甚至是电视机进行上网的用户也在持续增加。在这种形势下，怎样让我们的网站尽量兼容各种类型的设备，并确保优良的用户体验，这将是越来越重要的问题。

通过响应式的设计开发方式，我们可以使网站页面随浏览设备的不同而自行响应，动态的调整布局结构、元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户。

如果你对响应式Web设计还不大了解，可以先参考阅读我们之前的关于响应式设计的概念、组成要素及基本实现思路方面的文章，全方位预热一下。

什么情况下适宜采用响应式Web设计的方式

当客户提出产品功能移动化的需求时，有一些解决方案可供我们选择，包括原生客户端应用、Web应用等；究竟怎样的方式更合适，还是取决于具体的需求情况。另外也要考虑网站本身是否需要实施移动化。虽然响应式站点并不能算是一种纯粹的移动化解决方案，但是，在某些情况下，这种方式是非常值得考虑的。

你心里没谱

设计开发一个全新的移动版本站点或是客户端应用，整个过程是有很大挑战性的。除非产品正式上线，否则你无法真正了解它是否会成功。与其单纯的为了移动化而花费资源打造移动版本站点或是开发客户端应用，不如先花些心思将原本的网站打造的更具弹性，使其在各种主流移动设备中都拥有尽量优秀的用户体验。

你想节约成本

要打造响应式站点，自然离不开有经验的交互、视觉设计及前端开发人员。所需的资源，尤其是时间方面，比起普通网站来说大约增加20%到30%的样子；但比起单独打造移动版本的网站，或是设计开发客户端应用的成本来说，却要低很多。从维护的角度来说，也会轻松很多。

你希望网站可以兼容未来的新设备

所谓的移动版本站点，通常是针对某类具体规格的设备进行单独打造的，弹性比较差。新的移动设备层出不穷，传统的移动版本站点需要不断的进行更新维护，才能尽量保证在新设备中工作良好。响应式设计可以根据设备浏览环境的具体规格进行判断，使用不同的呈现方式来展示内容，无需针对某种特定的规格进行维护，适应性更好。

更多

关于网站移动化的方式选择，可以参考我们之前的文章“走出移动互联网的迷宫 - 网站移动化的方法策略”。

响应式网站页面的设计流程

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

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

2．制作线框原型

3．视觉设计

4．前端构建

用户研究与设备规格预估

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

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

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

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

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

制作线框原型

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

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

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

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

标签： 响应式Web设计 交互设计 CSS3 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。