响应式web设计不同于传统web设计。它只需要一种心态，不需要提交一套设计草稿。它对设计、前端和开发团队之间的协作模型提出了新的挑战。在一个具有复杂产品的完全响应的项目中，在每个交互阶段应该产生什么样的交互和愿景，如何协同工作，何时在前端进行干预，以及什么使后端开发更加合理。在播放器的**个版本之后，我们得到了一些答案。

　　响应方程设计称为amp；ldquo；设计amp; rdquo；代替amp；ldquo；技术amp；rdquo因为它是设计优先级。我们需要设计一个明确的回应方式。我们不能生产一套设计草案，并等待前端看到它。将其转换为响应网站设计。因此，整个过程从互动阶段开始，分为六个主要步骤。视觉、前端、开发等角色将根据情况尽快参与。

　　第1步：信息架构、内容策略。

　　互动设计事业部根据产品定位和用户分析，确定网站信息架构。呈现信息体系结构的方法有很多种。这不是本文的重点。

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

　　第二步：移动框架

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

　　手机关注设计，迫使你清楚地思考什么信息**重要。由于屏幕较小，每个屏幕显示的内容较少；触摸屏手机使用的是手指操作的复杂设备，而不是鼠标，因此操作要求更高；手机使用场景更加丰富，很多场景用户非常不耐烦。比如，当你排队看电影，用手机寻找电子机票时，你会立刻出现在你面前，结果，你很长时间找不到机票。

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

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

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

　　回到主题，**后一步是对页面进行分类，并确定每个页面内容的优先级。现在我们分析了每种页面类型的导航、主要内容等框架结构，**后给出了框架结构表。从播放器的框架中，我们可以看到全局导航对所有页面都是通用的，本地导航只能用于列出类页面，并且有一个详细类页面amp；ldquo；页面所有者amp；rdquo；信息，关联的导航不是每一页。

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

　　第三步：应对框架

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

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

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

　　用途：模块设计

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

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

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

　　传统上，页面完成后，设计部门开始将视觉规范组织到前端。风格拼贴是为了促进作品尽快成为设计协作的工具。其优点如下：

　　1.页面的视觉效果实际上是一堆控制组件和公共模块。模拟页面将折叠，其中包含真实的控制组件和公共模块，以显示产品的视觉样式。制作一个10页以上的产品的视觉草图既费时又费力，而且制作一个风格拼贴要容易得多。所以这是一个有效的设计工具。

　　2.复杂产品总是涉及多个设计工程师与前端并行工作。尽快提取控制元件和通用模块，统一管理是一种有效的方法。避免不同设计人员设计同时设计同一控制元件或通用模块，减少重复开发造成的浪费。它还大大降低了以后更新和维护页面的成本，例如，当您需要修改时amp；ldquo；注意amp；rdquo；按钮，您只需要更改一个按钮就可以对整个站点产生影响。

　　第5步：响应模块设计

　　pC页面模块的细节和样式拼贴完成后，剩下的工作是展开平板电脑和移动终端的完整设计草稿，前端输出所有响应页面代码。在设计响应模块中，**重要的是使操作符合设备习惯，充分利用设备特性。

　　此时，一个网站回复产品页面相继出现。许多人认为responsive设计维护成本高的原因是页面必须同时有多个设计草稿。经验告诉我们，当我们决定设计起草和网格系统，然后扩展设计其他设备时，工作量远低于预期。

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

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

　　在进行开发之前，需要尽早定义服务器响应策略（RESS）。服务器端和客户端的结合是解决响应页面性能问题的**合理方案。哪些大图片只需要在移动设备上输出小尺寸的图片，哪些不需要在哪些设备上开发，这样可以减少数据输出量，开发团队的响应能力可以有效控制页面文件的大小，并防止页面成为烧掉移动设备上用户流量的罪魁祸首。

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

　　深圳网站建设