响应式设计：最佳实践和注意事项

响应式网站是适应所有屏幕尺寸和分辨率的网站，不仅适用于台式机，还适用于移动设备、平板电脑，有时甚至是电视。

根据 Statista 的数据，2017 年移动流量占全球所有流量的 52.64%，这意味着一个没有针对移动设备进行良好优化的网站正在损失大约一半的流量。 到 2018 年底，预计移动设备的全球流量份额将增长到 79%，这是一个惊人的增长。

没有移动网站的企业正以惊人的速度落后，因为十分之八的访问者将停止使用在他们的设备上显示效果不佳的网站。 用户点击返回按钮并尝试竞争对手的业务太容易了，谷歌甚至将那些没有响应的网站在搜索中排名较低。

您可以在此处参加 Google 的移动设备友好测试。

这是否意味着移动设备比桌面设备更重要？ 没有。83% 的移动用户表示，如果他们愿意，他们应该能够在桌面上继续体验。

看看这个针对移动设备优化的 eBay 版本与没有针对移动设备优化的情况。 你甚至会考虑非优化版本吗？

为了设计能够在当今互联网上竞争的网站，网页设计师必须是响应式网页设计(RWD) 方面的专家。 他们应该从哪里开始？

响应式网页设计的移动优先方法

移动优先网页设计意味着首先设计移动网站，然后开发桌面版本。 这种方法运作良好的原因有很多。

1. 移动网站有更多的可用性问题（这主要是由于缺乏屏幕空间），因此主要关注移动设计更实用且更有效。
2. 扩大移动版本比缩小桌面版本更容易（同样，因为移动网站空间不足）。
3. 移动优先的网页设计有助于重新评估视觉和功能上的必要性。

将网站设计为移动优先响应式网站迫使设计师提出许多重要问题，因为可使用的屏幕空间较少。 以下是需要问的问题：

• 这个特性/功能真的有必要吗？
• 我们如何首先为移动设备设计一些极简主义的东西，然后再在桌面上很好地扩展？
• 这种视觉效果值得花时间在移动设备上加载吗？
• 主要目标是什么，哪些视觉元素可以帮助用户实现它？

稍后我们将看一些响应式网页设计示例。 现在，让我们谈谈今天哪些设备、屏幕尺寸和网络浏览器是相关的。

响应式网页设计与哪些屏幕分辨率相关？

以下是全球移动设备、平板电脑和桌面用户最常见的屏幕分辨率。 如您所见，分辨率范围很广，因此目前无论是移动设备、平板电脑还是台式机都没有占据市场份额——这告诉我们，设计师在考虑响应式网页设计时应该考虑所有这些。

• 360x640（小型移动）：22.64%
• 1366x768（普通笔记本电脑）：11.98%
• 1920x1080（大桌面）：7.35%
• 375x667（平均移动）：5%
• 1440x900（平均桌面）：3.17%
• 720x1280（大型移动）：2.74%

就像设备故障一样，我们应该按位置对数据进行细分，以匹配目标受众的用户人口统计数据（或预期的用户人口统计数据）。 它也值得迎合越来越受欢迎的分辨率，因为虽然某些屏幕尺寸目前并不常见，但它们可能会在未来出现。 这将帮助响应式设计师打造面向未来的用户体验，即使市场份额发生变化也能正常工作。

例如，360x640 分辨率（主要对应于使用 Android 的三星设备）在去年增长了 5.43%。 在开始网站设计之前，设计师可以使用这些有价值的见解来决定关键的响应断点。

当今流行哪些 Web 浏览器？

响应式网页设计旨在在任何设备上提供无缝体验，并且由于不同的网络浏览器以不同的方式呈现网页，因此必须对网站进行测试以确保它们与各种移动和桌面网络浏览器兼容。

尽管使网站扩展到正确的响应断点主要是 Web 开发人员的责任，但正是 Web 设计师决定了响应式网站如何适应各种屏幕尺寸以创建最佳用户体验。

以下是移动和桌面网络浏览器市场份额的全球细分。

• 铬：55.04%
• 野生动物园：14.86%
• UC 浏览器：8.69%
• 火狐：5.72%
• 歌剧：4.03%
• 互联网浏览器：3.35%

响应式设计不仅仅是“让一切都适合”——它还涉及适应设备硬件和网络浏览器的功能以及设备分辨率。 这方面的一个例子可能是，虽然 Google Chrome 支持 CSS 属性overscroll-behavior:它定义了当用户向视口边缘滚动过度时会发生什么），但其他任何网络浏览器都不支持它。

响应式设计最佳实践

消除摩擦

如前所述，响应式网页设计的移动优先方法将帮助设计师评估用户实现其主要目标的真正必要性。

随着我们构建到平板电脑版本（以及后来的桌面版本），我们可以开始考虑次要目标以及使这些用户目标可以实现的微交互、用户流程和 CTA（号召性用语）。 更重要的是，我们首先关注用户的主要目标，并消除任何对主要目标和次要目标都没有帮助的不必要摩擦。

主要目标可能是购买产品，而次要目标可能是订阅时事通讯（这可能会导致以后购买）。

这是消除摩擦的一个很好的例子：由于移动用户界面通常更难导航，最好切换到移动电子商务商店的单页结账，并且只为桌面电子商务商店启用多步结账。

拇指设计

从某种意义上说，响应式网页设计很棘手，用户将通过点击与桌面网站进行交互，但通过点击和滑动与移动版本进行交互。 物理上也存在差异。 桌面用户通常将他们的计算机放在表面上，而移动用户将他们的设备握在手中。 这些差异显着改变了移动 UI 设计师设计点击目标和用户与之交互的其他重要 UI 元素的方式。

让我们看一些例子：

• 人们通常希望主桌面导航位于顶部。 但是，在移动设备上，它应该位于底部。 拇指不能舒适地到达顶部。
• 其他交互元素也应该易于触及。 这意味着将它们保持在屏幕的中心，因为拇指更难以触及设备屏幕的侧面和角落。
• 为了便于点击，重要链接和 CTA 的高度应至少为 44 像素（较小的点击目标不利于可用性）。

推荐阅读：移动可用性基本指南。

利用移动设备的原生硬件

移动硬件（如设备摄像头或 GPS 服务）并不是专门为原生应用保留的，而且如前所述，响应式网页设计不仅仅是“让一切都适合”。 它还与适应设备的功能有关。 就移动网页设计而言，由于移动设备具有易于使用的摄像头，因此只要网站利用可用的本机硬件，一些微交互（例如数据输入）实际上在较小的屏幕上更容易。

让我们看一些例子：

• 信用卡/充值卡扫描（因为表格在移动设备上通常很棘手）
• 在社交媒体上分享照片，因为媒体已经在您的设备上
• 双重身份验证（因为您已经在移动设备上）
• 快速检查股票/分析（因为移动应用程序简化了信息）
• 使用语音执行网络搜索（因为免提比打字更容易）

默认情况下使布局流畅/自适应

并非每个用户都会最大化他们的桌面浏览器。 这意味着，虽然设计人员需要考虑用户当前使用的设备的响应断点，但他们还需要考虑这些断点之间发生的情况。

响应式断点应该用于将布局和内容“重排”到新设备，但考虑到两者之间的所有尺寸（以防万一），布局需要以其他方式流动（即，它们自然地适应/拉伸为浏览器调整大小）。

在设计流体/自适应布局时，请牢记以下提示：

• 百分比单位将允许元素流动。
• 设置最小和最大宽度可以启用“但不要比这个更小/更大”的场景。
• SVG 图像格式可以在不损失质量的情况下放大和缩小，并且与分辨率无关（与 JPG 和 PNG 不同，它们不是）。

不要忘记景观方向

我们之前谈到了特定的响应式断点，但我们还需要考虑这些移动视口也可以横向显示。 虽然实现流畅的布局在技术上会使内容自适应，但丢失相当大的纵向视口可能会阻碍可用性和可访问性。

导航通常是安全的（实际上有时它们更好，因为用户通常用两个拇指导航横向），但是滚动变得更加困难，这不是最佳的，因为用户需要在横向上滚动更多。

设计师可能还想考虑设计景观断点； 例如，在移动设备上垂直堆叠的平铺元素可以显示为带有左右导航按钮的滑块，这意味着用户不必滚动。

请记住，排版也可以响应

尽管 UX 设计师通常使用像素单位来设计网站，但在实际的 Web 上，一个点并不一定等于一个像素，因为不同的设备具有不同的分辨率。 例如，iPhone X 有 458 PPI（每英寸像素），因此在像素尺寸越来越小的地方，我们能够在相同的物理空间中实现更清晰的图形（Apple 称之为“Retina”技术，Android 称之为“hDPI”）。

这意味着例如 16 像素的字体大小在某些设备上看起来会更大或更小，具体取决于其分辨率。 Web 开发人员通常会使用 em 单位来定义字体大小，这是一种响应式单位，其中 1em 等于 1 磅。

Zeplin、Sympli、Marvel 和 InVision 等设计移交工具可以帮助设计人员与开发人员就共同责任的事项进行协作。 虽然设计师执行设计，开发人员执行代码，但作为一个整体，产品设计工作流程是一个团队努力，需要可靠的沟通。

响应式设计性能优化技巧和最佳实践

响应式网页设计不仅关乎它的外观，还关乎它的行为和感觉。 调整网站以使其在预期设备上加载更快同样重要。

延迟加载非重要图像和视频

图片和视频占网站总下载量的很大一部分，但您不需要一次全部加载。 有两种情况会延迟媒体的渲染：当用户在首屏下方滚动时可以加载首屏内容，并且只有在布局和内容下载后才能下载阻止渲染的媒体。 这种做法称为延迟加载，其中延迟加载重的、不重要的元素以提高页面性能。

条件加载

一些网站元素不适合移动用户，或者至少不值得额外的认知负担。 我们希望我们的移动网站简单，因此在某些情况下隐藏元素是有意义的。 话虽如此，我们必须确保加载这些元素时不会浪费浏览器资源和带宽，即使它们是隐藏的； 因此，最佳做法是仅在某些条件下包含这些元素。

再一次，开发人员可以通过代码实现这一点； 但是，设计人员可以通过传达某些元素应该存在和不应该存在的时间和地点的条件来提高页面性能。

响应式图像

如前所述，某些设备每英寸显示更多像素，如果未以正确的分辨率导出图像，可能会导致图像变得模糊。 根据设备的分辨率，有些需要两倍 (@2x)、三倍 (@3x) 甚至四倍 (@4x) 大小的图像。 Web 浏览器现在支持<picture>元素，该元素会根据设备选择正确的图像分辨率。

设计响应式网站的设计师可以通过确保以当今设备上使用的所有分辨率导出图像来为正确的设备定制图像（如果您不确定，请询问您的开发人员——在响应式网页设计方面，沟通是关键）。

结论

线框图可以帮助在设计过程的早期消除折痕，这在采用移动优先方法进行响应式网页设计时效果很好。 也许有一个需要额外注意的响应式断点，或者也许有一个概念在移动响应方面并不有效。 最好尽早发现道路上的颠簸（即在添加视觉美感之前）。

Adobe XD、Marvel 和 InVision 等现代设计工具使团队能够在真实设备上测试原型，在上下文中讨论反馈，并且通常作为一个团队进行协作，直到布局适用于所有场景。

采用精益 UX 工作流程，其中响应式设计由内部测试和反馈驱动，将确保用户体验在首次呈现给真实用户之前在所有平台和屏幕分辨率上无缝运行。

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验