主题
UI Critique: New Features (Auth, Chat, Admin, Contact)
2026-04-10 — 针对新增的聊天系统、认证页面、Admin 后台、Contact 页面的设计审查
Design Health Score: 23/40
| # | Heuristic | Score | Key Issue |
|---|---|---|---|
| 1 | Visibility of System Status | 2 | 聊天展开/收起无过渡动画，状态切换突兀 |
| 2 | Match System / Real World | 3 | — |
| 3 | User Control and Freedom | 3 | — |
| 4 | Consistency and Standards | 1 | Admin 全部硬编码颜色，与设计系统断裂 |
| 5 | Error Prevention | 2 | 暗色模式下 form label 几乎不可见 |
| 6 | Recognition Rather Than Recall | 3 | — |
| 7 | Flexibility and Efficiency | 3 | — |
| 8 | Aesthetic and Minimalist Design | 1 | Contact 布局严重失衡，Admin 缺乏设计 |
| 9 | Error Recovery | 2 | 无全局 toast 通知机制 |
| 10 | Help and Documentation | 3 | — |
What's Working
- 聊天气泡样式 — 圆角、时间戳、visitor/agent 颜色区分清晰，符合品牌温暖调性
- ChatSidebar 信息架构 — Profile → Saved Preferences → Send Profile 按钮层次清晰
- SaveButton — 与 CompareButton 风格一致，toggle 状态直观
Priority Issues
[P0] 暗色模式 form label 对比度严重不足
Contact、Login、Signup、Account 页面的 form label 使用 text-[var(--color-neutral-700)]，暗色模式下映射到极暗的颜色，在深色背景上几乎不可见。
Fix:
- 检查
globals.css中--color-neutral-700暗色映射值 - label 统一改用
text-[var(--color-neutral-600)]或确保暗色映射有足够亮度 - 影响文件:
contact/page.tsx,LoginForm.tsx,SignupForm.tsx,AccountForm.tsx,ForgotPasswordForm.tsx,UpdatePasswordForm.tsx
[P1] Contact 页面布局严重失衡
Live Chat 卡片内容极少（标题+描述+按钮），高度远小于右侧表单卡片。两栏等高排列导致左侧 3/4 空白。
Fix 方案:
- 方案 A: 改为上下布局 — Live Chat 作为顶部醒目 banner（单行 CTA），表单在下方
- 方案 B: 左侧填充更多内容 — 添加聊天优势列表（实时回复、多语言支持等）、在线状态指示、最近平均响应时间
- 方案 C: 左侧卡片内容垂直居中 + 底部对齐按钮，不强制等高
影响文件: src/app/contact/page.tsx, src/app/contact/ChatLauncher.tsx
[P1] Admin 页面零设计系统适配
Admin layout 和 Admin chat 页面 100% 使用硬编码 Tailwind 颜色（bg-white, border-gray-200, bg-blue-600, text-gray-900），导致：
- 暗色模式完全失效（永远白底）
- 品牌色断裂（用蓝色而非 teal-navy）
- 无衬线标题（缺少
font-serif） - 像不同产品的后台
Fix:
bg-white → bg-[var(--color-surface)]
border-gray-200 → border-[var(--color-neutral-200)]
text-gray-900 → text-[var(--color-neutral-900)]
text-gray-700 → text-[var(--color-neutral-700)]
text-gray-500 → text-[var(--color-neutral-500)]
text-gray-400 → text-[var(--color-neutral-400)]
hover:bg-gray-100 → hover:bg-[var(--color-neutral-100)]
hover:bg-gray-50 → hover:bg-[var(--color-neutral-50)]
bg-gray-50 → bg-[var(--color-neutral-50)]
bg-blue-50 → bg-[var(--color-primary)]/5
bg-blue-600 → bg-[var(--color-primary)]
hover:bg-blue-700 → hover:bg-[var(--color-primary-dark)]
focus:border-blue-400 → focus:border-[var(--color-primary-light)]
focus:ring-blue-400 → focus:ring-[var(--color-primary-light)]
bg-amber-100 text-amber-700 → bg-[var(--color-warning-bg)] text-[var(--color-warning)]
bg-green-100 text-green-700 → bg-[var(--color-success-bg)] text-[var(--color-success)]影响文件: src/app/admin/(dashboard)/layout.tsx, src/app/admin/(dashboard)/chat/page.tsx
[P2] 聊天框展开/收起无动画
从 400x500 小窗口瞬间跳到全屏，视觉突兀。
Fix:
- 使用 Framer Motion
layout动画或 CSStransition-[width,height,inset] duration-300 ease-out - 仅用 compositor 属性（transform, opacity）确保 60fps
- 尊重
prefers-reduced-motion - 影响文件:
src/components/chat/ChatWidget.tsx
[P2] Chat Sidebar Profile 区域高度问题
全屏聊天时 sidebar 高度应填满可用空间，但视觉上 profile 区域与页面不一致。
Fix:
- 确保外层容器
flex flex-1 overflow-hidden正确传递高度 - Sidebar 使用
h-full而非依赖内容撑开 - 影响文件:
src/components/chat/ChatSidebar.tsx,src/components/chat/ChatWidget.tsx
Minor Issues
- Login/Signup 页面的标题用了
font-serif（正确），但 "Welcome back" 等文案可以更有温度 - ChatHeader
rounded-t-xl展开时移除但无过渡 - Account 页面新增 age/email 字段的 placeholder 风格不完全一致
- Admin login 页面（
/admin/login）也使用了硬编码颜色，需一并修复
Execution Order
- 暗色模式对比度 — 最紧急，影响可用性
- Contact 页面布局 — 用户第一印象
- Admin 设计系统适配 — 硬编码颜色全面替换
- 聊天动画 — 提升体感品质
- 最终 polish — 字体、间距、placeholder 一致性