响应式网站设计的一般过程是怎样的?

响应式Web设计与传统Web设计不同，它只需要一种思想状态，而不需要交付一组设计草案。它对设计、前端和开发团队之间的协作模式提出了新的挑战。在一个具有复杂产品的完全响应式项目中，每个交互阶段应该产生什么?互动和视觉如何协同工作?前端什么时候介入?什么使后端开发更合理?在第一个版本的播放器之后，我们得到了一些答案。

响应式设计被称为“设计”而不是“技术”，因为它是设计优先的任务。需要设计一个明确的回应的出路，不能产生一套设计草案后等待前端看到的情况，把它变成一个响应性网站设计。因此，整个过程从交互阶段开始，分为六个主要步骤。视觉、前端、开发等角色会根据情况尽快参与。

步骤1:信息架构，内容策略。

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

此时，您可以确定产品有多少页，每个页面包含多少内容，以及内容优先级是多少。许多产品包含N个多页面，对每个页面的响应式设计进行一对一的考虑可能会让人感到困惑和昂贵。因此，下一个重要步骤是分析页面类型并对页面进行分类。例如，超过10个页面可以分为三类:列表页面、详细页面和操作页面。

步骤2:移动框架

让我们首先解释为什么第二步是首先设计移动框架。移动优先级是移动互联网的概念，这是由Luke Wroblewski首先提出的。移动优先级并不意味着移动更重要。响应设计中的设备同样重要。它指的是优先考虑手机终端体验的设计，原因有三。

手机专注于设计，迫使你清楚地思考什么信息是最重要的。由于屏幕小，每个屏幕呈现的内容较少;触摸屏手机使用的是手指操作而不是鼠标操作的复杂设备，操作要求更高;手机使用场景更丰富，很多场景用户都很不耐烦，比如当你排队看电影，在手机上寻找电子票的时候，马上就排到你的前面，结果很长一段时间都找不到票。

手机的许多功能使得设计更加强大。有了语音输入、地理定位、丰富的手势操作和越来越多的传感器，移动交互比PC更有可能。从移动电话开始，您可以考虑如何更早地利用这些功能。

移动电话正在迅速发展。移动电话将很快超越PC，成为最主流的互联网接入方式。这种趋势是不可逆转的。

对于习惯于PC环境的设计师来说，从移动设备进行设计可能是一个挑战，思维和工作习惯被迫改变。但这种变化必须适应，因为用户习惯正在改变。

回到主题，最后一步对页面进行了分类，确定了每个页面内容的优先级，现在我们分析了每种页面类型的导航，主要内容等框架结构，最后给出了框架结构表。从玩家的框架中可以看出，全局导航对于所有页面来说都是通用的，局部导航只能用于列出类页面，细节类页面有一个“页面所有者”信息，关联的导航并不是每个页面。

然后我们开始为手机上的“超薄页面”设计框架(因为手机通常是单列布局，所以页面又细又长)。在这一步中，信息结构被设计成最广泛的框架，可以在白板或纸上完成。关键是把页面最需要呈现给用户的内容放在最重要的位置，符合手机的阅读和操作习惯，充分利用移动设备的特点。

步骤3:响应框架

基于手机的框架扩展平板和PC端框架。这是实现复杂产品响应式设计的关键步骤，也是许多页面有序响应的基础。首先要做的是确定响应模式，即导航从手机到平板到PC的变化，页面布局使用的响应模式，如何根据内容优先级调整模块顺序等等。玩家在PC端以三列布局，左侧作为本地导航或主信息区域，中间的栏始终是主页信息，当页面需要与导航相关联时在右侧栏。

在这个阶段，所有页面的响应都开始遵循规则，下一步是细化规则并细化框架到特定的大小。具体来说，就是开发流体网格系统。流体网格系统是一种基于百分比的网格布局工具，具体公式将在另一章中详细介绍。

响应式设计是一种与前端技术紧密结合的设计理念的新兴形式，鼓励早期跨功能的沟通和协作。在与响应框架和光栅系统交互之后，其他角色可以同步。前端涉及到网格和框架的构建，输出页面基础结构。视觉同步开始探索和定义视觉风格探索，开发视觉框架，输出风格关键词，产品色彩方案。整个过程需要讨论和确定几个角色。

目的:模块设计

根据移动优先的原则，我们应该先设计移动端的模块细节，但是我们选择从PC端开始。由于PC端开发可以充分暴露业务复杂性，所以项目团队在PC环境中的设计、开发、测试都有成熟的工具和流程，从PC端使开发过程更加顺利。所以我认为移动优先级是在确定内容策略时应该遵循的概念。具体的设计和开发流程是否移动优先取决于产品定位和项目组情况。

响应框架定义页面结构和响应模式，模块设计过程开始细化所有的信息排版和交互形式，这是交互设计人员最熟练、最耗时的工作。这个过程和传统的过程并没有太大的区别，但是不断的提醒自己这个模块不是为这个设备设计的，在其他设备下会有问题吗?

在交互式地确定页面模块的详细信息之后，您可以提取产品使用的控件、组件和通用模块。现在，愿景和前端开始做一些不同于传统过程的事情。视觉设计控制组件和常用模块视觉效果根据之前定义的样式，将它们放在一个模拟页面中，我们称之为样式拼贴。前端实现了样式拼贴文稿中的控制组件和通用模块，并统一了一组组件规范代码的维护。

传统的做法是，页面完成后，设计师开始将视觉规范组织到前端。风格拼贴是为了尽早的推进工作，成为设计协作的工具。它的优点是:

1。页面的视觉效果实际上是由控制组件和公共模块组成的堆栈。仿真页面与真实的控件组件和公共模块拼贴，可以显示产品的视觉风格。制作一个超过10页的产品的视觉草图既费时又费力，而且制作一个风格拼贴要容易得多。所以这是一个有效的设计工具。

2。复杂的产品总是涉及多个设计师和前端并行工作。尽早提取控制组件和常用模块并统一管理是保证视觉风格一致性的有效方法。避免不同的设计人员同时设计相同的控制元件或通用模块，减少重复开发造成的浪费。它还大大降低了以后更新和维护页面的成本，例如，当您需要修改“关注”按钮时，只需更改一个按钮就可以对整个站点产生影响。

Step5:响应式模块设计

在pc端页面模块的细节和风格拼贴完成后，剩下的工作就是展开平板和手机端的完整设计稿，前端输出所有的响应页面代码。在设计响应模块时，最重要的是要使操作符合设备习惯，充分利用设备特性。

这时，一个站点响应产品页面一个接一个地出现了。很多人认为响应式设计维护成本高的原因是页面必须同时设计多组设计稿。经验告诉我们，当我们决定设计草案和网格系统，然后扩展其他设备的设计时，工作量比预期的要低得多。

步骤6:测试、讨论、优化、提交和开发

最后一步是在实际设备上测试页面效果，项目团队将讨论并继续优化。

服务器响应策略(RESS)需要在提交开发之前尽早定义。服务器与客户端相结合是目前解决响应页面性能问题最合理的解决方案。哪些大图片只需要在移动设备上输出小尺寸图片?哪些不需要在哪些设备上开发?哪些可以减少数据输出量?与开发团队协作的响应性可以有效地控制页面文件的大小，并防止页面成为在移动设备上燃烧用户流量的罪魁祸首。

测试通过后，将页面提交到开发链接。我们从可用性和可访问性两个方面总结了响应性页面测试检查表。测试点包括但不限于内容。

深圳网站建设