折叠屏如何设计？从理论到实战解决折叠屏手机适配问题-医保报销政策_医保科普健康资讯

写在前面

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

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

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

二、什么是响应式布局

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

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

二、响应式布局策略

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

1. 基础元素

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

2. 页面布局

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

拉伸布局

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

相对缩放

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

扩展布局

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

挪移布局

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

3. 信息架构

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

三、项目实战

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

1. 团队内部宣讲与价值说明

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