撰稿编者按：积极响应式结构设计正式成为非主流结构设计态势，为何大部份的web端都须要积极响应式结构设计，其目地是什么？译者从其前述视角起程，撷取积极响应式结构设计路子及方式，供商品和结构设计老师参照。

积极响应式结构设计基本概念自2010年明确提出年来，历经二十十多年的发展与普及化，在我省已经有超30%的市场占有率，且正在以每月5%的速率，渐渐替代现代动态产业布局页面。历经连续不断近两个月的天数，我把自己在十多年商品结构设计中累积的实战经验，重新整理撷取如下表所示。责任撰稿将从前述应用领域视角，如是说积极响应式结构设计路子及方式，供商品和结构雕塑家老师参照。

一、通则

呢大部份的web端商品都须要积极响应式结构设计呢？且看预测。

1.1 积极响应式结构设计的象征意义

积极响应式结构设计或许会正式成为非主流态势，原因在于从各自身利益各别视角，皆具有很大的竞争优势。

从公司视角：一场合作开发成形，节约合作开发和网络管理生产成本，同时能提高国际品牌连续性。

从商品视角：在不同的采用者电子设备上，维持连续性的采用新体验，输入平衡的商品商业价值。

从采用者视角：不管制电子设备，不管制采用天数和条件，采用更为快捷。

1.2 页面产业布局结构设计的进行分类

依照页面对解析度的网络连接某种程度，把产业布局结构设计界定为四类。

A. 一般来说产业布局结构设计

同时实现方式：文本长度一般来说，产业布局不根据电子设备解析度发生改变。

结构设计图：出两套结构设计图，以画素做基层单位。

B. 自适应结构设计

同时实现方式：前端写几套代码对应不同类型电子设备（如pc端、平板、手机），通过检测视口解析度，来判断当前访问的是哪种电子设备，从而显示对应的代码。

结构设计图：先为每类电子设备分别出两套结构设计，然后在一类电子设备的解析度范围内指定元素的兼容方式；同一类电子设备的解析度差异较小，因此兼容方式相对简单。

C. 积极响应式结构设计

同时实现方式：前端只写两套代码，通过媒体查询，指定不同解析度下页面如何显示。

结构设计图：通常须要确定一套主结构设计图，然后针对不同解析度指定产业布局及元素的兼容方式。

注意：

①B和C中，自适应和积极响应式只是归纳叫法，后文中提到的前端产业布局方式并不一一对应。做一个多解析度网络连接商品时，前端产业布局通常须要多种方式结合，比如最常见的自适应+流式产业布局的结合。

②很多撷取提到，积极响应式结构设计是指“两套结构设计图，网络连接大部份电子设备”，这种说法并不完全正确。积极响应式结构设计的核心是确保采用者新体验一致，当商品功能和交互较为复杂时，结构雕塑家可能须要输入多套结构设计图。

1.3 各种产业布局的特点及通则

通过以上预测，显然不是大部份的web端商品都须要积极响应式结构设计。应根据商品性质、采用者电子设备、商品采用场景、公司资源（人力配置、天数预算、资金预算）等因素，合理选择商品结构设计图。

二、屏幕断点

根据商品结构设计须要，人为地把屏幕解析度划分出多个临界点，这一系列临界点被称为屏幕断点。

2.1 解析度占比统计

下图为百度统计的web端解析度占比，可以看出占比较多的解析度有：1920、1536、1366、1440、1600等。

下图为百度统计的移动端解析度占比，可以看出占比较多的解析度有：320、414、375、320等。

2.2 各大平台制定的屏幕断点

微软的屏幕断点：

微软结构设计文档中，划分的颗粒度较粗，仅将解析度分为小、中、大三段。

Bootstrap的积极响应式断点：

极小电子设备portrait phones（576px，默认）、小型电子设备landscape phones（≥576px）、中型电子设备tablets（≥768px）、大型电子设备desktops（≥992px）、超大电子设备large desktops（≥200px）。

Ant design 的屏幕断点：

屏幕断点划分为320、576、768、992、1200。

2.3 断点的应用领域示例

以下这段代码，通过媒体查询的方式，指定了不同解析度下字体大小的变化。这段代码对应的产业布局方案中，屏幕断点是1024，1100，1280，1366，1440，1680，1920。

通过以上可以看出，屏幕断点并不是一般来说的。在商品结构设计中，可参照成熟结构设计规范中的断点，也可根据前述须要定义自己的屏幕断点。一般可通过采用者调研和市场调研，确定目标采用者所采用的主要设备，以此来定义屏幕断点。

三、自适应结构设计的同时实现方式

从同时实现技术视角，弹性产业布局、自适应产业布局、流式产业布局、积极响应式产业布局、网格产业布局，为多端网络连接提供了可能性。这部分前端合作开发的知识，感兴趣的同行可自行了解。从技术同时实现的核心，可以总结出以下6种结构设计手法。

3.1 调整大小

3.2 重新定位

3.3 重新排列

3.4 显示/隐藏

例如在移动端，把一部分功能隐藏起来，并通过点击以浮层等方式显示。

3.5 替换

例如在移动端，把导航菜单替换为汉堡菜单，把列表替换为卡片等。

3.6 发生改变架构

例如在电脑端为左右产业布局，在移动端发生改变为多级页面。

其中，前三种多用于屏幕断点内积极响应，后三种多用于屏幕断点间积极响应。

四、结构设计图破冰

4.1 扩展策略

在结构设计方案实施过程中，通常先确定基准解析度，作为结构设计尺寸输入结构设计图，再扩展到其他解析度。解析度扩展时遵循的策略，一般有以下3种。

优雅降级：优先考虑PC端，其核心是追求商品完美表达，再降级网络连接到管制更大的移动端电子设备；

渐进增强：优先考虑移动端，其核心是保证主要功能的完善性，再做增强扩展，目前业界认可度较高；

采用者电子设备优先：这是我本人在工作中总结出的一种方式，针对自己的商品，如果可确定目标采用者采用的电子设备中，某解析度占比较多，我们可以以此为基准解析度进行结构设计，再向其他解析度扩展。

4.2 三种典型页面框架

上下产业布局：

顶部为导航，导航以下为文本区。在C端商品或文本型网站中较为常见。

T型产业布局：

一般顶部为最高层级菜单或跳转链接，左侧为二级导航，同时也是核心业务相关的导航。一般用于B端后台类商品、工具类商品、或架构较为复杂的其他商品。

左右产业布局：

一般应用领域于商品框架较为扁平，但导航层级较多的情况。可与以上两种产业布局互相转换。

4.3 T型框架的积极响应式结构设计过程

T型产业布局基本包含了其他两种产业布局的属性，故以T型产业布局为例，详细如是说积极响应式结构设计破冰实操方式。

A. 框架层积极响应

与结构设计解析度对比，其他断点的扩展分别采用了以下方式：

B. 文本区积极响应

①栅格产业布局：产业布局历经严格计算，适合大部分B端后台类页面。

可以看出在栅格积极响应式中，栅格的长度、列数，以及每块元素所占的列数，都会根据解析度的变化而变化；通过媒体查询的方式，定义每个断点对应的列数和元素所占的列数；其核心依然是上面提到的6种方式。

②流式产业布局：文本区是卡片式流，如图片、视频等。

这类产业布局中，卡片长度用百分比表示，并设定最大最小尺寸，临界长度后发生改变个数；外边距长度（图中蓝色部分）、内边距长度（图中橙色部分）根据结构设计表达须要，可以发生改变也可以一般来说。瀑布流等不规则产业布局，涉及到定位问题，但基本结构设计理念一致。

③针对断点单独结构设计：应用领域于对视觉表达要求极高，或产业布局不规律的页面；本质同自适应产业布局原理。

4.4 电子设备差异化交互积极响应

总结

在结构设计图破冰过程中，首先调研采用者采用的电子设备，据此制定出屏幕断点；筛选出一个典型的解析度，在该解析度下输入结构设计图；然后确定如何向其他断点扩展，最后形成一整套积极响应式结构设计图。

责任撰稿由 @周沫 原创发布于人人都是商品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。