响应式网站设计的一般流程是怎样的？

积极响应式网站设计不像是传统网站设计只需考量一种状态，不是交货一套设计稿就回去事儿了，它给设计、前端和研发团队之间的协作模式增添代莱挑战。在一个繁杂产品全面积极响应式的项目里，可视化每个阶段该生产量什么?可视化与视觉如何协作?前端何时干预?哪些事情使后端研发去搞更合理?经历“玩客”第一版后，我们获得了一些答案。

积极响应式设计之所以叫做积极响应式“设计”而不叫做积极响应式“技术”，是因为它就是一项设计先行的工作。须要设计先明晰不好积极响应方式再同时实现出，无法出来一套设计稿后等着前端看看情况把它变为积极响应式网站设计。所以整个流程最初从可视化阶段已经开始，分为6个主要步骤，视觉、前端、研发等角色根据情况尽早干预。

Step1：信息架构，确认内容策略。

根据产品定位和用户分析，可视化设计师确认站点信息架构。(信息架构呈现出方式存有很多种，这不是本文重点，不详细描述)。

这时候可以明晰这个产品存有多少页面，每个页面涵盖多少内容，内容优先级就是什么。很多产品涵盖N多页面，每个页面一一考量积极响应式设计难导致纷乱且成本非常大。所以下一步关键工作就是分析页面类型把页面归类。以玩客为基准，可以把10多个页面分为三类：列表类页面、详情请类页面、操作方式类页面。

Step2：移动框架

先说道下为什么第二步必须先设计移动框架。移动优先就是移动互联网浪潮下应运而生的理念，由Luke Wroblewski最早明确提出。移动优先并不是指移动更关键，积极响应式设计理念里设备就是同等关键的。它就是指优先设计手机端的体验，存有三个原因：

手机使设计著眼，胁迫你想要确切什么信息就是最重要的。因为手机屏幕大，每屏呈现出的内容太少;触屏手机采用手指操作方式而非鼠标这样的高精度设备去操作方式，对操作方式存有更高建议;手机采用场景更加多样，很多场景用户就是缺少冷静的，比如说当你排队看看电影正在打听手机上的电子票，马上排在你了甩半天却迟迟打听没那张票这就是多么令人崩盘的事情。

手机许多特性使设计更强悍。手机上的语音输入、地理位置定位、多样的手势操作方式、越来越多传感器，手机可视化比PC具有更多可能性。从手机已经开始设计，使你更早地思索如何充分发挥这些特性。

手机正在十分迅速快速增长。手机即将打破PC，沦为最主流的玩游戏方式，这个趋势就是不可逆的。

从移动已经开始搞设计对习惯了PC环境的设计师可能将就是一种挑战，思索方式工作习惯都被迫作出发生改变。但这种发生改变必须回去适应环境，因为用户习惯在发生改变。

回去正题，上一步已经把页面归类并确认每个页面内容优先级，现在接着分析每种类型页面的导航系统、主体内容等框架结构，最终得出结论一份框架结构表中。从玩客框架结构窥见，全局导航系统就是所有页面公共的，局部导航系统只有列表类页面才存有，详情请类页面都存有一个“页面主人”信息，而关联导航系统不是每个页面都存有。

接着已经开始设计手机端的“逊于细长页面”的框架(因为手机上通常就是单列布局，所以页面又粗又短)。这一步已经开始把信息结构设计变成最粗放式的框架，可以在白板或纸面上顺利完成。必须同时实现的关键目标就是：把这个页面最须要呈现出给用户的内容放到最重要的边线，必须合乎手机上的写作和操作方式习惯，尽量利用手机设备的特性。

Step3：积极响应式框架

根据手机端的框架开拓出来平板和PC端的框架。这就是繁杂产品同时实现积极响应式设计的关键步骤，它就是使众多页面有条理地积极响应出来的基础。第一件事情就是确认积极响应式模式，即为从手机至平板至PC，导航系统怎么变化，页面布局用哪种积极响应方式，根据内容优先级如何调整模块顺序，等等。玩客在PC端的以三栏布局居多，左边栏做为局部导航系统或者主人信息区，中间栏始终就是页面主体信息，当页面须要关联导航系统时统一放到右边栏。

至现在这个阶段所有页面的积极响应式已经开始存有规则可寻，下一步工作就是稳步细化规则，把框架准确至具体内容尺寸。LX1就是制订流体栅格系统。流体栅格系统就是基于百分比的栅格布局工具，具体内容的制订方法可以在另外一个篇章【科学知识篇】中详尽了解。

积极响应式就是一种设计理念与前端技术紧密结合的新兴形态，引导尽早展开横跨职能沟通交流协作。可视化确认积极响应式框架和栅格系统后，其他角色就可以同步积极开展工作了。前端已经开始干预顺利完成栅格和框架构建，生产量页面基础框架。视觉同步已经开始积极探索和定义视觉风格积极探索，制订视觉框架，生产量风格关键词、产品配色方案。整个过程须要几个角色不断探讨确认。

Step4：模块设计

按照移动优先的原则必须先展开移动端的模块细节设计，不过我们挑选了从PC端的已经开始设计细节。因为PC端的研发能充份曝露业务复杂度，项目团队的设计、研发、测试在PC环境下具有明朗的工具和流程，从PC已经开始使研发过程更通畅。所以个人指出移动优先就是确认内容策略时必须遵从的理念，细节设计和研发过程与否必须移动优先，依赖于产品定位和项目团队情况。

积极响应式框架确认了页面结构和积极响应模式，模块设计这个过程已经开始健全所有信息排印和可视化形式，这就是可视化设计师最娴熟也就是最耗时的工作。这个过程与传统流程没太小区别，只是心里必须不断告诫自己，这个模块不是只为这个设备设计，它在其它设备下能出来问题吗?

可视化确认页面模块细节后可以提取出来产品使用的控件、组件和公共模块，现在视觉和前端已经开始搞一件不同于传统流程的事情。视觉根据前期定义的风格设计往下压组件和公共模块的视觉效果，把它们拆成一个演示的页面，我们称作风格手绘稿。前端再把风格手绘稿里的往下压组件和公共模块同时实现出，统一保护一套组件规范代码。

传统的作法往往就是页面视觉定稿后设计师已经开始整理视觉规范标示给前端。风格手绘稿就是将这个工作尽可能提早，并变为一个设计协作利器。它的好处就是：

1、一个页面的视觉效果实际上就是由一堆往下压组件和公共模块共同组成，用真实的往下压组件和公共模块手绘的演示页面已经可以呈现产品的视觉风格。把一个产品10多个页面的视觉稿全部顺利完成定稿就是非常费时费力的事情，生产量一份风格手绘稿则随心所欲得多。所以它就是一个高效率的设计工具。

2、繁杂产品总是牵涉多个设计师和前端循序工作，尽早地把往下压组件和公共模块提取出统一管理，就是确保视觉风格一致性的有效率方法。防止相同设计师同时设计同一个往下压组件或公共模块，增加重复研发导致的浪费。也大大降低后期更新和保护页面的成本，比如说当须要修正“高度关注”按钮时只需改为一个就能够全站生效。

Step5：积极响应式模块设计

PC端的页面模块细节和风格手绘稿顺利完成后，剩工作就是开拓出来平板和手机端的完备设计稿，前端生产量全部积极响应式页面代码。展开积极响应式模块设计时最须要高度关注的仍然就是使操作方式合乎设备习惯，充分利用设备特性。

至此，一个全站积极响应式产品的页面就陆续出了。很多人指出积极响应式设计保护成本高的理由就是一个页面必须同时设计多套设计稿。玩客这次经验说我们，确认一套设计稿和栅格系统后再开拓出来其它设备下的设计方案，工作量并不等于想象中的高。

Step6：测试&探讨&优化，递交研发

距大功告成还差最后一步，在真实设备下测试页面效果，项目团队探讨并持续优化。

在递交研发之前须要尽早明晰服务端积极响应(RESS)的策略。服务端与客户端融合就是目前化解积极响应式页面性能问题的最为合理方案。哪些小图片在移动设备下只需输入大尺寸图片?哪些内容在什么设备下就是不须要研发输入的?哪些可以增加输入的数据数量?与研发团队协作的积极响应式可以有效率掌控页面文件大小，防止页面沦为移动设备顶上用户流量的罪魁祸首。

测试通过后递交页面步入研发环节。我们从可用性和可以出访性两方面总结了一份积极响应式页面测试checklist，测试要点包含但仅限内容。