mcpField
U
ux-audit

ux-audit

github.com/sickn33设计与 UI48.8k100 次安装今天更新
代码仓库

关于 ux-audit

ux-audit 是用于检查现有界面可用性的审查技能，依据 Nielsen 可用性启发式和移动端 UX 检查项评估观察到的流程。它按严重程度整理问题并给出具体代码修改建议，不用于仅做无障碍、文案或设计系统审查。

主要功能

  1. 01依据 Nielsen 十项可用性启发式检查
  2. 02评估移动端触控与性能感知
  3. 03按严重程度分类问题
  4. 04为问题提供具体代码建议
  5. 05标记未测试状态并限定评估范围

适用场景

  1. 01审查现有屏幕中的导航和反馈问题
  2. 02检查移动端界面的触控交互
  3. 03梳理表单错误与操作恢复体验

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill ux-audit

安装后在 Claude Code 中输入/ux-audit确认已加载。

详细介绍

UX 审核

适用场景

当你需要依据 Nielsen 的启发式原则和现代移动端 UX 最佳实践审核界面中的 UX 问题时，使用此技能。

不适用场景

  • 仅针对无障碍问题 → 使用 /ss-a11y
  • 针对设计系统令牌／黄金规则的合规性 → 使用 /ss-review
  • 针对文案／微文案质量 → 使用 /ss-copy
  • 针对尚不存在的全新界面——先使用 /ss-page 或 /ss-flow 进行设计

目标：$ARGUMENTS

将这些原则作为启发式检查，用于对照实际受众和任务进行测试，而非视为普适规则或 WCAG 认证。6px 网格、卡片最多四项、三次点击目标、300ms 骨架屏和图标系列选择都属于上游设计偏好。只评估实际观察到的流程；标记未经测试的状态。仅在失败后能够妥善补救，且不会对付款、破坏性操作或已保存状态造成误导时，才使用乐观更新。

审核框架

Nielsen 的 10 条可用性启发式原则
1. 系统状态可见性
  • 显示加载状态（骨架屏，而非旋转指示器）
  • 操作后提供成功／错误反馈（Toast 通知）
  • 多步骤流程显示进度指示器
  • 导航项清楚显示激活状态
  • 实时数据显示时间戳，标明数据的新鲜度
2. 系统与现实世界的匹配
  • 标签使用用户的语言，而非技术术语
  • 图标带有易懂的标签或经过测试的含义；使用图标库并不意味着图标具有通用含义
  • 数字格式符合用户预期（千位分隔符、货币符号）
  • 日期格式符合地区习惯
3. 用户控制权与自主性
  • 所有非根页面均可返回
  • 破坏性操作需显示确认对话框
  • 可撤销的操作提供撤销选项（带撤销按钮的 Toast）
  • 底部面板／模态框可关闭（点击背景、向下滑动、点击 X 按钮）
  • 不使用暗黑模式（不强迫用户执行操作，始终提供关闭方式）
4. 一致性与标准
  • 相同操作在各处的外观一致
  • 颜色含义保持一致（绿色＝成功，红色＝错误，品牌色＝激活）
  • 文本层级遵循 5 级灰度系统
  • 所有卡片使用相同的阴影、圆角和内边距
  • 间距遵循 6px 网格系统
5. 错误预防
  • 破坏性按钮在视觉上有所区别（破坏性变体）
  • 表单在失焦时进行验证（而非输入时）
  • 危险操作需明确确认
  • 在错误发生前显示输入限制（字符数限制、格式提示）
6. 识别而非回忆
  • 所有图标均有标签（尤其是 BottomNav）
  • 无需记忆即可看到当前状态（高亮显示激活的标签页）
  • 显示最近／常用项目，方便快速访问
  • 占位文本展示预期格式
7. 灵活性与效率
  • 从首页最多点击 3 次即可访问关键操作
  • 数据页面支持下拉刷新
  • 优先采用较大的触控目标；区分可用性偏好与规范性无障碍问题
  • 常用操作放在易于触及的区域（屏幕底部）
8. 美观与极简设计
  • 每个界面只聚焦一项主要任务
  • 不包含无实际用途的装饰元素
  • 遵循信息金字塔原则（最重要的信息最大）
  • 卡片密度遵循最多 4 项的规则
  • 不存在相互竞争的视觉元素（每页仅有一个主视觉指标）
9. 帮助用户从错误中恢复
  • 错误消息用通俗语言说明出错原因
  • 错误消息建议如何解决问题
  • 局部故障不会导致整个页面无法使用（一张卡片加载失败，其他卡片仍可加载）
  • 网络错误显示重试按钮
  • 表单错误突出显示具体字段
10. 帮助与文档
  • 空状态引导用户采取操作
  • 为首次使用的功能提供引导（如适用）
  • 为复杂指标提供工具提示（如适用）
移动端专属 UX 检查项
触控与手势
  • 以 44x44px 为易用性目标；评估适用的平台/无障碍要求及例外情况
  • 相邻触控目标之间至少间隔 8px
  • 不使用依赖悬停的交互（移动设备没有悬停）
  • 为滑动手势提供可见提示（轮播指示器）
性能感知
  • 骨架屏在 300ms 内显示
  • 对用户操作进行乐观更新
  • 优先加载首屏内容
  • 内容加载完成后不发生布局偏移
安全区域
  • 内容不会被刘海屏/灵动岛遮挡
  • 底部内容不会被主屏幕指示条遮挡
  • BottomNav 具有 pb-safe 内边距
防止暗黑模式
  • 进入时不强制显示底部弹层
  • 不显示阻止退出的对话框
  • 每个屏幕都有返回/关闭方式
  • CTA 标签清楚描述操作
  • 不使用操纵性图形（乞求、制造紧迫感）

输出格式

  1. 评分：A+ 到 F 的评级及细分
  2. 严重问题：必须修复（影响可用性）
  3. 主要问题：应该修复（降低体验）
  4. 次要问题：建议修复（完善细节）
  5. 建议：针对每个问题给出具体代码修改

示例

用户请求：

使用 Nielsen 启发式原则和现代移动端 UX 最佳实践审查屏幕中的 UX 问题。

限制

  • 仅当任务与其上游来源及本地项目上下文明确匹配时，才使用此技能。
  • 应用更改前，请验证命令、生成的代码、依赖项、凭据和外部服务行为。
  • 不要将示例视为环境特定测试、安全审查或破坏性、高成本操作所需用户批准的替代品。

评论

支持 Markdown