分类:SEO教程

移动端响应式的7种UI详解

次浏览     2017-11-6 11:10:00

响应式 UI能够使我们设计的元素在任何大小屏幕尺寸能够灵活适配,保证布局和体验的一致性。

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

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

常用的布局模式

·流线布局

·等比缩放

·拓展布局

·分栏布局

·流动布局

·重复布局

·固定布局

流线布局

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

等比缩放

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

拓展布局

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

分栏布局

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


流动布局

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

重复布局

固定布局

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

总结

上面七大布局大家看完后应该有所了解了,如果要完全掌握理解透彻还需要跟着项目走上几遍,一般在一个APP里面并不是只使用单一的一种布局,而是多种布局混合起来使用,比如流线布局、分屏、等比缩放混合使用,这样能达到布局灵活适配各种设备。


返回列表

 专注企业形象升级,上海智焕实业有限公司!
联系我们,免费获得专属《策划方案》及报价 全国统一服务热线:138 1794 6044
地址:上海宝山区蕴川路1999号亿博大厦1818室
电话:138 1794 6044
QQ:154984613
邮箱:7257985@qq.com
备案号:沪ICP备15049795号
上海智焕实业有限公司

Copyright © 2014-2020 上海智焕实业有限zhihuansh.com All Rights Reserved