一、开篇

二、历史长廊

后随时代变迁，技术发展。因浏览器的增多，开发者们忙于兼容各种浏览器。在这个期间，实际已经有了针对各设备适配的解决方案，只是未成为主流，这种新布局方式叫自适应布局（Adaptive Web Design，简称AWD）。

在这种新思想下，又出现了两派的具体解决方案：百分比宽度布局和流体式布局（Fluid Layout）。

QQmail就是CSS hack的完美体现。你用任何一个浏览器，几乎可以看到同一个样子的邮箱，为的是用户体验统一。

互联网大战从PC打到了手机。手机虽然屏幕变小了，但是却提供了更丰富的功能。用户要求不断提高，网站更加看重的是用户体验了。

描述响应式界面最著名的一句话就是“Content is like water”——无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

因此我们需要在了解基本布局方式的特征下，选择适合自身产品的布局实现方式。

静态式、自适应、流体式、响应式布局，A+R混合布局的特点对比如下。

窗口缩小后内容被遮挡时，拖动滚动条显示布局。不管在哪种设备，哪种浏览器上浏览都是一个样。移动设备上则显示太小或不全。

用自适应技术（Adaptive），我们可以开发和提供不同的布局，来为类似纯触屏或者混合触屏设备这样的一类具体场景提供最好的体验。

每个静态布局对应一个屏幕分辨率范围，页面通过百分比自动适配设备屏幕分辨率和可视窗口大小。

3. 弹性布局

4. 流体式布局

5. 响应式布局

页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和删格、布局、图片、CSS media query的使用等。

6. A+R混合模型布局

当响应式设计在基于预定义断点之上用CSS或者JS调整布局和内容。调整方法提供基于用户代理和设备类型的预结构化模版。

R采用流体＋断点，在断点之间，页面依然会随窗口大小自动缩放（通过fluid grid），直到遇到断点改变界面样式布局甚至内容。R一般来说需要在网页设计初期就开始（通常采用mobile first策略），所以旧的网站要做RWD很可能要完全重建。

两种设计思维都是有效的，需衡量在项目中有多少组件、复杂性如何以及是否存在一种体验是适合所有用户的。开发web应用时经常会用到响应式设计，例如通过自适应开发来构建定制化体验。

混合式布局就是为不同终端设备的屏幕分辨率定义布局（适配各种尺寸的PC、手机、穿戴设备等等），在每个布局中，页面元素随着窗口调整而自动适配，混合了百分比、像素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。

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

2）选型

一是看应用场景，二是看如何设计“响应式”方案。简单、轻量的页面直接用media query实现响应性就很好。比如blog、小型企业站之类。现在的CSS框架基本都具备响应性。

于是在同一个controller层上，识别UA，渲染不同版本的模板，组合相应的静态资源，这也算是响应式。开发及维护成本明显提高。

根据不同公司的技术特点，调整的成本也难讲是否可行。对于大型站，分开做更清晰，同时用响应式组件解决复用、功能同步的问题。总之，根据场景响应式可以从各种层面、各种粒度上做。这是现代web开发的特点。

响应式布局有可能造成冗余的代码较多，对研发的要求也更高，比如如何更好地让图片、适配、UI动画自适应各种布局。

四、实践与技巧

PS：原生应用可查询横纵两个方向的像素密度，通常浏览器可查询1个系统像素对应多少物理像素。而设计角度通常需要参考的是所获取的系统分辨率。

对于基本流量来自Web端网页的产品而言，需要了解当下的浏览器分辨率现状 Web端不同屏幕分辨率占比情况，数据来源百度统计，如图所示：

自适应（A）方法能让我们在不同的设备上有不同的体验、内容甚至是功能。如将960px作为主要的自适应临界点，根据全局统计信息定义，我们会得到一些相似处：

• 左侧的可视区代表整个屏幕小于960px时的具体布局和内容；
• 右侧的可视区代表整个屏幕大于等于960px时的另一种布局。

通过结合自适应和响应的方法，我们得到A+R模型。利用自适应技术，我们将致力于体验和功能，作出两种不同的情景设计。使用响应式组件，我们可以处理上下文内的UI组件和布局。

因为你要处理不同的代码库和环境（非强制性）,Twitter、Facebook和Github将此模式应用在他们的移动网站上。如果你在移动设备上浏览这些网站，则可以根据移动用户的期望来检验它们是如何改变的用户体验的。

栅格系统可以帮助我们设计，但却不能保证我们的设计。它有多种可能的用途，并且每个设计师都可以寻找适合其个人风格的解决方案。对于简化复杂的响应式布局规则而言，这是一项十分有效的辅助手段。

列（Column）用于对齐内容。

2. 页面边距（Side Margins）

3. 列结构

8、12、16和20是响应式布局中最常见的几种列结构。而这取决于我们对产品的设计要求。

4. 断点

在这个范围内，布局会根据可用的屏幕尺寸重新调整，以获得最佳的布局视图。

5. 网格规则

产品中各类元素应该遵循这个倍数原则（图标、组件大小等），不同的设计系统根据自身需求，设定这个规则。例如在Material Design中使用的是2X网格。

流体栅格有不同宽度的列，固定的槽和固定的边距。流体栅格有灵活的内容宽度，根据屏幕大小变化在流体栅格中，列可以增长或收缩以适应可用空间。

如果内容宽度大于可用的屏幕尺寸，那么一个固定栅格就会转变成一个适应屏幕可用空间的流动栅格，以充分适应内容。

设计需在技术方案前介入，根据你的产品特点，进行设计方案评估。可借助的手段有删格、网格规则等。设计断点规则时，需关注设备的常见系统分辨率。

但是，如果确实想要处理好平台间的所有差异，我们就回到了原点：进行两种不同的设计或者使用A+R的模型，在寻求合适的过程中，关注技术的革新。

作者：神乐、沙拉；公众号：酷家乐用户体验设计

题图来自 Unsplash，基于 CC0 协议

顶一下()     踩一下()