B端设计基础 | 响应式布局

这篇来聊聊响应式布局。其实我之前对这块内容也不了解。最近通过学习，有了一些认知和思考，分享给大家。

#01

为什么会出现响应式布局

随着智能手机的兴起，人们面对的屏幕更加多样，既有PC大屏幕，也有手机和PAD这样的小屏幕。原有的PC端页面在手机设备上显示内容太多，浏览体验变差。于是产品就要考虑在不同终端的显示效果。

下图中左侧是站酷web 页面在移动端的展示效果，右侧是专门针对移动设备定制开发的网页「m.zcool.com.cn」，页面内容做了精简、布局也更加合理。这种就是自适应布局（Adaptive Design），

自适应布局就是根据不同屏幕分辨率设计多套布局方案。每套布局对应一个屏幕分辨率范围，从而保证界面在不同终端都能够提供良好的用户体验。

后来又出现了响应式布局（Responsive Design），希望通过一套页面布局满足所有设备的展示要求。

例如腾讯云官网，当改变浏览器窗口时，页面内容会调整布局和尺寸，从而实现不同分辨率设备下，都能提供良好的界面效果，满足用户在多终端的用户体验。

当然，响应式布局主要是用在一些简单的官网、展示类页面，展示的内容大致相同。例如阿里云、腾讯云官网内容相对较为固定，信息层级不复杂。另外响应式布局只有一套界面风格和交互，因此要求信息内容要相对简单。

对于复杂的业务系统或者网站，在不同终端内容差异较大，如果使用一套前端代码就行不通了，所以这类网站更多的采用自适应布局。可以针对不同的设备终端完成相应的设计风格，局限性会相对较小。例如西瓜视频、站酷等多图类的网站、手机端和PC端的内容布局相差很大。

如何区分自适应布局和响应式布局呢？

一个比较简单的方法就是看网址。自适应布局因为是多套布局和代码实现，所以不同终端的网站地址也不一样，而响应式布局则只有一个网址。

#02

响应式布局的几个关键点

1、断点（Break Point）

由于硬件设备是根本的显示载体，为了做好响应式设计，必须基于屏幕分辨率建立显示策略，这就是断点系统。一般情况断点系统都是分为手机、平板、PC三个维度。通过「媒体查询」技术实现不同「屏幕断点」条件下的不同 UI 表现，不同设计体系中断点值有所差异。

1）TDesign

在TDesign中，基于不同显示设备，共设置了 3 个断点。断点系统在兼顾平板端设备的同时，对 PC 端的断点进行细分，并考虑不同浏览器的特性差异，使栅格系统更好地适配主流的电脑显示器和浏览器。实际使用中，可依据业务需求选取其中的部分断点，也可以适当使用自定义断点。

断点

断点值

响应区间

槽宽

栅格策略

显示设备参考

sm

768px

768-991px

16px

内容区块根据不同的断点进行堆叠或缩放

平板

md

992px

992-1199px

超小尺寸电脑

lg

1200px

大于 1200px

大于断点值时，始终保持水平排列

小尺寸电脑

2）Elemnt

参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。对应的范围如下：

2、移动有限的原则

「移动优先」就是先开发出一个适合移动客户端的界面，然后在此基础上再去根据PC端的情况适配相应的样式。在响应式设计中优先为屏幕限制更大的移动设备设计，再扩展到大屏幕的 PC 端是一种更有效的设计方法，例如 Alta、Lightning、Fiori 均在设计体系中明确采用「移动优先」的设计方法。

3、栅格系统

上一篇文章我们已经讲过了栅格系统，在响应式布局中，栅格系统并不是一成不变的。Material、Carbon 提出了「Fluid Grid - 流体栅格」的概念移动端web页面横向看，核心思想是在较小的屏幕上降低栅格数量，将多余的栅格自动折行弹性布局。并且栅格列宽的尺寸也是根据不同的断点有些差异，从而更好的保证页面内容的展示效果。

▲Carbon 的栅格定义

对于B端后台管理产品，还是以PC为主，手机端的网页功能无法承载大量的信息展示和业务操作，一般只提供简单的监控、统计等功能。另外网页访问操作有一些局限性，所以主流的后台管理产品在移动端，更多是以App 或者小程序等形式出现。

例如腾讯云控制台虽然提供了移动端访问的功能，但是并没有做适配，没有相应的断点控制，主要是引导用户使用小程序访问控制台。阿里云则直接不提供手机浏览器访问控制台页面，需要通过App 才能登录后台管理页面。

#03

如何进行响应式布局

在布局时，内容区模块结构如何变化呢？

简单介绍几种常见的变化形式：尺寸调整、布局重排、显示隐藏、组件替换。

1）尺寸调整

随着屏幕宽度尺寸调整，内容的宽高也相应地发生变化，这是比较常见的方式。

2）布局重排

PC端和移动端屏幕比例刚好相反，PC多以宽屏为主，而手机端则以竖屏为主。所以响应式布局会通过布局重构来兼容两者。PC端以横向左右布局为主，而手机端则会调整为上下布局。

3）显示隐藏

手机端屏幕比较小，受限比较多。在PC端可以显示的内容，在手机端就只能隐藏了，可以把更多的空间留给核心内容。例如在移动端导航菜单大都采用收起的悬浮窗移动端web页面横向看，用户需要手动激活才能看到具体内容。

4）组件替换

移动端和PC端操作方式、屏幕尺寸不同，响应式布局中组件的也会随着屏幕尺寸的变化而变化。例如在PC端较为常见的横向Tab标签，在移动端会调整为可折叠的卡片组件。

总结

响应式布局主要是技术层面的解决方案，设计师要与开发人员做好沟通协作，基于技术要求给出相应的设计方案。首先要构建基础的设计原则。例如断点的范围，栅格系统等等。然后制定不同断点范围内的布局展示策略。

对于内容调整较大的页面需要给出相应的参考示例，保证前端人员在开发过程中可以有章可循，避免因为理解的差异，造成后续返工。

点击图片可报名