关于响应式设计的一些整理

        里面部分理论内容摘自人人都是产品经理的专栏作家——Tony（百度设计师） Q：为什么要用响应式设计？ A：响应式能够使界面元素在任何大小屏幕尺寸能够灵活适配，保证功能布局和体验的一致性 Q：响应式设计的优势是什么？ A：响应式设计能使我们在最小的资源的情况下完成设计适配，它的工作原理通过断点系统来判断读取布局方式。保证在碎片化的合理分配。 响应式设计的常用布局模式 1.流线布局 指在界面中的内容元素控件在屏幕显示区域内进行相对拉伸，以达到布局完整的目的。 2.等比缩放 是指在界面中元素在相对位置进行等比缩放，从而达到解决横竖屏显示相对较好的UI界面,这种布局不会对界面造成布局重构影响，开发成本低，适配简单，一般使用于音乐、视频、电商、杂志期刊App等领域带有图片宫格布局，界面等比放大后这种大图显示效果比较有视觉冲击力前提是需要足够高清的资源支撑 3.拓展布局 在屏幕可显示区域类元素增加或者减少，常用于应用商店、音乐、视频、电商等带有宫格布局等场景。 4.分栏布局 界面布局结构发生改变，当然这种布局一般比较复杂，开发需要重构 UI 框架，一般在横屏及超大屏幕上面会使用这样的布局，比如超大寸PAD，智能电视，车机系统。 5.流动布局 界面元素可以根据新的屏幕比例或设备方向在组件内进行流动型布局,界面元素是可以位置发生改变的，这种布局开发成本高，适配有一定难度，但是效果还是不错的。 6.重复布局 界面元素在横屏下有限空间内进行多列重复布局,一般最多3列，这种布局可以展示更多的资源，开发成本也有点高，因为布局发生变化。 7.固定布局 界面元素在横竖屏下面，固定使用同一种布局，做法是直接通过竖屏定义规则来适配横屏，开发成本低，效率高 8.大屏漏出式布局（多用于导航菜单栏设计） 左侧由于屏幕小，所以通过汉堡菜单把导航内容隐藏起来，右侧在横屏上面，显示内容多，可以利用屏幕空间，把导航内容展开显示。 关于响应式在ui设计尺寸上的要求 1.网页端一般1440，1920 2.手机端最小宽度制定在320 3.平板电脑最小宽度制定在768 考虑到mac air的小尺寸电脑的网页显示，所以在1440的画板上，有效内容需考虑到这部分用户人群，有效区域最好控制在1366左右 面对iphone中414和375以及安卓的360以及平板电脑的768，960，1024等（一倍图尺寸）需要对你当下设计的内容元素进行考虑，是用等比缩放还是固定布局，还是上诉提到的其他布局方案。 通过观察，导航栏的高度基本在响应式过程中没有变化其高度，但导航栏中的内容是会根据需求变化的。 总结 如果想要适配成本低，那么布局最好不要发生结构上大改变，比如相对布局，流线布局等等这种布局一般适配成本低，但是效果其实在某些UI布局不适用。一般在一个终端软件设计时候，并不是只使用单一的一种布局，而是多种布局混合起来使用，比如流线布局、分屏、等比缩放混合使用，这样能达到布局灵活适配各种设备。