一、简介

本文是针对手机应用在折叠屏手机、平板等大屏上的适配指南。包括显示适配、界面布局指南等内容，用于引导设计师与开发者快速将自己的应用适配到这些大屏设备上，并在 OPPO、vivo、小米等不同品牌设备上保持一致而良好的使用体验。

1.1 设备简介

1.1.1 折叠屏手机

折叠屏手机，指基于柔性屏幕技术打造的，支持通过折叠与展开改变形态的手机设备，通常具备内、外两块不同尺寸的屏幕，以及比其他设备更丰富的使用姿态；
当前市面上主要有两种类型的折叠屏手机，即横折手机与竖折手机。其中，横折手机折起时，外屏尺寸与常规直板手机尺寸相似。展开后，内屏尺寸较大，使用体验接近于平板设备。

竖折手机展开时，内屏尺寸与常规直板手机尺寸相似。折起后尺寸小巧，便于携带，通常具有一个尺寸很小的外屏，以提供简单的通知查看或应用操作功能。

通常情况下，应用不需为横折手机的外屏与竖折手机的内屏做特殊设计或处理。本指南主要针对横折手机的内屏适配进行介绍。

1.1.2 平板

平板，通常指屏幕对角线尺寸大于 7 英寸，或屏幕长边像素数多于 840dp 的大尺寸移动设备。

由于平板设备尺寸较大，在办公、媒体浏览方面具备极大的优势，用户倾向于将其认知为电脑产品，并配合键盘、鼠标、手写笔等多种输入设备共同使用。

二、 布局设计指南

2.1 设计原则

2.1.1 体验完整

界面显示完整
在任何屏幕上运行时，应用的关键内容与信息应当始终完整显示，用户能够正常浏览与理解。请确保您的应用至少符合以下基本要求：

• 界面正常填满屏幕，各界面元素不会相互遮挡，或超出屏幕可显示的范围；
• 文字内容可以正常阅读，不会相互重叠或意外被截断，行高不会被裁切；
• 图片、视频等媒体内容可以正常显示，不出现模糊、拉伸变形或尺寸过大显示不全等问题。

功能触发正常
折叠屏与平板设备上，应用应当尽量为用户提供与直板手机同样完整的功能。所有功能应当始终能够正常展示在合理的位置上，并能够正常触发。请确保应用中不存在功能无响应、弹窗无法关闭等阻塞用户使用的问题。

2.1.2 体验连续

设计延续
同一设备可能拥有多个不同尺寸的屏幕与多种不同的使用姿态。在不同的屏幕、使用姿态上运行时，应用的界面布局、设计风格应当有所关联与延续，以带给用户一致的认知与使用体验。

运行连续
设备在不同屏幕、显示方向、窗口之间切换的时候，应用应当能够随之实时改变布局，并保留用户的浏览位置、应用状态与媒体播放进度，保持正在进行的任务不中断，已输入的内容不丢失，让用户能够继续进行之前的工作。

2.1.3 体验增值

在更大的屏幕上，用户应当获得一些体验提升。通常来讲，这种提升主要体现在以下方面：
更多内容
利用更大的显示空间，应用可以呈现更多的内容，以提升用户获取信息的效率，减少翻页或滚动查看的频率。

更佳沉浸
对于图片、视频、游戏等内容，应用可以充分利用屏幕尺寸的优势，将内容显示得更大、更清晰，提升用户的沉浸感与观看体验。

更高效率
屏幕空间充足时，应用应当充分利用多出来的空间，进一步提高用户的使用效率。比如：

• 在当前页面内同时展示下一层级页面的内容，降低用户来回跳转的频率，提升浏览效率；

• 利用更大的屏幕空间展开原本折叠在菜单中的功能，缩短用户的操作路径；

• 允许用户通过多窗口并行使用应用内的多个功能，并支持通过拖放操作跨应用分享内容。

2.2 适配方法

用户拥有的移动设备来自多种品牌，屏幕的尺寸与比例也各不相同。为了让应用可以通过一次适配，在所有设备上提供舒适、一致、便捷的体验，我们推荐开发者按照以下步骤进行设计：
1）确认界面元素合理的显示大小。 （参见 2.2.1 确认显示大小）
2）构建响应式布局，让应用始终填满任何屏幕与窗口。 （参见 2.2.2 使用响应式布局）
3）为折叠屏与平板设计独特布局，实现基础体验增值。 （参见 2.2.3 构建断点自适应布局）
4）对各类元素添加显示规则，进一步优化显示效果与使用体验（参见 2.2.4 关键元素适配）
5）针对设备特性，打造独特的使用方式。 （参见 2.2.5 设备特性适配）

此外，我们也提供了部分品类的行业优秀适配案例，协助开发者快速判断适合自己应用的设计方案。您可以在后续的 第三章 找到这些案例。

2.2.1 确认显示大小

由于屏幕比例与尺寸差异较大，将直屏手机的界面直接放大显示在折叠屏、平板设备上，通常会导致内容尺寸过大，用户体验降低，甚至可能影响部分界面的正常使用。

无论何时，请先按照以下方法，确认内容元素已经显示为合理的大小。

2.2.1.1 方法一：使用密度无关像素进行设计

放大倍率
不同设备的屏幕具有不同的尺寸与像素密度（PPI）。为保证应用界面元素的显示尺寸在所有设备上舒适一致，我们为每块屏幕都设置了适宜的放大倍率，在该倍率下，应用的元素在当前屏幕上会显示为合理的尺寸，保证舒适的使用体验。您可以通过以下方式获得当前屏幕的放大倍率：

float density = getResources().getDisplayMetrics().density

密度无关像素
密度无关像素（dp）是一种虚拟尺寸单位。在不同像素密度的屏幕上运行时，Android 能够自动根据厂商为屏幕配置的放大倍率，自动将 dp 尺寸转换并显示为适宜的像素数量（px）。
设计与开发您的应用时，请尽量使用密度无关像素（dp）作为基准。通常来讲，使用这种方式开发的应用，无须再针对新设备的屏幕调整界面元素的显示大小。
定义文字大小时，您可以使用可扩展的像素（sp）作为单位。sp 单位尺寸与 dp 相同，但在响应系统「显示大小」设置的基础上，还会同时响应「文字大小」设置。因此，不建议将 sp 用于布局尺寸。

使用密度无关像素进行设计时，可以将常规直板手机的宽度看作360dp，进而确认各界面元素的尺寸。
将已有的界面换算为基于密度无关像素的设计
如果您的应用过去已经基于其他标准完成了直板机型的界面设计，可将当前界面等比缩放到 360dp 宽的画布上，快速换算出各元素大致的 dp/sp 设计尺寸。

2.2.1.2 方法2：自行控制元素的显示尺寸

对于嵌入在应用中的 HTML5 内容，或其他无法使用密度无关像素（dp/sp）的场景，您可以自行获取屏幕参数，并控制内容元素的合理显示尺寸。如需采用这种方式，请尽量使各种元素在不同设备屏幕上保持相似的物理显示尺寸。通常情况下，折叠屏、平板等大屏设备上，各元素的物理显示尺寸比直板机放大不超过 20%。

2.2.2 使用响应式布局

响应式布局 (Responsive Layout)，指窗口尺寸与形态发生改变时，元素可以实时改变大小和位置，像水一样流动和变化，自动填满新窗口空间的布局形式。响应式布局是所有布局适配的基础，将界面调整为响应式布局后，您的应用可以自动适应不同的屏幕或窗口，实现基础适配。

2.2.2.1 响应式约束

构建响应式布局，需要对模块中的所有元素添加约束 (Constraint)。约束是响应式变换的规则，用于描述元素与窗口或其他元素之间的位置关系、对齐方式、长宽比例等信息。常见的约束包括相对固定，相对缩放，相对拉伸与内容延伸等。
相对固定
相对固定指元素位置通过对比参照物确定，如屏幕边缘、窗口边缘或另一元素。当屏幕尺寸变化时，元素的位置保持相对固定。
适用场景：悬浮按钮、底部导航栏、标题栏、分页标签、头像等。

相对拉伸
相对拉伸一般指页面内元素高度固定，宽度通过对比参照物确定。页面变宽时，元素的宽度或多个元素之间的间距随之变宽。
适用场景：文字内容、搜索框、输入框、卡片容器等。

相对缩放
相对缩放指内容元素保持固定比例，通过对比参照物确定尺寸。屏幕变宽时，元素会随之等比变大。
适用场景：仅适用于全屏、沉浸浏览状态的媒体，或卡片容器中的图片、视频等内容。

内容延伸
内容延伸指模块或元素的尺寸不与屏幕右边界位置关联，内容过长时伸出屏幕。屏幕宽度变大时，像展开画卷一样，在界面上露出更多后续的元素。
适用场景：尺寸、间距固定的横向元素组，一般支持左右滑动。如资讯 TAB、内容推荐卡片、可视化的数据块等。

2.2.2.2 构建响应式布局

构建响应式布局的过程，就是组合使用多种约束方式，为所有内容添加好适宜的响应式变化规则。
由于 HTML5 页面整体嵌入在页面内，在适配的过程中，请同时对嵌入的内容元素进行检查，以保证应用所有页面和模块均完整构成响应式布局。

2.2.3 构建断点自适应布局

响应式布局虽然可以自动填满屏幕，但屏幕尺寸相差很大时，仍然可能产生可用性问题，如内容被过度拉伸，导致难以阅读或辨识，或页面中空白过多，影响用户的阅读与使用效率。

为保证显示效果与使用体验，在响应式布局的基础上，通常需要针对大屏设备设计不同的布局，并在适宜的情况下，将界面切换为对应的布局。这种存在多个布局，并能根据屏幕大小自动切换的能力，称为断点自适应能力。

2.2.3.1 断点与栅格

断点
市面上的设备尺寸、形态各异，为所有设备设计专有布局是不现实的。为降低适配成本，Google 将设备按照屏幕尺寸划分为几种有限的类型，开发者仅需要针对这些类型各设计一套布局，配合响应式变化能力，就可以用较低的成本在所有设备上获得更佳的使用体验。这些用于划分屏幕类型的尺寸边界值被称为断点（Breakpoint）。
目前 Google 在水平、竖直两个方向上各设置了 2 个断点，将屏幕在宽、高两个方向上各划分为 3 种类型，相关标准如下：

由于应用大多为流式布局，用户可以竖直滑动浏览，通常情况下，开发者只需考虑宽度断点，为应用设计小、中、大 3 种布局方案即可。其中，中屏方案对应横折手机的内屏与平板竖屏（Portrait）状态，大屏方案对应平板横屏（Landscape）状态与车机等尺寸较大的窗口空间。

如果您的应用有特殊需求，比如需要在不同长宽比的屏幕上展示不同布局样式，或需要更细致地区分平板、车机等同一断点内不同的设备，可以进一步引入高度断点综合判断当前的屏幕特征，或在现有的断点基础上增加更多断点值，并对应设计更多布局方案。

栅格系统
栅格系统由边距（Margin）、栏（Column）、间距（Gutter）三个基本元素构成。其中：

• 边距是页面内容到屏幕/窗口边缘的距离。
• 间距也被称为水槽，用来分隔内容。间距的值越大，页面中留白部分的面积越多，视觉效果越松散。
• 栏也被称为列，用来布置文本、卡片、图片等内容元素。栏的宽度通常不是固定值，而是由窗口宽度、边距、间距和栏数综合决定。窗口宽度减去边距与所有间距值后，除以栏数得到。

由于不同的屏幕大小所需要的栅格不同，屏幕越宽，就需要越多的栏来进行细分，以更高效地利用横向空间。小屏上，通常使用 4 栏栅格，中屏使用 8 栏，大屏使用 12 栏。

分屏、扩充层级等场景下，一般根据每个窗口的实际大小确认栅格的列数。

使用栅格系统可以使页面元素排列更有秩序感，使排版在不同的页面间具备一致性。您可以在下面的章节中了解如何利用栅格设计或优化中、大屏上的界面。


2.2.3.2 为大尺寸屏幕设计布局

相较于普通手机，大屏设备的布局高度通常没有明显差异，但宽度成倍提升。设计中大屏布局时，核心的目标即是合理利用增加的空间，消解宽度带来的可用性问题，并提升屏幕空间的整体利用效率。
常见布局设计策略有 缩进、填充、分割 与 深入订制 等。

缩进
当页面内容较少，或需要严格按照顺序进行浏览时，如设置菜单、文本阅读等场景，建议采取缩进的策略，将内容收拢到屏幕中央区域进行呈现。通过这种方式控制元素宽度，避免内容过于分散，让用户能够准确将两侧元素相互对应，或者控制每行的字数，降低用户的阅读压力。

同一页面内的所有内容需使用相同缩进标准，两侧相互对齐，便于用户浏览。但在不同尺寸类型的屏幕上显示时，页面的整体缩进量应当跟随屏幕尺寸变化，屏幕越大，内容缩进量越大。
在已构建有栅格系统的页面上，可以利用栅格简单控制缩进量。8 栏的中屏上通常缩进 2 栏，仅使用中间 6 栏；12 栏的大屏上缩进 4 栏，仅使用中间 8 栏，即可达到较为适宜的效果。

使用缩进适配的页面内，应避免放置横向滚动浏览的内容组块，以免元素超出内容边界，或被边界突兀截断。

缩进是较为基础的适配方法。对于内容、功能丰富的页面，应优先使用其他策略进行适配；

填充
针对卡片流、内容列表页等场景，在更大的屏幕上，可以通过改变排布的方式，利用页面中已有的内容填满多出来的屏幕空间，在一屏内展示更多信息；

填充时，应当时刻关注当前区域的内容密度与相邻版块的设计。避免页面单调重复，或内容密度过高。

填充策略仅适用于能够从内容密度提升中获取显著体验收益的场景，如果应用具有较强工具属性，或具有明确的提效诉求，建议优先考虑其他策略。

分割
面对更大的屏幕宽度，还可以将其分割成两个或多个区域进行设计，提升浏览效率与屏幕利用率。分割出来的各个相互独立的区域被称为窗格（Pane）。
分割适合能够通过同时浏览多种不同类型内容来提升使用体验的场景。如：

• 邮件、短信等内容浏览型应用，通过同时显示列表和详情页，实现高效查看与阅读；
• 部分应用的内容详情页，利用划分出的区域，允许用户同时浏览核心内容与评论、推荐等附加内容。

此外，也可以利用分割出的区域，将原有页面中的内容改为左右排布，提升界面的视觉舒适度与屏幕利用率。

中屏上，屏幕与窗口的宽度仍然较为有限，需谨慎使用分割，避免内容显示拥挤，或附加内容过于突出，影响主要内容的浏览。

大屏上，由于窗口宽度过大，应用界面很难通过填充、缩进等方式在单一窗格内获得较好的适配效果。设计布局时，反而应当优先考虑将屏幕分割为多个窗格，以充分利用横向空间，实现更佳的适配效果。

您可以通过判断当前窗口与各窗格的宽度，来确认是否需要增加或减少窗格的数量。通常情况下，为保证内容密度适宜，展示舒适，每个窗格的宽度应保持在 280～600dp 之间。建议应用参考以下标准进行设计：

• 小屏窗口中，呈现单一窗格；
• 中屏窗口中呈现 1 个窗格，最多不超过 2 个窗格；
• 大屏窗口中呈现 1～2 个窗格，最多不超过 3 个窗格。

存在侧边导航栏（Navigation drawer）或侧边面板（Side sheet）的应用，也可以将其展开，占用 1 个窗格空间，进而保证其他窗格的宽度处于适宜范围内。

深入定制
对于存在较高体验要求的应用，如效率工具，建议结合使用场景、屏幕大小与设备特性进行深入的布局定制，充分发挥屏幕与设备优势，优化用户使用体验，或打造更强的生产力。常见定制思路包括：

1、利用屏幕空间，将原本折叠在菜单内的功能展示在浅层界面上，缩短用户的操作流程；

2、改变模块的设计与排列方式，在大屏上提供更具表现力的体验。

3、根据用户的握持方式，对界面元素重新进行排布，以方便用户操作与使用；

4、根据设备的特殊使用姿态，提供独特的界面。

关于设备握持与使用姿态的介绍与适配方法，可参考2.2.5 设备特性适配。
定制布局时，请注意保持界面风格与体验的延续性，避免用户切换设备内外屏或使用方向后产生体验上的割裂感。

2.2.3.3 根据断点切换布局
完成各断点下的布局设计后，在窗口尺寸发生变化并跨越断点时，让界面自动切换到对应布局，即可完成断点自适应布局的构建。
设置与切换布局的方法，请参见 《大屏适配技术指南》第二章应用连续性。
切换布局的时候，请注意保持应用连续运行，保留用户的浏览位置与应用状态，确保已输入的内容不丢失，媒体播放不中断，进度不重置，用户可以继续进行切换前的操作。

2.2.4 关键元素适配

设计中大屏布局时，您可能还需要检查以下元素的样式表现，确保任何情况下界面舒适易用。


2.2.4.1 文字与段落

屏幕宽度增加后，每行能显示的文字数量会增多，但用户阅读时，视线扫视的距离和认知压力也会随之提升，更容易产生疲劳感。为保证文本内容具有较好的可读性，在中、大屏上，可以通过对文字段落进行缩进、分栏，或适当增大字号等方式，来控制单行的字数保持在最优范围内。

2.2.4.2 图片与视频

由于图片与视频长宽比固定，在折叠屏、平板设备上，图片与视频可能被放大到很大的尺寸进行显示。为避免出现模糊，需使用分辨率较高的素材，并在各种设备上充分进行验证。
此外，不同类型的页面与场景下，图片、视频的适配方式也各不相同，建议参照以下策略进行对应设计：
闪屏图片
部分应用启动时，会短暂呈现全屏的推广图片，即闪屏。
为保证在不同设备上正常显示，在设计图片时，应当避免以常规屏机型为基准。通常需绘制一张较大的图片，将核心内容放在中心区域。在不同设备的屏幕上显示时，按照需要进行裁切。

沉浸浏览

沉浸浏览，特指视频播放页、图片详情页等专门用于查看图片、视频等媒体内容的场景。此类页面下，应当尽量利用屏幕空间，将内容放大到最大的尺寸进行展示。
放大后，图片、视频应当完整显示，长边与屏幕边缘对齐，且不被页面内的其他元素裁切。

独立存在的图片元素
部分图片元素不依赖任何容器存在，如内容阅读、信息流等图文混排场景。这类情况下，图片、视频类元素通常与其他内容保持相同的缩进值。

由于图片、视频内容长宽比固定，部分情况下，如图片为竖向时，使用与文字相同的缩进值，可能导致显示尺寸过大，无法在屏幕中看到图片全貌，并影响其他内容呈现。因此，在缩进的基础上，一般还要进一步限制图片、视频的最大尺寸。
根据经验，参照以下标准设置尺寸限制，视觉观感较为舒适：

• 单张横向图片/视频高度建议不超过 40% 屏幕高度，最高不超过 50% 屏幕高度；
• 单张竖向图片/视频高度建议不超过 50% 屏幕高度，最高不超过 60% 屏幕高度；
• 多张图片/视频组合时，建议整体不超过 50% 屏幕高度，最高不超过 60% 屏幕高度。

容器中的图片或视频
图片、视频在卡片等容器中展示时，一般遵循容器的布局规则，最大化填满可用空间。中、大屏上，通过控制容器的列数或宽度，来间接控制图片、视频内容的尺寸。此类场景的详细处理标准，请参考 2.2.4.6 卡片与卡片流。

2.2.4.3 图标组
图标组（Icon group）又称灯笼位，在中、大屏上通常也采用增列的方式进行适配；增列时，需要根据实际情况，维持适宜的显示密度，避免出现文字显示不全或视觉效果过于拥挤的问题。

如果没有更多功能可以展开，或存在其他原因导致无法增列，可以对图标组两侧适当缩进，让图标向内集中，维持图标组的整体感与辨识度。

2.2.4.4 按钮、搜索框、输入框与提示
按钮（Button）、搜索框（Search bar）、输入框（Text field）、提示（Tooltip）、底部提示（Snackbar）等独立存在的组件，在响应式变化的基础上，通常还要添加最大宽度限制，以避免大屏上横向过度拉伸，占满整个屏幕，影响用户辨识与使用。

2.2.4.5 列表与表单
列表（List）元素通常存在左右两部分内容，在适配大屏时同样需避免横向过度拉伸，两部分内容难以对应。如果列表项没有严格的分组或顺序性，可以采取增列的方式，并排显示多列内容，间接降低每列列表的宽度。

如果列表存在明确的顺序性，不适合多列呈现，如表单、功能设置、排行榜等场景，建议采取缩进的方式控制列表宽度。

除此之外，中、大屏上，也可以考虑将列表转化为灵活性更强的其他形式，如卡片，规避屏幕宽度造成的拉伸。

2.2.4.6 卡片
卡片通常以网格卡片组或卡片流的形式呈现。适配过程中，一般采取增列的方式，在一行中显示更多张卡片，既能控制内容尺寸，也可以保持整个区域的信息密度不下降；
卡片显示的列数一般与栅格栏数匹配，即中屏下展示的列数为小屏下的 2 倍，大屏下为 3 倍；

部分场景下，需要控制中、大屏上增加的卡片列数，如：

• 卡片高度相互不对齐的卡片流场景下，列数过多可能导致用户忘记哪些已经浏览过；
• 卡片上文字内容较多时，列数过多容易让用户产生阅读压力；
• 卡片展示媒体内容，且没有对应的详情页时，列数过多时卡片尺寸较小，不利于内容的清晰呈现。

针对以上场景，建议在栅格增列的基础上，适当减少 1-2 列内容，或允许用户在不同的列数之间切换。

此外，卡片是灵活性极强的容器。大屏上，可以通过改变自身的布局与形态，适应各种不同尺寸与形态的空间。根据实际情况，还可以将媒体内容显示得更大，或展示更多的信息与操作项，进一步提升浏览与使用体验。

结合增列与卡片变形，开发者可以打造出更为多变与更具表现力的界面。

2.2.4.7 运营图片
运营图片（Banner）在适配中、大屏时，根据图片数量，有两种不同的处理方法。
单张图片
如果仅有单张运营图片，建议分离前景与背景元素。中、大屏上，保持图片容器高度不变，宽度跟随屏幕响应式变化。在此过程中，背景元素始终填满容器，前景元素显示在屏幕中间区域。根据需要，可以进一步调整前景元素的尺寸或位置，以优化最终的视觉效果。

多张轮播图片
存在以轮播（Carousel）形式展示的多张运营图片时，可以改变设计样式，比如在当前图片的基础上，同时展示前后两张图片。在不改变基本操作方式的情况下，避免图片容器被拉伸。

2.2.4.8 弹出层
上下文菜单
关联弹出的组件，如上下文菜单（Contextual menu）、相关操作选项（Contextual option）等组件，需始终出现在操作触发的位置附近。中大屏上，请注意维持应用的整体感，建议允许此类组件跨越窗格。

弹窗与面板
弹窗（Dialog）、面板（Bottom sheet）等模态弹出层组件，如果保持与直板机相同的规则，在折叠屏手机、平板上可能会被过度拉伸，产生强烈的遮挡感，并影响用户对内容的阅读与理解。

中、大屏上，建议限制弹窗、面板等元素的宽度，并居中呈现。在减少遮挡感的同时，可以保持内容不被过度拉伸，保持较好的辨识度。

对于执行快速设置或展示辅助信息的面板，也可以充分利用屏幕空间，使用侧边面板（Side sheet）展示在页面内，提供轻量、自然的操作体验。

2.2.4.9 导航栏
大屏断点区间内，如平板横屏状态下，使用侧边导航栏（Navigation rail）、导航抽屉（Navigation drawer）取代底部导航条（Navigation Bar）进行应用内的导航。充分利用屏幕的宽度空间，并同时减少对纵向内容的遮挡感。

2.2.5 设备特性适配

设备适配的关键在于结合设备特性，挖掘体验设计点，在断点自适应布局的基础上进一步优化用户的使用体验，或为用户提供独特的功能与使用方式；
适配过程中，通常需要考虑以下设备特性：

• 屏幕数量、特征与打孔形式；
• 使用距离与使用姿态；
• 配件与输入方式；
• 独特的硬件或功能；
• 按键、摄像头等外露硬件的所处位置。

2.2.5.1 使用姿态适配
操作热区适配
① 横折手机
横折手机展开后，屏幕尺寸接近于平板设备，用户通常难以在单手握持的基础上完成所有操作，使用姿态会转变为双手握持，或一手握持一手悬空操作。其中，双手握持进行使用时，根据手指的触达范围，通常可以将屏幕分为以下四个区域：

对于工具类应用，在设计中屏布局时，需充分考虑横折手机内屏的操作触达范围，优化功能排布，避免把高频使用的按键放置在手指难以触达的区域。

一手握持一手悬空操作时，屏幕上不存在明显操作困难的区域，通常无需针对此姿态进行优化或规避。

② 竖折手机
竖折手机折起时，机身与屏幕尺寸均较小，没有明显难以触达的区域；
但在反向握持时，摄像头凸起可能会影响相邻区域屏幕的操作准确性，建议在设计微型屏布局时，不要在右下方靠近边缘的位置放置尺寸较小的功能按钮。

③ 平板
平板设备通常尺寸较大，难以单手使用。常见使用姿态为以下几种：

• 一手握持设备，一手操作；
• 将设备放置在膝上或稳定表面上进行操作与使用；
• 使用支架进行放置，长时间观看媒体内容。

以上使用姿态下，屏幕均不存在明显操作困难的区域，无需进行特殊的优化与规避；

悬停态适配
除握持外，折叠屏设备还具有独特的悬停支架状态，用户可以将产品半折后立在桌面上，实现离手后的稳定使用。
如果应用中存在视频播放、拍摄等场景，建议对悬停状态进行适配，为用户提供离手播放、悬停自拍等功能，进一步发挥折叠屏设备的体验价值。

悬停状态下，一般可以将屏幕分为三个区域：

悬停状态下，用户的使用姿态与常规状态差异很大，适配时，通常需要设计独立的界面布局；
由于手指最舒适的操作区域均集中在下半屏，而上半屏拥有更加友好的可视角度，在设计布局时，应当将展示性内容收拢至区域 2，将可交互功能下沉至区域 1，并避免区域 3 内出现任何元素，以免内容产生形变或无法准确操作。

2.2.5.2 屏幕打孔适配
为了增加屏占比，部分设备的前置摄像头被设置在屏幕内部。屏幕上会对应进行打孔，以保证摄像头正常获得光线；
用户使用横折手机的内屏时，通常会更频繁进行横竖屏旋转。设计过程中，需要考虑屏幕孔洞在各种方向上的位置，适时调整界面，进行合理规避，以避免孔洞对内容展示或操作产生影响。

识别与规避屏幕打孔的方法，请参见 Google 规范 Support display cutouts。

2.2.5.3 输入方式适配
大屏设备具有更多样的输入方式，包括但不限于键盘、鼠标、触控板、手写笔与语音等。在进行适配时，可能需要针对这些输入设备调整应用的界面，或添加对应功能与交互样式。

光标与悬停态适配
连接鼠标、触控板、感应式触控笔等指点输入设备时，屏幕上会显示光标，以表明接下来操作生效的准确位置。被光标指向时，应用的主要功能与组件应当能够呈现明确的悬停（Hover）态，为用户提供明确的反馈，表示此对象可以交互。
常见的悬停态表现方式为背板高亮或浮起。您也可以根据应用的整体风格，设计更加显著或更具交互感的悬停态样式。

此外，基于光标的指点设备通常还具备辅助按钮，通常为鼠标左、右键。请考虑在适宜的场景下提供对右键的支持，如允许右键点击元素时直接触发上下文菜单等。

焦点与聚焦态适配
用户使用键盘、遥控器、摇杆等非指向性输入设备操作手机或平板时，需要通过焦点来判断当前指向的位置与能够交互的内容，因此，应用的主要功能与组件也需具备聚焦（Focused）态，并支持被上述设备通过走焦操作选中。
常见的聚焦态表现方式为框选或浮起。您也可以根据应用的整体风格，设计更加显著或更具交互感的聚焦态样式。

除此之外，您可能还需要通过调整内容元素的位置与嵌套层级，对走焦体验进行优化。整体来讲，需遵循以下原则：

• 初始焦点清晰明确，可被用户快速发现；
• 关键组件与功能均可通过走焦选中，并可通过顺序走焦遍历；
• 支持横、竖、斜等多种不同输入方向，走焦方向合理，用户能预测前往目标的走焦路径；

手写笔特性适配
手写笔可以模拟显示中自然真实的书写体验，是一种符合用户习惯且更加精确的输入方式，常用于屏幕较大的平板设备。手写笔的基础操作与单指手势基本一致，除了可以完成点击、双击、长按、拖拽等操作外，还有一些独有操作，例如提供跟随压力变化的逼真笔记，用来书写或绘画。
对于以手写输入、标注、绘图为主要功能的应用，建议接入各厂商的手写笔引擎，实现以下特性，以进一步提升用户的书写体验，或提供更多的编辑方式：

• 压力感应：通过笔尖反馈的压力数值，控制笔迹的粗细或者颜色浓淡，模拟真实的笔迹；
• 倾斜感应：对于有些手写笔，可以获得倾斜角度数据，进一步模拟真实的书写体验；
• 笔迹编辑：支持对已绘制的笔迹矢量化，并进一步修改；
• 一笔成型：绘制图形后保持笔尖按住，自动将手绘图形转换为规则的几何图形。

相关接入方法请参见《大屏适配技术指南》第10.3 节触控笔适配

此外，部分手写笔接近屏幕时，屏幕能够自动感应并产生光标，以表明将要落笔的准确位置。应用也可以对光标进行修改，添加更多不同的形态，让用户更容易识别当前使用的工具和状态。

2.2.5.4 减少整页跳转
整页跳转会产生强烈的扰动感，并容易让用户丧失视觉焦点，忘记自己所处的位置与流程进度。屏幕尺寸越大，这样的问题越显著。在折叠屏、平板等设备上，建议使用模态面板代替完整的页面来呈现设置、登陆、支付、新建等临时任务，以降低阻断感，让用户轻量地完成操作。
模态面板通常出现在屏幕中央，以保证足够显著，且便于操作。必要时，可以在后方添加蒙层，进一步增强与后方界面之间的区分度。

此外，也可以通过构建扩充层级或分栏，将下一层级的页面内容组合显示在当前页面中，减少切换时的刷新范围，保持页面中部分内容稳定不变。

2.2.5.5 多屏与多窗特性
折叠屏手机与平板设备上，用户更愿意利用更大的屏幕空间并行运行多个任务。目前主流的系统均提供了三种方法，让应用可以以多窗口的形式并行运行，以满足用户在各种场景下的多任务需求。

• 分屏：用于长时间并行处理多个任务，例如一边阅读文章一边做笔记。窗口位置与状态相对稳定；
• 浮窗：用于长时间轻量观看媒体内容，例如玩游戏的同时观看视频；或者临时处理某个任务，例如观看电影的过程中临时回复微信消息；
• 平行视窗：用于兼容未做布局适配的应用，可以将应用以多实例的方式显示在并列的双窗格中，以解决大屏下的显示问题。由于平行视窗通过系统接口生成，两侧窗格的内容没有绝对关联，用户对操作的结果没有预期，使用体验较差，如无必要，不推荐应用接入与使用。

分屏的比例、浮窗的尺寸均可被用户调节，为了良好支持这些多窗口场景，请确保应用中的每个页面，包括嵌入的 HTML5 内容，都具备响应式变化能力。
在多窗口场景下，尽量支持用户进行一些符合直觉的跨应用操作，如内容拖放等，进一步减少跨应用分享操作步骤，发挥大屏幕在操作效率上的优势。

应用也可以允许用户手动将某个页面固定在一侧，进入自分屏状态，以实现同一应用内并行处理多任务，如一边阅读文章一边聊天，进一步拓宽应用自身的使用场景。

三、多设备响应式设计案例

3.1行业通用型

ShowCase

ShowCase

ShowCase

ShowCase

ShowCase

ShowCase

ShowCase

ShowCase

3.2特殊品类

ShowCase

ShowCase

ShowCase

ShowCase

ShowCase