?点击上方“交互设计学堂”关注我们,送电子书响应式 UI能够使我们设计的元素在任何大小屏幕尺寸能够灵活适配，保证布局和体验的一致性。

毫无疑问，响应 UI 设计对于现今碎片化的屏幕是非常重要的，它能使我们在最小的资源的情况下完成设计适配，它的工作原理通过断点系统来判断读取布局方式，断点其实就是媒体查询值。

比如我们平时做的 Phone 和 Pad 的适配就是通过设定断点来让程序读取对应的布局（断点设定可以根据屏幕分辨率或者屏幕尺寸），今天就和大家聊聊一些常用的响应式 UI 模式。

常用的布局模式

流线布局

等比缩放

拓展布局

分栏布局

流动布局

重复布局

固定布局

流线布局

流线布局 指在界面中的内容元素控件在屏幕显示区域内进行相对拉伸，以达到布局完整的目的，比如 Pad&Phone 横竖屏切换。

下面截图的 3 个产品都是属于流线布局，这种布局一般开发比较简单，成本低，下面青芒阅读的布局相对不错，在 PAD 竖屏左右边距留白是单独设定规则的，横屏情况下面左右各空出 2 个网格（界面分为 12 网格），这样横屏内容显示不会过长。

等比缩放

等比缩放 定义是指在界面中元素在相对位置进行等比缩放，从而达到解决横竖屏显示相对较好的UI界面,这种布局不会对界面造成布局重构影响，开发成本低，适配简单，一般使用于音乐、视频、电商、杂志期刊App等领域带有图片宫格布局，界面等比放大后这种大图显示效果比较有视觉冲击力前提是需要足够高清的资源支撑。

拓展布局

拓展布局定义 在屏幕可显示区域类元素增加或者减少，常用于应用商店、音乐、视频、电商等带有宫格布局等场景。

分栏布局

分栏布局定义 界面布局结构发生改变，当然这种布局一般比较复杂，开发需要重构 UI 框架，一般在横屏及超大 PAD 上面会使用这样的布局。

流动布局

流动布局定义 界面元素可以根据新的屏幕比例或设备方向在组件内进行流动型布局，界面元素是可以位置发生改变的，这种布局开发成本高，适配有一定难度，但是效果还是不错的。

重复布局

重复布局定义 界面元素在横屏下有限空间内进行多列重复布局，一般最多三列，这种布局可以展示更多的资源，开发成本也有点高，因为布局发生变化。

固定布局

固定布局定义 界面元素在横竖屏下面，固定使用同一种布局，做法是直接通过竖屏定义规则来适配横屏，开发成本低，效率高。

总结

上面七大布局大家看完后应该有所了解了，如果要完全掌握理解透彻还需要跟着项目走上几遍，一般在一个APP里面并不是只使用单一的一种布局，而是多种布局混合起来使用，比如流线布局、分屏、等比缩放混合使用，这样能达到布局灵活适配各种设备，当然需要前期定义一套适配方案，本期只是作为一个介绍阶段，以后看心情在细讲每一种布局实现方案中如何去写适配方案。

原文地址：http://www.zcool.com.cn/work/ZMjM3MTExODA=.html

作者：TONY01

欢迎投稿：anhejiao@126.com

加老D私人微信18605817040，和老D一起学交互，老D会在朋友圈多发干货文章哦。新手小伙伴可以问老D3个专业问题哦。

交互设计学堂已经开设了新的栏目-行知书院，旨在帮助小伙伴们来高效的学习现在市面上优秀的用户体验书籍比如《交互设计精髓》等等，同时结合老D的工作经验来帮助你们从不同的高度和角度来解读书中的内容。每天一课，积少成多。已有134位小伙伴加入。详细了解行知书院

• 什么？区块链市值已超过中国移动？运营商到底该怎么玩？
• 进军智能医疗领域：联发科Sensio智能健康解决方案60秒全面体检
• 【黑科技】科学家用软件模拟蠕虫大脑 然后控制机器人移动
• 从全面开放看中国经济新格局
• 工商局又下狠手罚款移动公司
• 省会解除重污染天气Ⅱ级应急响应
• 出门打车7天免单，拯救剁手党！还把“移动森林”带来广州
• 上海“第四个火车站”年底预计全面开工！还有20个劲爆消息你必须
• 詹姆斯全面性已压乔丹？个人荣誉却远难企及
• 海丰交警铁腕整治''载客三轮车''全面拉开了！