如何去做好响应式设计？

前言：

对于大多数网页设计师来说，你的成品需要在各种类型和尺寸的设备上进行外观和工作，这是显而易见的。创建多个设计来实现同一目标的日子已经一去不复返了。

这一切都归结为选择响应式或自适应设计模型，以实现任何规模的一致网站设计。

但是响应式和自适应之间有什么区别？它们真的只是一回事吗？让我们来看看并解释你需要知道的一切。喜欢记得关注UI范，每天更新，打造你的知识武器库！

1.与设备无关的设计的两种方法

就其核心而言，响应式和自适应技术在最终用户看来可能是一样的。创建设计和开发方法都是为了使网站在所有设备类型上都具有良好的外观和功能。

主要区别在你如何使用响应式或自适应技术创建网站。

2.响应式设计

响应式设计是任何使用网站的人的“家庭”术语。也许几乎令人惊讶的是，它并没有那么老。它是由Ethan Marcotte在 2010 年创造的：

现在比以往任何时候都更重要的是，我们正在设计旨在沿着不同体验的梯度观看的作品。响应式网页设计为我们提供了一条前进的道路，最终让我们能够“为事物的潮起潮落而设计”。

而这正是我们目前关于响应式网站的思想学派的起点。

响应式设计是一种技术，其中网站在任何给定尺寸下“响应”浏览器的尺寸，以便针对屏幕优化设计。理想情况下，用户应该从单个网站获得相同的体验，无论他们是在只有几百像素宽的移动设备上手持它还是在超宽屏幕显示器上观看它。

响应式网站使用了许多你可能熟悉的元素：媒体查询、灵活的网格和响应式图像。它可能是针对多种屏幕尺寸进行设计的最流行方法。（纯粹主义者会注意到响应式设计与设备本身无关，只与大小有关，而不是自适应，它在完美渲染的道路上检测设备类型等。）

根据交互设计基金会的说法，响应式设计更容易，实现的工作更少。这可能是它被更广泛使用的原因。

响应式设计师创建一个单一的设计，用于所有屏幕，通常会从分辨率的中间开始，并使用媒体查询来确定将对分辨率标度的低端和高端进行哪些调整。这往往会让用户感到高兴，因为熟悉的网页设计似乎保证可以转换到任何设备的屏幕上。均匀性和无缝性是提供良好用户体验的关键考虑因素。

此外，由于涉及开发时间，响应式设计通常是大型网站的选择。响应式设计植根于网格系统，响应式测量（考虑百分比或最小值和最大值）可帮助设计以不同的尺寸扩展、收缩和堆叠。

这种设计技术是新开发的规范。

3.响应式设计的优点

• 无论设备或浏览器如何，该设计都适用于任何视口尺寸。

• 响应式设计对搜索引擎友好（谷歌甚至推荐它）。

• 允许设计中的很多精确度，以便设计师可以调整任何或每一个细节。

• 高度移动友好的设计选项。

• 与你可能用于网站项目的大量主题、网站构建器和工具兼容的常见设计实践。

• 该设计将具有统一和无缝的外观，这将提升整体用户体验。

3.响应式设计的缺点

• 确保响应式元素在不同尺寸（尤其是较小尺寸）下仍保持可读性和可访问性非常重要。
• 通常需要比其他网站更多的编码，这可能需要时间或导致重量。重要的是要注意并注意这里。
• 你无法控制所有设备尺寸，最终可能会设计出与旧尺寸或更模糊尺寸不符的设计。
• 元素可能会在你身上四处移动，并不时以奇怪的位置结束，甚至由于核心内容管理系统或网站框架更新，因此重要的是要随时了解变化。

4.适应性设计

自适应设计几乎与响应式设计一样古老。该技术于 2011 年首次使用，涉及针对特定设备尺寸和类型进行设计，以获得更加个性化的体验。

这是来自MDN Web Docs 档案的一个很好的解释：“自适应设计更像是渐进增强的现代定义。自适应设计不是一种灵活的设计，而是检测设备和其他特征，然后根据一组预定义的视口大小和其他特征提供适当的特征和布局。”

设计植根于六种固定变化（宽度）：

• 320 像素

• 480 像素

• 760 像素

• 960 像素

• 1,200 像素

• 1,600 像素

自适应设计最常见的用途是将旧设计转换为更适合移动设备的设计。这并不是说它不会发生在新的开发中。

5.自适应设计的优点

• 移动设备会告诉设计它们是什么，以便设计非常适合该设备和浏览器类型。
• 自适应设计在事物的设计方面提供了几乎精确的控制。
• 智能广告是一种可能性，允许来自智能设备的链接。
• 自适应设计在速度测试中的得分往往高于响应式设计。
• 该设计可以使用更多的个性化功能，连接到智能设备的使用选项和适配。
• 对于需要刷新的小型网站来说是不错的选择，因为你只需“设计”较小的尺寸。

6.自适应设计的缺点

• 由于配置错误，您在设计时可能会遇到一些不太常见的设备（例如平板电脑）的问题。

• 自适应设计可能是劳动密集型的，需要更多的开发时间和成本。

• 由于内容重复，搜索引擎在使用自适应网站时会遇到更多困难。

• 有一个偷偷摸摸的现实，你设计同一个网站六次。

7.结论

使用响应式或自适应设计没有对错之分。它植根于你的目标以及你希望通过设计实现的目标。选择适合网站在内容、搜索、用户体验、时间和预算方面应该完成的技术。以上就我总结一些经验，当然还有更多关于响应式技巧，请持续关注UI范，每天更新，打造你的知识武器库！