鸿蒙（设备场景适配）——折叠屏体验设计实践

往期推文全新看点

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
• 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
• 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
• 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
• 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
• 记录一场鸿蒙开发岗位面试经历~
• 持续更新中……

概述

折叠屏形态

• 展开态：折叠屏设备完全展开后的形态。有更大的屏幕尺寸，可充分显示应用内容。
• 折叠态：折叠屏设备折叠后的形态。折叠后屏幕尺寸变小。
• 悬停态：折叠屏设备处于完全展开和折叠的中间状态，可平稳放置。

体验设计点

折叠屏相对于普通手机有两个明显的特点：可随时折叠展开、展开后屏幕变大。

折叠态或悬停态下，屏幕被划分为2个显示区域，一个主要显示屏幕，一个次要显示屏幕。

为了能够充分利用折叠屏的特点，提供良好的使用体验，折叠屏UX设计中需考虑如下体验诉求：

1. 体验连续

   屏幕可随时折叠展开，在体验上要保证用户体验的连续性，应用需要遵从屏幕显示的兼容和应用状态的连续。

   • 屏幕兼容：由于屏幕尺寸发生变化，应用应采用适当的手段对屏幕上内容布局进行优化调整。
   • 应用连续：应用在折叠与展开状态切换的过程中保持正常运行。

2. 体验增值

   屏幕变大后，用户体验在某些方面有增值：

   • 更多内容：大尺寸屏幕可显示更多内容，提高显示和操作的效率。
   • 更加沉浸：大尺寸屏幕可显示更清晰的细节，适合图片浏览、视频欣赏、游戏等应用和场景。
   • 多任务并行：多个窗口可同时在大尺寸屏幕内展示，为用户多任务并行提供了直观高效的方式。

折叠屏UX体验标准

本标准从影响用户体验的各个维度定义了相应测试规范，规定了应用需达到的基础体验要求，用于引导应用的设计与开发，以保证应用良好的使用体验。

折叠屏需要遵循的UX体验标准包括：

开合连续性

简介	描述
标准描述	应用在设备折叠/展开后不应出现操作步骤增加，操作更复杂等体验下降的情况。例如：页面切换到其他页面、页面滚动位置发生偏移、输入内容丢失、图片模糊、播放进度变化等。页面滚动位置不偏移的示例
测试方法	设备展开/折叠，观察开合转换过程和页面布局。
判定标准	设备开合过程流畅，不卡顿，界面布局正常，操作交互正常。
标准等级	必须
适用设备类型	折叠屏
需考虑的特殊事项	无

可以使用display的开合能力来满足开合场景下不同需求。常见display API如下：

API	说明
display.isFoldable	检查设备是否可折叠
display.getCurrentFoldCreaseRegion	在当前模式下获取折叠折痕区域
display.getFoldStatus	获取可折叠设备的当前折叠状态
display.on(‘foldStatusChange’)	开启折叠设备折叠状态变化的监听
display.off(‘foldStatusChange’)	关闭折叠设备折叠状态变化的监听
display.on(‘foldDisplayModeChange’)	开启折叠设备屏幕显示模式变化的监听
display.off(‘foldDisplayModeChange’)	关闭折叠设备屏幕显示模式变化的监听

需要注意的是，若需要获取折叠屏的状态变化后，屏幕的宽高等信息，需要使用display.on(‘foldDisplayModeChange’)接口进行监听。如果使用

display.on(‘foldStatusChange’)监听，将出现因接口调用时序问题导致的获取宽高错误问题。示例代码如下：

display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => {
  let displayInfo: display.Display = display.getDefaultDisplaySync();
  if (data === display.FoldDisplayMode.FOLD_DISPLAY_MODE_FULL) {
    console.info('当前屏幕状态：全屏显示');
    console.info('屏幕宽度： ' + displayInfo.width);
    console.info('屏幕高度： ' + displayInfo.height);
  } else if (data === display.FoldDisplayMode.FOLD_DISPLAY_MODE_MAIN) {
    console.info('当前屏幕状态：主屏幕显示');
    console.info('屏幕宽度： ' + displayInfo.width);
    console.info('屏幕高度： ' + displayInfo.height);
  }
});

开合流畅

简介	描述
标准描述	折叠屏外折时，变化过程有连续动效，而不是硬切换。
测试方法	对折叠屏进行外折操作，观察界面动效。
判定标准	在折叠屏外折过程中，界面动效自然流畅，无卡顿等异常。

---

标准等级	推荐
适用设备类型	折叠屏
需考虑的特殊事项	无

悬停适配

简介	描述
标准描述	长视频、短视频、直播、通话、会议、拍摄类应用需针对折叠屏的悬停态进行单独适配。在界面布局设计时充分考虑悬停态下不同屏幕区域的可视角度及交互难易度。下半屏区域内可放置交互操作，上半屏区域内进行信息显示，呈现浏览型内容。交互型控件，例如弹出框、半模态，在下半屏显示；跟随上下文的控件，例如菜单，跟随触发元素所在侧的屏幕显示。悬停态适配的示例
测试方法	在设备悬停态下，观察应用界面的信息显示和交互。
判定标准	应用能正常适配悬停态，在悬停态下半屏区域内可进行交互操作，上半屏区域内内容信息显示正常。
标准等级	涉及则必须
适用设备类型	折叠屏
需考虑的特殊事项	无

折痕避让

简介	描述
标准描述	悬停态时，中间弯折区域难以操作且显示内容会变形。长视频、短视频、直播、通话、会议、拍摄类应用需针对折痕区域进行避让适配。折痕避让的示例
测试方法	在设备悬停态下，观察应用对折痕区域的适配。
判定标准	应用能进行折痕避让。
标准等级	涉及则必须
适用设备类型	折叠屏
需考虑的特殊事项	无

横竖屏适配

简介	描述
标准描述	应用支持在折叠屏展开态、平板设备上的横竖屏切换显示。 屏幕比例接近 1:1 的设备，横竖屏布局需保持一致。折叠屏的横屏响应式布局适配示例平板的横屏响应式布局适配示例比例接近 1:1 的屏幕上横竖屏布局一致的示例
测试方法	设备旋转，观察横竖屏切换旋转过程和横竖屏的界面布局。
判定标准	适配横屏显示，横竖屏切换过程流畅，不卡顿；屏幕比例接近 1:1 时横竖屏布局正常且一致。
标准等级	必须
适用设备类型	折叠屏、平板、2in1
需考虑的特殊事项	无

多窗适配

简介	描述
标准描述	1. 应用适配竖向悬浮窗、左右分屏、上下分屏，且确保该形态下有较好的适配效果，能完成全流程交互。 例如上下分屏时，不出现弹出框过大无法点击关闭按钮，导致交互中止等问题；不出现内容显示过大导致交互效率低浏览体验差等问题。 2. 视频、游戏类应用需要适配横向悬浮窗。 3. 应用在平板设备上需适配支持窗口大小变化调整，确保应用内容显示无异常。竖向悬浮窗、横向悬浮窗
左右分屏、上下分屏
测试方法	在设备上启动悬浮窗、分屏，观察是否能正常触发多窗，多窗的显示布局是否正常，应用是否正常运行。
判定标准	设备能正常启动悬浮窗、分屏，且悬浮窗和分屏内布局正常，不出现卡顿、闪退、闪屏、变形、错位等情况。
标准等级	必须
适用设备类型	折叠屏、平板、2in1
需考虑的特殊事项	无

上下图文信息量适中

简介	描述
标准描述	1. 上下图文结构中，建议信息流场景的图片左对齐，阅读场景的图片居中对齐。 2. 图片的物理尺寸：折叠屏上展开态图片的放大倍数建议不超过 1.2 倍；平板上比直板机放大不超过 1.5 倍。 图片放大不超过 1.2/1.5 倍且满足控件高度占比要求 (推荐)。 图片放大倍数不超过 1.2/1.5 倍或满足控件高度占比要求 (必须)。 3. 在平板、折叠屏展开态等宽屏设备上最好通过延伸布局、挪移布局等方式让图文进行合理布局，避免图片过高。上下图文控件高度占比要求如下： * 首页入口型的上下图文，不建议使用长图，宽图或方图的最大高度不要超过屏幕高度的 1/3。 * 首页信息流结构的上下图文，图片最大高度不超过屏幕高度的 2/5; * 详情页内容型的上下图文，最大高度不要超过屏幕高度的 3/5。设备展开/折叠，观察开合转换过程和页面详情页上下图文示例
测试方法	在大尺寸屏幕 (折叠屏/平板) 设备上，观察和获取内容放大倍数和控件占比。
判定标准	内容放大倍数不超过 1.2，控件高度占比满足规范要求。
标准等级	必须
适用设备类型	折叠屏、平板、2in1
需考虑的特殊事项	无

折叠屏需要同时参考 通用应用 、 大屏应用 、 折叠屏应用 的UX体验标准。