前言
在对市场上现有的常见类型的头部应用进行了分析和整理后，我们发现：
- 页面采用的样式及交互结构应与页面内容和典型场景相匹配。同类型的场景下，有近似的业务诉求，相应的，可采用更适合的页面布局和交互结构。
- 在同一个应用内，进而在一个操作流程中，界面样式应趋向于用稳定一致的布局和交互结构，避免页面形式的频繁变化，避免用户对页面内容理解上的困难和体验不一致。
下面，我们从一些常见的特征型场景入手，整理出比较适合于该场景的界面设计样式。应用开发者可以参考这些样例，结合自己的应用的业务类型及具体的业务场景，完成在折叠屏产品上的最佳界面适配和创新设计。
一
门户页面、应用首页面
门户页面，入口和内容集成型的展示页面，常见于商城购物类、新闻阅读类等应用，大部分常见应用的首页也都可以归类成为这种集成式的门户页面。这类页面主要包含两种内容元素：相对固定的商品服务分类入口、相对动态的运营和推荐内容（结合市场活动、用户消费习惯等条件动态生成的信息流）。界面设计应充分利用折叠屏的展开态的大屏优势进行设计，带给用户沉浸式浏览的体验。
下面我们以购物类的应用为例子做分析：
1.单页面延伸
在购物类应用首页、店铺页面等内容展示型页面，开发者可以尝试通过“延伸布局”在同一屏内向用户展示更丰富内容。
在购物的过程中，存在着两类的购物人群：非目的性购物用户、目的性购物用户。
- 针对非目的性购物的用户，可以利用展开大屏向用户展示更多的商品内容，让用户看到更多感兴趣的商品，这样不但提高了用户浏览效率，也为促进转换率提升带来了可能。
- 针对目的性购物的用户，搜索栏往往是用户的高频操作。通过将搜索栏延伸到用户手指更易接触的屏幕两侧，降低用户操作成本，让用户购物体验更方便。
- 单页面的形式，优势是在做折叠屏展开态的适配时，页面不需要做结构调整，如果本身页面是以响应式布局体系构建的，只需要很小的调整，就能够完成宽屏页面适配工作，进而可以近一步推广，将各种宽度类型的手持产品界面进行动态适配。
2.信息分类重组
同样是购物类门户页面，在对页面内容进行清晰分类后，根据属性将内容分为两部分，一部分是固定的商品分类入口，这部分结构相对固定，总数有限，在普通宽度的手机屏幕上不需滚动，一个页面就可以容纳；另一部分，是以长列表或“流”的形式呈现的无限长内容。此种界面布局，是通过类似“挪移布局”的方式，将分类入口和运营推荐内容分开成两个页面，再组合在一起来实现的。
- 此种布局，在构建之前需要对页面内容做一定归类整理，将“分类入口”与“内容信息”分开。左侧页面相对固定，尽量在一个页面内呈现，保持页面固定，不纵向滚动，点击任一入口可直接打开该分类页面；
- 右侧为长列表或信息流，可以连续不断上下滚动提高信息，点击任何一个可打开详情页面；
- 此种布局结构作为门户页面的固定形式，给用户一个稳定清晰的页面理解。任何新打开页面可以以新页面全覆盖形式打开，而不要采取替换当前组合页面中某一边的空间的形式出现（这种简单替换会提升用户对内容和当前所处状态的理解难度，增大迷失感）。
二
媒体内容的播放与呈现场景
当前，视频、小视频与直播类型的应用或业务场景很常见。这类的核心场景都是沉浸式的视频播放和互动，围绕这个核心场景，此类应用有如下特点：
- 门户和列表页面，海量视频内容资源（一目十行）
- 沉浸式视频播放状态（持续粘性）
- 简单的信息架构，层级扁平（适合做特殊设计优化）
- 快捷的手势交互，易学，沉浸感强（操作流）
- 注重作者与观赏者的互动（社交因素）
- 探索延展相关业务：多方同台直播、视频内商品推广（商业机会）
1.视频列表页面
由于视频类的内容，有不同的长宽比例之分，因此，在列表态中，往往采取宫格或瀑布流形式来呈现。页面布局可以采用单页面，根据视频的格式进行合理排布。例如小视频的竖屏格式的视频列表，在普通手机上可以采取双列，而在折叠屏展开态，就可以扩展为三列的形式，可以保持视频显示面积的相对可控，单页面显示的视频数量也有一定增加：
2.沉浸式的视频播放界面
普通视频（横版16:9）的播放界面，在普通手机竖屏下就会有详情页面，视频在页面顶端进行播放，页面下部汇总视频的相关信息、评论互动等。在折叠屏展开态下，此页面在保持原有结构的情况下，因为屏幕宽度变宽，视频的左右撑满屏已经与沉浸式播放模式相当，用户已经不必须切换到全屏沉浸播放态去最大化欣赏视频，此种显示模式使用了相对拉伸和延伸布局的方式，从而减少了页面跳转，给予用户更简单的视频播放体验。另外，很多视频播放类应用还保留有普通手机的横屏全屏沉浸播放模式，在折叠屏展开态，此模式出于兼容性的需要，可以保留，但因为折叠屏展开态的长宽差异不大，将屏幕转90度可以获得很小的播放面积收益，但因此造成的用户转动手机带来的负面体验却很大，因此，建议在这进入种沉浸式全屏播放时，保持手机的姿态不变的方案会有更好的用户体验。只在用户手动旋转设备后跟随方向进行旋转。
小视频的播放形式：保持视频播放的最大化，将原本重叠在视频上的文字和交互入口，转移到页面的边缘上，相当于从折叠态到展开态的转换过程中，对界面上的用户交互层元素（如各种入口、按钮等）做了相对拉伸型的布局变化。这样调整后，一方面减少对视频内容的遮挡，另一方面，有利于使用者在屏幕边缘进行方便的操作。同时，这样的方案没有改变页面的逻辑架构，不同形态的页面设计可采用动态布局的定义方法，达成不同设备上最大程度一致的沉浸体验。
3.快速浏览与视频播放组合页面
视频类应用，尤其是小视频类应用，用户经常会碰到在宫格阵列或瀑布流的视频缩略图列表界面寻找感兴趣的视频，点击后打开观看的情况，这种场景的架构在折叠屏展开态中体现为基本形态“列表 详情”类的组合页面，其中，一侧以宫格或瀑布流的形式，展示小视频的列表，另一侧为沉浸式播放的视频。此种页面布局的优势是能够进行快速的视频浏览，帮助用户在海量视频列表中快速找到自己喜欢的，点击在右侧打开进行播放；同时，也展现了最大化的视频播放面积，一定程度保持了沉浸式欣赏视频的状态。
以下具体的例子：沉浸视频播放与视频作者主页的结合，组合页面形式也是主导 辅助，左侧页面可以上下进行视频切换，浏览同作者的视频作品，切换顺序与右侧的下部的宫格中视频的顺序相同；右侧的页面随时可以关闭，关闭后页面回归初始的沉浸式单个视频的状态。
此种场景，还有一种轻量化模式，可以在小视频独占沉浸播放的模式下，采用推挤的手势，将一个类似于精简列表的单列视频流以边条形式拖入屏幕，从而更好地保持视频沉浸播放的状态。
4.直播 互动的组合页面
在折叠态中，互动内容会以浮层形式重叠在图像上，而且因为避免对直播图像的遮挡，文字内容的行数受控，得不到充分的展示，尤其在互动内容多，滚动速度快的情况下，互动信息展示不充分。因此，在展开态，可以考虑充分利用屏幕空间，将互动内容浮层与直播画面剥离，分开在页面两侧分栏显示，形成主导 辅助的组合页面形式。既保持了视频直播内容的充分展示，也同时兼顾图文信息流的持续刷新，给予互动文字区更充分的空间促进互动和相关运营内容的露出，促进业务提升。
5.音频播放类
音乐播放、听书、有声读物。这类应用有一个特点，就是持续性非独占的声音媒体播放，这包括应用整体在后台进行播放，以及应用内在媒体播放的同时，展示媒体列表及媒体的其他信息。这种应用内多任务机制的特点是：
（1）播放界面相对稳定。
（2）同一时刻只有一个媒体播放进程。
（3）播放的过程与媒体浏览互不影响。
综合下来，我们看到，这种形式与列表 详情的模式在本质上是一样的，因此，此类应用，在展开态的布局形式可以采取左侧为浏览页面，右侧为固定的媒体播放控制界面。
三
图文媒体类浏览阅读场景
新闻类应用，本质是内容信息的聚合，因此，应用首页面和各分类的首页面、单条新闻的详情界面，这两个状态是新闻类应用的典型核心场景。
1.图文内容列表浏览
维持单页面形式，内容区采取双列形式，标题栏和底部页签横向贯通，采用相对拉伸的样式进行响应式变化，达到最佳的页面利用，承载较多的新闻条目，发挥出了折叠屏展开状态的优势，同时也不改变应用的使用习惯。
在点击打开一条新闻时，可以采取列表 详情的组合页面形式来进行展示。
2.新闻详情
可以参考网页和传统媒体的版面设计方式，在内容区中适当采用分栏、留白、内容分块等形式，提升版式的灵活性和多样性，给予用户更丰富的沉浸式阅读体验。
四
多任务类场景
应用内多任务场景，一般出现在结构复杂，业务种类丰富的应用中，例如复杂的社交应用、有丰富媒体内容展示的电商购物、富媒体播放等应用。下面就针对最典型的场景进行分析：
1.边逛边聊
购物类应用的商品详情页，在信息架构上，可认为属于“主导 辅助”关系类型， 除了主任务外，还有相应的分支任务，例如购物的过程中咨询客服，查看宝贝评价。更好的体验应该减少购物过程中的频繁页面跳转，给用户更沉浸的购物体验。
当用户点击打开分支任务页面时，开发者可以尝试通过“应用内分屏”的形式，达到“边逛边聊”的多任务效果：
2.商品对比
用户在商品详情页，还有一个较常见的诉求场景，就是“商品对比”。基于普通手机的购物对比方式，需要用户退出该商品详情，切换到另外一个商品进行对比，一方面，对比时增加用户记忆成本，另一方面，图片效果对比不直观。
开发者可以尝试通过“应用内分屏”的形式，左右分屏同时展示两个同类型的Activity（内容不相同），达到同时对比的目的。
3.聊天列表 对话详情
采用列表 详情的基本分栏型的组合页面，将支持快速切换对话的左侧列表页面与右侧的对话详情页面进行组合，达成高效率沉浸式聊天的效果。
4.边聊天边看文章
在阅读文章的时候，有新消息到来，用户通过点击按钮或者特定的触发方式，激活分屏状态，实现聊天和阅读同时进行，聊天页面可以在列表和聊天详情两种状态间切换。左右页面完成两个不同任务，相互之间还可以借助内容拖拽等能力进行快速的信息交换，充分发挥折叠屏展开态的屏幕形态优势。
5.悬浮窗悬浮条
对于非沉浸式的媒体播放类的场景，例如将朋友转发来的在线音乐链接打开播放，同时，用户继续完成聊天、读文章等主要任务，这种情况下，媒体播放的功能以悬浮窗（视频播放）、悬浮条（音乐播放控制）等形式呈现给用户，方便用户识别当前播放状态，并可以方便快捷地对播放过程进行控制。
随着折叠屏手机的发布，我们看到未来手机的形态可能会朝着柔性手机方向发展，那么，让我们来思考一件事：对于折叠屏上的移动应用使用场景，UX设计师可以探索怎样的设计模式呢？本篇文章依据折叠屏的使用场景，简要分析了可能会出现的界面设计方法。开发者们可参考文中样例，接下来我们还会推出开发指导系列文章，敬请关注！
·END·
