响应式设计对用户、业务有什么好处？断点如何设定？是否越多越好？

2023-02-2715:45:41网页设计Comments1,591 views字数 5415阅读模式

面试，问：为什么你们这个网页要做响应式设计？简单说一下你设计侧的看法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

答：设计角度来说，协作效率提高；各终端用户体验一致；节省研发维护成本……然后展开巴拉巴拉……文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

在上家公司作为面试官时，一个问题十个人至少有九个人回答差不多。如果是你，你怎么挑搭档呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

一、响应式设计对用户有什么好处？

这个问题翻译一下就是响应式设计的内容怎么能让用户更好更快地理解？亨利.亚当斯（Henry Adams）曾经说过：“混沌是自然法则，秩序是人类的梦想”。人们是喜欢秩序的，比如红绿灯、人行道、排队等，因为秩序可以让事情变得更好的理解和执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

响应式设计的本质就是内容元素在页面上通过一定的规律构建了秩序，构建这个秩序的目的是让用户更好的理解。那么用户是如何理解一个东西的？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

01 格式塔理论

用户是如何理解一个事物呢？在路边迎面走来美女，赶紧瞥一眼：哇，气质真好！这个气质好正是对这个女生的整体感受；然后你想和她交个朋友，过去加微信，发现这个女生眼睛好大好亮，这就是后续感知到一些细节的元素。所以说我们对一个事物首先是整体感受，其次是细节揣摩。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

同样，我们打开网站进行浏览或操作时，第一感受往往就是页面的整体效果，后续才会感知到一些很细节的元素。往宏观来讲当人们感知一个物体到由许多元素组成的复杂对象时，人们会采用有意识或无意识的方法将这些部分安排到整个组织的系统中，而不只是简单的元素级。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

官网概括：“在心理现象中，人们对客观对象的感受源于整体关系而非具体元素，也就是说知觉不是感觉元素的总和，而是一个统一的整体，部分之和不等于整体，因此整体不能分割”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

上图是从谷歌截取的一张云朵图片，某个时刻被人们赋予其具体的形状，有的人认为像国家地图，有的人认为像动图。云本身没有形状易随风飘散，这个形状就是人对聚集起来云的整体感受。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

02 视觉层次结构

视觉层次结构：对交互式界面的视觉构图的新理解文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

什么是视觉层次结构，为什么它是重要的？视觉层次结构是内容的构成布局，以便有效地传达信息和含义。视觉层次结构首先会将观众引导至最重要的信息，然后引导至次要内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

通过适当地使用尺寸，颜色，形状，距离，比例和方向来建立构图的意义、概念和氛围，这是通过创造性地使用确定视觉层次的图形元素来传达的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

Airbnb使用z字型布局设定视觉焦点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

通过利用这种布局，Airbnb 设计团队实现了建立出一个简洁的视觉层次。传递特定信息的区域被精准定位并吸引用户注意文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

小结

简单来说，利用用户观察事物的心理学创建合理的布局，将一些看似互不相干的元素和谐、有序地组织在一起。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

当然布局框架只是整个产品的基础骨架，在骨架确定之后，设计师才可进行下一步的设计，如统一的视觉表达元素，清晰的功能操作，流畅的交互表达。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

二、响应式设计对业务有什么好处？

作为非互联网的用户，每次更新需重新下载应用的成本是很高的。当前整个团队的业务目标是获取流量，台湾用户和大多数海外用户相似点是习惯用谷歌搜索，所以我们考虑在如果在网页端获取更多的流量？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

针对谷歌搜索引擎优化(简称SEO)，响应式设计能够满足用户搜索关键词时，产品网站能够出现在搜索结果页的前几名，这个优势与当前业务目标一致。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

SEO：（英文 Search Engine Optimization）字面理解很简单的，就是“搜索引擎优化”，最简单的理解就是“搜索自然排名”。最终目的是要拉开与同行的差距，获得品牌收益，占领市场。从字面上来看，SEO就是能使网站排名在前，获得自由精确的流量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

开发成本低：响应式的设计只需要开发一套代码，就可以兼容多种尺寸的终端，不需要开发单独的客户端版本。同一个客户端产品运行在不同尺寸的设备上，使用统一的后台系统，一次开发，多端生效。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

产品体验一致：各屏幕展示效果一致，用户体验一致，不会出现较大风格的改变，面对不同分辨率的设备适应性更强，最大化提升用户的操作体验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

业务迭代更快：往往不同终端有不同的运营系统，一次运营动作需要操作多次。响应式基于同一个客户端、后台和运营系统，一次运营多端同步生效，提高工作效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

三、不同网页布局易错点

静态页面和自适应布局页面大家都有所了解，这2个也是市面上最常用的网页设计模式。团队最后采用哪种布局方式或者几种布局方式的组合，是根据展示效果和研发成本综合决定的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

01 静态布局&自适应布局

静态布局是早期常见的设计模式，也被称为固定布局，即无论屏幕如何变化，都展示一套尺寸设计稿。这种一般应用在对外宣传的网页上，比如学校官网、政府官网等，不需操作只是展示信息。
自适应布局可以看做是静态布局的一种延伸。设计一般出3套设计稿，比如web端（>1024px）一套适配，平板（768-1024）一套适配，手机端（<768px）一套适配。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

一套布局对应一个屏幕分辨率，改变屏幕分辨率可以切换不同静态布局，但页面元素不随窗口大小的调整发生变化，内容被遮住。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

02 响应式布局

响应式布局设计是让同一个网页在不同的屏幕分辨率下有不同的显示方式。当浏览器的宽度达到一个值（这个值通常称为断点，即布局改变的临界点）时，页面的布局就会发生明显的变化，这就是响应式设计最重要的特点——分段显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

分段显示就得考虑页面栅格了，栅格是为了页面有更规律的设计展示，有疑问的同学可以查看《合理删格化建更好的设计》。对接时也需要说明具体展示方式，现以 w>892px 评审举例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

（1）固定栅格&流式栅格文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

固定栅格具有固定列宽、固定槽宽和固定边距。在特定的断点范围内，内容宽度保持固定，不发生变化；
流式栅格具有流式列宽、固定槽宽和固定边距。流式栅格具有弹性的内容宽度，其宽度将随着浏览器宽度的变化相应地增大或缩小。拉伸过程中视觉效果相较于固定栅格更流畅文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

注意区别（踩过的坑?）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

流式栅格能更好的适应不同分辨率，拉伸过程中的列宽就不一定最小单位的倍数了
其宽度将随着浏览器宽度的变化相应地增大或缩小（实时响应）
通常来说页面布局比较简单单一，复杂的业务不适用

（2）弹性布局&响应式布局区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

弹性布局：以百分比作为页面的基本单位，内容在屏幕的相对位置进行等比例缩放，这种方式不会产生任何布局重构影响，适配简单。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

注意区别：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

举例比如弹性布局在@1倍图时字体大小是16px，可以理解：16/375=4.3%，文字占手机屏幕宽度的4.3%，即在不同手机屏幕上文字都是按这个比例来显示，而响应式设计一般文字在手机上（<768px）显示都是16px。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

结果：同一个手机同一个设计稿，弹性布局文字可能会比响应式布局实现效果大（踩过的坑?）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

03 混合式布局

混合式布局是指往往单一方式的布局无法满足需求时，就需要结合多种布局组合的方式来实现。以Ant Design、T Design的响应方式为例，对左侧的全局控制区域进行固定栅格，对右侧的内容区域进行流动栅格的处理方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

网站链接：https://ant.design/docs/spec/layout-cn文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

其它内容补充
上诉几种设计布局并不矛盾，并不是说只能选其中一个来实现。某些情况下，自适应设计是页面在做响应式设计的极端情况下的最优解，有一部分设计元素是必须采用自适应设计来完成多端适配的需求的。比如文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

与输入、上传强相关的键盘（必须是手机端才会弹出）
移动端平台规范的按钮（比如吸底按钮位置和尺寸只有移动端才有）
移动端不具备的功能（鼠标移入状态、鼠标点击状态）

四、项目中遇到问题

下面这几个问题是做响应式界面设计常遇到的，具体怎么画就不多说了，前面有文章链接里面有，这篇主要是针对上篇没有涉及到的内容补充。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

01 什么是断点？

响应式页面中的容器大小是动态的，发生布局改变的临界点称之为断点。我们可以提供一个表格，告诉开发在不同的页面宽度区间，对应的布局应该是怎么样的。这些区间的临界点，就是「断点」。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

以我目前业务举例，设计团队结合业务栅格化系统确定出3个断点值：大屏-PC端、中屏-小屏电脑、小屏-M端，保证产品在各设备上都具备易读性。提供给研发3套设计稿，当页面宽度达到这3个值时候，页面布局发生改变。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

02 如何确定断点？

在开始设计之前，我们可以到后台统计出用户常用设备类型的用户数据，再根据产品覆盖人群、受众分类、使用场景、综合考虑产品内容会优先呈现在哪些设备和平台上，有意识地筛选出常见的设备类型：手机、平板、桌面端……文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

（如果面试遇到这个问题就可以这样回答啦，有理有据不是拍脑袋决定的）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

谷歌官方文档提供了谷歌的指导手册，Material Design3 更新了 4 个响应式断点，分别是 600、905、1240、1440，当页面宽度到达这几个数值的时候，页面的中的栅格数量和布局都会发生变化：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

谷歌链接：https://m2.material.io/design/layout/understanding-layout.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

03 有效内容区最大宽度 ≤ 最大断点值

断点值只应用于有效内容区域，有效内容区域不会跟着页面的宽度无限制变宽，设计有效区域一般是1200或1400。当页面宽度大于这个值时，使用边距的宽度进行补充。因为人的眼睛有一定的视野范围，当文字超过视野范围的最大宽度，就需要左右转头进行阅读，特别是纯文字时候容易串行，阅读就困难了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

所以电脑屏幕设计不会越来越大，大屏一般是曲面屏也是这个道理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

Tip：行高经验：无论是Word、PPT或公总号排版时，文字越小时，行高越大。一般正文内容（文字较小）设置在字高1.5倍，标题行高1.2倍。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

举一反三文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

微信公众号网页端打开时，内容往往集中在中间部分，可能会有同学说那是为了和移动端体验感一致。但显示一行的内容比移动端多，既然为了保持一致，为什么不保持一样的宽度呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

那站酷这个例子更典型了，改版后的站酷文字内容限时是636的宽度，为什么不是1200？就是为了避免阅读串行的问题，提升阅读体验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

04 设计侧重哪个端口？

虽然响应式在多端都适用，但是我们开始设计时往往会有侧重点，因为可能存在某些细节在大屏和小屏的展示样式是不同的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

桌面优先：从桌面端开始向移动端设计，触屏端（手机网页端页面展示）主要是PC端页面的延伸。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

移动优先：从移动端向网页端设计。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

移动端优先能够更好的专注于核心功能，因为手机屏幕就那么点大，文案和功能展示肯定尽量精简。一个页面除了首屏和第二屏，后面点击率往往越来越低，这也是一直所强调的「移动端优先」的策略的由来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

手机上看 M 设计时会发现：方案一和方案二区别是用户头像下面是否有文字。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

方案二：用户头像下面有文字，可以展示更多信息，屏效利用率较高，所以大多数APP推荐页选择方案二；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

方案一：设计形式往往应用在用户评论区，因为此时内容展示不重要，区分什么内容是谁评论更重要，很显然方案二可读性更高文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

但是方案二的 PC 端相对来说设计不是那么美观，因为屏幕足够宽，信息归属整合可以更完善。设计感弱于方案一。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

所以往往很多需求方说触屏端（网页端产品界面）和APP保持一致即可，轻飘飘的一句话后面往往没有严谨的逻辑思考。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

05 断点越多越好？

断点的数量越多，产品页面被拉伸时的变化就会越顺畅，那么是不是断点越多越好呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

针对这个问题，开发同学回答：不一定。断点数量越多，切换过程确实越顺畅，但是开发的时间成本也会相应的增加。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html

对于纯图文展示这类简单的页面，断点多少对研发同学来说不是问题，因为仅仅考虑页面缩放而已，但对于交互复杂的页面，可能更容易出现意想不到的问题。人工测试所以可能会测试场景不够全，加上交互复杂，出现问题的概率大大上升了，一般一款产品的断点数量，在 4-6 个为宜。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/30996.html