最近的工作项目内容涉及到响应式网站的设计，所以我在设计该项目的同时又重新温习一下这方面的内容以及概念，并做了相关的整理和这次分享。

Q：为什么要用响应式设计？

A：响应式能够使界面元素在任何大小屏幕尺寸能够灵活适配，保证功能布局和体验的一致性

Q：响应式设计的优势是什么？

A：响应式设计能使我们在最小的资源的情况下完成设计适配，它的工作原理通过断点系统来判断读取布局方式，保证碎片化的合理分配。

响应式设计的常用布局模式

1. 流线布局

是指在界面中的内容元素控件在屏幕显示区域内进行相对拉伸，以达到布局完整的目的，比如iPad应用横竖屏切换时的样子。

2.等比缩放

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

3.拓展布局

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

4.分栏布局

界面布局结构发生改变，当然这种布局一般比较复杂，开发需要重构 UI 框架，一般在横屏及超大屏幕上面会使用这样的布局，比如超大寸PAD，智能电视，车载系统等。

5.流动布局

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

6.重复布局

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

7.固定布局

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

8.大屏漏出式布局（多用于导航菜单栏设计）

左侧由于屏幕小，所以通过汉堡菜单把导航内容隐藏起来，右侧在横屏上面，显示内容多，可以利用屏幕空间，把导航内容展开显示。

关于响应式在ui设计尺寸上的要求

1.网页端一般以1024，1366，1920为基础来进行设计。

2.手机端最小宽度设定在320，若考虑横屏情况就是568，以市面上的iphone se为基础。

3.平板电脑最小宽度设定在768，若考虑横屏就是1024，以iPad mini为基础。

p.s 安卓设备很多，所以我们已主流的屏幕最小尺寸来进行设计。

面对iphone中414和375以及安卓的360以及平板电脑的768，960，1024等（1倍图尺寸）需要对你当下设计的内容元素进行考虑，是用等比缩放还是固定布局，还是上诉提到的其他布局方案。

这次我们项目中的响应式设计多以流线布局，相对布局，以及等比例布局为主。其中我们固定了屏幕左右边距的大小，固定了元素icon的大小，以及固定了模块的高度和模块之间的上下间距，使其在适配过程中，只有模块宽度在随屏幕的变化而变化。

总结

如果想要适配成本低，那么布局最好不要发生结构上大改变，比如相对布局，流线布局等等这种布局一般适配成本低，但是效果其实在某些UI布局不适用。一般在一个终端软件设计时候，并不是只使用单一的一种布局，而是多种布局混合起来使用，比如流线布局、分屏、等比缩放混合使用，这样能达到布局灵活适配各种设备。

如果你觉得有用请点个赞，比心～

Powered by Froala Editor