Skip to content

Latest commit

 

History

History
75 lines (57 loc) · 6.48 KB

SPACING_REVIEW.md

File metadata and controls

75 lines (57 loc) · 6.48 KB

WheelPlay 组件间距检查

日期:2026-09-29。

复查更正:上一轮只验证了导航外部布局,遗漏 Bottom Tabs 内部图标和中英文标签的检查,不能据此断言细节已全部完善。本轮已将底部安全区移至独立外层容器,导航内容区最小 80 dp、图标 24 dp;统一选中 / 未选中文字样式和字体留白,消除中英文标签高度差。真机分别选择三个 Tab 后,图标均为 72×72 px 且 Y 坐标一致,标签区域均为 60 px 高且上下边界一致,截图确认完整显示。新增内部可见范围与标签基线测试,界面测试共 6 项通过。 范围:Android 启动 / iPhone / 设置页,以及共用按钮、选择行、开关、卡片、弹窗、扫码页和系统安全区。按既定深色 Material 3 风格进行细节收敛,不重新设计信息结构。本报告不替代网页端的独立响应式审查。

风格检查

通过:卡片分组来自用户明确要求,保持原生 Material 组件,无新增嵌套卡片、装饰渐变或无意义动画。主要问题是组件自身留白与页面间距叠加,而非视觉风格需要重做。

审查评分

以下为本轮有限代码 / 渲染审查的工作评分,不代表完整性能基准或无障碍认证。

维度 修正后 / 4 依据
可访问性 3 保留 48 dp 折叠入口、56 dp 按钮;文字与开关隔开;尚未做 TalkBack 全流程
性能 3 边距在布局时计算,未新增逐帧布局动画;未做设备性能基准
响应式布局 3 检查窄屏、横屏和 130% 字体;更极端字体比例仍需测试
主题与一致性 3 保留 MD3 主题与既有颜色;间距收敛,部分历史尺寸仍在页面内定义
视觉反模式 4 未发现本轮需要处理的装饰性反模式;维持用户指定卡片分区
合计 16 / 20 本轮重点问题已修正

发现与处理

本轮 7 组问题:P0 / P1 各 0,P2 为 4,P3 为 3;均已处理。

严重度 位置 核实的问题及影响 修正
P2 ServerUi.section、iPhone 选择行、无线设置 首个行组件已有 12 / 16 dp 顶部留白,分组又加 16 dp;选择行外层还有 12 / 16 dp margin,造成相关内容显得分离 分组起止间距扣除首尾组件已有 padding;移除选择行与无线设置中重复的外层间距
P2 DiPlayActivity.toggle 仅说明文字右侧留出 16 dp,标题未留相同空隙,大字体标题容易贴近开关 整个文字列与开关之间统一使用 16 dp margin;标题和说明间距统一为 4 dp
P2 ServerUi.content/card 320 dp 屏宽减去页面两侧 24 dp 与卡片两侧 20 dp 后,内容只有 232 dp,容易频繁换行 小于 360 dp 的窗口使用 16 dp 页面边距与 16 dp 卡片水平内边距,内容宽度增加到 256 dp;卡片上下仍为 20 dp
P2 ServerUi.PreferenceRow、DiPlayActivity.choice 选项值只占剩余宽度的 40%,带「默认 / 较低负载」的值出现不自然换行 标题 / 当前值改为均分剩余宽度;行内仅显示当前值,完整选项说明保留在弹窗中
P3 server_button_filled.xml、server_button_outlined.xml 默认上下 inset 使按钮可见表面与外层指定间距不一致,卡片底部视觉留白偏大 上下 inset 设为 0;保留 56 dp 最小高度及 12 dp 垂直文字 padding,长文字仍可增高
P3 DiPlayActivity.refreshService 最后一个备用地址的底部 16 dp 与卡片本身 20 dp 叠加;设置末尾的分隔线、分组间距和页面底部留白也重复 地址之间保留 16 dp,最后一项不额外追加底部 padding;最后一个设置分组不再绘制分隔线,使用页面统一 32 dp 底部留白
P3 页面介绍、帮助按钮与提示 10 / 18 / 28 dp 与附近的 12 / 16 / 24 dp 混用,同类内容节奏不一致 收敛为 12 / 16 / 24 dp;取消说明文字与分组底部重复的留白

相关实现:common/src/main/java/com/shilapi/xcertplay/ServerUi.kt、DiPlayActivity.kt 和 common/src/main/res/layout/server_button_*.xml。

最终尺寸约定

元素 约定
页面水平边距 常规 24 dp;窄屏 16 dp;大屏内容最大约 760 dp
页面起始位置 系统状态栏 / 刘海安全区 + 内容顶部 24 dp,可随滚动经过状态栏
页面底部留白 32 dp,底部导航外层容器另保留系统导航安全区
卡片内边距 上下 20 dp;左右常规 20 dp、窄屏 16 dp
卡片之间 16 dp
卡片标题图标 24 dp,图标与标题间隔 12 dp
设置分组 标题至内容合计 16 dp,内容至分隔线合计 24 dp
普通选择行 最小 72 dp,上下 16 dp;文字列间隔 16 dp、箭头前 8 dp
其他地址入口 最小 48 dp;右对齐,图标 20 dp,文字与图标间隔 4 dp
操作按钮 最小 56 dp;相邻操作通常间隔 12 dp
开关行 上下 12 dp;文字与开关间隔 16 dp;标题 / 说明间隔 4 dp
输入弹窗 水平 24 dp,顶部 8 dp;保留原生对话框按钮区
扫码页 说明及取消按钮水平 24 dp,垂直相邻间距 16 dp

已保留的正确行为

  • 底部导航与系统导航栏背景连贯,内容视口结束于导航上方。
  • 顶部安全区属于滚动容器,状态栏遮罩独立,不占用新的内容高度。
  • 卡片标题图标居中,正文与操作按钮对齐到同一内边界。
  • 选择行支持两行值和省略;小字折叠入口仍保留完整触摸区域。
  • 弹窗和扫码页的留白未发现本轮需要修改的叠加问题,保留现状。

验证与限制

  • :mobile:assembleDebug 通过。
  • ServerNavigationTest 5 项通过:页面切换、状态 / 滚动保留、窄屏 / 横屏适配、原生渲染与安全区布局检查。
  • 增加 320×640 / 100%、360×800 / 130%、800×400 / 100% 三组原生渲染;每组覆盖三页的顶部、中段和底部,共 27 张检查图,位于 common/build/reports/material-ui/spacing/。
  • 对代表性的窄屏、横屏、大字体、设置中段与底部、iPhone 页底部进行目视检查。Robolectric 不含本地认证资产,渲染中的认证提示为测试环境状态。
  • 真机本轮进入锁屏,未完成所有控件的实际点击验证;不将渲染检查当作完整的真机交互验证。

后续人工验收重点为极端字体比例、TalkBack 与具体车机设备;如继续调整,先 /adapt 处理新增尺寸场景,再以 /polish 收尾。