华为资深专家解读折叠屏组合页面设计
组合页面设计是将原先两个或多个页面的内容，合并到一个新页面中以分栏或其他形式呈现出来，形成跨页面的交互，从而在适合的场景下构建出新的页面组合样式和新的用户体验。
组合页面设计是将原先两个或多个页面的内容，合并到一个新页面中以分栏或其他形式呈现出来，形成跨页面的交互，从而在适合的场景下构建出新的页面组合样式和新的用户体验。
在此之前，软件绿色联盟已经推出了折叠屏UX设计规范系列①、②，除了《折叠屏 ② |低跳出，高留存的折叠屏单页面布局设计就该这么做!》阐述的针对单页面内的动态布局方式外，其实还可以利用组合页面设计的构建方式。组合页面设计让布局设计更加生动有趣，淡化单调的设计，赋予页面更强的生命力。一起来看看规范的详细内容吧~
一 组合页面设计
不管是哪种折叠方式，对用户来说是新增了一块可折叠的屏幕，而这新增的屏幕使得1+1大于2，手机能变换为平板。UX设计师首先需要思考折叠屏在展开态不仅可以在单页面内呈现更多的内容，还可以将不同页面的内容同时显示，为用户创造新的操作体验。
当应用中的两个页面间有相互直接的关联关系时，可以考虑采用组合页面的方式提供更好的体验。组合页面之间的关系类型直接影响着如何对页面信息进行组合呈现，应用需要根据每种不同的关系类型，选择合适的信息架构样式。
组合页面之间有如下三种关系类型：
1. 层级关系
2. 主从关系
3. 并列关系
层级关系
层级关系有多层级和单一层级两种。
多层级
多层级关系有完整的多层结构，例如复杂的系统设置菜单，海量内容(如综合电商的商品，视频、图片或音乐的媒体资源，新闻网站的海量新闻)的门户及多级分类子页面。
此类型的交互逻辑特点：
· 除了第一级的基础分类以外，下属各级分类也以列表形式呈现。
· 末级列表页面中的元素为最小内容元素，如单个商品，单个媒体素材，单条新闻等。
信息架构设计要求：
· 需要同时满足“用户可感知当前的所处位置”以及“需要时可以找到想要的内容”两个条件。
· 为了达成“用户可感知当前位置”的要求，避免用户的迷失感，页面组合中左侧页面需固定显示根列表，用户随时可以通过对左侧的操作，重新回到一级子列表中;也可以通过选择一级列表中的分支入口，快速进入另一个一级分支。
· 页面组合中右侧页面的操作可以保持普通手机的“层层深入”，并借助返回操作“层层退出”的导航定义。
· 为了达成“需要时可找到”的要求，建议保持固定的搜索入口在屏幕的固定位置，帮助用户随时找到自己所需的元素或分类。
单一层级
单一层级结构一般以“列表+详情”形式呈现，列表中的每个元素都是末端元素，元素中没有二级分类列表。例如邮件、信息、备忘录等内容型元素的列表。
此类型的交互逻辑特点：
· 列表中只存在单独的元素，没有子列表，左右两侧内容属性固定，较少用户迷失。
· 点击左侧中某一个条目，右侧打开对应的详情内容。
· 用户可以借助在左侧列表中点击任意一个条目，在右侧快速打开对应的详情内容，实现内容快速切换。
层级递进关系的信息架构样式
层级递进关系的信息架构采用分栏布局样式。
分栏左侧的列表形式是信息架构概念上的列表，可以是普通的文字列表，也可以是宫格、瀑布流等适合于复合媒体元素的列表。
· 为了保证分栏左右两侧内容呈现的均衡，页面的分割线位置可以由系统或应用进行规范化定义(例如纯文字类型的分栏左右页面宽度比例设为4:6，或采用栅格布局系统在8栅格下采用3:5的比例)。
主从关系
在主从关系类型中，一侧主导页面为沉浸式场景;辅助页面在另一侧，呈现评论、互动讨论、参考信息等相关内容。可根据沉浸内容情况分为左右或上下的组合页面结构。
此类型的交互逻辑特点：
· 两部分之间相互独立，且有明显的主从关系。
· 辅助侧依赖主导侧存在，如果主导侧关闭或切换，辅助侧页面不能单独存在，需同步关闭或切换。
· 主导侧的内容呈现，没有受到打扰和中断，持续保持最佳的沉浸状态。
· 辅助侧的内容用户可以进行滚动浏览，适合于信息流数据，用户可参与互动。
主从关系的信息架构样式主要有如下几种，应用可根据具体场景进行选择：并列分栏主要和辅助部分并列显示，可单独进行滚动查阅。从属部分依赖于主导部分存在。
Fig并列分栏
悬浮窗面板
Fig悬浮面板
侧边栏
从属信息默认以侧边栏形式显示，通过界面比例和视觉效果表现从属关系，不影响主要信息的展示，同时能快速浏览或操作从属信息。
Fig侧边栏
推挤
Fig推挤
应用示例
小视频类应用，左侧为视频播放页面，点击视频作者头像，打开视频作者的个人主页，左侧视频播放页面为主导页面，右侧的作者主页为左侧视频的辅助页面。
并列关系
在某些情况下，用户需要对同类型的两个内容进行对比。该类型的关系，两页面为同类型内容，地位平等。
并列关系的信息架构样式主要有如下几种，应用可根据具体场景进行选择：
相同类型内容的页面并列：两边有相同的页面布局、各段信息相互对应。
不同类型的内容页面并列：两边页面布局和内容不同，但相互间有关联性。
Fig 不同类型的内容页面并列两边页面布局和内容不同，但相互间有关联性
应用示例
购物应用中，下单前对两个相似商品的情况进行详细的对比。在现有的普通手机上，用户需要退出A商品详情，经过多步操作后才能切换到B商品的详情，通过记忆进行详情对比。整个对比过程增加用户记忆成本，同时，图片效果对比不直观。因此，并列对比类型的页面组合关系方便用户对两个商品的信息内容进行更详细的比对。
在这种组合页面下，左右两页面为同类型内容，地位平等，相互间无主次和从属关系，
因此页面分割比例应为1:1。
Fig商品对比
今天所讲解的这些组合页面设计布局是经过时间洗炼的经典设计，挑选合适的设计趋势同这些布局结合起来，常常能够带来不错的效果。以上内容为《折叠屏UX设计规范》中的组合页面设计规范相关的内容。后续我们还将推出各领域应用的场景设计案例等折叠屏适配系列文章，欢迎继续关注!
WPS Office是一款面向macOS用户的综合办公套件，将文字处理、电子表格、演示文稿、PDF工具、模板与云协作整合在同一应用中。它兼容常见Microsoft Office格式，支持Intel及Apple芯片Mac，基础功能可免费使用，
Shapr3D是一款面向工业设计、机械工程、建筑概念和三维打印工作流的CAD软件。Mac版采用Parasolid建模内核，支持草图约束、实体建模、工程图、可视化渲染及常见CAD格式交换，并可通过账户在多台设备之间同步项目。
REAPER是Cockos开发的数字音频工作站，提供多轨音频与MIDI录制、剪辑、处理、混音和母带制作工具。Mac版兼容Intel与Apple芯片，支持AU、VST、VST3、CLAP等插件格式，并提供高度可定制的工作流程。
Ableton Live 是面向音乐制作人与现场表演者的数字音频工作站，提供编曲视图、独具特色的现场视图、音频录制、MIDI创作、实时变速、乐器及效果器。Mac版原生支持Apple芯片，并可连接音频接口、MIDI控制器和第三方插件。
Adobe After Effects 是面向动态图形、影视特效与视频合成的专业创作软件。它提供关键帧动画、遮罩抠像、运动跟踪、三维空间、文字动画和表达式等工具，并可与 Premiere Pro、Photoshop、Illustrator
Adobe Audition 是面向播客、影视后期、音乐制作及内容创作者的专业音频工作站，提供波形精修、多轨录制与混音、频谱编辑、降噪修复、响度匹配和效果处理工具，并可与 Adobe Premiere 协同完成视频声音制作。
Adobe Bridge 是面向摄影师、设计师及内容团队的免费数字资产管理工具，可集中预览照片、视频和 Adobe 项目文件，并利用评级、标签、关键词、元数据、筛选与收藏集完成分类检索。它还支持批量重命名、格式导出、相机导入及 Camera
Adobe Illustrator 是 Adobe 推出的专业矢量图形设计软件，适合在 Mac 上制作标志、图标、插画、包装、信息图及印刷版面。它以路径和锚点构建可无损缩放的图形，并提供钢笔、形状、文字、图像描摹、渐变、画板及生成式功能。
Adobe InDesign 是面向印刷品与数字出版物的专业版面设计软件，可在 Mac 上制作书籍、杂志、宣传册、海报、报告及交互式文档。它提供精细的文字样式、网格、母版、长文档管理和印前输出能力。
Adobe Lightroom Classic 是面向桌面摄影工作流的照片管理与后期处理软件，可将原始照片保存在本地硬盘，通过目录、关键词、评分和收藏夹高效整理图库，并提供 RAW 冲印、蒙版、镜头校正、批量同步及多格式导出等功能。
Adobe Media Encoder 是 Adobe 推出的专业音视频编码与转码工具，可通过队列、预设和监视文件夹批量完成格式转换、代理文件创建及多平台成片输出，并与 Premiere Pro、After Effects 等软件紧密协作。
Adobe Photoshop 是面向摄影师、设计师和内容创作者的专业图像处理软件，提供图层、蒙版、选区、修复、调色、文字排版、智能对象及生成式编辑等能力。Mac 版支持 Intel 与 Apple Silicon 处理器。
Adobe Photoshop 是面向摄影师、设计师和内容创作者的专业图像处理工具，可在 Windows 上完成照片修饰、选区抠图、图层合成、文字排版、绘画及生成式编辑。软件采用订阅授权，由 Creative Cloud 管理安装、更新与许
Adobe InDesign 是面向印刷与数字出版的专业页面排版工具，可制作书籍、杂志、宣传册、海报、交互式 PDF 和电子书。它提供精细的文字样式、多页面管理、印前检查及多格式输出能力，并能与 Photoshop、Illustrator
Adobe Illustrator 是用于绘制矢量图形、插画、图标、徽标和版式的专业设计工具。它以路径和锚点为核心，作品放大后仍能保持清晰，并提供画板、文字、渐变、图像描摹及精确变换等功能，适合品牌视觉、印刷物料、数字界面和商业插画创作。
Adobe Bridge 是 Adobe 推出的创意资产管理工具，可集中预览、分类和查找照片、视频、PDF及多种设计文件，并支持元数据、关键词、评级、批量重命名和格式导出。它可与 Photoshop、Illustrator 等应用衔接，
Affinity Photo 是一款面向摄影师、修图师和视觉设计人员的桌面图像编辑工具，提供 RAW 显影、多图层合成、蒙版、实时滤镜、批处理和色彩管理等功能。原独立产品已停止销售，其照片编辑能力已延续至免费的新 Affinity 应用；
Adobe Lightroom Classic 是面向 Windows 桌面摄影工作流的照片管理与无损编辑工具，可通过目录集中整理大型图库，并完成 RAW 显影、局部蒙版、批量调整、打印和多格式导出。它强调本地文件管理与精细控制，
Figma 是面向产品设计与开发团队的云端协作平台，可在 Windows 桌面客户端中完成界面绘制、组件管理、交互原型、评论评审和开发交付。文件保存在云端，多名成员能够同步编辑并共享设计系统；官方同时提供免费 Starter 方案及按席位计
Affinity Designer 是面向矢量图形、数字插画和界面设计的专业创作工具，可在矢量、像素与导出工作区之间快速切换。它提供曲线编辑、形状构建、画板、排版、图层和专业色彩管理，并支持常见设计文件的导入及多种印刷、网页格式输出。
Capture One Pro 是面向摄影师和影像团队的专业桌面照片处理工具，提供相机定制色彩配置、RAW转换、图层与蒙版、联机拍摄、目录及会话管理等功能。它适合棚拍、人像、商业产品、婚礼和风光摄影，
Adobe Acrobat Pro 是面向专业 PDF 工作的综合解决方案，可在 Windows 中创建、编辑、转换、比较、整理和保护文档，并支持表单、电子签名、扫描件文字识别及敏感信息永久遮盖。订阅还包含网页、移动服务和云端协作能力，
Adobe After Effects 是面向动态图形、动画与影视视觉特效制作的专业工具，可完成关键帧动画、图层合成、遮罩跟踪、抠像、文字动画和二维三维元素整合。Windows 版通过 Adobe Creative Cloud 安装及更新，
DaVinci Resolve是Blackmagic Design推出的一体化影视后期工具，将素材管理、非线性剪辑、专业调色、Fusion视觉特效、Fairlight音频处理和成片交付整合在统一工程中。免费版已覆盖多数个人创作需求，