文档管理中心
官网归档版本搜索屏蔽
此版本文档已归档不再维护,推荐您使用 HarmonyOS NEXT 版本
指南手机/折叠屏/平板Pattern分栏

分栏

分栏是一种层级关系的左右分窗口布局,旨在为宽屏幕设备提供较好的显示效果,以及帮助用户更高效地处理任务。

设计原则

  • 8 栅格以上的设备可支持分栏。
  • 特定类型应用适用于分栏,例如办公类应用、效率型应用、IM 社交类应用(邮件、备忘录、文件管理、设置、短信等)。
  • 允许用户在设置中关闭分栏,或在应用内临时从分栏切换到全屏。
  • 不支持分栏的应用,在宽屏设备上可通过平行视界解决宽屏显示。

基于栅格的分栏布局

8 栅格以上的设备,可分栏;8 栅格以下的设备,不支持分栏。

8 栅格以上设备包括:手机横屏、折叠屏横/竖屏、平板横/竖屏、电脑、电视等。

各设备的栅格规则具体可参考:栅格系统

分栏位置在当前窗口的 40% 或者 50%(业务根据需要选择),左右 2 个区域窗口内的内容根据窗口宽度重新计算内部的栅格数量进行布局。

有父子结构的应用,例如设置、邮件、短信、联系人、记事本。如果父页面底部有页签,需要保证每个页签都适合分栏,避免同一个应用内部分页签分栏部分页签不分栏的不统一情况。

交互规则

应用内开关:在应用内可点击“全屏/退出全屏”按钮,切换到全屏/分栏展示。开启应用内全屏/分栏后,下一次启动应用,依然记录上次的状态。

通过应用内开关,切换到全屏/分栏后:

1. 进入/退出编辑,跟随上一次状态的全屏/分栏。

2. 访问下一层级内容,跟随上一层级的全屏/分栏。

3. 打开新建功能,无论上一层级页面是全屏还是分栏,均全屏显示新建功能。例如新建邮件、新建备忘录等。

分栏种类

多层级应用的分栏

左侧始终是列表结构的首页,右侧内容可切换。例如折叠屏、平板上设置应用的分栏。

单层级应用的分栏

右侧始终是内容详情,左侧可切换到上一层级菜单。例如折叠屏、平板上邮件应用的分栏。

在 指南 中进行搜索
请输入您想要搜索的关键词