响应式Vs自适应
2017-06-28
Interaction Design Foundation是一个国际大型用户体验设计社区，旨在为设计从业者提供丰富的学习内容和设计知识。
Adaptive vs. Responsive Design
响应式和自适应设计之间的不同，为Web和移动应用的设计师注入了重要的选择。通过对两者的洞察可以让您以更好的目标，目的和结果来规划和执行您的设计。
随着各种各样的移动设备的普及，作为设计师，我们需要设计满足各种屏幕尺寸方案。这是每个应用设计人员目前面临的挑战。从巨型企业显示器到智能手表，用户可以线上访问信息的方式有很多。寻求弥合设备之间差距的设计人员有两个选择：自适应站点或响应站点。
版权所有：Stéphanie Walter；版权协议：CC BY-SA 3.0
响应式设计与自适应设计之间的区别存在一定的混淆。对于那些没有任何设计风格经验的人来说，边界可能看起来模糊不清，但是当您仔细观察两者时，会有明显的差异。
响应式设计
版权所有：Muhammad Rafizeldi.；版权协议：CC BY-SA 3.0
响应设计一词由网页设计师、开发者Ethan Marcotte在他的“Responsive Web Design”一书中创造。响应式设计通过调整设计元素的位置以适应可用空间来响应浏览器窗口宽度的变化。
响应式网站根据可用的浏览器空间显示内容。如果您在桌面上打开响应式站点，然后更改浏览器窗口的大小，内容将动态移动，以便在浏览器窗口中最优化（至少在理论上）。在手机上，这个过程是自动的实时检查可用空间，然后呈现出理想的安排。
响应式设计很简单。因为它是流动的，这意味着用户可以访问您的在线应用时，像在大显示屏的桌面应用上访问大量信息一样，在其手持设备上同样获得大量的信息。为了到达这个目标，响应式设计需要对网站进行非常好的概念化，并深入了解最终用户的需求和想法！
自适应网页设计
自适应网页设计于2011年由网页设计师Aaron Gustafson在“自适应网页设计：创新丰富的渐进式增强体验”一书中引入。自适应网页也被称为逐渐增强的网站。
版权所有：未知；版权协议：未知
如果响应式设计依赖于改变设计模式以适应可用的空间，那么自适应设计是具有多个固定布局尺寸的。当站点检测到当前页面的可用空间时，它会选择最适合屏幕的布局。因此，当您在桌面上打开浏览器时，该网站会选择该桌面屏幕的最佳布局; 调整浏览器的大小对设计没有影响。
一些网站已经很快地使用自适应设计。在美国，亚马逊，苹果和About.com配置页面是考虑移动优化的。注意，使用自适应设计在移动网站上显示的布局可能与桌面版本不同。然而，这是因为设计人员为手机屏幕选择了不同的布局，而不是页面自我调整。
在自适应设计中，开发六种最常见屏幕宽度的六种设计是正常的; 320,480,760,960,1200和1600像素。
独立移动设计
还可以选择创建移动站点（通常在浏览器的URL栏中使用“m.”前缀表示）。这个选择曾经是一个很好的方法。设计人员将为移动设备创建单独的网站，调整元素和布局以实现专用格式。 Google将搜索页面做了移动网站，但今天很多自适应网站和响应式网站也使用单独创建移动站点。
创建一个单独的站点（而不是使用不同的设计或使用可变的设计）的最大缺点是，它需要非常多的维护，以保持网站的两个版本是同质的。没有特别的动力去推动，最近移动独立设计已经失去了青睐。 似乎不太可能会很快回来。
在响应和自适应设计之间进行选择
版权所有：Stéphanie Walter；版权协议： CC BY-SA 3.0
响应式设计更容易，仅需要较少的工作变可实现。它在每个屏幕尺寸上减少对设计的控制，但是目前为止，这是创建新网站的首选方法。这可能与大量的内容管理系统（CMS）如WordPress，Joomla等可用的大量廉价模板有关，毕竟谁想要重塑设计呢？
响应式设计师通过创建一个设计以便在所有屏幕上使用，通常在分辨率的中间值开始，并使用HTML的媒体查询的方法来对不同终端进行什么适应和调整。这往往会让用户感到开心，因为熟悉的网页设计似乎能转换在任何设备的屏幕上。均匀性和无缝性是响应式设计提供良好用户体验的关键考虑因素。
保持响应式设计的视觉层次结构是一个重点，因为设计元素在屏幕周围进行重排。许多不同设备会监听您的设计页面，从而可以确保您正在调整窗口大小。如果一个页面的设计比较简单，那么它会在设备屏幕之间转换得很好，像液体从容器一样流向容器。
搜索引擎优化是使用响应式设计的另一个支持点。使用响应式设计的网站（即，具有为所有设备提供服务的网址）的网站目前更加适合搜索引擎。
响应式设计似乎有很强的使用动机。但请注意以下几点：
因为您的网站会从在设备之间“流动”，以适应屏幕尺寸，所以您添加的任何广告都可能无法适应该空间。突然间，使用响应式设计提供的“便利”可能需要一些反思和工作。
PC和移动设备之间的下载次数会有所不同。图像的灵活性在这里是一个很大的考虑。大型设计的页面在家庭或办公室的大屏幕上展示时，比手机需要更多的时间（和数据）才能显示。手机版设计页面可能会有更小的预览效果，所需时间和数据会相对少一些。
理论上自适应设计将根据用户使用的设备来选择设计模板，以确保最佳用户体验。与响应式设计不同，屏幕从桌面的大型设备“流动”到较小的设备中，自适应设计提供量身定制的解决方案。顾名思义，它们适应用户的情境需求。作为设计师，可以通过友好的设计，让用户在移动设备上能够满足需求。同时，我们也可以为桌面用户做同样的事情。我们从网站的最低分辨率版本开始，以最高的速度变为更高的分辨率。六种设计是当前的标准，但根据用户的数据观察，您可能会使用更少的设计。
自适应设计的优点在于它与现代用户体验更相关，而响应式设计更加以桌面为中心的方法（其他设备的需求是次要的）。作为用户，我们了解更多的是关于智能移动设备的信息。我们喜欢让我们的设备了解我们正在做的事情。我们用一个文字的例子：如果你穿过一条长长的隧道，你不想拥有可以通过GPS信息来自动调整亮度的屏幕吗？基于上下文的识别能力和可用性使您的智能设备足够聪明，可以适应并提供额外的功能。
您还可以通过自适应设计来设计优化相关用户界面的广告。因为您正在设计不同的分辨率，您可以获得用户的具体需求。例如智能手机，通过各种各样的传感器使得公司（和我们的设计师）比以往任何时候都更了解我们的用户。用户经常去喜欢的商店，餐厅，健身房等。这将为用户建立一个完整的用户画像。从这些行为定位，我们可以设计和微调页面中的广告。
研究表明，具有自适应网站的公司往往在速度测试方面胜过一家具有响应式网站的公司。这也不是很小的区别，自适应站点通常比响应站点快2-3倍，并且为用户提供相对较少的数据以提供用户体验。
自适应设计有一些很大的优势。然而，在需要最佳用户体验并提供最佳解决方案的游戏中，我们必须记住，我们必须花时间检查我们能做的选择和用户的实际情况。
自适应设计也有缺点。首先，通常比创建响应式设计需要更多的工作。为此，大多数自适应设计都用于改造现有的站点，以允许它们在多个设备上使用。这样看来，第一优先级的任务是通过对传统网站更新，以覆盖更多的设备。
其次，适应性设计可以让用户避免使用同一种设计。平板电脑或上网本的网页可能会“悬挂”，因为设计师只能照顾桌面和智能手机用户。因此，通过提供一个链接，让用户在不同设备之间切换是很重要的。
最后，当搜索引擎漫游器地通过点击来筛选和排序的方法以区分您的“.com”网站和“m .com”网站时，接受现状是明智的，大多数搜索引擎仍然不能平等地对多个网址排列相同的内容。这意味着注意一个自适应设计可能会让你重新考虑进行SEO。
所以，虽然目前对响应式设计有一个明确的偏好，但如果你有预算，不要忽视自适应设计。Google喜欢加载速度快的网站，用户也如此。
总结
版权所有：Brisbane Web Design；版权协议：公共
现代网页设计给我们提供了三个选择：响应，自适应和独立设计，尽管独立设计已经被废弃了。
响应式设计使设计人员可以根据可用的浏览器空间显示内容。 这允许站点在桌面上显示的内容与手持设备上显示的内容之间保持一致。 响应式设计是“传统”选择，是迄今为止最流行的方法。
| 优势 | 劣势 |
|---|---|
| 统一性和无缝衔接 = 好的用户体验 | 屏幕尺寸设计控制的不足 |
| 丰富的模板使用 | 页面中的元素会移动 |
| SEO友善 | 广告在屏幕上丢失 |
| 通常更容易实现 | 更长的手机下载时间 |
自适应设计，在2011年被开发出来，设计师常有几个固定的布局尺寸来做自适应设计。它提供了一种“一个尺寸一个设计”的方法。
| 优势 | 劣势 |
|---|---|
| 允许设计人员为适当的设备构建最佳的UX | 劳动密集型创造：大多数自适应设计是改造传统的网站，使其更易于访问 |
| 移动设备可以感受到用户的系统环境 | 平板电脑和上网本可能会遇到问题，站点配置趋向于智能手机或面向桌面 |
| 设计人员可以根据智能设备的用户数据优化广告 | 挑战搜索引擎优化：搜索引擎在多个站点上识别内容存在困难 |
在响应和自适应设计之间进行选择需要仔细考虑。为了方便起见（节省成本，改善SEO，并保持用户内容与设备之间的无缝体验），尽可能谨慎地进行响应式设计，但至关重要的是要全面检查两种设计的优缺点。自适应设计可以更加适应用户在实际操作的不同需求；因此，修改设计时慎重。
我们可能最好将这些变化描述为进化。查尔斯·达尔文指出，一个存活的物种的个体不是最强或最聪明的，而是最适应变化的物种。
想想你的产品或服务。它是否在特定设置中接触用户？他们的行为可以指导你让他们知情和参与？不仅移动设备变得越来越聪明，在我们的家庭和办公室，桌子已经变得更加智能。现在，广泛的智能设备能够感知和反应环境，从时钟和加热器到构成“物联网”的大量设备。这是一个充满智慧对象的时代。我们必须设法考虑到这种聪明才智。
资料
Holst, C. (2012). “Adaptive vs. Responsive Layouts and Optimal Form Field Labels”. Smashing Magazine. Retrieved from: http://www.smashingmagazine.com/2012/11/08/ux-desi… [2014, Sept 1]
Itzkovitch, A. (2012). “Creating an Adaptive System To Enhance UX”. Smashing Magazine. Retrieved from: http://www.smashingmagazine.com/2012/12/creating-an-adaptive-system-to-enhance-ux/
Knight, K. (2011). “Responsive Web Design: What It Is and How To Use It”. Smashing Magazine. Retrieved from: http://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/The Smashing Editorial. (2012). “Responsive Web Design Guidelines and Tutorials”. (NB – This is a great resource for locating the best articles Smashing Magazine has regarding Responsive Design.) Retrieved from: http://www.smashingmagazine.com/responsive-web-des…
Cao, J. (2015). “Responsive vs. Adapative Design: What’s the Best Choice for Designers?”.Studio by UXPin. Retrieved from: http://studio.uxpin.com/blog/responsive-vs-adaptive-design-whats-best-choice-designers/
Bin Uzayr, S. (2013). ”Responsive vs. Adapative Design”. Torque. Retrieved from: http://torquemag.io/responsive-design-vs-adaptive-design/
HCI-GEEK is an Official Educational Partner of the Interaction Design Foundation, the world’s largest UX Design learning community.
本站经用户体验设计学习社区IDF授权，是中国官方授权的唯一教育合伙渠道.