首页、人脸管理与健康宣教 UI 调整方案
记录日期：2026-07-28 ｜ 项目：MultipurposeMachine ｜ 状态：已实施并完成构建验证
目标：根据真机页面反馈，对首页顶部背景、人脸管理头像和健康宣教分类导航进行局部调整，在不改变接口、数据结构和业务流程的前提下，提高背景层次、人员头像辨识度以及分类导航的清晰度和可操作性。
改动边界
- 仅修改用户明确指定的图片资源和页面 UI。
- 不修改首页功能入口、人员查询与头像上传、文章分类接口、文章筛选及详情跳转。
- 共用控件的新增行为按页面显式开启，避免影响原有餐次选择页面。
- 不处理工作区内其他既有修改，不执行 Git 暂存、提交、推送或分支操作。
最终方案
首页顶部背景
- 针对“膳食营养 e 键通”顶部区域输出深色、浅色两版背景。
- 当前页面继续使用深色版，增强顶部卡片与整页主蓝色背景的明暗对比；浅色版作为备用资源保留。
- 两版均保留 DNA、六边形、分子节点、青色横线和中部标题留白。
- 图片四个圆角外侧使用真实 Alpha 透明通道，不再保留黑色角块。
资源文件：icon_home_top.png、icon_home_top_light.png
人脸管理头像
FaceManagerActivity 使用页面专用人员 item，避免影响其他复用旧布局的页面。- 真人照片统一使用圆形裁切，头像容器为
180 × 180，圆形半径为 90。
- item 高度使用内容自适应，由头像直径、姓名和上下留白自然撑开。
- 网络图片和 Base64 图片使用相同圆形裁切规则。
- 默认“暂无图片”四周各增加
10 内边距，可见宽高各缩小 20。
- 真人头像加载成功后清除内边距，列表复用不会残留默认图尺寸。
涉及文件：ShowUserListAdapter.java、face_manager_user_item_layout.xml
健康宣教一级分类
- 选中状态保持项目蓝色背景、白色文字和底部向下箭头。
- 未选中状态调整为白色背景、黑色文字，强化状态对比。
- 分类名称、数量和切换逻辑继续来自接口数据。
健康宣教二级分类
- 复用餐次选择的分段样式：浅色整组背景、蓝色选中段、选中白字、未选中黑字。
- “全部”作为正式二级分类项计入总数量。
- 每项宽度固定为二级分类当前可用总宽度的
1/5。
- 少于 5 项时保持单项宽度并整体居中；等于 5 项时完整铺满；超过 5 项时左右滑动。
- 切换一级分类时滚动位置回到首项；同一一级分类内切换二级项时保留当前位置。
- 只有健康宣教页允许横向容器接管滑动手势，餐次选择页面保持原有触摸行为。
- 文章接口、分类节点映射、“全部”文章集合、分类筛选和详情跳转保持不变。
涉及文件：HealthEducationActivity.java、SegmentedMealTabView.java、activity_health_education.xml
关键实现规则
| 场景 | 规则 | 结果 |
|---|
| 首页背景 | 深色版在用、浅色版备用 | 顶部卡片与页面主背景形成明暗层次 |
| 图片圆角 | 圆角外 Alpha 为 0 | 四角无黑块，可透出页面底色 |
| 真人头像 | 180 × 180 圆形裁切 | 人脸照片展示统一 |
| 默认头像 | 四周各 10 内边距 | 可见宽高减少 20 |
| 一级分类普通态 | 白底黑字 | 与蓝底白字选中态形成对比 |
| 二级分类单项 | 可用宽度的 1/5 | 首屏最多完整展示 5 项 |
| 二级分类少于 5 项 | 保持单项宽度并整体居中 | 不因数量少而异常拉宽 |
| 二级分类超过 5 项 | 横向滚动 | 分类数量动态扩展 |
验收标准
- 首页顶部卡片与页面主背景能明显区分，四个圆角外不出现黑色。
- 深色、浅色背景均保留原主题元素和标题安全区。
- 真人照片为圆形，item 高度无裁切或过量留白。
- 默认“暂无图片”比原显示尺寸缩小
20，真人头像尺寸不受影响。
- 一级分类普通态为白底黑字，选中态视觉保持不变。
- 二级分类 1 至 4 项整体居中，5 项铺满，超过 5 项可左右滑动。
- “全部”计入二级分类数量并正常筛选文章。
- 切换一级分类后从二级分类首项开始显示，餐次选择控件不受影响。
验证结果
- 两张背景图均为
1967 × 800、RGBA 格式，四角 Alpha 值为 0，主体内部 Alpha 值为 255。
- 相关布局和颜色 XML 已通过格式检查。
- 目标文件已通过差异格式检查。
- 各阶段均使用 JDK 8 执行 Debug 构建并成功。
BUILD SUCCESSFUL in 19s
100 actionable tasks: 22 executed, 78 up-to-date
实施结论
本方案已全部落地。首页顶部区域获得更清晰的背景层次和透明圆角；人脸管理头像实现统一圆形展示并优化默认图尺寸；健康宣教一级分类强化默认与选中对比，二级分类统一为餐次分段样式，并按五等分、少量居中、超量滚动的规则适配动态分类数量。
当前未安装 APK，最终亮度、圆角融合、头像间距、分类文字可读性及滑动手感仍建议在目标设备上完成一次真机验收。