深入解析网站搭建流程：详述网站建设步骤及响应式网站制作流程

响应式网站构建流程解析

1、内容结构规划，确立内容策略

依据产品定位和用户调研，交互设计师确立站点内容结构。（内容结构展示形式多样，非本文核心，不予详述）。

此时可明确产品包含多少页面，每个页面所包含的内容，内容优先级如何。众多产品包含众多页面，逐页考虑响应式设计易致混乱且成本高昂。因此，下一步关键任务是对页面类型进行分析，对页面进行分类。以玩客为例，可将十数个页面划分为三类：列表型页面、详情型页面、操作型页面。

2、移动端架构

首先阐述为何第二步需先设计移动端架构。移动优先是伴随移动互联网潮流而生的理念，由LukeWroblewski首次提出。移动优先并非指移动更为重要，在响应式设计理念中，各种设备同等重要。它指的是优先设计手机端体验，原因有三：

(1)手机使设计更为专注，迫使你明确何为最重要的信息。由于手机屏幕小，每屏显示内容较少；触屏手机以手指操作，而非鼠标等精密设备，对操作提出更高要求；手机使用场景更为丰富，许多场景下用户缺乏耐心，如排队看电影时查找手机上的电子票，马上轮到你却翻遍半天也找不到，这多么令人沮丧。

(3)手机正在迅速增长。手机即将超越PC，成为最主流的上网方式，这一趋势不可逆转。

从移动端开始设计对习惯PC环境的设计师来说可能是一种挑战，但必须适应这种改变，因为用户习惯正在改变。

上一步已对页面进行分类并确定每个页面内容优先级，接下来分析各类页面的导航、主体内容等架构结构，最终形成一份架构结构表。从玩客架构结构中可以看出，全局导航为所有页面共有，局部导航仅列表型页面拥有，详情型页面都有一个“页面主人”信息，而关联导航并非每个页面都具备。

接下来开始设计手机端“超细长页面”的架构（由于手机上通常是单列布局，所以页面又细又长）。这一步开始将信息结构设计成最粗放的架构，可在白板或纸张上完成。要实现的关键目标是：将页面最需要呈现给用户的内容放在最重要的位置，符合手机上的阅读和操作习惯，尽量利用手机设备的特性。

3、响应式架构

根据手机端架构拓展出平板和PC端架构。这是复杂产品实现响应式设计的关键步骤，是让众多页面有条理地响应起来的基础。首要任务是确定响应式模式，即从手机到平板到PC，导航如何变化，页面布局采用哪种响应方式，根据内容优先级如何调整模块顺序等。玩客在PC端以三栏布局为主，左侧栏作为局部导航或主人信息区，中间栏始终为页面主体信息，当页面需要关联导航时统一放置在右侧栏。

截至目前，所有页面的响应式设计已有规则可循，下一步工作则是继续细化规则，将架构精确到具体尺寸。具体来说，就是制定流体栅格系统。

响应式是一种将设计理念与前端技术紧密结合的新兴形态，鼓励尽早进行跨职能沟通协作。交互确定响应式架构和栅格系统后，其他角色即可同步开展工作。前端开始介入完成栅格和架构搭建，产出页面基础架构。视觉同步开始探索和定义视觉风格，制定视觉架构，产出风格关键词、产品配色方案。整个过程需要多个角色不断讨论确定。

4、模块设计

按照移动优先的原则，应该先进行移动端的模块细节设计，但我们选择了从PC端开始设计细节。因为PC端开发能够充分暴露业务复杂度，项目团队在设计、开发、测试方面在PC环境下拥有成熟的工具和流程，从PC端开始让开发过程更为顺畅。因此，个人认为移动优先是确定内容策略时应遵循的理念，细节设计和开发过程是否要移动优先，取决于产品定位和项目团队情况。

响应式架构确定了页面结构和响应模式，模块设计阶段开始完善所有信息排版和交互形式，这是交互设计师最熟练也是最耗时的工作。这个过程与传统流程没有太大区别，只是心里要不断提醒自己，这个模块不是只为这个设备设计，它在其他设备下会出现问题吗？

交互确定页面模块细节后，可以提取出产品所使用的控件、组件和公共模块，此时视觉和前端开始进行一项与传统流程不同的事情。视觉根据前期定义的风格设计控件和公共模块的视觉效果，将它们拼成一个模拟页面，我们称之为风格拼贴稿。前端再将风格拼贴稿中的控件和公共模块实现出来，统一维护一套组件规范代码。

传统的做法往往是页面视觉定稿后，设计师开始整理视觉规范标注给前端。风格拼贴稿是将这项工作尽可能提前，并变成一个设计协作利器。它的好处是：

(1)一个页面的视觉效果实际上是由一堆控件和公共模块组成，用真实的控件和公共模块拼贴的模拟页面已经可以呈现出产品的视觉风格。完成一个产品十数个页面的视觉稿全部定稿是非常费时费力的，产出一份风格拼贴稿则轻松得多。因此，它是一个高效的设计工具。

(2)复杂产品总是涉及多个设计师和前端并行工作，尽早地把控件和公共模块抽取出来统一管理，是保证视觉风格一致性的有效方法。避免不同设计师同时设计同一个控件或公共模块，减少重复开发造成的浪费。也大大降低后期更新和维护页面的成本，如需修改“关注”按钮时只需修改一个即可全站生效。

5、响应式模块设计

PC端模板细节和风格拼贴稿完成后，接下来是拓展出平板和手机端的完整设计稿，前端产出全部响应式页面代码。进行响应式模块设计时，最需要关注的是让操作符合设备习惯，充分利用设备特性。

PC模板的细节与风格拼贴完成后，接下来的任务是制作平板和手机端的完整设计图，前端需要输出全部的响应式页面代码。在实施响应式模块设计时，最关键的是确保操作符合设备的使用习惯，并充分利用设备的特性。

至此，整个网站的响应式页面设计已逐步完成。许多人认为响应式设计的维护成本较高，原因在于一个页面需要同时设计多套设计图。但本次“玩客”的经验告诉我们，在确定一套设计图和栅格系统后，再拓展到其他设备的设计方案，工作量远低于预期。

6、测试/讨论/优化，提交开发

离项目圆满完成尚有一小步，需要在真实设备上测试页面效果，项目团队进行讨论并持续优化。

在提交开发前，需要尽早明确服务端响应（RESS）的策略。服务端与客户端的结合是目前解决响应式页面性能问题的最佳方案。例如，哪些大图片在移动设备下只需输出小尺寸图片？哪些内容在什么设备下不需要开发输出？哪些可以减少输出的数据量？与开发团队协作的响应式设计可以有效地控制页面文件大小，避免页面成为移动设备上消耗用户流量的罪魁祸首。

如何构建一个响应式网站 只需五个步骤

响应式网站设计（Responsive Web design）的理念是：页面的设计与开发应根据用户行为及设备环境（系统平台、屏幕尺寸、屏幕方向等）进行相应的响应和调整。具体的实践方式涉及多个方面，包括弹性网格和布局、图片、CSS媒体查询的使用等。无论用户正在使用笔记本电脑还是iPad，我们的页面都应能自动切换分辨率、图片尺寸及相关脚本功能，以适应不同设备；换句话说，页面应具备自动响应用户设备环境的能力。响应式网页设计意味着一个网站能够兼容多个终端——而不是为每个终端创建一个特定的版本。这样，我们就不必为不断涌现的新设备进行专门的版本设计和开发了。