- Figma 文件:U8 Chat 2.0(fileKey
6dsI4eKdAoZr4RP0uILIBq) - 页面:
iOS端→ 画布搜索功能(node515-989) - 评审时间:基于设计稿 2026-09-11 版本
- 结论一句话:主流程(空态 → 输入 → 5 个 tab → 长按 → 多选 → 转发)已经跑通,但"空结果 / 加载 / 失败"三类状态页、多选态的操作栏、跳转定位态缺失,另有 6 处一致性问题需要设计师回改。
一、设计稿现状盘点(已交付 18 屏)
| # | 屏名 | node | 覆盖能力 | 状态 |
|---|---|---|---|---|
| 1 | 首页-聊天-搜索-未搜索时默认状态2 | 516:1093 | 搜索页空态:最近联系人横滑、最近搜索记录、清空入口、5 个 tab | ✅ |
| 2 | 首页-聊天-已搜索 | 516:1192 | 输入关键词后的结果页:最近 / 聊天和联系人 / 消息 三分区 | ✅ |
| 3 | 首页-聊天-已搜索-所有聊天切换 | 516:1344 | 消息区筛选下拉(所有聊天 / 私聊 / 群聊) | ✅ |
| 4 | 首页-聊天-搜索-未搜索时默认状态-清空提示 | 516:1507 | 清空搜索历史确认弹窗 | ✅ |
| 5 | 未搜索时-媒体 | 516:1607 | 媒体网格 | ✅ |
| 6 | 未搜索时-媒体(长按)-选择 | 516:1664 | 媒体多选态(右上角转发图标) | ⚠️ 见 P0-6 |
| 7 | 未搜索时-链接 | 516:1775 | 链接列表 | ✅ |
| 8 | 未搜索时-文件 | 516:1894 | 文件列表 | ✅ |
| 9 | 未搜索时-语音 | 516:2044 | 语音列表 | ✅ |
| 10 | 未搜索时-语音(长按) | 516:2240 | 语音长按菜单:转发 / 在聊天中查看 / 选择 | ⚠️ 见 P1-2 |
| 11 | 未搜索时-文件(长按) | 516:2467 | 文件长按菜单:转发 / 在聊天中查看 / 选择 | ⚠️ 见 P1-2 |
| 12 | 未搜索时-链接(长按) | 516:2651 | 链接长按菜单:拷贝链接 / 在聊天中查看 / 转发 / 选择 | ✅ |
| 13 | 未搜索时-链接(多选) | 516:2801 | 链接多选态(左侧勾选圈) | ⚠️ 缺操作栏 |
| 14 | 未搜索时-媒体(长按)-选择-转发 | 516:2928 | 转发选择页(取消 / 转发 / 选择 + 会话列表 + 聊天·联系人切换) | ✅ |
| 15 | 未搜索时-媒体(长按)-选择-转发(多选) | 516:3133 | 转发选择页已选多个会话(右上角"发送") | ✅ |
| 16 | 未搜索时-媒体(滑动出现时间) | 516:3346 | 网格滚动浮出时间标签(2026 年 7 月) | ✅ |
| 17 | 未搜索时-媒体(长按) | 516:3409 | 媒体大图预览 + 长按菜单:在聊天中查看 / 转发 / 选择 | ⚠️ 见 P1-2 |
| 18 | 未搜索时默认状态(第二稿) | 516:3489 | 默认状态 + 键盘展开布局 | ❓ 见「待确认 Q4」 |
二、必须补的页面(P0:不补主流程不闭环)
| 编号 | 缺失页面 | 为什么必须有(Telegram 对照) | 建议形态 |
|---|---|---|---|
| P0-1 | 搜索无结果空态 | Telegram 在关键词无命中时显示"没有找到结果"。当前 18 屏只画了"有结果",一旦无命中就是空白页,用户不知道是没有还是没加载完 | 1 屏通用文案 + 图标;聊天/媒体/链接/文件/语音 5 个 tab 内各一版(tab 保留,内容区换空态) |
| P0-2 | 搜索加载中态 | 搜索是服务端接口,首次进入 + 输入防抖后都需要 loading | 首次加载:整页骨架屏;翻页加载:列表底部转圈。媒体 tab 需要骨架网格(不要用空白格) |
| P0-3 | 搜索失败 / 无网络态 | 断网、接口超时是常态 | 错误插画 + 文案"网络异常,请重试" + 【重试】按钮;与 P0-1 视觉要能区分 |
| P0-4 | 搜索历史为空态 | 新用户 / 清空后,"最近"区域是空的 | 隐藏"最近"整块(推荐)或显示"暂无搜索记录",推荐前者,需设计确认空态的间距处理 |
| P0-5 | 最近联系人为空态 | 新用户横滑头像区为空,标题栏位置会塌陷 | 隐藏整行 + 顶部间距自适应 |
| P0-6 | 多选态的完整操作栏 | 现有 06 屏只有右上角一个转发图标。Telegram 多选态是:顶部"已选 N 项 + 取消 + 全选"、底部操作条(转发 / 删除 / 分享 / 保存到相册) | 媒体 / 链接 / 文件 / 语音 4 类各补一版多选态,且菜单项要按类型区分(媒体有"保存到相册",文件是"保存到文件") |
| P0-7 | 文件多选态、语音多选态、媒体多选态(操作栏版) | 目前只有"链接(多选)"画了,其余 3 类只有长按菜单 | 复用链接多选态结构 + 对应底部操作条 |
| P0-8 | 删除确认弹窗(多选删除消息) | 多选后删除是破坏性操作,Telegram 会二次确认 | 弹窗:标题"删除 N 条消息"、正文"删除后不可恢复"、取消 / 删除(红字) |
| P0-9 | 删除单条消息确认 | 长按菜单若含"删除",需要单条确认 | 与 P0-8 复用同一组件,改文案 |
| P0-10 | 转发结果反馈(成功 / 失败) | 15 屏点了"发送"之后没有下文 | 成功:Toast"已转发";部分失败:Toast"部分转发失败,请重试" |
| P0-11 | "在聊天中查看"跳转后的会话内定位态 | 长按菜单里的"在聊天中查看"是核心闭环,但它落在聊天详情页。现有设计稿没有这一屏,等于流程断在半路 | 需要一屏:会话内定位到该条消息 + 高亮 + 顶部结果计数(如"3/13")+ 上下切换箭头。需与聊天模块负责人对齐职责边界 |
| P0-12 | 结果分页加载 / 到底提示 | 历史消息量可能上万,必须分页 | 底部"加载中…"、到底后"没有更多了"(或直接不显示,需确认) |
三、建议补的页面(P1:体验完整度,可下一版)
| 编号 | 缺失页面 / 内容 | 说明 |
|---|---|---|
| P1-1 | 聊天 tab 中"会话结果"的长按菜单 | 现在只有媒体/链接/文件/语音有长按菜单,聊天结果没有。Telegram 里长按会话结果是置顶 / 标记已读 / 静音 / 删除会话 / 清空聊天记录。若与聊天列表页长按菜单一致,可直接引用现有组件,不必重画 |
| P1-2 | 长按菜单项不统一(3 类缺关键项) | 12 屏链接菜单有"拷贝链接",17 屏媒体菜单却缺"保存到相册/分享",11 屏文件菜单缺"保存到文件/用其他应用打开"。建议按类型统一成一张菜单规则表(见 PRD 第七章) |
| P1-3 | 搜索历史单条删除 | Telegram 支持左滑删除单条历史记录,现在只能整体清空 |
| P1-4 | 搜索历史"查看更多" | "最近"默认只显示前 5 条,多于 5 条时需要展开入口(或明确不展开) |
| P1-5 | 筛选后无结果空态 | 03 屏选了"私聊/群聊"后若无结果,需要独立空态文案(如"没有找到相关的私聊") |
| P1-6 | 转发页的搜索无结果态 | 14/15 屏顶部有搜索框,选了没命中的联系人时是空白 |
| P1-7 | 转发页"新建群组 / 新建频道"入口 | Telegram 转发页顶部有"新建群组"入口,当前设计没有(按产品形态确认是否需要) |
| P1-8 | 键盘弹出时的布局适配 | 18 屏显示默认状态 + 键盘,需要明确:键盘弹起时底部 tab 栏和"转发"按钮是上移还是被遮挡(涉及 1/5/6/14 屏) |
| P1-9 | 媒体大图预览的完整交互 | 17 屏只画了静态预览 + 菜单,左右滑动切换、双指缩放、"保存到相册"未覆盖 |
| P1-10 | Tab 左右滑动切换 | Telegram 支持在结果页左右滑动切 tab,需确认是否做(做则需补充滑动中间态的视觉) |
四、P2(本期可不做,先登记)
- 深色模式(该画布 18 屏全为浅色,需确认本期是否出暗色稿)
- 大字号 / 无障碍(VoiceOver 朗读顺序)
- iPad、横屏、Android 端适配
- 特殊关键词搜索:
@用户名、#话题标签、纯 emoji、超长文本 - 搜索结果导出 / 分享链接
- 会话内搜索(聊天详情页右上角搜索)——本次范围外,但要确认由谁出稿
五、设计稿一致性问题(不需要新页面,但要回改)
| # | 位置 | 问题 | 建议 |
|---|---|---|---|
| 1 | 1 屏 vs 2 屏 | 时间格式不统一:最近上线于 07/19/26(MM/DD/YY)与 07/12(MM/DD)、周二/周一 混用 | 全站统一一套时间规则(见 PRD 8.4) |
| 2 | 2 屏 | 出现 16/13 这种非法日期(占位数据错误) | 换真实格式数据,避免研发误读 |
| 3 | 6 / 13 屏 | 多选态缺少顶部"已选 N 项"计数与"取消/全选" | 补齐(对应 P0-6) |
| 4 | 2 屏 | 右下角 6/13 含义不明,未在图注里说明 | 补图注:是结果序号计数还是别的含义 |
| 5 | 18 屏 | 与 1 屏内容重复,只多了键盘 | 明确标注它是"键盘展开态",否则会被研发当成重复稿 |
| 6 | 5 / 6 / 16 / 17 屏 | 媒体网格的图片占位内容各不相同(部分图被拉成竖长条、部分压缩变形) | 统一占位图比例(1:1 或 3:4),避免研发误判裁切规则 |
六、一句话给设计的排期建议
- 第一批(阻塞开发):P0-1、P0-2、P0-3、P0-6、P0-7、P0-8、P0-11 —— 共约 6~8 屏。
- 第二批(可并行):P0-4、P0-5、P0-9、P0-10、P0-12 + P1-2 菜单规则表。
- 第三批(体验优化):P1 其余 + 第五节 6 处回改。