UI设计师要懂的自适应和响应式布局设计
阅读时间：10分钟
作者：Mattia Astirino
原文链接： https://blog.prototypr.io/the-a-r-model-17ce2bbeec71
现如今，几乎所有的网页设计都要进行响应式和自适应设计，才能让产品能够覆盖到更多的客户端，那么到底什么是响应式和自适应，以及我们应该如何设计呢？答案尽在文章中。
自适应和响应式是两种方法论，目的是让产品在不同的设备和尺寸的屏幕上无障碍显示，以此为用户提供最好的体验。他们两个都是为了最大化利用屏幕可用空间以及为用户提供最好的交互模式。在讨论A+R模型之前，我们需要先拆分两种方法论。
重组：用自适应技术(Adaptive)我们可以开发和提供不同的布局来为类似纯触屏或者混合触屏设备这样的一类具体场景提供最好的体验。
在建立响应式(Responsive)体验时，我们有三种方法来处理布局和内容：
换行：我们可以通过改变页面结构布局来更好的适配可视区域，大多数情况会导致内容堆叠（效果不是很好）。
调整大小：一些UI组件和多数html元素一样易变，填充空白空间并在必要时换行。
显示/隐藏：一些UI组件在可视区域隐藏（组件仍然存在）或显示出来填满空间。
当响应式设计在基于预定义断点之上用CSS或者JS调整布局和内容。调整方法提供基于用户代理和设备类型的预结构化模版。他们之间主要的区别是DOM结构，当采用响应式思维开发时，我们的HTML代码在各种情况下都会一样（除非你用JS移除某些DOM节点），而在自适应开发中我们可能会有不一样的代码结构和体验。
两种设计思维都是有效的，你只用问问自己在项目中有多少组件、复杂性如何以及是否存在一种体验是适合所有用户的。开发web应用时经常会用到响应式设计，例如通过自适应开发来构建定制化体验。
两种方法各有利弊，但是如果同时使用它们到底会得到什么呢？A+R模型结合了基于单个主要临界点的自适应和响应式方法。
如上所述，自适应方法能让我们在不同的设备上有不同的体验、内容甚至是功能。将960px作为主要的自适应临界点，根据全局统计信息定义，我们会得到一些相似处：
- 左侧的可视区代表整个屏幕小于960px时的具体布局和内容
- 右侧的可视区代表整个屏幕大于等于960px时的另一种布局
在使用响应式技术时，我们可以利用主要临界点创建两个互不相同的体验情景，每种体验里，我们都可以在可用空间内定义二级临界点去调整布局。举个例子，使用平板电脑的用户可能会感受触控体验优化（自适应），但我们可以通过终端设备来调整布局（响应式）。
通过结合自适应和响应的方法，我们得到A+R模型。利用自适应技术，我们将致力于体验和功能，作出两种不同的情景设计。使用响应式组件，我们可以处理上下文内的UI组件和布局。
这种设计方法要求设计师真正了解他们想要提供的体验，以便于定义要遵循的模型。此模型非常适合那些在较少功能或结构完全不同的小型移动设备上运行的大型APP。就像你看到的，你的产品将具有很强的灵活性，但同时也很复杂，因为你要处理不同的代码库和环境（非强制性）,Twitter、Facebook和Github将此模式应用在他们的移动网站上。如果你在移动设备上浏览这些网站，则可以根据移动用户的期望来检验它们是如何改变的用户体验的。
文章被以下专栏收录
