系统栏、应用画布与热区

所有权

应用声明全屏或非全屏，以及是否需要系统 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 推导画布。

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