自适应网页设计解析：打造响应式网站的优势与挑战探讨

构建一个自适应网站有哪些优点和不足

自适应网站的优势包括：

自适应网站的智能化

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

自适应网站可节省成本

构建自适应网站，客户无需再为不同设备制作PC版网站或手机版网站，只需投入一份成本，即可获得两种网站的使用体验，最终实现一网多用的效果，从而实现节约网站建设成本。

融入SEO的自适应网站

构建自适应网站，为了使客户网站有更好的后续发展，通常会在内容和代码编写上，按照SEO原理进行设计，使网站具备更好的SEO基础，这样自适应网站上线后，对搜索引擎将展现出更加友好的表现。而自适应网站融入SEO后，网站后期可免于二次优化，大大加快网站的收录和排名。

自适应网站不足之处如下：

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

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

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

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

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

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

第四、打造自适应网站所耗时间较多

如果企业计划将现有网站转化为自适应网站，可能耗时更长。如果企业真的想要一个自适应网站，建议企业最好从草图开始设计。

第五、自适应网站的布局

自适应网站Web设计的布局主要是流体的，这正是设计者对设计款式掌控不足的原因。

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

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

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

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

2、移动框架

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

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

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

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

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

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

3、响应式框架

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

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

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

响应式设计理念与前端技术紧密融合的新兴模式，倡导尽早开展跨职能的沟通与协作。在确定交互框架和栅格系统后，其他团队成员即可同步展开工作。前端着手构建栅格和框架，形成页面基础结构。视觉团队同步进行视觉风格的探索与定义，确立视觉框架，产出风格关键词及产品配色方案。整个流程需多个角色持续沟通以达成共识。

4、模块设计

遵循移动优先的原则，理论上应先进行移动端模块的细节设计，但本项目选择从PC端着手。这是因为PC端开发能充分揭示业务复杂性，项目团队在PC环境下拥有成熟的工具和流程，从而使得开发过程更为顺畅。因此，个人认为移动优先应作为确定内容策略时遵循的理念，而细节设计和开发过程是否以移动优先，则需根据产品定位和团队情况而定。

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

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

传统做法通常是页面视觉定稿后，设计师开始整理视觉规范标注给前端。风格拼贴稿将这项工作尽可能提前，并成为一个设计协作的有力工具。其优势包括：

(1)一个页面的视觉效果实际上是由众多控件和公共模块组成，使用真实的控件和公共模块拼贴的模拟页面已能呈现出产品的视觉风格。完成一个产品10多个页面的视觉稿需耗费大量时间和精力，而制作一份风格拼贴稿则相对轻松。因此，它是一个高效的设计工具。

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

5、响应式模块设计

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

至此，全站响应式产品的页面陆续呈现。许多人认为响应式设计维护成本高，原因在于需同时设计多套设计稿。本次“玩客”项目的经验告诉我们，在确定一套设计稿和栅格系统后，再拓展其他设备下的设计方案，工作量远低于预期。

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

在完成最后一步之前，需在真实设备上测试页面效果，项目团队讨论并持续优化。

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