什么是响应式设计？

响应式设计的理念是产品可以适应用户可能使用的任何阅读设备。这或多或少就像将内容物转化为水，模仿液体填充任何类型玻璃的能力。这表明使用固定位置创建网站的旧方式几乎已经淘汰了。

为什么做出响应很重要

响应式设计的兴起在很多方面都与移动设备的兴起有关。突然之间，用户可以从笔记本电脑的宽屏切换到智能手机。快进几年，用户希望能够使用各种移动设备访问任何网站。设计师们不能忽视移动设备的重要性，尤其是当有超过 30 亿的移动设备在使用时。

与智能手机的兴起相关的是谷歌的崛起。您会定期使用 Google 查找内容。对于任何给定的网站，谷歌是用户发现产品的方式——特别是如果你需要很多人才能找到它。这让我们想到了使响应变得至关重要的第二个因素：Google 的移动优先索引。

很难理解 SEO 在 UX 设计中的作用，尤其是在了解内容优化的细节时。从广义上讲，谷歌将移动设计放在首位的举措是告诉任何新网站移动版本将成为产品排名的主要影响力的一种方式。简而言之：没有响应式移动网站，没有任何搜索的首页排名。您可以在我们的移动优先设计指南中找到更多详细信息。

以下是Google在改进响应式设计方面的建议的简要说明：

• 为 Web 和移动设备维护相同的内容。这也意味着维护内容的标题、标题和一般结构。
• 对网络和移动设备使用相同的元数据。
• 拥有优质的视觉内容。我们谈论的是格式正确的大图像，确保所有内容都具有相同的标题、文件名和替代文本。

问题是，如果您将时间和精力投入到响应式设计中，您很可能会满足所有这些标准。其中许多因素也有助于改善用户体验，帮助品牌为用户提供一致的体验。

响应式设计的特点

对。现在我们知道是什么让响应式设计如此重要，让我们回顾一下定义响应式产品的一些特征。

CSS 断点

CSS 断点是响应式网站的经典特征。他们的工作是根据屏幕的大小将设计“分解”成一个更小的网站版本。断点通常具有最小和最大宽度，指示用户可以看到哪个版本的设计。

但是一个网站需要多少个断点才能真正响应？如果设备不适合最小或最大宽度，网站设计仍然看起来很奇怪，这违背了创建响应式设计的全部目的。

我们的技术谈到了至少 3 个主要的断点，以涵盖大多数用户喜欢的设备——从台式机、智能手机到平板电脑。许多设计师还包括“次要”断点，其中内容会自行调整以保持设计的视觉平衡，但不会发生剧烈变化。这包括诸如更改字体大小之类的事情，但不包括一般结构。

优化的视觉效果

图像在任何网站中都非常重要，无论是高分辨率照片还是自定义插图。一些设计师相信裁剪图像，以便用户只能在较小的屏幕上看到其中的一部分，因此视觉冲击力保持不变。不过对我们来说，最好的方法是使用矢量图像。

这是关于能够改变图像的大小而不必担心图像质量的损失。这也适用于页面中的排版。与其使用带有文本的图像，不如坚持使用真实文本，这样页面可以根据屏幕改变大小，而不会损失字体的质量。

谨慎的移动设计

对于许多设计团队来说，最好首先关注最小的屏幕来开始设计。这主要是因为通过将移动设计放在首位，团队可以清楚地了解内容需要去哪里。

在响应式设计方面，重点是内容而不是一般设计。因此，通过首先创建移动版本，我们可以缩小需要从一开始就展示的关键内容——用户绝对需要的部分。从那里，我们可以在转向更大的屏幕时添加更多细节和更多内容，或者找到更好的方式来呈现关键内容。

出色的响应式设计：实践

大多数响应式设计都具有我们之前提到的特征。诚然，设计一个响应式网站的原型在理论上听起来相当容易，但有很多因素需要考虑。让我们回顾一些关于创建用户喜爱的网站的一般建议，无论使用何种设备。

1. 注意你的视觉层次

这与许多设计师更喜欢从尽可能最小的屏幕分辨率开始的原因有关。这不仅是要了解您的内容的哪些部分绝对重要，还要了解展示它们的最佳方式。

当我们通过断点时，网站的视觉层次结构可能必须适应，但它的灵魂应该保持不变。它需要适应，从某种意义上说，随着屏幕尺寸的变化，组件也会随之变化，以保持产品的可用性。这也有助于 Google 的抓取工具，发出信息，表明您的产品在移动设备和网络上都保持一致的体验。

2. 按钮大小至关重要

对于基于 Web 的产品，按钮可能相当简单。毕竟，光标是一种几乎任何人都可以使用的精确工具——但我们的手指却不能这样说。有问题的手指大小可能因用户而异，设计人员需要考虑到移动屏幕上的可用空间很小。

为了增加这个潜在的问题，我们还有一个事实，即按钮需要具有描述性并提供尽可能多的上下文。这意味着为您的主要按钮使用精心挑选的微文案和正确的颜色，尤其是在移动设计方面。您可以在我们的帖子中找到有关设计适用于所有内容的按钮的完整故事：按钮设计。

3. 优先导航

如果您依赖导航栏作为查找信息的主要方式，则需要在移动设计中仔细确定导航栏的优先级。导航设计等产品方面绝对至关重要，需要在响应式网站中仔细规划。随着设备屏幕变小，导航栏的空间会越来越小。

提出以下问题很重要：我们何时隐藏导航选项？我们把它们都藏起来了吗？我们先隐藏哪些？

通常情况下，产品最终需要将所有东西都隐藏在一个按钮后面，就像我们在移动网站上看到的汉堡菜单一样。诚然，汉堡包菜单并不是唯一的选择，但不可否认的是，整个导航菜单都需要隐藏在智能手机中。

这一切都是为了尝试识别整个产品中重要的页面，并确保用户无论使用何种设备都能找到它们。这种优先级在设计过程的早期完成时总是好的，所以如果我们从移动设计开始，我们已经拥有需要包含的重要部分。

总结

现在用户的标准非常高。谷歌也是。事实上，静态网站根本不会再做。响应式设计是未来，新技术和优秀的例子每年都会出现。各地的设计师都在以新的眼光看待他们的产品，像俄罗斯方块爱好者一样专注于内容及其安排。他们是绝对正确的。

希望通过本介绍，您将更好地了解响应式设计中起作用的因素，以及这些因素如何相互关联。归根结底，我们都希望提供真正出色且一致的用户体验，这就是响应式设计带来的意义！