干货:关于响应式布局

【导读】响应式布局是在如今屏幕尺寸越来越多样化趋势下的解决之道,但是该如何去做响应式布局呢?

psb1

在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型:
布局类型

psb2

布局实现
采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局、可切换的固定布局、弹性布局、混合布局。
        固定布局:[/B]以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;
        可切换的固定布局:[/B]同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局;
        弹性布局:[/B]以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;
        混合布局:[/B]同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。

psb3

可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式:其中可切换的固定布局的实现成本最低,但拓展性比较差;而弹性布局与混合布局效果具响应性,都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计,需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。

psb4

布局响应
对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计);
无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点),
我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式:
布局不变,即页面中整体模块布局不发生变化,主要有:
        模块中内容:挤压-拉伸;
        模块中内容:换行-平铺;
        模块中内容:删减-增加;
[L]

psb5

[/L]

psb6
psb7
[L]布局改变,即页面中的整体模块布局发生变化,主要有:
        模块位置变换;
        模块展示方式改变:隐藏-展开;
        模块数量改变:删减-增加;

psb8

psb9

psb10.

很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为断点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/4360/

(0)
Smiler李想Smiler李想
上一篇 2015-03-19 14:49
下一篇 2015-03-21 16:23

相关推荐

  • AxureRP8从8.0.0.3318改变了授权验证,教师与学生可以申请免费 key!

    #交互学堂##Axure#RP8.0.0.3318更改授权验证机制,旧的授权名以及密码将会失效。 划重点:个人用户除了购买正版软件,也可以暂时维持当前版本不做升级,当然这也是以失去软件的稳定性为代价。这也就意味着一段时间…

    2016-10-31
  • Principle 2.0.6Mac平台交互动效设计神器和谐版下载

    #交互学堂##Principle# 是前 Apple 工程师打造的一款交互设计工具,五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者 Gif 分享到 Dribbble、Twitter 等社交平台。此外 Principle 还支持…

    2016-10-31
  • 024.axure制作圆形组件——axure制作技巧

    Axure本身是没有直接提供圆形组件的,所以很多朋友在微博上问,如何使用axure制作圆形,难道都要找美工…… Axure没有提供圆形组件,但是它提供了一个万能组件——矩形组件,只要有矩形组件,我们就可以制作出圆形,下…

    2014-09-11
  • Mockplus原型交互跟我做之6 - 快速给弹出面板命名

    在交互设计中,我们经常需要给弹出面板起一个名字,便于查看。

    一般的方式,是在属性面板中,通过“名称”来修改。

    但是还有更快捷的方式,就是选中弹出面板,按下空格键,然后输入名字。请看视频:

    2016-02-18
  • axure元件下载:Axure 7.0 ios8元件库1.2最新版

    axure 元件下载 注意事项: 1、本元件库中的字体图标以及部分元件使用时,需要双击安装1.2版本的压缩包中的TFF字体文件,并重新启动Axure,否则拖进编辑区不能正常显示。 2、如果在本机演示原型,无需进行其他设置…

    2015-07-20
  • 【Mockplus教程】收藏和重用

    1. 制作模板   选择需要制作为模板的页面,鼠标右击,弹出的菜单中选择“加入到模板收藏”,然后选择相应 的模板库,如果没有模板库会提示新建一个。 加入成功之后会在左边模板收藏栏中看到模板页面的缩略图。 &…

    Mockplus 2015-08-31
  • 在手机上演示axure原型

    AXSHARE APP发布啦,以后大家的原型可以通过这款APP进行预览演示咯。小编迫不及待的体验了一下这款APP。 要使用这款APP,首先需要有axshare的账号。账号注册地址:https://share.axure.com/ 然后在手机上下载AxShar…

    2015-05-28
  • Web首页交互设计

    关于首页,每天处在互联网的生活中访问的网站首先映入眼帘的,都是网站向你展示的该网站的首页 我们还是来分析下“著名”的百度首页。说起首页设计分析百度就像编程开发第一堂课要讲Hello World!一样..... ^_^。 先…

    2014-09-27
  • 分享AXURE注册码 AXURE序列号

    很多同学安装了Axure 7.0或者Axure 6.5,但找不到Axure注册码(axure license key)。今天就为大家分享一些Axure注册码,希望大家能够做出好的产品。 本站分享的Axure注册码来源于网络,本站不保证能长期使用,也不…

    Axure 2015-04-17
  • 交互设计师成长分为三个阶段

    提起交互设计,它既没有界面视觉设计绚丽,也没有用户体验设计有趣,看起来枯燥乏味,学起来复杂难懂,但它却是整个产品流程中最核心的部分之一。一个牛X的交互设计师是睥睨天下的,无论薪资还是技术。(以上海地区为例)但在通往牛X的路上……很多人还没开始就放弃了经常会有人说交互设计好像已经趋于饱和,现在从事这个行业没机会了。照这么说,公务员是我见过的饱和度最高的行业了,但每年还是有那么多人争得头破血流要为人民服务。就像金字塔一样,往往最底层的那一部...

    2018-04-18