打造适应性网页平台：构建响应式网站的优势与不足分析

打造一个适应性网站有何利弊

适应性网站优势如下：

适应性网站的智能化

打造适应性网站，最显著的优势在于其智能化的适配设计，此类网站能根据用户设备显示端的尺寸差异，自动调整网站展示方式，几乎适配所有显示终端，并能在浏览器中调整网站宽度，避免出现滚动条，确保用户在任何显示器上浏览时，都不会出现布局混乱、内容显示不全或乱码问题，从而极大提升用户体验。

适应性网站也能节省成本

打造适应性网站，客户无需再为不同设备制作PC版或手机版网站，只需投资一次，即可享受两种网站体验，实现一站多用的效果，从而有效降低网站建设成本。

融入SEO的适应性网站

打造适应性网站，通常会在内容和代码编写上遵循SEO原理进行设计，使网站具备良好的SEO基础，上线后对搜索引擎表现出更亲和的态度。融入SEO的适应性网站，后期无需进行二次优化，大幅提升网站的收录和排名。

适应性网站劣势如下：

首先、适应性网站加载需要一定时间

在适应性设计中，需要下载一些看似不必要的HTML/CSS，以及未根据设备调整至适宜大小的图片，这些正是导致加载时间加倍的原因。

其次、适应性网站在搜索引擎优化时

对于适应性Web设计，为搜索引擎确定关键字并非易事。因为相比一般桌面用户，移动用户多数采用不同的关键字，修改标题和其他事项都比较困难。

第三、适应性网站影响Google排名

如果适应性网站仅根据移动内容，可能会影响网站的Google排名。由于Google不支持此类网站，不会对其进行索引。

第四、打造适应性网站耗时较多

如果企业计划将现有网站转化为适应性网站，可能需要更多时间。如果企业确实需要适应性网站，建议从草图开始设计。

第五、适应性网站的布局

适应性网站Web设计的布局主要是流体的，这正是设计师对设计风格缺乏良好控制的原因。

适应性网站建设流程如下：

1、信息架构，确定内容策略

根据产品定位和用户分析，交互设计师确定站点信息架构。（信息架构呈现方式有很多种，本文不重点介绍）

此时可以明确产品包含多少页面，每个页面包含多少内容，内容优先级是什么。很多产品包含众多页面，逐一考虑响应式设计容易造成混乱且成本高昂。因此，下一步重要工作是分析页面类型，对页面进行归类。以玩客为例，可以将10多个页面分为三类：列表类页面、详情类页面、操作类页面。

2、移动框架

先说明为何第二步要先设计移动框架。移动优先是移动互联网浪潮下应运而生的理念，由LukeWroblewski最早提出。移动优先并非指移动更重要，在响应式设计理念中，设备同等重要。它是指优先设计手机端体验，有三个原因：

（1）手机让设计专注，迫使你思考什么信息最重要。因为手机屏幕小，每屏呈现的内容少；触屏手机使用手指操作而非鼠标这样的精密设备，对操作有更高要求；手机使用场景更加丰富，许多场景用户缺乏耐心，例如当你排队看电影时，正在找手机上的电子票，马上排到你了，却翻半天找不到那张票，这是多么令人崩溃的事情。

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

从移动端开始设计对习惯了PC环境的设计师可能是一种挑战，思考方式和工作习惯被迫改变。但这种改变必须适应，因为用户习惯在改变。

上一步已经将页面归类并确定每个页面内容优先级，现在继续分析每种类型页面的导航、主体内容等框架结构，最终得出一份框架结构表。从玩客框架结构可以看出，全局导航是所有页面公共的，局部导航只有列表类页面才有，详情类页面都有一个“页面主人”信息，而关联导航并非每个页面都有。

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

3、响应式框架

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

到现在这个阶段，所有页面的响应式都有规则可循，下一步工作就是继续细化规则，将框架精确到具体尺寸。具体来说，就是制定流体栅格系统。

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

响应式是一种将设计理念与前端技术紧密融合的新兴模式，倡导尽早进行跨职能的沟通与合作。在交互阶段确定响应式框架和栅格系统后，其他角色便可以同步推进工作。前端开始着手构建栅格和框架，形成页面基础结构。视觉设计同步开展对视觉风格的探索与定义，构建视觉框架，并产出风格关键词和产品配色方案。这一过程需要多个角色持续讨论和确定。

4、模块设计

按照移动优先的原则，本应先进行移动端的模块细节设计，但我们选择了从PC端入手。因为PC端开发能充分揭示业务复杂性，项目团队在PC环境下拥有成熟的工具和流程，从PC端开始可以更顺畅地推进开发过程。因此，个人认为移动优先是确定内容策略时应遵循的理念，而细节设计和开发过程是否要移动优先，则取决于产品定位和项目团队的具体情况。

响应式框架确定了页面结构和响应模式，模块设计阶段开始完善所有信息排版和交互形式，这是交互设计师最擅长且耗时的工作。这个过程与传统流程差别不大，但需要不断提醒自己，这个模块不仅仅是为这个设备设计，在其他设备下是否会出现问题？

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

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

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

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

5、响应式模块设计

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

至此，一个全站响应式产品的页面陆续呈现。许多人认为响应式设计维护成本高，理由是一个页面需要同时设计多套设计稿。玩客这次经验告诉我们，在确定一套设计稿和栅格系统后，再拓展其他设备下的设计方案，工作量远比想象中的低。

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

在最后阶段，需要在真实设备下测试页面效果，项目团队进行讨论并持续优化。在提交开发之前，需要尽早明确服务端响应（RESS）的策略。服务端与客户端结合是目前解决响应式页面性能问题的最合理方案。哪些大图片在移动设备下只需输出小尺寸图片？哪些内容在什么设备下是不需要开发输出的？哪些可以减少输出的数据数量？与开发团队协作的响应式可以有效控制页面文件大小，避免页面成为移动设备上消耗用户流量的罪魁祸首。