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

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

引用

CSDN

1.

https://blog.csdn.net/CTrup/article/details/143187092

随着折叠屏设备的普及，如何设计出优秀的用户体验成为开发者面临的重要课题。本文详细介绍了鸿蒙系统在折叠屏设备上的体验设计实践，从设备形态、设计原则到具体的UX体验标准，为开发者提供了全面的指导。

概述

折叠屏设备具有三种主要形态：

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

折叠屏相对于普通手机有两个明显的特点：可随时折叠展开、展开后屏幕变大。折叠态或悬停态下，屏幕被划分为2个显示区域，一个主要显示屏幕，一个次要显示屏幕。

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

1. 体验连续

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

2. 体验增值

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

折叠屏UX体验标准

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

开合连续性

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

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

需要注意的是，若需要获取折叠屏的状态变化后，屏幕的宽高等信息，需要使用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 时横竖屏布局正常且一致。
• 标准等级：必须
• 适用设备类型：折叠屏、平板、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体验标准。