UI 设计｜开启新时代的响应式网页设计-技术圈

▲点击"三分设"关注，回复"社群"加入我们

欢迎来到专业设计师学习交流社区

三分设｜连接知识，帮助全球 1 亿设计师成长

转自：百度MEUX

编辑：章欣怡

共 3621 字 8 图预计阅读 10 分钟

如果你和我一样一直在网页设计行业，你知道一件事即将发生，唯一不变的就是变化。大约每 10 年，我们做事的方式就会发生根本性的转变，这对于超越我们之前所做的事情至关重要……我们即将再次跨入下一个阶段。

01 它是如何开始的 — 固定屏幕

在千禧年来临之前，我们首先开始在单一视图屏幕中进行 UI 设计，这类屏幕在当时最流行的尺寸是 640x480。大多数时候，我们甚至没有考虑让屏幕滚动，而是在特定区域或文本局部区块中设置了内部滚动条。毋庸置疑，当时的大部分网页也是用 Flash 或 HTML 创建的，并带有用于布局的表格。那是在智能手机出现之前，随着事物的发展，我们经历了第一个向 “响应式” 设计的根本转变。我们已经走了很长一段路，CSS 已得到长足的发展，“响应式” 网页设计从 2010 年开始才真正获得了专有工具。

图表来源: https://www.webdesignmuseum.org/web-design-history

02 它现在怎么样 — 响应式设计

随着 CSS3 的发布，我们获得了对 “媒体查询” （Media Queries）的访问权限（译者注：随着移动互联网的兴起,我们需要适配多种移动端设备,这就需要用到 Media Queries，即 “媒体查询”），此后不久，Ethan Marcotte 在 2009 年底创造了 “响应式设计” 一词。十多年来，我们一直使用 “响应式网页设计” (RWD) 创建网页布局，作为一种网页设计方法，仅需基于一种屏幕尺寸进行设计，“响应式” 使我们的设计能够适配各种设备和屏幕尺寸。

在早期，当移动电话还不兼容媒体查询或 JavaScript 时，“移动优先” 和 ”渐进式增强” 的概念就成为了非常流行的方法，当时有很多 CSS 完全不受支持。

用我们今天的话来说响应式设计，我们认为页面的布局要适配整个浏览器、屏幕大小和那些需要投射到整个布局上的限制。当需要设计从桌面端调整为移动设备屏幕所需的尺寸时，我们使用 “媒体查询” 来更改整个页面布局。

03 它的未来是什么 — 组件驱动

很快，使用这种 “响应式” 设计方法可能会被认为与使用表格进行页面布局一样过时—就像我们在 90 年代所做的那样。

我们通过基于 viewport （视口）的 “媒体查询” 获得了许多强大的工具，但我们也缺乏很多适配的可能性，因为 “媒体查询” 是一个适用于整个页面的通用解决方案，并且对每个用户来说都一样。我们缺乏响应 “用户需求” 的能力，也缺乏将 “响应式” 样式注入 “组件” 本身的能力。

当我们谈到组件时，这里指的是页面上的 “元素”，这些元素可以由其它 “元素” 的集合组成。例如卡片、横划卡或推荐模块之类的 UI 内容，每个 “块” 都由各种更小的 “构建块” 组成。这些组件拼凑在一起构成我们的网页。我们可以使用 global viewport information （全局视口信息）来设置这些组件，但它们仍然无法拥有自己的风格。当我们的设计系统是基于 “组件” 的而不是基于 “页面” 的时，这使得它变得更加困难。

好消息是这个生态系统正在发生变化，而且它正在迅速变化，这需要我们进行一些思维转变：考虑如何设计和定义组件样式以及它们如何适应周围环境。

CSS 正在不断发展，“响应式” 网页设计的新时代即将到来。从目前的情况来看，自从我们第一次引入 “响应式网页设计” (RWD) 以来，仅仅 10 多年的时间，这个生态系统已经准备好迎接 CSS 发生一些相当大的改变。

让我们深入研究一下可以期待哪些类型的变化，这会如何改变我们的设计方法，以及我们如何考虑界面设计。

04 用户能够设置基于个人偏好的 “媒体查询”

简单来说，我们可以期待新的基于偏好的 “媒体查询” 来帮助我们更好地 “响应” 用户。它们将使我们能够根据用户自己的特定偏好或需求来设定网页样式。这将使我们能够根据用户的体验偏好来调整用户体验。

这绝不是一个完整的列表，但能给你一些想法，这些基于偏好的 “媒体查询” 可能包括：

这些将帮助我们构建更具活力和个性化的网页体验，专门满足我们用户的专属需求，尤其是那些希望网站易于访问的用户。更进一步说，这些基于偏好的“媒体查询“尊重任何用户已经在操作系统设置的偏好。举个例子，当用户的操作系统偏好设定为 “减少动效” 时，他们很可能不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。我们应先尊重他们的偏好，并为其他人提供 “动效增强” 的体验。

另一个流行的媒体查询是 @prefers-color-scheme （配色偏好设定），它允许我们根据用户的偏好和操作系统中的设置将我们的设计更改为 “亮色模式” 或 “暗色模式”。这不依赖于用户需要手动来更改 “暗色模式”，它会自动发生。

05 “容器查询” 为你的设计系统注入新的生命力

CSS 中最令人兴奋的新兴领域之一是 “容器查询” （container queries），通常也称为 “元素查询”。从基于 “页面” 的 “响应式” 设计到基于 “容器” 的 “响应式” 设计的转变对发展 “设计系统” 的作用价值不容低估，尽管今天使用它并不安全，但重要的是要了解其发展方向。

简而言之，“容器查询” 将允许我们基于 “父级容器” 而不是整个页面来设置规则。这意味着任何组件都更加独立，与现代设计系统保持一致，真正成为 “即插即用” 模块，可以转移到任何页面或布局，而且无需根据新环境重新考虑所有内容。

“容器查询” 为我们如何规划、设计和构建特定组件提供了一种更加动态的方法，因为组件本身拥有它的响应信息。

甚至 Ethan Marcotte 自己也表达了为什么 “容器查询” 如此重要，我们应该研究一下。

06 考虑各种形态因素

由于各种 “形态因素” （form factors）的变化和扩展，例如新的屏幕类型，可折叠屏，我们需要 “媒体查询” 来考虑这些场景。在这里提到的所有内容中，请记住，这是最具实验性的，并且只是一项正在进行的工作，仍在尝试解决我们可能遇到的任何复杂问题，同时考虑未来 “形体因素” 可能会如何发展。

在可折叠屏场景中，原型中有一些 “媒体查询” 可以让你定位屏幕跨度以及我们如何让内容根据新环境进行适配。例如，你可以在一个屏幕上放置一个收起的侧边栏（或菜单），并允许内容在另一个屏幕上展开并随页面滚动。

07 为什么我们需要它？

我知道你在想什么，我们已经从事网页设计并使用 “响应式” 来进行网页设计 10 余年了。我们对其相当满意，那么为什么要改变呢？如果我们真的以终局视角来看响应式设计，那么它就是关于个人用户的用户体验设计。我们正朝着一个与每一位个体用户高度相关的时代迈进。我们的网页体验应该去适应用户的需求偏好。随着设计系统的发展以及我们如何创建更便携的网页，诸如 “容器查询” 之类的工具将变得非常有意义。

配图：CSS 将基于各个层级来确定用户的最佳体验

考虑到这一点，这意味着我们现在可以使用基于页面的媒体查（包括跨越屏幕的细微差别）来设计宏观布局；使用容器查询的组件设计微观布局；使用基于用户偏好的媒体查询，根据用户独特的偏好和需求定制用户体验。

对于新的响应式设计，有许多新概念正在被原型化和概念化-请看下面的延伸阅读。所有这些协同工作的方式需要我们从根本上转变我们对设计和用户独特体验的看法。我们需要更加适应这样一个事实：即我们的设计不是静态的，不仅在布局上，还有在用户可获得的体验中，我们需要学会在这种模糊性中做出计划。网页和设计的未来变得越来越复杂，我们需要适应和挑战自己，理解 “新响应式” 体验的意义。

进一步了解

• New media queries you need to know (LogRocket)

• Container Units should be pretty handy (CSS-Tricks)

• It’s time we say goodbye to pixel units

• Say Hello To CSS Container Queries

• Container Queries: a Quick Start Guide

— The end —

📚 原创文章精选📚