Background

写在前面

近年来，三星、华为等手机厂商陆续发布 Galaxy Fold 、 Mate X 等折叠屏手机。其普及速度似乎超过了人们的想象。2021 年 12 月 2 日，根据屏幕机构 DSCC 公布的一份最新研究报告指出：今年第三季度，折叠屏手机的总出货量环比增加了215 %、同比更是暴涨 480 %。

折叠屏手机从折叠的方式和角度可以分为：内折叠、外折叠、X轴折叠、Y轴折叠等，目前这四个方向均已落地在各大产品中。其中最常见的使用状态有折叠状态和展开状态。折叠屏展开下屏幕变宽，给用户带来了更高效的信息展示和更加沉浸的浏览体验。

从曲面到大屏再到折叠屏，这一概念的想法已经成为现实，屏幕宽窄的变化给体验设计也带来新的挑战，为了保证不同宽度下的使用品质，我们采用了响应式布局的设计策略来解决适配问题。本次笔者将从最常见的 X 轴折叠的方式 (以华为手机 Mate X 为例),对响应式布局技术进行探索。

Part 1

什么是响应式布局

形容响应式布局最贴切的一句话为“ Content is like water ”，即:“如果将屏幕看作容器，那么内容就像水一样。”

通俗来说，「响应式布局」就是一套代码、一种设计语言同时兼容所有尺寸及终端，由一个网站转变成多个网站。在以前，响应式布局更多用在 PC Web 上，随着平板、大屏手机等等移动设备的普及，响应式布局越来越多地运用在移动互联网来解决多端浏览体验。

Part 2

响应式布局策略

简单地说，页面设计可拆解为“基础元素(文字、图标等等)”、“页面布局(元素的组织形式)”、“信息架构 (页面之间的跳转关系)” 3 个环节。在适配时，页面各元素粗暴地等比放大并不能保证不同屏幕尺寸下的浏览体验。为了建立科学可复用的适配体系，我们将从这三个环节分别解决适配问题。

2.1 基础元素

基础元素包括文字、图标、按钮、图片素材等。我们通过观察发现，在展开态和折叠态下用户的浏览距离没有明显的变化，因此要避免展开时元素太大影响体验，在适配时用相同的大小比例即可。在特殊场景比如大段文本类页面时可以适当放大 1.2 倍比例。

2.2 页面布局

常用的适配方式有拉伸布局、相对缩放、扩展布局、挪移布局等：

2.2.1 拉伸布局

各元素的显示宽度不是固定值，而是通过相对参照物的方式来确定其位置，当布局的显示大小发生变化时，元素的显示宽度随之发生改变。

2.2.2 相对缩放

布局内元素的显示大小不是固定值（比例锁定），而是通过相对参照物的方式来确定其宽或者高的参数，当布局的显示大小发生变化时，元素的大小随之发生改变。

2.2.3 扩展布局

当组件内元素横向布局，元素间的距离固定时，布局可显示元素的数量可随着显示宽度的改变而发生变化。利用屏幕的宽度优势，将相同属性的布局组件横向并列同时排布。

2.2.4 挪移布局

布局内的元素根据屏幕的宽度来选择是上下排布还是左右排布。

2.3 信息架构

前面提到的 2 点是对于单个页面的适配策略，在展开时，屏幕尺寸的增加也为信息架构的调整带来更多可能。例如社交软件主页，在折叠态时需点击某个聊天列表跳转进入对话详情，但是在展开态时会适配成“好友列表+对话详情”的形式来体现层级关系

Part 3

项目实战

了解完通用的适配策略后，我们以平安集团个金业务线 “任意门”产品为案例，和大家分享是如何把这些理论知识运用到实际项目，并且推动项目落地上线的。

3.1 团队内部宣讲与价值说明

由于本次项目会用到大量资源，我们在推动前，首先与业务方，主管，开发等内部成员组织了一次宣讲会，会上阐述本次项目要解决的问题和价值说明，得到大家认可后，一起决定去做本次项目。这一步是最关键也是起初就要做的，设计师往往自己先埋头做完设计然后再推动，但结果经常会很难推或者推不动，殊不知达成团队意识的统一是在执行前更重要。

3.2 适配体系建设

在内部获得认可后接下来就是设计师进行具体方案设计了。由于任意门业务复杂，为了便于团队协作、保证体验一致性以及后期维护，我们结合前文提到的理论知识，建立了关于任意门的响应式适配体系：

3.2.1 制定全局删格系统

为了页面设计在不同屏幕宽度时的一致性和规整性，我们先制定了一套同时适用于宽屏和窄屏的删格系统。在制定删格系统时，需要考虑列数和水槽间隔以及安全边距。我们在本案例中利用等分列数，在折叠态使用 4 列，在展开态使用 8 列等分，另外水槽间隔为 8 pt 、安全边距 20 pt 。