当前速读：UI设计中常见的各种布局 你了解多少？

今天优漫动游小编跟大家说一下UI设计中常见的各种布局，了解这些对于我们UI设计师来说简直是开了上帝视角，特别是像现在B端和大屏数据可视化都是建立在自适应布局基础之上的，否则的话这两个东西根本没法做。

在讲之前，我们先来科普一下开发，开发大体上分为前端和后端，而我们作为UI设计师对接最多的就是前端开发，前端开发有一个主要的工作，就是负责把我们的设计稿通过代码变成真实可用的界面，那么前端开发里面又分为web前端开发和原生开发，也就是ios和安卓。但是这三个可以统称为前端开发，而我们今天要讲的各种布局就是从css里面来的，而这个css属于web前端开发里面一个主要的技能，也叫样式表，所有涉及到外观的网页都是通过调整css实现的。

流式布局

(资料图片)

因为固定布局使用的是像素，局限性非常大，所以后来就有了流式布局，流式布局相对于固定布局最大的区别就是从像素改用了百分比为单位。也就是说，界面中的各种盒子，都可以写成百分比了，而这个百分比是可以根据页面的宽度做百分比的变化，所以说它是相对值的单位。而它相对的就是页面的总宽。

这种布局是为了适应电脑端不同屏幕的大小，但是它有一个明显的缺点，就是内部的字体不会跟着变化，这个只是界面大小变化了，但文字还是原来的大小，因为百分比单位没法让文字也根据这个宽度去做自适应变化。所以这里大家理解它的意思就行，它的关键词就是百分比，流式布局和固定布局都是比较早期的两种选择，

固定布局

下面我们就来说一下各种的布局，我们先来看看固定布局。早期的网页布局都很简陋，那时候没有什么特别复杂的需求，而且最关键的是大家的显示器也都差不了多少，所以那个时候就很流行一种布局，那就是固定布局。顾名思义，就是固定那不动，不会跟着浏览器的宽度做变化，大家最常见的就是那种居中的布局。

固定布局的关键词是像素，也就是说跟我们显示器屏幕上的像素点是一一对应的，这个像素是绝对值单位，也正因为用了像素单位，所以网页布局是固定的。但是这样一来，固定布局的缺点就很明显了，那就是在较小的屏幕上，你看这类布局时，你会发现网页显示不全，而反过来，那种在大屏幕下的显示效果，就会有很多无意义的空白，也正是由于固定布局的局限性，才有了后来UI设计师都会问到的问题，就是设计稿尺寸要设置多大。

弹性布局

下面我们再来看弹性布局。前面我们发现像素和百分比在布局上都有一些局限性，所以后来又有了em和rem，这两个也是相对单位，而且也是现在开发经常使用的。它们是根据一个基准的字体大小去对这个字体做百分比变化的。

所以说这个弹性布局是根据基准字体大小去弹的，基准字体大，那么整个页面就会跟着大，如果小也会都跟着小，就像皮筋一样。但是它有点像把整个页面给强制放大缩小的意思。

好了，目前我们了解了固定布局、流式布局、还有弹性布局。这里要跟大家说的是，这些所有的布局是可以混着用的，并不是用了这个就不能用那个。从我们UI设计师的视角来看，具体的每个功能块，可能这里用弹性好，但是那里可能用固定或者流式更好，所以我们在理解的时候一定要把思路打开，要灵活运用。

响应式布局and自适应布局

为了方便大家理解，我这里就把自适应布局和响应式布局放在一起说了，以及给大家解释为什么响应式布局比自适应更高效。

响应式布局是根据页面的宽度自动调整，比如通过一些隐藏元素、改布局，改顺序、改样式这些方法，去适配所有设备宽度，它的特点就是一镜到底的感觉，就是你能从电脑端直接无缝缩放到最小的移动端，这种就是响应式布局。相对的我们再来看自适应布局，自适应布局是先预设了一些布局模版，然后根据用户的机型去判断需要展示哪个模版，但是它不是一镜到底，缩放到一定宽度的时候，只有刷新之后才会变成这个所谓的移动端的界面。

经过上面的对比，我们能明显感觉到响应式布局似乎更高效，因为它可以全程无缝切换。那么它为什么叫响应式？简单来说就是一个页面根据不同的设备尺寸响应做出调整。所以这里响指的就是不同设备的尺寸，就像浏览器窗口，我们只有主动让窗口小了，它才能根据小了之后的窗口做具体的变化，这就是响应。

我们再来看自适应布局，自适应布局其实是有一个类似断点的东西的，用这个断点来判断当前是在哪个宽度范围内，开发得预先提前根据这些不同的尺寸做出来一些针对性的模版，那这样的话，模版肯定不止一个，所以从开发的角度来说，工作量就变多了。

我们说到这儿呢，我要解释一下，因为对于UI设计师来说，不管是自适应布局还是响应式布局，我们都是要根据不同的宽度去做对应的布局设计，这个活我们设计是跑不掉的，具体用哪种布局方案，其实是开发的事。但是大家在跟开发对接的时候，不需要指挥他怎么做，只需要把设计稿给他讲明白就行，讲明白具体哪一块要用到哪种布局。当然了，自适应布局并不是说要开发做两个网站，他们实际上还是共用一个内容，只不过样式上需要提前做两套，这就有点像网站分身的意思；但是响应式只需要做好一套就能完美的应对，从手机到各种超大屏幕的尺寸，前提是作为UI设计师的我们要把布局设计做的足够好，我们做的越好，扩展性也就越强。

以上就是优漫教育小编为大家介绍的“UI设计中常见的各种布局有哪些？”相关内容，学习ui设计培训，可以参考优漫教育提供的ui学习路线，该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等，根据优漫提供的ui学习路线图，可以让你对学好ui需要掌握的知识有个清晰的了解，并能快速掌握ui设计！