期望我的该文能试试你吧！
近几年，市售再次出现了许多新式电子设备，从智能化手环到GT630M屏电视节目，电子设备的萤幕体积、X310e都在急速地变动。人们早已生活习惯在数个电子设备之间展开转换，多屏交互正式成为现实生活中不可或缺的一小部分。
「积极响应式结构设计」能为不同电子设备的使用者提供更多更快的听觉呈现出与新体验，愈来愈多的结构雕塑家与合作开发技师选用这个控制技术，「积极响应式」早已正式成为多屏新体验结构设计的生活必需品，用“必然趋势”来比喻也称不上。
01「 什么是积极响应式?」
积极响应式的来历
往后，页面结构设计多半都是订制化的，只需要考量网络连接非主流电子设备的萤幕体积，依次订制两套结构设计图就能满足用户市场需求。
但是，除非有捷伊萤幕体积再次出现，原有页面就有非常大几率会再次出现网络连接问题，让使用者新体验打折扣。（如: 在ophone电子设备关上了两个仅适宜在液晶电视节目电子设备下载的页面）
或许, 如前所述两个一般而言体积对页面展开结构设计早已难以满足用户使用者电子设备多元化的市场需求。平庸的情况是为每两个电子设备都订制结构设计图, 但这对绝多半数中文网站而言都是毫无意义的, 因为实现生产成本太高。
2010年5月，知名页面结构雕塑家Ethan Marcotte明确提出「积极响应式产业布局」,即两个中文网站能相容数个终端产品，而不是为每一终端产品做两个某一的版。
积极响应式是为化解移动互联网下载市场需求而问世的
直至今天，依然有很多结构雕塑家使用「积极响应式」化解多屏结构设计的网络连接问题，甚至运用到跨屏产品的创新新体验当中。
积极响应式的定义与好处
「积极响应」就是系统对于外部变动的反馈跟适应，「积极响应式」就是系统做出这种反馈所依据的方案与策略。
对于两个页面而言，「积极响应式」积极响应的就是媒介与视窗的变动，积极响应的结果在听觉上表现为: 页面在不同媒介、不同视窗下会有不同的产业布局结构、版式结构设计、不同数量的信息展示等。
这个定义有点抽象, 给大家举个例子:
如上图,随着视窗的变动,页面有着不同的呈现出,这就是通过积极响应式实现的。
判断两个中文网站是不是积极响应式，只需要用鼠标拖动边框，看看是否会产生积极响应变动。
积极响应式的好处是能实现一站多屏使用，实现和维护的生产成本比较低, 更重要的是能让使用者通过不同的电子设备访问都能获得最佳的使用者新体验。
积极响应式的实现原理
积极响应式策略如何制定是由结构雕塑家来主导的, 所以, 结构雕塑家需要深入了解实现原理,这样有利于与合作开发技师高效地协作。
– 断点
指页面产业布局发生变动的节点。结构雕塑家能根据业务市场需求,定义不同断点区间下的听觉呈现出。
– 媒体查询
媒体查询是合作开发技师实现「积极响应式」的两个方法,「媒体查询」能在不同的条件下调用不同的样式，使页面在不同电子设备下达到不同的展示效果。
结构雕塑家需要设置好「断点」,而合作开发技师需要通过「媒体查询」快速判断电子设备萤幕体积在哪个「断点」区间内, 然后展示对应区间的听觉样式, 如下图:
02「什么是栅格？」
栅格的定义与好处
页面的栅格就是以规则的网格阵列来指导和规范页面中的版面产业布局以及信息分布。
在日常的结构设计工作中，我们常会用「参考线」让页面元素对齐，「栅格」其实也是两个帮助我们规范页面排版的好工具。
使用栅格有很多好处。除了能让页面结构设计更有规律、好看之外，还能作为全站结构设计遵循的框架与标准，减少结构设计决策生产成本，也便于团队协作。
从合作开发角度看，栅格能保证产业布局的一致性和可复用性，降低了结构雕塑家与合作开发技师的沟通生产成本，能提升效率；从使用者角度看，栅格能让信息的展示更清晰，提升使用者的阅读效率与新体验。
栅格的组成元素
– 网格
网格是构成页面栅格的最小单位，而桌面端我们一般用8作为网格的最小单位。
8能被大部分桌面端的电子设备分辨率整除，能保证页面放大或者缩小时还能保持清晰；此外，增加8px或减少8px在听觉上比较容易区分差异，这样能保证在积极响应决策时的生产成本不会太大。
– 栏/槽/页边距
栅格是由「栏」和「槽」交替分布形成的。
「栏」是摆放页面内容的区域，「槽」用来调节相邻两个栏的间距，把控页面的留白，栏和槽的宽度都以网格作为基本单位。
「页边距」即栅格宽度外的边距，也就是页面两边的留白，通常作为自适应的距离，例如：ophone电子设备和液晶电视节目电子设备之间做积极响应变动，就会改变页边距。
为什么要用栅格结构设计积极响应式？
页面要实现积极响应式有两个前提条件：
1.页面产业布局具有规律性2.元素宽高可用百分比代替一般而言数值
这两个条件刚好是栅格所具备的，结构设计积极响应式时使用栅格能事半功倍喔！
03「 如何结构设计积极响应式？」
第一步: 选择积极响应式方案
做积极响应式之前需要评估团队原有的资源和能力, 选择合适的积极响应式方案。在《U一点·料:阿里巴巴1688UED新体验结构设计践行之路》中提到「常见的三种积极响应式类型」,我认为概括得很到位：
– 类型1: 数个一般而言体积转换的积极响应式
如前所述核心使用者的电子设备,选择典型的分辨率,依次订制出几个体积的设计方案,投射到相应的电子设备中。
这个方案能让一些体积相邻的电子设备可共用两套页面,但不是真正意义上的积极响应式,因为只考量了某一体积的新体验。
优点是不用考量同一断点区域内的拉伸规则,如前所述原有的结构设计与合作开发流程就能完成中文网站搭建。
– 类型2: 为移动端、桌面端依次打造两套区间体积的积极响应式
评估中文网站使用者的电子设备类型、萤幕体积、中文网站定位以及不同终端产品环境的使用者使用特性,依次为移动端和桌面端打造两套独立的页面。
这个方案工作量较大且会影响新体验的一致性。另外,不同电子设备之间的界限早已逐渐模糊(如液晶电视节目手机与ophone平板、液晶电视节目平板和ophone笔记本电脑),在划分断点的时候会变得很困难。
对于一些内容较为丰富的综合型的中文网站而言,这套方案是两个不错的选择, 能较好地考量到电子设备的使用环境和使用者的操作生活习惯。
– 类型3: 跨端无缝新体验的积极响应式
从桌面端到移动端，覆盖所有使用者的电子设备体积,能兼顾不同类型电子设备的交互行为差异,保证使用者新体验的一致性。
这套方案需要考量不同电子设备的操作差异与各断点区间的内容如何展开网络连接。
跨端无缝新体验的积极响应式对结构雕塑家与合作开发技师的能力都明确提出了更高的要求,有很多难点需要攻克，如：核心业务的呈现出、结构设计新体验、跨端交互、页面性能等。
第二步: 选择断点与积极响应区间
结构雕塑家输出几套结构设计稿, 取决于选用哪一种积极响应形式。确定了积极响应形式,还需要根据目标使用者的电子设备萤幕体积设定断点。
看一下行业内什么样体积的占比是比较多的,能用占比多的体积作为断点(如:桌面端的萤幕体积占比前三依次是:1920*1080px、1366*768px、1440*900px)。
推荐大家阅读谷歌Material Design结构设计手册，里面有很多中文网站搭建的结构设计原则,也包括了非主流电子设备的常用断点区间。
第三步: 思考产业布局与栅格
– 积极响应式结构设计一般从液晶电视节目往ophone做
我的个人生活习惯是从桌面端着手结构设计积极响应式,因为桌面端的信息是最多的,往移动端网络连接会比较流畅，就像我们平时做结构设计的时候,会先思考页面信息最多、最全的情况。
– 积极响应式常用产业布局
弹性产业布局以百分比作为页面的基本单位,能适应一定范围内所有体积的电子设备萤幕及下载器宽度, 能理解为页面中的元素不是一般而言体积的,而是会展开等比缩放的。
混合产业布局与弹性产业布局比较类似,只是选用了像素和百分比两种单位作为页面单位,也就是页面中部分的内容能设置为一般而言体积,其余部分还是根据电子设备视窗的变动等比缩放。
– 积极响应式产业布局调整
在各个断点区间，我们都能赋予该区间特有的听觉呈现出。常见的有：内容增减、产业布局调整、样式调整。
内容增减某些内容在液晶电视节目端能呈现出得比较好，但到ophone端的新体验会非常不好，能选择把这些内容在ophone端隐藏掉。
产业布局调整比较常见的是模块的排列顺序与数量的变动，如：在桌面端一行展示5个模块，液晶电视节目移动端一行展示3个模块，而ophone移动端则变为一行展示1个模块。
样式变更针对不同的断点区间结构设计不同的样式，如: 在桌面端我们能把导航栏信息展示完全，但是到了移动端，由于视窗变小，需要把信息收起，点击侧边栏才能展示完全，如下图:
– 积极响应式常用栅格
积极响应式常用「12栅格」或「24栅格」，也就是纵向有12栏或24栏。
12等分的栅格在前端合作开发开源工具库Bootstrap与Foundation中广泛使用，适用于业务信息较少，信息体积较大的页面结构设计。
24栅格变动更加灵活,适用于业务信息量大，信息分组较多，信息体积较小的页面结构设计。
– 结构设计灵感与自测
推荐大家使用everysize，它能把积极响应式中文网站各区间的结构设计很直观地展示出来。一方面，能学习一下优秀积极响应式中文网站的多屏信息处理，另一方面，能测试自己做的中文网站效果。
第四步: 确定内容占比与排版
把框架定好了,接下来在划分好的区域内展开内容排版即可，就不展开说明了。
第五步: 制定积极响应策略
完成结构设计稿后,能把积极响应策略制作成如下表格，在页面中标明相关元素的变化规律, 便于与合作开发技师以及团队其他结构设计小伙伴展开沟通。
END
在该文的最后我为大家整理了一些常用工具以及实战总结，期望能帮助大家快速上手结构设计积极响应式吧！请点赞 / 在看 / 收藏三连喔，我们下期见！
Bootstrap优站精选https://www.youzhan.org/这里有海量的积极响应式中文网站,能上去找找灵感
Everysizehttps://everysize.kibalabs.com/把好看的积极响应式中文网站导入可快速生成各断点的页面呈现出,能学习页面产业布局，也能把自己结构设计的中文网站导入Everysize测试效果
谷歌Material Design结构设计手册https://material.io/design/
Grid.Guide栅格平台工具http://grid.guide/这是两个在线生成栅格的工具,十分方便！预览了大概的效果后,能在sketch中直接制作栅格
参考: 《U一点·料:阿里巴巴1688UED新体验结构设计践行之路》流动法则与积极响应度量—1688中文网站的积极响应式结构设计这本书在微信读书APP可看这篇实战该文总结得很全面，积极响应度量很值得学习
参考: 《超全面！栅格系统及其在后台结构设计中的应用总结》https://www.uisdc.com/grid-system-and-application-in-background-design虽然写的是后台结构设计,但这篇该文总结的结构设计策略很实用
