HarmonyOS鸿蒙next 折叠屏手机适配问题

HarmonyOS鸿蒙next 折叠屏手机适配问题

一、折叠方式介绍

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

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

二、什么是响应式布局

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

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

三、响应式布局策略

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

1. 基础元素

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

2. 页面布局

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

拉伸布局

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

相对缩放

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

扩展布局

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

挪移布局

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

3. 信息架构

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