143 lines
8.5 KiB
Markdown
143 lines
8.5 KiB
Markdown
---
|
||
target: 前端 UI
|
||
total_score: 23
|
||
max_score: 40
|
||
na_heuristics:
|
||
p0_count: 0
|
||
p1_count: 2
|
||
timestamp: 2026-08-03T17-47-41Z
|
||
slug: 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
|
||
|
||
1. **系统状态设计扎实。** 上传分阶段、字节数、重试/取消、刷新失败、AI 模型与资源状态都能明确反馈。
|
||
2. **响应式基础可靠。** 桌面常驻导航、手机底栏、中心上传入口、安全区、44px 控件和播放器手势构成了可继续打磨的稳定底座。
|
||
3. **隐私表达建立信任。** 本地 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 关键文字与低对比 `--subtle` token 对低视力用户不友好。
|
||
- 平板导航只显示图标，人物/演员图片存在替代文本缺口。
|
||
|
||
### Casey（分心的单手手机用户）
|
||
|
||
- 中心上传和 44px 控件表现好，但进入二级页后熟悉的底栏消失。
|
||
- 搜索模式、设置标签、播放器动作和合集条目依赖无提示横滑。
|
||
- “新建合集”等主操作位于顶部，远离拇指热区。
|
||
- 上传页固定“继续上传”比处理失败或打开刚上传内容更抢眼。
|
||
|
||
## Minor Observations
|
||
|
||
- “上传中心”“传输中心”“上传”三个概念需要统一命名边界。
|
||
- 黑色选中 chip 与全局蓝色品牌状态冲突。
|
||
- `AI SEARCH`、`SYSTEM`、`ADMIN PROFILE` 等英文 eyebrow 使中文界面显得模板化。
|
||
- 未知时长显示 `0:00` 容易被理解为真正的零长度视频。
|
||
- “暂无封面”应区分缺失、排队、失败和隐私遮罩。
|
||
- 401 控制台信息在五个尺寸都出现，但发生于登录前认证探测，当前没有用户可见影响。
|
||
- 手机搜索容器比客户区宽 1px，但 document/body 未溢出，属于非阻塞几何误差。
|
||
- 320px 时间点面板的报告值是时序误判；截图明确显示面板已经打开。
|
||
|
||
## Questions to Consider
|
||
|
||
- ImageFind 的第一承诺究竟是“管理媒体文件”，还是“找到私有媒体中的任意时刻”？首页为什么更像前者？
|
||
- 如果隐私是核心差异，为什么移动端最需要的封面遮罩快捷操作反而不可见？
|
||
- 一次大文件上传完成后，用户最自然的下一步是播放、整理到合集，还是继续上传？
|
||
- 移动端二级页是否真的需要沉浸到移除所有导航？
|
||
- 如果原始文件名和缺省封面是边缘状态，首页的信息结构应怎样改变？
|