网页中的响应式设计能够提高协作效率，提高用户体验感受，减少开发成本。但不同的页面的网页设计布局存在差异，如何合理布局？快速解决响应式落地痛点？作者结合自己过去在响应式项目中踩过的坑，希望能够帮助你。
网页中的响应式设计能够提高协作效率，提高用户体验感受，减少开发成本。但不同的页面的网页设计布局存在差异，如何合理布局？快速解决响应式落地痛点？作者结合自己过去在响应式项目中踩过的坑，希望能够帮助你。
如果现在面试，问：为什么你们这个网页要做响应式设计？简单说一下你设计侧的看法。
答：设计角度来说，协作效率提高；各终端用户体验一致；节省研发维护成本……然后展开巴拉巴拉……
在上家公司作为面试官时，一个问题十个人至少有九个人回答差不多。如果是你，你怎么挑搭档呢？
一、响应式设计对用户有什么好处？
这个问题翻译一下就是响应式设计的内容怎么能让用户更好更快地理解？亨利.亚当斯（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）固定栅格&流式栅格
固定栅格具有固定列宽、固定槽宽和固定边距。在特定的断点范围内，内容宽度保持固定，不发生变化；
流式栅格具有流式列宽、固定槽宽和固定边距。流式栅格具有弹性的内容宽度，其宽度将随着浏览器宽度的变化相应地增大或缩小。拉伸过程中视觉效果相较于固定栅格更流畅
注意区别（踩过的坑
特别声明
本文仅代表作者观点，不代表本站立场，本站仅提供信息存储服务。