Back to Details

ss-audit

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UX Audit

UX审核

When NOT to use

不适用于以下场景

  • For accessibility-only issues → use 
    /ss-a11y
  • For design system token/golden-rule compliance → use 
    /ss-review
  • For copy/microcopy quality → use 
    /ss-copy
  • For brand new screens that don't exist yet — design first with 
    /ss-page
    or 
    /ss-flow
Target: $ARGUMENTS
  • 仅针对无障碍问题 → 使用 
    /ss-a11y
  • 针对设计系统令牌/黄金规则合规性检查 → 使用 
    /ss-review
  • 针对文案/微文案质量检查 → 使用 
    /ss-copy
  • 针对尚未存在的全新界面 → 先使用 
    /ss-page
    或 
    /ss-flow
    进行设计
审核目标：$ARGUMENTS

Audit Framework

审核框架

Nielsen's 10 Usability Heuristics

尼尔森10条可用性启发式原则

1. Visibility of System Status

1. 系统状态可见性

  • Loading states present (skeleton screens, not spinners)
  • Success/error feedback after actions (toast notifications)
  • Progress indicators for multi-step flows
  • Active state clearly shown on navigation items
  • Real-time data has timestamp showing freshness
  • 提供加载状态（骨架屏，而非加载 spinner）
  • 操作后提供成功/错误反馈（吐司通知）
  • 多步骤流程提供进度指示器
  • 导航项清晰显示激活状态
  • 实时数据显示时间戳以体现时效性

2. Match Between System and Real World

2. 系统与现实世界匹配

  • Labels use user's language, not technical jargon
  • Icons are universally recognizable (Lucide standard set)
  • Number formats match user expectations (comma separators, currency symbols)
  • Date formats are locale-appropriate
  • 标签使用用户语言，而非技术术语
  • 图标具有普遍辨识度（采用Lucide标准图标集）
  • 数字格式符合用户预期（逗号分隔、货币符号）
  • 日期格式符合地区习惯

3. User Control and Freedom

3. 用户控制与自由

  • Back navigation available on all non-root screens
  • Destructive actions have confirmation dialogs
  • Undo available for reversible actions (toast with undo)
  • Bottom sheet/modal can be dismissed (backdrop tap, swipe down, X button)
  • No dark patterns (no forced actions, always a way to dismiss)
  • 所有非根界面支持返回导航
  • 破坏性操作需弹出确认对话框
  • 可逆操作支持撤销（带撤销选项的吐司通知）
  • 底部弹窗/模态框可关闭（点击遮罩、向下滑动、点击X按钮）
  • 无暗黑模式设计（无强制操作，始终提供关闭途径）

4. Consistency and Standards

4. 一致性与标准

  • Same action = same appearance everywhere
  • Color meanings are consistent (green=success, red=error, brand=active)
  • Text hierarchy follows the 5-level grayscale system
  • All cards use the same shadow, radius, padding
  • Spacing follows the 6px grid system
  • 相同操作在各处外观一致
  • 颜色含义保持一致（绿色=成功，红色=错误，品牌色=激活）
  • 文本层级遵循5级灰度系统
  • 所有卡片使用相同的阴影、圆角、内边距
  • 间距遵循6px网格系统

5. Error Prevention

5. 错误预防

  • Destructive buttons are visually distinct (destructive variant)
  • Form validation happens on blur (not while typing)
  • Dangerous actions require explicit confirmation
  • Input constraints are visible before errors occur (character limits, format hints)
  • 破坏性按钮在视觉上区分（采用破坏性变体样式）
  • 表单验证在失焦时触发（而非输入时）
  • 危险操作需明确确认
  • 输入限制在错误发生前可见（字符限制、格式提示）

6. Recognition Rather Than Recall

6. 识别优于回忆

  • Labels on all icons (especially BottomNav)
  • Current state visible without memorization (active tab highlighted)
  • Recent/frequent items shown for quick access
  • Placeholder text shows expected format
  • 所有图标附带标签（尤其是底部导航）
  • 当前状态无需记忆即可查看（激活标签高亮）
  • 显示最近/常用项以便快速访问
  • 占位符文本显示预期格式

7. Flexibility and Efficiency

7. 灵活性与效率

  • Key actions reachable within 3 taps from home
  • Pull-to-refresh on data screens
  • Touch targets >= 44x44px (no tiny tap areas)
  • Frequently used actions in easy-to-reach zones (bottom of screen)
  • 核心操作从首页起3次点击内可达
  • 数据界面支持下拉刷新
  • 触摸目标尺寸≥44x44px（无过小点击区域）
  • 常用操作位于易触及区域（屏幕底部）

8. Aesthetic and Minimalist Design

8. 美观与极简设计

  • Each screen focuses on ONE primary task
  • No decorative elements that don't serve a purpose
  • Information pyramid respected (most important = biggest)
  • Card density follows the max-4-items rule
  • No competing visual elements (one hero metric per page)
  • 每个界面聚焦于一项核心任务
  • 无无意义的装饰元素
  • 遵循信息金字塔原则（最重要信息=最大尺寸）
  • 卡片密度遵循最多4项规则
  • 无相互竞争的视觉元素（每页一个核心指标）

9. Help Users Recover from Errors

9. 帮助用户从错误中恢复

  • Error messages explain what went wrong in plain language
  • Error messages suggest how to fix the problem
  • Partial failures don't break the whole page (one card fails, others load)
  • Network errors show retry button
  • Form errors highlight the specific field
  • 错误消息用直白语言解释问题所在
  • 错误消息建议修复方法
  • 部分失败不会导致整个页面崩溃（一张卡片加载失败，其他正常加载）
  • 网络错误显示重试按钮
  • 表单错误高亮具体字段

10. Help and Documentation

10. 帮助与文档

  • Empty states guide users to take action
  • Onboarding for first-time features (if applicable)
  • Tooltips for complex metrics (if applicable)
  • 空状态引导用户执行操作
  • 首次使用功能时提供引导（如适用）
  • 复杂指标提供工具提示（如适用）

Mobile-Specific UX Checks

移动端专属UX检查

Touch & Gesture

触摸与手势

  • Touch targets minimum 44x44px
  • Minimum 8px between adjacent touch targets
  • No hover-dependent interactions (mobile has no hover)
  • Swipe gestures have visible affordances (carousel indicators)
  • 触摸目标最小尺寸44x44px
  • 相邻触摸目标间距最小8px
  • 无依赖悬停的交互（移动端无悬停）
  • 滑动手势具有可见提示（轮播指示器）

Performance Perception

性能感知

  • Skeleton screens appear within 300ms
  • Optimistic updates for user actions
  • Above-the-fold content loads first
  • No layout shift after content loads
  • 骨架屏在300ms内显示
  • 用户操作采用乐观更新
  • 首屏内容优先加载
  • 内容加载后无布局偏移

Safe Areas

安全区域

  • Content not hidden behind notch/Dynamic Island
  • Bottom content not behind home indicator
  • BottomNav has 
    pb-safe
    padding
  • 内容未被刘海屏/灵动岛遮挡
  • 底部内容未被Home指示器遮挡
  • 底部导航带有 
    pb-safe
    内边距

Dark Pattern Prevention

暗黑模式防范

  • No forced bottom sheets on entry
  • No exit-prevention dialogs
  • Every screen has a way to go back/dismiss
  • CTA labels clearly describe the action
  • No manipulative graphics (begging, urgency)
  • 进入页面时无强制底部弹窗
  • 无阻止退出的对话框
  • 每个界面都有返回/关闭途径
  • 行动召唤（CTA）标签清晰描述操作内容
  • 无操纵性图形（乞求、紧迫感诱导）

Output Format

输出格式

  1. Score: A+ to F rating with breakdown
  2. Critical Issues: Must fix (blocks usability)
  3. Major Issues: Should fix (degrades experience)
  4. Minor Issues: Nice to fix (polish)
  5. Recommendations: Specific code changes for each issue
  1. 评分：A+至F等级及细分说明
  2. 关键问题：必须修复（阻碍可用性）
  3. 主要问题：应该修复（降低体验）
  4. 次要问题：建议修复（优化打磨）
  5. 建议方案：针对每个问题的具体代码修改建议