撰稿编者按：利用积极响应式网页结构设计建立网页产业布局，结构设计将能更快地网络连接不同的萤幕和体积。那么，随著结构设计金融行业的不断更替，未来积极响应式网页结构设计又可能会怎么产业发展？第一集该文里，译者就“积极响应式网页结构设计”的产业发展问题做了答疑，一起来看一下。

如果你和我一样始终在网页结构设计金融行业，你知道两件事将要出现，惟一维持不变的就是变化。约每10年，他们行事的方式就会出现实质性的变革，这对于胜过他们以后所做的事情非常重要……他们将要再次迈入下一个阶段。

一、它是如何已经开始的——一般来说萤幕

在创世纪到来以后，他们首先已经开始在单个快照萤幕中展开UI结构设计，这类萤幕在彼时最盛行的体积是640×480。绝大多数时候，他们甚至没有考虑让萤幕慢速，而是在某一区域或文档局部性计算机程序中增设了内部快捷方式。

不可否认，彼时的大部分网页也是用Flash或HTML建立的，并暗含用于产业布局的表单。那是在智能机出现以后，随著表达方式的产业发展，他们经历了第二个向“积极响应式”结构设计的根本变革。我们已经走了极短一段距离，CSS已得到长足进步的产业发展，“积极响应式”网页结构设计从2010年已经开始才真正赢得了私有辅助工具。

二、它现在好不好——积极响应式结构设计

随著CSS3的发布，他们赢得了对“新闻媒体查阅”（Media Queries）的出访职权（翻译者注：随著终端互联网的蓬勃发展，他们须要网络连接多种终端端电子设备，这就须要加进Media Queries，即“新闻媒体查阅”），其后没多久，Ethan Marcotte在2009年底缔造了“积极响应式结构设计”referring。

二十多年来，他们始终使用“积极响应式网页结构设计”（RWD）建立网页产业布局，作为一类网页结构设计方式，仅需如前所述一类萤幕体积展开结构设计，“积极响应式”使他们的结构设计能网络连接各种电子设备和萤幕体积。

在晚期，当终端电话还不相容新闻媒体查阅或JavaScript时，“终端优先选择”和”渐进进一步增强”的概念就成为了非常盛行的方式，彼时有很多CSS完全不受支持。

用他们今天的话来说积极响应式结构设计，他们认为网页的产业布局要网络连接整座应用程序、萤幕大小和那些须要延展到整座产业布局上的限制。当须要结构设计从桌面端调整为终端电子设备萤幕所需的体积时，他们使用“新闻媒体查阅”来更改整座网页产业布局。

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

很快，使用这种“积极响应式”结构设计方式可能会被认为与使用表单展开网页产业布局一样过时——就像他们在90年代所做的那样。

他们通过如前所述viewport（视口）的“新闻媒体查阅”赢得了许多强大的辅助工具，但他们也缺乏很多网络连接的可能性，因为“新闻媒体查阅”是一个适用于整座网页的通用解决方案，并且对每个用户来说都一样。他们缺乏积极响应“用户需求”的能力，也缺乏将“积极响应式”样式注入“组件”本身的能力。

当他们谈到组件时，这里指的是网页上的“元素”，这些元素可以由其它“元素”的集合组成。

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

好消息是这个生态系统正在出现变化，而且它正在迅速变化，这须要他们展开一些思维变革：考虑如何结构设计和定义组件样式以及它们如何适应周围环境。

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

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

四、用户能增设如前所述个人偏好的“新闻媒体查阅”

简单来说，他们可以期待新的如前所述偏好的“新闻媒体查阅”来帮助他们更快地“积极响应”用户。它们将使他们能根据用户自己的某一偏好或需求来设定网页样式。这将使他们能根据用户的体验偏好来调整用户体验。

这绝不是一个完整的列表，但能给你一些想法，这些如前所述偏好的“新闻媒体查阅”可能包括：

这些将帮助他们构建更具活力和个性化的网页体验，专门满足他们用户的专属需求，尤其是那些希望网站易于出访的用户。

更进一步说，这些如前所述偏好的“新闻媒体查阅“尊重任何用户已经在操作系统增设的偏好。

举个例子，当用户的操作系统偏好设定为“减少动效”时，他们很可能不喜欢你网页上的超级华丽的介绍、加载或飞入的动画动效。他们应先尊重他们的偏好，并为其他人提供“动效进一步增强”的体验。

另一个盛行的新闻媒体查阅是@prefers-color-scheme（配色偏好设定），它允许他们根据用户的偏好和操作系统中的增设将他们的结构设计更改为“亮色模式”或“暗色模式”。这不依赖于用户须要手动来更改“暗色模式”，它会自动出现。

五、“容器查阅”为你的结构设计系统注入新的生命力

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

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

“容器查阅”为他们如何规划、结构设计和构建某一组件提供了一类更加动态的方式，因为组件本身拥有它的积极响应信息。

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

六、考虑各种形态因素

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

在可折叠屏场景中，原型中有一些“新闻媒体查阅”可以让你定位萤幕跨度以及他们如何让内容根据新环境展开网络连接。例如，你可以在一个萤幕上放置一个收起的侧边栏（或菜单），并允许内容在另一个萤幕上展开并随网页慢速。

七、为什么他们须要它？

我知道你在想什么，他们已经从事网页结构设计并使用“积极响应式”来展开网页结构设计10余年了。他们对其相当满意，那么为什么要改变呢？

如果他们真的以终局视角来看积极响应式结构设计，那么它就是关于个人用户的用户体验结构设计。他们正朝着一个与每一位个体用户高度相关的时代迈进。他们的网页体验应该去适应用户的需求偏好。随著结构设计系统的产业发展以及我们如何建立更便携的网页，诸如“容器查阅”之类的辅助工具将变得非常有意义。

配图：CSS 将如前所述各个层级来确定用户的最佳体验

考虑到这一点，这意味着他们现在可以使用如前所述网页的新闻媒体查（包括跨越萤幕的细微差别）来设计宏观产业布局；使用容器查阅的组件结构设计微观产业布局；使用如前所述用户偏好的新闻媒体查阅，根据用户独特的偏好和需求定制用户体验。

对于新的积极响应式结构设计，有许多新概念正在被原型化和概念化——请看下面的延伸阅读。

所有这些协同工作的方式须要他们从根本上变革他们对结构设计和用户独特体验的看法。他们须要更加适应这样一个事实：即他们的结构设计不是静态的，不仅在产业布局上，还有在用户可赢得的体验中，他们须要学会在这种模糊性中做出计划。网页和结构设计的未来变得越来越复杂，他们须要适应和挑战自己，理解“新积极响应式”体验的意义。

进一步了解

本文原译者：FrancoisBrill

译者：百度MEUX，百度终端生态用户体验结构设计中心，负责百度终端生态体系的用户/商业产品的全链路体验结构设计

本文由 @百度MEUX 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自Unsplash，如前所述CC0协议