您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  要资料 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 火云堂 讲座吧   成长之路  
会员   
 
   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
     
   
 订阅
  捐助
移动端响应式UI布局解析
 
来源:人人都是产品经理 发布于: 2017-8-13
来自于要资料   176 次浏览     评价:      
 

文章简要分享了移动端响应式UI的7种布局,希望能够对你的从产品工作带来一些借鉴。

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

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

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

常用的布局模式

流线布局

等比缩放

拓展布局

分栏布局

流动布局

重复布局

固定布局

流线布局

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

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

等比缩放

等比缩放

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

拓展布局

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

分栏布局

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

流动布局

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

重复布局

固定布局

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

总结

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

 

   
 订阅
  捐助
相关文章

产品UED流程及交付物
可用性测试
浅谈如何留住用户
QQ音乐2012设计总结
 
相关文档

淘UCD心得
UI交互设计文档
Yahoo的交互设计
人人网UCD用户体验培训教程
相关课程

用户体验& 界面设计
以用户为中心的软件界面设计
手机界面原理与实现
可靠性评估专题培训
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号