8.5 KiB
target, total_score, max_score, na_heuristics, p0_count, p1_count, timestamp, slug
| target | total_score | max_score | na_heuristics | p0_count | p1_count | timestamp | slug |
|---|---|---|---|---|---|---|---|
| 前端 UI | 23 | 40 | 0 | 2 | 2026-08-03T17-47-41Z | frontend-src-app-tsx |
Method: dual-agent (A: /root/impeccable_design_review · B: /root/impeccable_detector)
ImageFind 前端 UI Critique
Design Health Score
| # | Heuristic | Score | Key Issue |
|---|---|---|---|
| 1 | 系统状态可见性 | 3/4 | 加载、重试、Toast 和上传分阶段反馈完整，但部分加载状态占据整页且缺少上下文。 |
| 2 | 系统与现实世界匹配 | 3/4 | 中文表达总体自然，但 WebDAV、AList、aria2、模型路径等技术概念仍直接暴露。 |
| 3 | 用户控制与自由 | 2/4 | 移动端二级页隐藏顶栏和底栏后缺少显式返回与当前位置。 |
| 4 | 一致性与标准 | 2/4 | 组件体系基本统一，但“上传中心/传输中心”、黑色/蓝色选中态以及二级页外壳存在分裂。 |
| 5 | 错误预防 | 3/4 | 危险操作确认、禁用态、密码约束和备份检查完善，但大部分操作无法撤销。 |
| 6 | 识别优于回忆 | 2/4 | 多数按钮有文字；平板图标导航、横向隐藏控件、悬停入口和移动端退出路径增加记忆成本。 |
| 7 | 灵活性与效率 | 2/4 | 搜索、批量操作与筛选具备基础效率，但缺少快捷键、命令入口、保存搜索等专家路径。 |
| 8 | 美观与极简 | 2/4 | 表面干净，但原始文件名、重复缺省封面、完整展开的历史上传卡片造成视觉噪声。 |
| 9 | 错误识别与恢复 | 3/4 | 内联错误、重试和失败任务操作良好；少量后端技术语言仍会直达用户。 |
| 10 | 帮助与文档 | 1/4 | 有局部提示，但 AI、存储、备份和网络配置缺少易找到的任务型帮助。 |
| Total | 23/40 | Acceptable；需要一次有重点的结构优化 |
Design Specificity Verdict
语义很 ImageFind，视觉仍较通用。 “本地 AI”、AList 加密、封面遮罩、多模态搜索、三阶段上传和备份保护都明显属于私有 NAS 媒体产品；但蓝灰后台、白色圆角卡片、胶囊筛选和 Lucide 图标组合仍像可换文案复用的管理控制台。
真正应成为视觉主角的“在私有媒体里找到某一刻”、识别来源、隐私状态、处理就绪度和观看回报，目前大多被压成小标签。
Deterministic scan
detect.mjs --json frontend/src/App.tsx：0 条发现，退出码 0。- 无规则命中、无文件位置、无 detector 误报。
- 自动扫描证明没有明显模板级机械违规，但无法发现信息架构、小字号、点击语义和认知负担问题。
Visual evidence
- 覆盖 320、390、768、1024、1440px，共 35 个页面/尺寸组合。
- 五个尺寸均无页面级横向溢出，33 张首页卡片无技术性封面加载错误。
- 上传分页全部可进入第 2 页；手机按钮 44px。
- 手机“更多”面板完全位于视口内，6 个入口内容居中且背景透明。
- 无原生交互式 Browser/[Human] 页签，因此未注入可视化 overlay；使用当前部署的 Playwright 报告与截图作为证据。
Overall Impression
这是一个技术成熟、反馈机制可靠的产品外壳，但仍更像“功能齐全的内部控制台”，而不是用户拥有的私人媒体空间。最大机会不是增加装饰，而是让移动端路径更可控、提高文字与操作可访问性，并让 ImageFind 最独特的“搜索视频内容”成为首页与搜索页的真正视觉中心。
What's Working
- 系统状态设计扎实。 上传分阶段、字节数、重试/取消、刷新失败、AI 模型与资源状态都能明确反馈。
- 响应式基础可靠。 桌面常驻导航、手机底栏、中心上传入口、安全区、44px 控件和播放器手势构成了可继续打磨的稳定底座。
- 隐私表达建立信任。 本地 AI、加密来源、封面遮罩、备份限制和不上传派生数据等文案具体可信。
Priority Issues
[P1] 移动端二级页缺少显式返回与当前位置
Why it matters： 资料库、合集、上传、分类、人物、设置和播放器隐藏顶栏/底栏后，用户只能猜测浏览器返回，是典型移动端死胡同。
Fix： 增加紧凑的 sticky 二级页头：返回、页面标题、必要的溢出操作；播放器仅让视频舞台沉浸，不要让整个详情页失去导航。
Suggested command： $impeccable adapt
[P1] 核心卡片语义与小字号不满足稳定可访问性
Why it matters： 搜索结果、来源、人物、合集、相关推荐等存在非交互元素承载 onClick；部分关键元数据只有 8.5–11px，--subtle 功能文字对比度约 2.42:1。
Fix： 将可点击卡片改为真实链接/按钮，统一 :focus-visible，补充图片替代文本；功能文字至少提升到舒适字号并提高对比度。
Suggested command： $impeccable audit
[P2] 搜索筛选同时“过载”与“隐藏”
Why it matters： 搜索页一次展示 7 种识别模式和 6 个次级筛选；移动端依赖无提示横滑，桌面端则在输入查询前就提供 13 个决策。
Fix： 常驻 3–4 个高频模式，其余进入带已选数量和“清除全部”的筛选面板；保留已应用筛选摘要，并给横向列表加入可发现的滚动提示。让截图搜索虚线区本身可点击/拖放。
Suggested command： $impeccable distill
[P2] 首页没有突出 ImageFind 的独特价值
Why it matters： 首页主要由普通视频网格、原始文件名、0:00 和重复“暂无封面”组成，用户先感知到的是文件库存，而不是“找到视频中的任意内容”。
Fix： 强化内容搜索、最近识别、处理就绪和私密状态的层级；缺省封面区分待处理、隐私遮罩、失败和确实无封面，避免所有状态长得一样。
Suggested command： $impeccable bolder
[P2] 上传完成态没有转化为下一步行动
Why it matters： 完成任务继续保留完整三段进度和多次“完成”，形成很长的历史墙，用户却找不到“查看影片/进入合集”的回报。
Fix： 完成项折叠成紧凑历史行，活动和失败任务保持展开；按日期分组，并增加“查看影片”“在媒体库中显示”。
Suggested command： $impeccable clarify
Persona Red Flags
Alex（高效专家用户）
- 搜索、上传、导航、筛选和播放器缺少可发现快捷键。
- 没有保存搜索、最近查询或命令入口。
- 已完成上传无法批量折叠/清理，合集与搜索卡片仍偏鼠标优先。
Sam（依赖无障碍能力的用户）
- 多类核心卡片是 click-only 的非语义元素。
- 全局 focus-visible 规范不完整，播放器返回又依赖悬停表现。
- 8.5–10px 关键文字与低对比
--subtletoken 对低视力用户不友好。 - 平板导航只显示图标，人物/演员图片存在替代文本缺口。
Casey（分心的单手手机用户）
- 中心上传和 44px 控件表现好，但进入二级页后熟悉的底栏消失。
- 搜索模式、设置标签、播放器动作和合集条目依赖无提示横滑。
- “新建合集”等主操作位于顶部，远离拇指热区。
- 上传页固定“继续上传”比处理失败或打开刚上传内容更抢眼。
Minor Observations
- “上传中心”“传输中心”“上传”三个概念需要统一命名边界。
- 黑色选中 chip 与全局蓝色品牌状态冲突。
AI SEARCH、SYSTEM、ADMIN PROFILE等英文 eyebrow 使中文界面显得模板化。- 未知时长显示
0:00容易被理解为真正的零长度视频。 - “暂无封面”应区分缺失、排队、失败和隐私遮罩。
- 401 控制台信息在五个尺寸都出现，但发生于登录前认证探测，当前没有用户可见影响。
- 手机搜索容器比客户区宽 1px，但 document/body 未溢出，属于非阻塞几何误差。
- 320px 时间点面板的报告值是时序误判；截图明确显示面板已经打开。
Questions to Consider
- ImageFind 的第一承诺究竟是“管理媒体文件”，还是“找到私有媒体中的任意时刻”？首页为什么更像前者？
- 如果隐私是核心差异，为什么移动端最需要的封面遮罩快捷操作反而不可见？
- 一次大文件上传完成后，用户最自然的下一步是播放、整理到合集，还是继续上传？
- 移动端二级页是否真的需要沉浸到移除所有导航？
- 如果原始文件名和缺省封面是边缘状态，首页的信息结构应怎样改变？