HarmonyOS 鸿蒙Next页面级一多适配（折叠屏&平板）指南

1. 一.UX设计规范

概述：UX设计标准从影响用户体验的各个维度定义了相应测试规范，规定了应用需达到的基础体验要求，用于引导应用的设计与开发，以保证应用良好的使用体验。该标准包括通用应用 UX 体验标准、大屏应用 UX 体验标准、折叠屏应用 UX 体验标准、2in1 应用 UX 体验标准、元服务 UX 体验标准。

官网文档地址：

https://developer.huawei.com/consumer/cn/doc/design-guides/ux-guidelines-overview-0000001760867048

1. 二.一多适配

概述：随着终端设备形态日益多样化，分布式技术逐渐打破单一硬件边界，一个应用或服务，可以在不同的硬件设备之间随意调用、互助共享，让用户享受无缝的全场景体验。而作为应用开发者，广泛的设备类型也能为应用带来广大的潜在用户群体。但是如果一个应用需要在多个设备上提供同样的内容，则需要适配不同的屏幕尺寸和硬件，开发成本较高。HarmonyOS系统面向多终端提供了“一次开发，多端部署”（后文中简称为“一多”）的能力，让开发者可以基于一种设计，高效构建多端可运行的应用。为了实现页面级“一多”的目标，需要遵循一定的规则来解决不同设备间的屏幕尺寸、色彩风格等存在差异，页面如何适配。

适配规则：基础兼容性、功能完整、布局合理美观、可折叠设备。

2.1、基础兼容性

概述：应用或元服务在折叠屏上进行折叠态、支架态、展开态切换时，输入内容不丢失、任务不中断，无崩溃、闪退、无响应等异常情况。

开发指南参考：

https://developer.huawei.com/consumer/cn/doc/design-guides/opening-closing-0000001957031885

2.2、功能完整性

概述：包括横竖屏适配和多窗适配。

2.2.1横竖屏适配

概述：应用支持在折叠屏展开态、平板设备上的横竖屏切换显示。屏幕比例接近1:1的设备，横竖屏布局需保持一致。

开发指南参考：

参考UX设计规范，应用自适配。

2.2.2多窗适配

适配要求：1）应用适配竖向悬浮窗、左右分屏、上下分屏，且确保该形态下有较好的适配效果，能完成全流程交互。

例如上下分屏时，弹出框过大无法点击关闭按钮，导致交互中止等；内容显示过大导致交互效率低浏览体验差等。

2）视频、游戏类应用需要适配横向悬浮窗。

3）应用在平板设备上需适配支持窗口大小变化调整，确保应用内容显示无异常。

悬浮框开发指南参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-window-stage-V5#section11159255145310

分屏开发指南参考：

https://developer.huawei.com/consumer/cn/doc/best-practices-V5/multi-shopping-price-comparison-V5#section112893356386

2.3、布局合理美观

适配要求：布局基础要求、图标文字大小适中、弹出框大小适中、宫格图片信息量适中、广告图信息量适中、上下图文信息量适中、单行文本、边距适中。

2.3.1布局基础要求

概述：设备在折叠/展开或横竖屏切换时，应用中的图片、视频等界面元素应避免错位/截断/变形/模糊等。

*模糊：应用图标不模糊为“必须”，应用内图片不模糊为“推荐”。

开发指南参考（一多自适应布局）：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/adaptive-layout-V5

2.3.2图标文字大小适中

概述：文字/图标物理大小建议：

展开态文字/图标大小为折叠态的1~1.2倍 (推荐)

平板上文字/图标大小为直板机的1~1.5倍（推荐）

不建议大于1.2/1.5倍 (必须)

不建议一排图标数量过多导致信息过密，折叠屏/平板竖屏上建议一排不超过8个图标，平板横屏上建议一排不超过13个图标

开发指南参考（一多自适应布局：均分能力、折行能力、延伸能力、拉伸能力）：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/adaptive-layout-V5

2.3.3弹出框大小适中

概述：展开态弹出框高度为折叠态的1~1.2倍 (推荐)，不建议高度大于1.2倍 (必须)。

开发指南参考：

参考UX设计规范，应用自适配

2.3.4宫格图片信息量适中

概述：宫格图片控件占比要求（控件高度/屏幕高度）：

1）单行图片高度不要太矮，不要低于屏幕高度的1/10，不要超过屏幕高度的2/5；

2）若宫格聚合图片整体作为信息流内容的配图，则建议整体高度不要低于屏幕高度的1/2，不要超过屏幕高度的2/3。

开发指南参考（一多能力依赖：网格组件）：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-grid-V5

2.3.5广告图信息量适中

概述：广告图控件占比要求（控件高度/屏幕高度）：

1）折叠屏展开态横竖屏、平板横屏时，广告图的图片高度不要超过一屏幕的1/2。

2）平板竖屏时，竖屏时广告图的图片高度不要超过一屏幕的2/5。

开发指南参考（一多能力 运营横幅（Banner)）：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/typical-layout-scenario-V5#%E8%BF%90%E8%90%A5%E6%A8%AA%E5%B9%85banner

2.3.5上下图文信息量适中

适配要求：1）上下图文结构中，建议信息流场景的图片左对齐，阅读场景的图片居中对齐

2）图片的物理尺寸：折叠屏上展开态图片的放大倍数建议不超过1.2倍；平板上比直板机放大不超过1.5倍。

图片放大不超过1.2/1.5倍且满足控件高度占比要求 (推荐)；

图片放大倍数不超过1.2/1.5倍或满足控件高度占比要求 (必须)

3）在平板、折叠屏展开态等宽屏设备上最好通过延伸布局、挪移布局等方式让图文进行合理布局，避免图片过高。上下图文控件高度占比要求如下：首页入口型的上下图文，不建议使用长图，宽图或方图的最大高度不要超过屏幕高度的1/3;首页信息流结构的上下图文，图片最大高度不超过屏幕高度的2/5;详情页内容型的上下图文，最大高度不要超过屏幕高度的3/5。

开发指南参考：

参考UX设计规范，应用自适配。

2.3.6单行文本

概述：考虑用户阅读行为，在宽屏设备上建议一行文本字数不要太多，折叠屏展开态一行不超过40字，平板横屏一行不超过52字，平板竖屏一行不超过40字。也可以通过文本分段或图文混排等方式改善文本阅读体验。

开发指南参考：

参考UX设计规范，应用自适配

2.3.7边距适中

概述：一般不建议用边距的方式来控制信息量，左右边距的留白不要太大。同一个应用内不同的页面建议保持相同的边距。

同一个应用在不同端上，可以根据设备屏幕的宽度进行适量的边距调整。

开发指南参考：

参考UX设计规范，应用自适配

2.4、可折叠设备

适配要求：开合连续性、悬停适配、折痕避让区

2.4.1开合连续性

概述：应用在设备折叠/展开后不应步骤增加，更复杂等体验下降的情况。例如：如页面切换到其他页面、页面滚动位置发生偏移、输入内容丢失、图片模糊、播放进度变化。

开发指南参考：

https://developer.huawei.com/consumer/cn/doc/design-guides/opening-closing-0000001957031885

2.4.2悬停适配

概述：长视频、短视频、直播、通话、会议、拍摄类应用需针对折叠屏的悬停态进行单独适配。在界面布局设计时充分考虑悬停态下不同屏幕区域的可视角度及交互难易度。下半屏区域内可放置交互，上半屏区域内进行信息显示，呈现浏览型内容。交互型控件，例如弹出框、半模态，在下半屏显示；跟随上下文的控件，例如菜单，跟随触发元素所在侧的屏幕显示。

开发指南参考（ArkUI能力（FolderStack）悬停底座能力（推荐））：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-folderstack-V5

2.4.3折痕避让区

概述：悬停态时，中间弯折区域显示内容会变形。长视频、短视频、直播、通话、会议、拍摄类应用需针对折痕区域进行避让适配。上半屏内容由中线向上避让16vp（3毫米）、下半屏内容由中线向下避让40vp（7毫米）。

开发指南参考（窗口 获取折痕避让区方法）：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-display-V5#displaygetcurrentfoldcreaseregion10