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

语言: CN / TW / HK

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

#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  —