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 —
- 【敬·译】重新思考身份验证的交互
- (可能是)最硬核的色彩系统总结
- 无界面交互启示录-人人受益的设计方略
- 追光而遇,沐光而行 — 天猫精灵光模态设计背后的故事
- 用户行为与触发式引导
- 浅谈B端智能化设计下的统计图展示
- 个人设计偏好的效用与避坑
- 色彩无障碍指南: 如何让色盲用户获取色彩信息
- AR界面设计和其他界面设计有什么不同?
- B端设计基础 | 响应式布局
- 通过设计 KPI 增强用户体验
- C 化思维的 B 端无线设计
- 大屏数字人设计实践
- B端设计思考:以界面为触点的信息流转
- 提升云计算用户体验的 10 个产品细节
- 日日是好日—— 关于“好消息”的交互
- 好的设计是科学而不是艺术
- 新书节选 | UI 设计:如何提高审美?
- 人类学在产品设计中的应用
- 六个方法解决用户决策疲劳