---
url: /design/system-layout.md
---
# 系统栏、应用画布与热区

## 所有权

应用声明全屏或非全屏，以及是否需要系统 App Bar、底部导航栏。非全屏显示系统状态栏。由系统提供的区域，其背景、图标、文字、触摸分发与刷新都由系统管理，应用不得自行覆盖绘制。

全屏模式可隐藏全部系统栏；如仍请求系统 App Bar 或底栏，按请求占用相应区域。无论是否全屏，都必须有明确返回／退出路径。

系统分配给应用的是全屏宽度的矩形画布。36 px 内容边距由布局规则施加，不能把系统分配宽度错误裁成 612 px，也不能在系统已经加过边距的组件中重复叠加。

## 状态栏

* 屏幕顶部 y = 0，高度 40 px。
* 内边距：左右 24 px，上下 8 px。
* 时间字号 24 px；当前点阵资源中同步图标为 26 × 26 px，Wi-Fi 和电池为 28 × 28 px；无点阵回退时使用 24 × 24 px 图标。
* 左侧建议只显示时间，格式 HH:mm，禁止显示秒。
* 右侧显示同步、Wi-Fi、电池图标与百分比；默认不越过屏幕中轴线向左延伸。
* 状态间距自动计算。空间不足时优先隐藏次要状态，不缩小文字和图标。
* **补充建议**：同步图标静态显示状态，不旋转。时间按分钟边界、状态按实际变化提交更新；隐藏时不为其单独刷屏。
* 24 px 状态文字行框若无法容纳完整字形，应调整字体度量或提交状态栏变更，不静默破坏 40 px 总高度。

## App Bar

* 存在状态栏时，App Bar 可见行顶端 y = 56 px，即状态栏下方留 16 px。
* 可见行高 48 px，因此可见行底端 y = 104 px。
* 内容左右沿 x = 36 与 x = 648。
* 根页标题 48 px、56 px 行框，二级页标题 40 px、48 px 行框，均使用 Medium 500；右侧工具图标 48 × 48 px，图标之间可见 Gap = 24 px。
* 二级页面在标题左侧放返回图标，注册系统 Back 行为，屏幕返回与系统返回按键走同一导航逻辑。
* 返回图标占据左侧 48 px 图标槽，标题在其右侧；标题不再强行占据 x = 36。
* **补充建议**：返回图标与标题间距 12 px；右侧默认最多两个高频工具，更多工具进入独立页面。
* 不显示状态栏但显示 App Bar 时，**补充建议**将可见行置于 y = 16，高 48；不继续保留 56 px 空白。
* 标题、返回按钮与工具按钮不能重叠；空间不足优先缩减标题或工具数量。

## 底部导航栏

* 建议 2–5 项，禁止超过 5 项；1 项不建议作为导航栏，可使用独立操作入口。
* 可见区域含选择指示器共高 64 px，下边缘距屏幕底部 16 px。
* 基准位置 y = 1136…1200，下方 y = 1200…1216 为底部留白。
* 可见图标为 48 × 48 px；最左图标左边缘 x = 48，最右图标右边缘 x = 636。
* 图标间距动态计算，n ≥ 2 时：Gap = (W − 2×48 − n×48) / (n−1)。
* W = 684 时，4 项 Gap = 132 px；5 项 Gap = 87 px。禁止照搬示例 CSS 的固定 Gap = 104。
* 非整数位置取整并分配余数，保证两端位置精确、相邻间距差不超过 1 px。
* 可采用纯图标，不强制增加文字。保持位置和含义稳定，为各项配置语义名称；陌生图标应提供首次说明或可见帮助入口，不以“用户最终能记住”作为唯一可发现性方案。
* 选中态建议使用图标下方短实线指示器；它表示选中，不属于装饰性区域分隔线。
* **补充默认值**：图标置于 64 px 区域的上部，指示线高 4 px、宽 64 px，底对齐 64 px 区域，图标与指示线间留 12 px。
* 用户反馈的屏幕底部 4–8 px 可能不可见，尚未独立硬件验证；既有 16 px 留白已经包含这一考虑，**禁止再机械叠加一次底部安全区**。

## 基准坐标与可用高度

下表是几何分配，不包含应用内部留白。矩形写作 x、y、宽、高。

| 组合                  | 应用画布                        |
| ------------------- | --------------------------- |
| 状态栏 + App Bar + 底栏  | (0, 104, 684, 1032)         |
| 状态栏 + App Bar，无底栏   | (0, 104, 684, 1112)         |
| 状态栏 + 底栏，无 App Bar  | (0, 40, 684, 1096)          |
| 仅状态栏                | (0, 40, 684, 1176)          |
| 全屏，无系统栏             | (0, 0, 684, 1216)           |
| 无状态栏，有 App Bar + 底栏 | (0, 64, 684, 1072)，使用上文补充布局 |

公式：顶部边界取所有顶部系统栏的占用下边缘；底部边界有底栏时为 H−80，否则为 H；画布高度为两边界之差。

**补充建议**：三栏齐全时，应用实际内容在画布内再保留上 16、下 16 px，即建议内容区 (36, 120, 612, 1000)，对应 y = 120…1120。上下额外留白同时承担系统按钮热区的安全缓冲。它不是在屏幕底部 16 px 下再叠加安全区。

无底栏时，画布仍可延伸到屏幕底部，但关键信息与操作默认至少距屏幕底部 16 px。全屏不意味着可以忽略底部可见性。

## 点击热区与系统命中区域

以下为补充建议，用于解决可见图标尺寸与触摸易用性的区别：

* 独立操作优先采用至少 80 × 80 px 的热区；整行列表让整行可点。
* 顶栏 48 px 图标配 24 px 可见间距时，图标中心距为 72 px；不可把每个热区盲目扩成 80 px 宽而造成重叠。可采用 72 × 80 px 热区，或减少工具数量。这是受现有几何约束的紧凑例外，需重点测试。
* 基准顶栏工具热区可在 y = 40…120 内扩展，底栏图标热区可在 y = 1120…1200 内扩展；底部屏幕留白不被再次增加。
* 系统必须同时返回 applicationCanvas 和系统交互保留区域；应用不得在这些保留区域放可点击内容。建议内容区已避开这些区域。
* 相邻点击热区不得重叠；热区不得跨入状态栏、相邻按钮、其他应用或不可见屏幕区域。
* 图标与文字组合应作为一个操作区域，避免把每个小字都变成独立按钮。

## 几何计算示例（补充说明）

三栏齐全时画布为 `(0, 104, 684, 1032)`，建议内容区为 `(36, 120, 612, 1000)`。应用可以在画布内绘制非交互背景，但按钮不得侵入系统工具与底栏扩展热区。

有状态栏和 App Bar、无底栏时，画布为 `(0, 104, 684, 1112)`；按上下各 16 px 留白，建议内容区为 `(36, 120, 612, 1080)`。全屏无系统栏时，按同样留白示例，内容区为 `(36, 16, 612, 1184)`。这些是推荐计算结果，不是新增固定协议。

五项底栏图标左边缘依次为 48、183、318、453、588；四项为 48、228、408、588。每个可见图标宽 48，最右边缘为 636；热区另外分配并检查无重叠。

## 几何交付要求（补充建议）

| 区域 | 决定方 | 作用 |
| --- | --- | --- |
| 系统栏绘制区域 | 系统 | 系统管理背景、文字与图标 |
| 应用画布 | 系统 | 应用可绘制的完整矩形 |
| 内容区 | 应用布局 | 画布内扣除排版留白后的区域 |
| 系统交互保留区 | 系统 | 应用不可放置交互控件 |
| 可见框与热区 | 控件所属方 | 分别说明实际图像与输入范围 |

运行时以系统返回的区域为准，不通过重复扣减 36 px 或底部 16 px 推导画布。

系统几何确定后，工具行、列表、宫格与分页控件的内部留白另行计算。推荐分配及其热区边界见[系统组件留白与区域分配](/design/spacing-and-regions)，不因此改变应用画布。