响应式与自适应：如何选择正确的设计方法

就在几年前，设计师可以创建一个单一的僵硬的网站版本，然后就结束了。现在已经不是这样了。现在，他们需要考虑到无数的智能手机、可穿戴设备、平板电脑和其他智能设备–你也一样。

这对电商企业来说尤其如此。大多数品牌不能再专注于单一的设备。超过58%的互联网流量来自于移动设备，而桌面设备占40%。接近60%的电商销售是通过移动设备完成的。

移动流量的份额只会不断增长，这意味着设计师也必须迎合不同的用户需求和浏览风格。一个移动用户没有那么多耐心–他们希望网站内容是咬合的，易于处理。另一方面，PC用户通常准备花更多时间研究一个具体的报价。

问题是，你如何确保你的设计在任何屏幕上看起来都很好，并涵盖各种用户需求？响应式设计是唯一的方法吗？在某些情况下，自适应设计不是一个更好的选择吗？响应式设计和自适应设计到底有什么不同？

1. 响应式设计与自适应设计：有什么区别？
2. 响应式网页设计的优点和缺点
3. 响应式设计：例子和使用案例
4. 自适应网页设计的优点和缺点
5. 自适应设计：例子和使用案例
6. 如何在响应式设计和自适应设计之间做出选择
7. 如何判断一个网站是响应式的还是自适应的？

响应式设计与自适应设计：有什么区别？

在我们进一步讨论之前，我们应该定义我们正在处理的问题。

响应式设计使你的内容对用户的屏幕尺寸做出反应并进行相应的调整。通过响应式设计，你创建了一个单一的布局，并使其各个元素具有灵活性，以确保它们能在不同的屏幕上正常显示。

把响应式设计想象成一套规则，告诉你的内容如何表现。你可以使用CSS媒体查询来指定目标设备类型并设置断点，也就是屏幕的最大或最小宽度等条件。断点决定了你的布局何时应该改变。

反过来，自适应设计意味着你的内容会适应用户的设备参数，但却是以一种预先确定的方式。你有不是一个而是多个现成的布局，以考虑到不同的屏幕尺寸、方向等等。你可以根据用户的设备类型来决定你的内容如何在用户的浏览器中显示。

简而言之，对于响应式设计，你决定了你的内容应该如何反应，而对于适应式设计，你也决定了最终的结果。无论你选择哪一种，你都能为智能手机和桌面用户创造一个流畅、无缝的体验。而这反过来也会提高你的搜索引擎排名。

这个并排的比较将帮助你了解响应式设计和自适应设计之间的关键区别。

这两种方法都是绝对可行的；它们可以帮助你遵循常见的网页设计原则，创建一个客户友好的网站。响应式设计与适应式设计的主要区别在于它们的执行方式。

响应式网页设计的优点和缺点

让我们从响应式设计的优点开始。

• 你不需要高级编码技能。 如果你使用像Squarespace这样的拖放式网站建设工具，你最终会得到一个默认的响应式网站。你也可以很容易地找到轻量级的、完全可定制的、响应式的WordPress主题。
• 响应式设计是王道。 它已经变得非常普遍，几乎每个用户体验设计师都熟悉它。Bootstrap，最流行的CSS框架，大多用于设计响应式、移动优先的网站。
• 你可以最大限度地利用可用的屏幕空间。 响应式布局给你更多的控制权，让你更有效地管理留白空间。因此，你的设计将永远不会显得杂乱无章或空洞无物。
• 它更实惠。 如前所述，你可以使用无代码工具自己创建一个基本的响应式网站。或者，你可以雇用一个自由职业者或机构，即使你的预算有限。看看我们值得信赖的机构客户名单，找到一个可靠的合作伙伴。
• 响应式页面需要更少的维护。 即使市场上有一个新的小工具，每个人突然都在使用它，有了响应式网站，你就不用担心了。你可能需要做一些改变，但你不必重新设计你的整个布局。
• 响应式设计意味着快速的交付。 一个版面的设计时间比六个版面的设计时间要短，这意味着你的新网站可以在几天内启动和运行。

现在说说响应式设计的缺点。

• 你创造的目标体验较少。 当你试图考虑到所有现有的设备时，你不可避免地失去了某种程度的个性化。
• 响应式设计需要大量的计划和实验。 这不是一个放手的方法–你仍然需要在上线之前在各种视口尺寸上测试你的设计。分配一些时间来修复不一致的地方，因为它们不可避免地会出现。

响应式设计：示例和使用案例

响应式设计的使用案例似乎是无穷无尽的，因为响应式设计是多么的通用和平易近人。任何个人和商业网站都可以从响应式和灵活性中受益，正如你从这里描述的例子中看到的那样。

这个来自龙舌兰酒品牌Los Sundays的响应式设计，在PC和手机上看起来同样令人惊叹。设计师巧妙地确定了不同视口的内容的优先次序，并确保排版保持大胆但不失稳重。

来自洛杉矶的一个响应式设计案例  (Source: The Responsive)

催眠的视差效果只有在更大的屏幕上才能看到–因此也能欣赏到。在这里，当用户从智能手机上访问该页面时，可以得到一个美观而快速的轻量级体验。

下一个例子也可以说是来自Slam Jam，一家在线服装店。一旦你切换到屏幕较小的设备上，该网站就会顺利地转变。产品以两列显示，而不是四列，菜单移到底部，使搜索栏更容易进入。旋转木马使用户能够发现新的产品，而不必放大或缩小。

一个来自Slam Jam的响应式网站  (Source: The Responsive)

我们的下一个例子取自Here Design，证明了充满内容和特效的响应式页面也能以合理的速度加载，并在任何设备上看起来都很好。即使在小屏幕上，这个页面也感觉同样和谐，而且动画的显示没有任何尴尬的延迟、故障或不一致。

来自Here Design的一个响应式页面  (Source: The Responsive)

自适应网页设计的优点和缺点

先别急着下结论–有很多成功的企业利用自适应设计，并在此过程中茁壮成长。

自适应设计有多种优点：

• 自适应的网站通常是快速的。 加载时间对SEO、用户体验和转换率至关重要，而拉动一个光滑的专用页面版本需要更少的时间。将自适应设计与快速管理的主机相结合，你会得到一个闪电般的网站。
• 这是一个量身定做的高精度方法。 你可以完全控制你的布局的外观和感觉，因为它是静态的。你是决定针对哪些设备的人。这使你能够为你的用户设计更加个性化的体验，并考虑到他们的喜好。
• 你可以更容易地整合广告。 当你知道周围元素的确切尺寸和比例时，配置广告更容易。
• 自适应设计对改造现有网站很有用。 你可以创建单独的手机和平板电脑版本，并保持你的主网站版本不变。
• 你可以调整个别模板，而不是重新编码整个网站或页面。 当你的设计是由单独的静态布局组成时，对你的设计进行修改就不那么痛苦了，特别是当你需要修复一个小问题时。

你也应该意识到自适应设计的缺点：

• 你不能保证你的设计会按预期显示。 如果你的访客使用的是你没有考虑到的设备呢？在这种情况下，结果将更难预测。
• 自适应网站更昂贵。 你需要一个开发人员团队来设计和支持你的网站，这意味着更高的设置费和运营费用。同时，网页设计师的平均工资约为5.7万美元，他们的工资率可高达11.4万美元。
• 它不太受欢迎。 你很难找到关于自适应设计的直观的学习材料和最新的指南。由于响应式设计风靡一时，大多数网页设计课程都以它为重点。
• 设计单独的体验是很麻烦的，而且是劳动密集型的。 每个布局都必须是像素级的，所以，自然而然地，你的设计师会花更多的时间来处理和测试它们。
• 它对初学者并不友好。 大多数流行的可视化网站建设者给你提供了创建统一的响应式设计的工具，但你很少能找到一个简单的服务，让你建立独立的移动、PC和平板电脑版本。这是因为自适应设计需要更多的专业知识和技能。

自适应设计：例子和用例

对于目标受众喜欢使用移动应用程序购物的电子商务企业来说，自适应网站可能是一个更好的选择。这些企业旨在为他们的受众创造高度有针对性的体验，因为他们已经收集了足够的数据来了解他们的购物习惯和偏好，而且他们希望鼓励下载应用程序。

要看世界上访问量最大的自适应网站，只需前往亚马逊。从台式电脑上看，你会得到一个很好的体验。主页相对繁忙，但并不压抑，而且你可以立即找到你要找的东西。

来自亚马逊的一个自适应网站例子

然而，如果你试图调整你的浏览器窗口的大小，会发生以下情况。

浏览器窗口大幅调整后，亚马逊网站的外观如何？

你只能看到桌面内容的一小部分，因为这种不常见的浏览器宽度没有被考虑在内。

这种做法会伤害亚马逊吗？丝毫没有。它的销售额近年来翻了两番，因为它的移动网站版本和应用程序都提供了非常直接、快速和方便的购物体验。

像亚马逊这样大的公司可以抛弃 “一刀切 “的做法，对其网站设计稍加保守，以保持其熟悉和即时访问全球数百万客户，包括老年人和有视力问题的用户。

另外，如果你仔细观察，亚马逊的网站是部分响应的–根据视口的不同，它有额外的和现有的元素被添加或被拿走。

瑞安航空，一家受欢迎的欧洲低成本航空公司，也有一个自适应的网站，使预订廉价航班变得轻而易举。它的界面看起来略显保守，但并不落伍，它在Pingdom速度测试工具上的得分是82/100，这是一个不错的结果。

瑞安航空的自适应网站

拥有一个有点僵硬的网站并不能阻止该航空公司一次又一次地打破流量记录，因为大多数旅客更喜欢从桌面设备或使用瑞安航空的移动应用程序预订航班。

对这个网站做太多的改变，意味着让已经习惯了当前外观的用户感到困惑。瑞安航空没有换成更时髦的响应式版本，而是有意选择保留其网站设计，而是专注于保持其票价尽可能低。

如何在响应式设计与自适应设计之间做出选择

仅仅因为一种方法比另一种方法更普遍，并不意味着你必须要采用它。不要忽视大局–你的主要目标是使你的网站直观、可访问、有吸引力，并且在视觉上有凝聚力。要做到这一点，你需要采取一个整体的方法，并转向网页设计的最佳实践。

按照这些步骤来确定哪种设计策略对你最有效。

1. 首先考虑你的目标受众和他们的需求。 请记住，用户的意图并不是基于他们所使用的设备。进行用户研究，了解现实生活中的用户如何与你的界面互动。为特定的设备优化设计对你来说有意义吗？
2. 专注于你的特定使用案例。 例如，如果你销售现代艺术印刷品，你应该专注于为你的用户创造完美的桌面体验，因为他们想在购买任何东西之前在大屏幕上看一看这些印刷品。
3. 不要过分追求移动优先的方法。 为了消除用户旅程中的所有可能的摩擦，很容易过度简化移动布局，并将同样的逻辑应用于桌面版本。然而，一个普通的、带有汉堡包菜单的单栏设计，在桌面屏幕上很可能显得过于沉闷。
4. 评估你的资源和限制。 在你考虑投资自适应布局之前，要弄清楚你的预算、当前的需求和长期目标。对你的品牌来说，拥有一个最先进的网站，即使在超大型的智能电视上看起来也非常棒，这一点至关重要吗？或者你只需要一个可靠的主力军来向你现有的观众销售产品–一个无论如何都会向你购买的观众？
5. 让你的加载速度成为优先事项。 商业网站可能有也可能没有点缀，但它们必须快速加载以避免跳出率的增加。 如果一个网站的加载时间超过6秒，超过一半的用户会放弃该网站。
6. 运行竞争者分析。很有可能，你的主要竞争对手已经进行了用户研究，并且已经全部弄清楚了。不要只是复制他们的方法；相反，试着分析他们正在迎合哪些用户群以及为什么。

响应式设计不再是一种趋势–它正逐渐成为网页设计的黄金标准，它的少数缺点很快就会成为过去。

例如，Webflow，一个可视化网站建设者，通过自动优化上传的图片，使响应式网页的速度提高了10倍，这解决了响应式网站的一个主要问题：其加载速度。

有可能使用两个世界的最佳方案–结合响应式和自适应策略来解决不同的搜索行为。这样一来，自适应布局可以有媒体查询，而响应式网站可以包括自适应元素。可以说，响应式与自适应式的两难选择已经不再那么重要了–理想的网站设计是两者的巧妙融合。

如何判断一个网站是响应式的还是自适应的？

首先，看看当你从台式电脑上调整浏览器窗口大小时会发生什么。一个响应式网站会根据你的视口大小进行无缝调整–你会立即注意到它是多么灵活。

一个自适应的网站不会改变，直到你达到某个断点或切换到另一个设备。在此之前，它的一些内容将被隐藏，而不是调整大小，你必须拖动水平滚动条才能看到它。

另外，你可以通过点击Windows上的CTRL + U或Mac上的Option + Command + U，在主页源代码中寻找媒体查询。你也可以在页面上点击右键，从下拉菜单中选择 “查看页面源代码”。

查看网站在各种屏幕上的表现的一个简单方法是用谷歌浏览器设备模式模拟移动设备。打开你想测试的网站，在Windows上按CTRL + Shift + I，或在Mac上按Command + Option + I来打开开发者工具。

小结

你可能听说过，搜索引擎会优先考虑响应式网站，只是因为它们是

响应式。这并不完全正确。一个自适应的网站可以和一个响应式的网站一样对搜索引擎友好。谷歌确实说过，它更喜欢提供积极用户体验的移动友好型网站，但它并不限制你只用一种方法来实现这一点。

有许多方法可以使你的网站在移动端完美无缺地工作。例如，你可以尝试WordPress的移动插件–你甚至不需要成为一个编码员来使用其中的一些插件。如果你有开发人员的技能，确保使用我们的WordPress暂存环境，在网站上线前以无压力的方式测试你的网站变化。

有一些移动插件可以把你的WordPress网站变成一个应用程序，这是一个提供量身定做的体验的绝佳方式，而不需要在一个全新的自适应网站上花费巨资。如果你已经有了移动网站，你可以用WP Mobile Menu这样的插件大幅改善它们的外观和可用性。

无论你选择哪种方法，请记住，跨平台设计要求你为你的用户创造极快的体验，无论他们何时或如何访问你的资源。 选择正确的主机是成功的一半–它可以使你的网站在默认情况下更快、更安全，而且你不必担心计划外的停机或低带宽。