【UI设计】从前端原理看响应式布局，这也太简单了

这个年代，几乎任何一个像样的网页/桌面端产品都会需要响应式布局。

可无奈除了Figma之外，包括Sketch在内的大部分设计工具都缺少响应式布局功能。

这就导致很多设计师对响应式布局一直处于雾里看花的状态，缺乏清晰的结构化认知。

网上大部分文章讲响应式时，都会把容器、图片、文字等不同的元素拆开来讲，这样就搞得更复杂了。

作为一个前端出身的设计师，感觉这东西从底层逻辑拆解可能会更清晰，因为总共不过3种基础布局+2种混合布局而已，看似复杂其实简单。

首先明确几个基本概念

1.横向才需要响应式布局

这就好比Word文档，页面的纵向高度从来都是看内容能撑多满，而宽度默认是固定的。

当这个宽度不固定时，才需要响应式布局。

所以说，响应式布局规则主要针对的是横向，而非纵向。

2.一般元素尺寸变化，间距不变

常规的响应式布局元素间距不变的，重点是元素本身的尺寸变化上。

只是这个间距，可能是0，也可能是其它值，但一般是固定的。

间距如果永远不变，那么小尺寸不会留白太多吗？大尺寸留白又太少了吧？

这个问题，下面就能得到解答。

3.根据宽度切换布局方式

一些响应式布局做得好的网站，可以从一个正常的网站缩小成移动端，这是用一套布局规则实现的吗？

显然不是这么单纯。

很多响应式布局会根据不同的页面宽度切换布局方式，例如小尺寸是用一种布局，中尺寸是换一种，大尺寸又变成另一种。

例如下图，小尺寸让图片单独一行，而大尺寸时又将图片尺寸加大，有明显的布局切换。

而小、中、大尺寸之间的零界点，就被称为断点。

好了，以上说的这三点基础概念理解了吗？

其实不难，但这些东西要配合前端基础才好理解，我们即将开始的前端基础课程就会手把手教你从实践中感受：

总的来说，所以下面讲的这些规则只讲横向不讲纵向，间距固定，而且可能根据容器宽度断点切换。

3种基础布局

1.占满

这种横向填满整个空间的布局是最常见的，前端里的容器和文字默认都是这样。

这种使用非常广泛，随手打开一个资讯类APP，外层都是这种布局：

2.固定

像这样不管外部容器宽度如何变化，自身宽度固定依次排列，是最简单的卡片布局。

例如百度网盘的桌面端的缩略图：

还有 YouTube 网站横向排列的页签也是这种布局：

然而，这并不是最典型的卡片布局方式，这个后面再具体说。

3.等比

定好每个元素横向占比，宽度随着外部容器一起变化。

这种其实单用较少，一般移动端底部导航一般使用的这种（适配不同宽度的手机屏幕）：

Ant Design Pro 案例首页的表格，明显也是用的这种等比布局：

好了，基础布局就这3种了，在这基础上还有2种混合布局。

2种混合布局

4.占满+固定

这种使用非常广泛，例如左侧占满右侧固定，就是图文列表：

左侧固定右侧占满，就是左导航布局：

两端固定，中间占满的布局也很常见：

把中间那一块留白就是最常见的顶导航布局：

还有很多例子都是这样，就不一一列举了。

5.等比+断点

其实大部分卡片布局都是这种，使用非常广泛。

之所以不用固定布局，是为了避免边距时大时小，造成视觉上不稳定。仔细看下图，是不是右侧的边距时大时小？

而且，如果页面宽度比原先大很多，原先的卡片尺寸就会显得太小了。

那么这种等比+断点的布局具体时怎样的呢？我画个案例解释下。

假设容器宽度在某个宽度范围内，卡片全部按照4列来等比排列：

容器宽度超过这个范围时，列数增加到5：

而容器宽度小于这个范围时，列数减少到3:

把这几种状态结合起来，就形成了最常见的卡片布局：

大部分卡片都是用的这种，例如电脑的文件管理器、YouTube和Dribbble：

总结一下

就这五种，构成了几乎所有前端常见响应式布局，任何元素不管是容器、文字还是图片，都能往里面套。

这么算来好像也没多复杂吧？但为啥很多响应式布局介绍都喜欢把容器、文字和图片分开来讲呢？

其实把这三种不同元素分开来讲也有道理，因为他们虽然横向布局规则一致，但是纵向响应不同。

例如文字，宽度变化的同时，高度会根据字数来调整：

比如图片，我们通常的用法是，宽度变化时，高度会等比例缩放：

再看容器，宽度变化对高度并无直接影响，因为高度一般都看内部元素能撑多高。

如果你在考虑响应式布局时，把这三种元素的高度响应也考虑进去，那确实就复杂多了。

不过，高度变化一般默认就是按照上面说的这个规律，熟练后可能也会像我这样觉得：“理所当然的规则，无需多想。”

其实很多前端的心态就是这样，“这不是理所当然，你咋就不理解？”

前端用代码做页面，设计用绘图工具做页面，结构原理天差地别，各自形成一套“理所当然”的认知。

这就是为啥很多设计师和前端沟通困难，互相觉得不专业了。

其实前端搞懂设计工具还是比较简单的，但是设计搞懂前端代码就很难了。

虽然Figma能实现占满和固定布局，但实现等比和断点但是很麻烦（只能勉强模拟部分效果）。