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 - 流体栅格」 的概念，核心思想是在较小的屏幕上降低栅格数量，将多余的栅格自动折行弹性布局。并且栅格列宽的尺寸也是根据不同的断点有些差异，从而更好的保证页面内容的展示效果。

▲Carbon 的栅格定义

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

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

#03

如何进行响应式布局

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

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

1）尺寸调整

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

2）布局重排

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

3）显示隐藏

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

4）组件替换

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

总结

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

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

—  END  —