docs: add wechat ui polish spec
This commit is contained in:
kris
@@ -0,0 +1,126 @@
|
||||
# 微信式会话页与我的页 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 逻辑
|
||||
Reference in New Issue
Block a user