一、概述

1.1 折叠屏简介

折叠屏手机作为一种具有特殊形态的设备，具备折叠使用的外屏（副屏），和展开使用的内屏（主屏），通常展开使用的内屏尺寸相对较大。

本文主要提供针对折叠屏大屏的适配建议，帮助设计师及开发者能够更简单、快速地将应用适配至折叠屏设备，以确保用户在不同设备中保持应用的一致体验所带来的愉悦感。

1.2 折叠屏形态

    1. 折叠态（副屏）：外屏尺寸接近普通直屏手机，其设计规范可与直屏手机基本保持一致。

    2. 展开态（主屏）：内屏较外屏有更大的屏幕宽度，需充分利用大屏优势，在信息呈现和交互方式上利用合适的布局方式对应用进行优化调整。

    3. 悬停态：折叠屏设备处于完全展开和折叠的中间状态，可平稳放置。可悬停角度：5°-160°

1.3 折叠屏特性

1.3.1 大屏内容呈现

折叠屏手机的展开态具有以下三个优势：

    1. 展示更多内容：提升信息呈现丰富度与交互效率。

    2. 提升沉浸感：在游戏、电影、视频通话、图片浏览等应用和场景下减少干扰，提升专注度。

    3. 多窗口、多任务：通过展示更多窗口和内容，实现多任务的并行，以丰富体验场景。

1.3.2 主副屏的体验连续

体验连续是指：从一种窗口大小转换为另一种窗口大小时带来无缝的用户体验。无论用户当前置身于什么体验，都应继续进行而不中断，防止用户感知无法接续。

通常情况下，从折叠态切换至展开态时，应用默认在主屏显示运行，并维持在副屏时的应用与任务状态。

同时，用户可在 “设置-显示与亮度-合上屏幕后熄屏” 中选择在展开态切换至折叠态后，是否自动熄屏：

    1. 开启的情况下，折叠设备后，副屏自动熄屏。

    2. 关闭的情况下，折叠设备后，副屏不熄屏并维持在主屏时的应用与任务状态。

二、基础适配原则

2.1 概述

为了避免应用在普通直屏手机移植到折叠屏手机时，缺少针对大屏的优化，导致布局混乱、信息呈现不完整等问题，大幅降低用户体验，建议基于以下三个核心指导建议优化设计：

    1. 适合展开态的界面元素：为了发挥折叠屏展开态的大屏优势，在设计时需要基于屏幕特性和业务场景，优化界面布局结构，以提高用户的交互效率与愉悦感。原则上，更大的屏幕应当呈现更多的内容；在页面适配上，应当优先保证所有界面元素显示为适宜的大小，不应将界面单纯的整体放大，导致单屏信息呈现的减少，影响界面的使用效率。

    2. 灵活的响应式布局：通过响应式布局建构页面，能够在可用空间发生变化时及时、灵活地进行调整优化。本文提供了多种布局建议，可根据业务场景和具体需求，使用其中一种或多种布局进行最优组合。关于布局的具体介绍，请参考界面布局（2.6）。

    3. 高效利用多窗口交互：通过在更大的屏幕上同时展示多个窗口，用户可以高效、直观地处理多个任务，提升使用体验的价值。建议应用为用户在折叠屏展开态中提供更加丰富高效的使用方式，让用户体验得到不同维度的增值。

具体来说，基础适配原则从“信息呈现”与“交互方式”两个维度提供指导建议。

2.2 信息呈现

界面中的信息呈现包括图片、视频、卡片、按钮、字体、控件等通用基础体验元素的展示。

屏幕展开前后，通用基础体验元素需保持一致。如：元素不发生变形、裁剪、信息显示不全或者模糊等情况，避免信息呈现的不一致。

2.3 基础元素适配

需将所有界面元素显示为适宜的大小。不应过大或过小，影响显示效率。

不应从折叠态到展开态直接等比放大文字图标、图片视频等要素，图片与文章的比例与在直屏手机的界面设计出入过大，导致用户在大屏界面中与在直屏手机中的感知不符合预期。

2.4 弹出框适配

建议应用在展开态下的弹出框尺寸与折叠态下弹出框尺寸保持一致，如因特殊需求，需要进行放大，则不应超过原尺寸的1.3倍。

2.5 交互方式

2.5.1 合适的交互区

在展开态时，由于用户双手握持设备的情况较为常见，手指会难以顺利在屏幕所有区域进行交互。为了确保户的交互体验的高效与愉悦，在设计展开态布局时，应考虑到以下三个交互区域：

        ① 用户易于触达的区域。操作频率最高的控件元素建议放在此区域。

        ② 用户可以触达的区域。但有时候可能会造成一定不便，有一定操作频率的控件元素建议放在此区域。

        ③ 用户较难触达的区域。除特殊情况，不建议将需要交互的控件元素放在此区域。

2.3.2 折叠屏手机形态

折叠屏手机形态分为折叠态、展开态与悬停态：

    1. 折叠态：折叠屏手机折叠后的形态，折叠后屏幕尺寸变小。

    2. 展开态：折叠屏手机展开后的形态，展开后屏幕尺寸变大。

    3. 悬停态：折叠屏设备处于完全展开和折叠的中间状态，可平稳放置。可悬停角度为：5°-160°

在悬停状态下，建议“上半屏显示内容，下半屏展示操作”。

例如在视频播放的悬停态中，上半屏为播放页，下半屏为操作区，更方便地进行拖动播放进度、暂停、调节亮度音量等操作。

2.6 界面布局

由于折叠屏在展开态下，屏幕尺寸和比例与直屏手机差异较大，需根据不同需求调整合适的布局，确保用户在不同形态上保持一致的体验。

界面布局主要分为“相对拉伸”、“相对缩放”、“挪移”、“延伸”、“分栏布局”5个类别。

相对拉伸

布局中元素的高度为固定值，元素的宽度对比参照物确定，元素的显示宽度或者元素之间的间距随着屏幕变大而相对变大。

相对拉伸适用于文字内容、输入框、搜索框等。需要注意的是，随着拉伸而改变比例的图片是一种延展，不应因拉伸而变形。

相对缩放

布局中元素的大小比例保持固定，通过对比参照物确定尺寸，显示宽度随着屏幕变大而放大。

相对缩放适用于全屏状态下有固定比例的元素，如图片、视频等。页面中的图片比例不建议放太大，应保持合适的比例。

挪移

当屏幕宽度发生变化时，部分模块的布局可以挪动位置，例如将原先的上下布局切换成左右布局，用以提供屏幕的利用率。

挪移适用于信息层级相对较少的页面，例如歌单详情页等。

延伸

布局中元素横向布局，元素间的距离固定，可显示元素的数量随着显示宽度的改变而变化。

延伸布局适用于资讯TAB、内容推荐卡片、可视化数据等。

瀑布为延伸的拓展用法，将原来单列纵向布局，切分为两列或多列的纵向布局，在⼤屏上呈现更多内容。

分栏布局

具有 “父子和父父关系层级”的列表应用，可以左侧展示一级页面右侧展示其优先级高的子页面。

分栏布局适用于 IM、笔记、信息、邮件等列表类应用。

2.7 多窗口交互

多窗口类别	优势	适用场景
悬浮小窗	通过减少跳转，更快处理临时任务，且广泛适用于各种场景	多应用多任务单应用多任务
分屏	双应用/任务的并行处理，且广泛适用于各种场景	多应用多任务单应用多任务
应用多窗	以多实例实现应用内的双窗口	单应用多任务

悬浮小窗

悬浮小窗以小窗的形式展现应用，并支持不同窗口形式（小窗、分屏、全屏）之间快速切换。

小窗入口包括但不限于：近期任务卡片“小窗”选项，应用内滑、悬浮通知下拉等。

悬浮小窗能通过减少跳转，更快处理临时任务，且广泛适用于各种场景。

悬浮小窗技术接入规范：https://dev.vivo.com.cn/documentCenter/doc/582

分屏

vivo分屏在原生分屏的基础上做了定制化处理，例如增加分屏方式（消息三指组合）、分屏小桌面列表、输入法边界定制、加密界面定制等。

分屏的优势在于多应用/任务的并行处理，且广泛适用于各种场景。

vivo分屏的手势分屏方式为：三指上滑

分屏技术接入规范：https://dev.vivo.com.cn/documentCenter/doc/573

应用多窗

应用多窗以多实例实现应用内的双窗口，根据应用自身特性进行界面组合，减少频繁切换窗口的行为，提升效率。

应用多窗的优势主要分为以下两个：

    1. 同时比较两个同类型内容的不同信息。比如两个不同的图像、文档、商品详情等。

    2. 同时显示多级页面，呈现相同信息的不同维度。通常为主次关系，比如左半屏展示列表页面，右半屏为选中项的详情页面。适用于电商购物、通讯社交、效率办公等频繁切换窗口的应用场景。

应用多窗-左静右变

应用多窗提供了“左静右变”和“左变右变”两种交互规则：

左静右变的规则为：左侧固定页面，右侧可变，进行内容切换，右侧窗口是最终窗口。

适用于效率办公和通讯社交类应用。

应用多窗-左变右变

左变右变的规则为：左侧右侧皆可变。在右侧交互后启动新窗口时，把右侧界面往左推，新的界面在右侧展示。

适用于购物场景类应用。

跨应用拖拽

跨应用拖拽可以让用户将一个应用中的图像、文档或文件拖拽到另一个应用中。

通过分屏和悬浮小窗实现在大屏的跨应用拖拽，减少用户在应用之间来回切换，更高效地进行多任务处理，提高生产力。

关于跨应用拖拽的适配：https://developer.android.com/guide/topics/ui/drag-drop

三、典型场景

3.1 影音娱乐

影音娱乐类场景以大量影音内容资源带来的沉浸式体验为主。

3.1.1 视频资源平台

首页推荐

视频列表页

3.1.2 短视频/直播互动页

3.1.3 音乐播放界面

3.1.4 视频播放界面（悬停）

3.2 资讯阅读

资讯阅读类场景以信息的聚合为主，需利用屏幕优势，确保用户对关键信息浏览、理解的完整和高效。

3.2.1 首页布局：左右图文结构

3.2.2 首页布局：上下图文结构

3.2.3 资讯详情页

3.3 生活服务

生活服务类场景广泛地包含了购物、饮食、出行、学习等用户日常生活的各个方面。

3.3.1 首页列表

3.3.2 详情页面

3.4 通讯社交

社交通讯类场景主要包括：文字交流为主的IM对话、图像视频通话、社交动态等场景。

3.4.1 文字交流为主（IM对话）

3.4.2 图像·视频通话

3.4.3 社交动态

首页结构：推荐

详情页

可根据实际情况，自由选择应用多窗的两种交互规则。请参考基础适配原则-交互方式-多窗口交互（2.7）。

3.5 效率办公

效率办公类场景以高效的体验，辅助和提升工作者的办公效率为主。

3.6 H5页面

H5页面以其便利的特性，广泛应用于小程序和网页版应用。

3.7 金融理财

用户在金融理财类场景中，需确保大屏信息呈现所带来的高效与舒适。

同时，需保障用户办理金融业务过程中的易用性。

3.7.1 首页布局

3.7.2 股票·走势详情页

3.8 游戏

根据不同的游戏类型和场景，优化大屏布局，在呈现与交互层面给用户带来愉悦的体验。

同时，考虑到用户在玩游戏时长时间握持设备，在设计展开态布局时，应根据不同的交互区做适配优化。

请参考交互方式（2.5）-合适的交互区。

四、测试应用

4.1 设备尺寸

可在 Android Studio 中基于以下设备规格信息进行测试。

屏幕类型	对角线长度（英寸）	比例	分辨率（像素）
主屏（展开态）	8.03	4：3.55	1916*2160
副屏（折叠态）	6.53	21：9	1080*2520