Files
boss/docs/superpowers/specs/2026-03-29-wechat-conversations-me-ui-polish-design.md
2026-03-29 23:40:57 +08:00

4.7 KiB
Raw Permalink Blame History

微信式会话页与我的页 UI 收口设计

背景

当前原生 Android 客户端已经完成了大部分微信式回退,但 会话 根页和 我的 根页仍然存在明显的产品语言不一致:

  • 会话 页还保留较重的卡片感和控制台式信息密度
  • 我的 页虽然已经是列表结构,但顶部仍然更像后台资料卡,而不是微信“我”
  • 两页放在一起看时,像是两个不同产品,而不是同一套移动端体验

本轮目标不是改数据模型或功能范围,而是把这两页的视觉、层级、点击区和回退后的微信式产品语言彻底统一。

目标

  1. 会话 根页改成微信式一行一条聊天列表,不再是厚卡片流
  2. 我的 根页改成微信“我”风格的大头像资料区 + 白底菜单列表
  3. 保持现有功能和数据结构不变,不为了收口 UI 去改坏线程、群聊、附件、登录、返回链路
  4. 把这两页的交互代码和 UI helper 一起校验,避免只换视觉、不修点击区和层级

非目标

  • 不改会话数据模型
  • 不改线程名 / 文件夹名 / 后台数量动态图标规则
  • 不改主 Agent / 审计对话的置顶逻辑
  • 不重做设备页
  • 不动 Web UI只收口原生 Android

设计概览

1. 会话页

会话页要回到微信聊天列表的感觉:

  • 每个会话项从“白色厚卡片”改成“白底列表项”
  • 保留现有三层文本信息,但重新压视觉层级:
    • 第一行:线程名,主信息,粗体
    • 第二行:所属文件夹名,弱于主标题
    • 第三行:最后一条消息预览,进一步降权
  • 右侧保留两层:
    • 最后消息时间
    • 后台活跃动态图标与未读信息
  • 主 Agent审计对话 继续作为普通置顶会话显示,不做特殊卡片
  • 列表项之间只保留轻分隔和留白,不再依赖阴影和大圆角强调层级

2. 我的页

我的页要改成微信“我”的结构:

  • 顶部改为一整块资料区,不再使用独立悬浮卡片
  • 资料区结构:
    • 左侧大头像
    • 右侧昵称
    • 第二行账号
    • 第三行一条很轻的身份说明
  • 下面所有入口都收成纯白菜单列表
  • 当前保留入口不变:
    • 账号与安全
    • 设置
    • 运维与修复
    • AI 账号
    • 技能
    • 关于
  • AI 账号 / 技能 / 运维与修复 视觉上与其它入口完全同级,不再做“高级功能”强调

3. 交互与点击区

这轮不仅收视觉,也会校验功能入口的交互代码:

  • 会话列表整行可点,右侧时间和动态图标不应抢主点击
  • 我的页每一项整行可点,不允许只点文字有效
  • 会话进入、返回、底部 tab 切换逻辑保持现状,不因 UI 收口被破坏
  • 顶部安全区处理继续沿用 BossWindowInsets

实现边界

直接重写的 UI helper

  • BossUi.buildConversationRow
  • BossUi.buildSimpleProfileHeader
  • BossUi.buildWechatMenuRow

必要时允许新增更小的私有 helper把“会话列表项”和“我的页列表项”拆成更清晰的两套结构但不做无关重构。

保持不动的部分

  • WechatSurfaceMapper 的字段语义
  • MainActivity 的根 tab 结构和会话/设备/我的数据来源
  • 会话置顶、群聊、附件、登录、SSE 等现有功能链
  • 服务器端 API 与文件型状态模型

验收标准

视觉验收

  1. 会话页不再呈现厚卡片流,而是微信式聊天列表
  2. 我的页顶部不再像后台信息卡,而是微信“我”的资料区
  3. 会话页与我的页放在一起看时,明显属于同一套产品语言
  4. 页面不引入新的夸张色块、阴影或控制台式信息块

交互验收

  1. 会话页点任意会话项都能正常进入聊天页
  2. 聊天页返回仍能回到会话列表
  3. 我的页各菜单项都整行可点
  4. 我的 > 关于我的 > 设置我的 > AI 账号设备 tab 不因 UI 收口失效
  5. 顶部安全区与底部 tab 继续正常,不出现按钮进状态栏或点不到的问题

开发验证

  • 原生 UI helper 单测覆盖会话项和我的页基础结构
  • Android 单测与 release 构建通过
  • OPPO 真机回归覆盖:
    • 会话首页
    • 会话进入/返回
    • 我的首页
    • 我的 > 关于
    • 底部 tab 切换

风险与控制

  • 风险:只改样式不改点击区,导致“看起来对了,用起来别扭”
    • 控制:本轮把 UI helper 与根活动页绑定一起回归
  • 风险:为了压成微信式列表,误删了当前必要字段
    • 控制:线程名 / 文件夹名 / 最后一条消息 / 时间 / 动态图标全部保留,只调整层级
  • 风险:我的页改头像区时破坏顶部安全区
    • 控制:继续沿用 BossWindowInsets,不另起一套 inset 逻辑