本文根据绿盟折叠屏UX工作组专家在3月10日“会员创享日”活动分享的《折叠屏UX设计及开发指南解读》主题演讲整理而成。因篇幅较长，本议题分为上、下两篇，本篇为上篇。

一、开合接续

折叠屏设备有开合的特点，屏幕大小会随着开合切换而变化。开合接续需确保信息不丢失、焦点不偏移、交互不中断。折叠态是单手持握，使用体验同普通直板手机类似。设备从折叠到展开时，确保体验接续，不出现页面跳转，任务中断的情况，如在拍摄的场景下，拍摄状态与参数不变；在阅读文章的场景下，视觉焦点区域内容不变。展开态下的体验增值具体表现在有更多的内容，体验更加沉浸，任务并行更加高效。

二、宽屏适配

动态布局是针对设备宽度变化而进行界面版面重排的一种布局方式。动态布局可以细分为“自适应动态布局”和“响应式动态布局”两类。基于6种动态布局，进行各元素的宽屏适配、创新。常见的自适应动态布局的表现形式为：相对拉伸、相对缩放、延伸布局等，界面布局结构不变。常见的响应式动态布局的表现形式为：挪移布局、重复布局、瀑布布局等，界面布局结构调整。

①对于顶部页签与搜索的组合控件，从折叠到展开可参考范式分别是左右的挪移布局、相对拉伸+延伸布局、相对拉伸布局。不建议所有元素等比缩放，显示过大。

②对于Banner广告图，从折叠到展开可参考范式是延伸布局（业界常见），也可以做出其他的创新布局尝试，如刚好露出完整的两张广告图；或者是一张完整的广告图，左右各露出一半(此范式适合购物类APP需要突显中间广告图的情况)；又或者是一张大图加两张小图等创新布局。不建议等比放大，导致图片显示过大，一屏幕内可见的信息较少。

③对于入口图标，从折叠到展开可参考范式是延伸布局+相对拉伸、相对拉伸（折叠屏展开后，入口图标数量不变、大小不变、布局不变，图标间距均匀变宽。但需要避免图标左右边距过大或图标之间间距过大）、挪移布局（折叠屏展开后，图标使用挪移布局，入口图标3行变2行，横向平铺），不建议左右留白过大、信息过密、图标等比放大。

④对于宫格卡片，从折叠到展开建议显示更多列数。

⑤对于上下图文列表，从折叠到展开可参考范式是挪移布局；对于图文卡片，从折叠到展开可参考范式是重复布局。

三、沉浸视听

沉浸视听体验主要表现在显示内容更清晰，用户体验更连续。如在播放视频的场景下，从折叠到展开，视频内容等比放大，需确保视频画面不模糊，横屏播放视频时，注意不遮挡核心视频内容。在观看弹幕视频时，在折叠屏上方次要区域显示弹幕，让展开状态下的视频播放体验更沉浸无干扰。在视频通话时，通过双窗口实现同时在大窗口查看自己和对方的视频画面，充分利用大屏优势实现更佳的体验效果。

四、高效并行

通过分栏快速切换页面、悬浮面板快速筛选、侧边栏快速预览、临时双窗口的方式，减少跳转，任务并行提升效率。

五、总结

最后，工作组专家总结了应用适配折叠屏体验的关键，重点分为开合接续、宽屏适配、沉浸视听、高效并行四部分。开合接续需做到信息不丢失、焦点不偏移、交互不中断页面不跳转。满足6种动态布局（组合控件、广告图、图标、图片、宫格卡片、图文布局、页签等）基础适配规则，就可很好适配宽屏的显示。对于沉浸式的任务，如大图、大视频、游戏等场景下，在展开态除了更大的显示效果，还需要做到不遮挡核心内容、体验更连续。通过分栏可以更高效切换同一应用中的不同任务；通过悬浮&推挤实现更快速的菜单/内容切换；通过临时双窗口的方式，实现主任务与相关任务的并行使用，减少跳转，提升效率。

以上就是折叠屏UX设计及开发指南解读（上篇），后续还会有下篇，敬请关注！