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设计！

UI设计中常见的各种布局有哪些？|优漫动游相关推荐

UI设计中常用的抠图工具特点对比|优漫动游
UI设计师必学哪些技能?抠图是一个设计师必不可少的技能,不同抠图工具怎么使用?比较常见的抠图方法有钢笔.魔棒.快速选取.通道等.不同的图需要不同的方法进行抠图,每种抠图方法也各有其优点和不足,接下来优 ...
ui设计培训机构内课程包括哪些板块|优漫动游
UI乃是user interface的缩写,翻译成中文就是用户界面,所谓ui设计即就用户界面进行优化设计,所有对软件展开的交互.逻辑操作优化都属于ui设计范畴,ui设计岗位薪酬较高,初入职场就有10k ...
优秀的html布局,优秀的网页设计中常见的六大布局
在优秀网站设计中,不同类型的网站布局方式不一样,但是不管采用何种布局,都要围绕用户的浏览习惯去布局,布局的方式要主次分明,重点突出,比如,用户一般浏览网页都喜欢从左到右的浏览方式.如果网站布局从上下到 ...
UI设计中常见插画应用素材，拿来就可以用！
UI中应用插画注意事项: 色彩:色彩和纹理能够提升整个设计的图形感知,也能让整个设计更加协调.此外,色彩能够强化插画的心理感知,并且营造情绪和氛围.鲜艳的色彩更加适合娱乐性的内容,而极简的配色则可以和 ...
UI(1)---手机界面设计中12种常用布局
手机界面设计中12种常用布局手机界面设计中12种常用布局转载自: 手机界面设计中12种常用布局 - 轩枫阁总结下手机界面改版要考虑的布局,主要的分为以下2大类主导航列表式陈列馆式九宫馆式 ...
中剪取一种颜色的板块_不知道UI设计中APP界面版式如何排版？来看这个！
UI设计中APP的界面看似只有几个简单的元素组合起来, 所有元素的绘制可以说比较简单: 然而,当一个产品原型出来后,设计师如果单纯按原型来进行设计而不考虑信息化规则, 那么很多时候就会出现不协调的效果 ...
UI设计中异常状态设计总结
当用户停留任何一个界面,进行任何一个操作都可能发生异常状态.如果接到每个需求都去制定一次异常状态,这样的后果可能会使得产品的不同模块.不同流程,异常状态都不一致.全局规范性被破坏,同时设计师的效率也降 ...
UI设计中个人页面设计攻略
最近刚做完一个项目,我发现我的设计效率相比之前竟然提升了30%以上,在以前做界面时总是会纠结采用什么样式,什么布局.而现在再看了原型之后就大概知道我要怎么做了,没有了以前做页面时的纠结,效率自然提升了 ...
UI设计中的小元素总结
在UI界面的设计当中,有很多"小元素"发挥着十分重要的作用.有些元素我们已经司空见惯;有些被设计师们玩儿出了新花样.在使用了一些产品后,我对这些"小元素"进行了 ...
UI设计中如何做响应式设计与自适应设计
UI设计中如何做响应式设计与自适应设计?由于科技在不断的发展,小伙伴们上网就不单单只依靠台式电脑了,还有平板电脑笔记本电脑都是可供大家选择的.面对不同的屏幕分辨率网站是如何进行适配的呢?今天AAA教育 ...

UI设计中常见的各种布局有哪些？|优漫动游

UI设计中常见的各种布局有哪些？|优漫动游相关推荐

最新文章

热门文章