超全面!移动端响应式的7种UI布局解析 - 优设-UISDC

超全面!移动端响应式的7种UI布局解析

2017/09/04 6605评论区

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

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

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

常用的布局模式

  • 流线布局
  • 等比缩放
  • 拓展布局
  • 分栏布局
  • 流动布局
  • 重复布局
  • 固定布局

流线布局

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

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

等比缩放

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

拓展布局

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

分栏布局

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

流动布局

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

重复布局

固定布局

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

总结

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

原文地址:http://www.woshipm.com/u/691425

原文作者:Tony

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/7-responsive-ui-layout

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 交互设计师 设计师 扁平化设计 排版布局 设计师专访 职场 视觉设计 设计流程 用户体验设计 素材下载 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 产品设计 设计趋势 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里