网页中的响应式设计能够提高协作效率，提高用户体验感受，减少开发成本。但不同的页面的网页设计布局存在差异，如何合理布局？快速解决响应式落地痛点？作者结合自己过去在响应式项目中踩过的坑，希望能够帮助你。
网页中的响应式设计能够提高协作效率，提高用户体验感受，减少开发成本。但不同的页面的网页设计布局存在差异，如何合理布局？快速解决响应式落地痛点？作者结合自己过去在响应式项目中踩过的坑，希望能够帮助你。
如果现在面试，问：为什么你们这个网页要做响应式设计？简单说一下你设计侧的看法。
答：设计角度来说，协作效率提高；各终端用户体验一致；节省研发维护成本……然后展开巴拉巴拉……
在上家公司作为面试官时，一个问题十个人至少有九个人回答差不多。如果是你，你怎么挑搭档呢？
一、响应式设计对用户有什么好处？
这个问题翻译一下就是响应式设计的内容怎么能让用户更好更快地理解？亨利.亚当斯（Henry Adams）曾经说过：“混沌是自然法则，秩序是人类的梦想”。人们是喜欢秩序的，比如红绿灯、人行道、排队等，因为秩序可以让事情变得更好的理解和执行。
响应式设计的本质就是内容元素在页面上通过一定的规律构建了秩序，构建这个秩序的目的是让用户更好的理解。那么用户是如何理解一个东西的？
展开全文
01 格式塔理论
用户是如何理解一个事物呢？在路边迎面走来美女，赶紧瞥一眼：哇，气质真好！这个气质好正是对这个女生的整体感受；然后你想和她交个朋友，过去加微信，发现这个女生眼睛好大好亮，这就是后续感知到一些细节的元素。所以说我们对一个事物首先是整体感受，其次是细节揣摩。
同样，我们打开网站进行浏览或操作时，第一感受往往就是页面的整体效果，后续才会感知到一些很细节的元素。往宏观来讲当人们感知一个物体到由许多元素组成的复杂对象时，人们会采用有意识或无意识的方法将这些部分安排到整个组织的系统中，而不只是简单的元素级。
官网概括：“在心理现象中，人们对客观对象的感受源于整体关系而非具体元素，也就是说知觉不是感觉元素的总和，而是一个统一的整体，部分之和不等于整体，因此整体不能分割”。
上图是从谷歌截取的一张云朵图片，某个时刻被人们赋予其具体的形状，有的人认为像国家地图，有的人认为像动图。云本身没有形状易随风飘散，这个形状就是人对聚集起来云的整体感受。
02 视觉层次结构
视觉层次结构：对交互式界面的视觉构图的新理解
什么是视觉层次结构，为什么它是重要的？视觉层次结构是内容的构成布局，以便有效地传达信息和含义。视觉层次结构首先会将观众引导至最重要的信息，然后引导至次要内容。
通过适当地使用尺寸，颜色，形状，距离，比例和方向来建立构图的意义、概念和氛围，这是通过创造性地使用确定视觉层次的图形元素来传达的。
Airbnb使用z字型布局设定视觉焦点
通过利用这种布局，Airbnb 设计团队实现了建立出一个简洁的视觉层次。传递特定信息的区域被精准定位并吸引用户注意
小 结
简单来说，利用用户观察事物的心理学创建合理的布局，将一些看似互不相干的元素和谐、有序地组织在一起。
当然布局框架只是整个产品的基础骨架，在骨架确定之后，设计师才可进行下一步的设计，如统一的视觉表达元素，清晰的功能操作，流畅的交互表达。
二、响应式设计对业务有什么好处？
作为非互联网的用户，每次更新需重新下载应用的成本是很高的。当前整个团队的业务目标是获取流量，台湾用户和大多数海外用户相似点是习惯用谷歌搜索，所以我们考虑在如果在网页端获取更多的流量？
针对谷歌搜索引擎优化(简称SEO)，响应式设计能够满足用户搜索关键词时，产品网站能够出现在搜索结果页的前几名，这个优势与当前业务目标一致。
SEO：（英文 Search Engine Optimization）字面理解很简单的，就是“搜索引擎优化”，最简单的理解就是“搜索自然排名”。最终目的是要拉开与同行的差距，获得品牌收益，占领市场。从字面上来看，SEO就是能使网站排名在前，获得自由精确的流量。
开发成本低：响应式的设计只需要开发一套代码，就可以兼容多种尺寸的终端，不需要开发单独的客户端版本。同一个客户端产品运行在不同尺寸的设备上，使用统一的后台系统，一次开发，多端生效。
产品体验一致：各屏幕展示效果一致，用户体验一致，不会出现较大风格的改变，面对不同分辨率的设备适应性更强，最大化提升用户的操作体验。
业务迭代更快：往往不同终端有不同的运营系统，一次运营动作需要操作多次。响应式基于同一个客户端、后台和运营系统，一次运营多端同步生效，提高工作效率。
三、不同网页布局易错点
静态页面和自适应布局页面大家都有所了解，这2个也是市面上最常用的网页设计模式。团队最后采用哪种布局方式或者几种布局方式的组合，是根据展示效果和研发成本综合决定的。
01 静态布局&自适应布局
静态布局是早期常见的设计模式，也被称为固定布局，即无论屏幕如何变化，都展示一套尺寸设计稿。这种一般应用在对外宣传的网页上，比如学校官网、政府官网等，不需操作只是展示信息。
自适应布局可以看做是静态布局的一种延伸。设计一般出3套设计稿，比如web端（>1024px）一套适配，平板（768-1024）一套适配，手机端（<768px）一套适配。
一套布局对应一个屏幕分辨率，改变屏幕分辨率可以切换不同静态布局，但页面元素不随窗口大小的调整发生变化，内容被遮住。
02 响应式布局
响应式布局设计是让同一个网页在不同的屏幕分辨率下有不同的显示方式。当浏览器的宽度达到一个值（这个值通常称为断点，即布局改变的临界点）时，页面的布局就会发生明显的变化，这就是响应式设计最重要的特点——分段显示。
分段显示就得考虑页面栅格了，栅格是为了页面有更规律的设计展示，有疑问的同学可以查看《合理删格化建更好的设计》。对接时也需要说明具体展示方式，现以 w>892px 评审举例：
（1）固定栅格&流式栅格
固定栅格具有固定列宽、固定槽宽和固定边距。在特定的断点范围内，内容宽度保持固定，不发生变化；
流式栅格具有流式列宽、固定槽宽和固定边距。流式栅格具有弹性的内容宽度，其宽度将随着浏览器宽度的变化相应地增大或缩小。拉伸过程中视觉效果相较于固定栅格更流畅
注意区别（踩过的坑😅）
流式栅格能更好的适应不同分辨率，拉伸过程中的列宽就不一定最小单位的倍数了
其宽度将随着浏览器宽度的变化相应地增大或缩小（实时响应）
通常来说页面布局比较简单单一，复杂的业务不适用
（2）弹性布局&响应式布局区别
弹性布局：以百分比作为页面的基本单位，内容在屏幕的相对位置进行等比例缩放，这种方式不会产生任何布局重构影响，适配简单。
注意区别：
举例比如弹性布局在@1倍图时字体大小是16px，可以理解：16/375=4.3%，文字占手机屏幕宽度的4.3%，即在不同手机屏幕上文字都是按这个比例来显示，而响应式设计一般文字在手机上（<768px）显示都是16px。
结果：同一个手机同一个设计稿，弹性布局文字可能会比响应式布局实现效果大（踩过的坑😅）
03 混合式布局
混合式布局是指往往单一方式的布局无法满足需求时，就需要结合多种布局组合的方式来实现。以Ant Design、T Design的响应方式为例，对左侧的全局控制区域进行固定栅格，对右侧的内容区域进行流动栅格的处理方式。
网站链接：
其它内容补充
上诉几种设计布局并不矛盾，并不是说只能选其中一个来实现。某些情况下，自适应设计是页面在做响应式设计的极端情况下的最优解，有一部分设计元素是必须采用自适应设计来完成多端适配的需求的。比如
与输入、上传强相关的键盘（必须是手机端才会弹出）
移动端平台规范的按钮（比如吸底按钮位置和尺寸只有移动端才有）
移动端不具备的功能（鼠标移入状态、鼠标点击状态）
下面这几个问题是做响应式界面设计常遇到的，具体怎么画就不多说了，前面有文章链接里面有，这篇主要是针对上篇没有涉及到的内容补充。
01 什么是断点？
响应式页面中的容器大小是动态的，发生布局改变的临界点称之为断点。我们可以提供一个表格，告诉开发在不同的页面宽度区间，对应的布局应该是怎么样的。这些区间的临界点，就是「断点」。
以我目前业务举例，设计团队结合业务栅格化系统确定出3个断点值：大屏-PC端、中屏-小屏电脑、小屏-M端，保证产品在各设备上都具备易读性。提供给研发3套设计稿，当页面宽度达到这3个值时候，页面布局发生改变。
02 如何确定断点？
