4.7 KiB
4.7 KiB
微信式会话页与我的页 UI 收口设计
背景
当前原生 Android 客户端已经完成了大部分微信式回退,但 会话 根页和 我的 根页仍然存在明显的产品语言不一致:
会话页还保留较重的卡片感和控制台式信息密度我的页虽然已经是列表结构,但顶部仍然更像后台资料卡,而不是微信“我”- 两页放在一起看时,像是两个不同产品,而不是同一套移动端体验
本轮目标不是改数据模型或功能范围,而是把这两页的视觉、层级、点击区和回退后的微信式产品语言彻底统一。
目标
会话根页改成微信式一行一条聊天列表,不再是厚卡片流我的根页改成微信“我”风格的大头像资料区 + 白底菜单列表- 保持现有功能和数据结构不变,不为了收口 UI 去改坏线程、群聊、附件、登录、返回链路
- 把这两页的交互代码和 UI helper 一起校验,避免只换视觉、不修点击区和层级
非目标
- 不改会话数据模型
- 不改线程名 / 文件夹名 / 后台数量动态图标规则
- 不改主 Agent / 审计对话的置顶逻辑
- 不重做设备页
- 不动 Web UI,只收口原生 Android
设计概览
1. 会话页
会话页要回到微信聊天列表的感觉:
- 每个会话项从“白色厚卡片”改成“白底列表项”
- 保留现有三层文本信息,但重新压视觉层级:
- 第一行:线程名,主信息,粗体
- 第二行:所属文件夹名,弱于主标题
- 第三行:最后一条消息预览,进一步降权
- 右侧保留两层:
- 最后消息时间
- 后台活跃动态图标与未读信息
主 Agent、审计对话继续作为普通置顶会话显示,不做特殊卡片- 列表项之间只保留轻分隔和留白,不再依赖阴影和大圆角强调层级
2. 我的页
我的页要改成微信“我”的结构:
- 顶部改为一整块资料区,不再使用独立悬浮卡片
- 资料区结构:
- 左侧大头像
- 右侧昵称
- 第二行账号
- 第三行一条很轻的身份说明
- 下面所有入口都收成纯白菜单列表
- 当前保留入口不变:
账号与安全设置运维与修复AI 账号技能关于
AI 账号 / 技能 / 运维与修复视觉上与其它入口完全同级,不再做“高级功能”强调
3. 交互与点击区
这轮不仅收视觉,也会校验功能入口的交互代码:
- 会话列表整行可点,右侧时间和动态图标不应抢主点击
- 我的页每一项整行可点,不允许只点文字有效
- 会话进入、返回、底部 tab 切换逻辑保持现状,不因 UI 收口被破坏
- 顶部安全区处理继续沿用
BossWindowInsets
实现边界
直接重写的 UI helper
BossUi.buildConversationRowBossUi.buildSimpleProfileHeaderBossUi.buildWechatMenuRow
必要时允许新增更小的私有 helper,把“会话列表项”和“我的页列表项”拆成更清晰的两套结构,但不做无关重构。
保持不动的部分
WechatSurfaceMapper的字段语义MainActivity的根 tab 结构和会话/设备/我的数据来源- 会话置顶、群聊、附件、登录、SSE 等现有功能链
- 服务器端 API 与文件型状态模型
验收标准
视觉验收
- 会话页不再呈现厚卡片流,而是微信式聊天列表
- 我的页顶部不再像后台信息卡,而是微信“我”的资料区
- 会话页与我的页放在一起看时,明显属于同一套产品语言
- 页面不引入新的夸张色块、阴影或控制台式信息块
交互验收
- 会话页点任意会话项都能正常进入聊天页
- 聊天页返回仍能回到会话列表
- 我的页各菜单项都整行可点
我的 > 关于、我的 > 设置、我的 > AI 账号、设备tab 不因 UI 收口失效- 顶部安全区与底部 tab 继续正常,不出现按钮进状态栏或点不到的问题
开发验证
- 原生 UI helper 单测覆盖会话项和我的页基础结构
- Android 单测与 release 构建通过
- OPPO 真机回归覆盖:
- 会话首页
- 会话进入/返回
- 我的首页
- 我的 > 关于
- 底部 tab 切换
风险与控制
- 风险:只改样式不改点击区,导致“看起来对了,用起来别扭”
- 控制:本轮把 UI helper 与根活动页绑定一起回归
- 风险:为了压成微信式列表,误删了当前必要字段
- 控制:线程名 / 文件夹名 / 最后一条消息 / 时间 / 动态图标全部保留,只调整层级
- 风险:我的页改头像区时破坏顶部安全区
- 控制:继续沿用
BossWindowInsets,不另起一套 inset 逻辑
- 控制:继续沿用