⚡

UX评估器 ux-evaluator

UX评估器是一个用于系统性评估用户界面（UI）组件用户体验（UX）质量的工具。它基于位置、视觉权重、间距三维分析框架，参照Balsamiq、尼尔森启发式等权威行业标准，提供客观、可操作的设计审查建议。适用于UI/UX设计师、前端开发者、产品经理进行界面优化、可用性检查、设计规范对齐。关键词：UX评估，UI审查，用户体验，设计规范，可用性测试，界面设计，三维分析框架。

前端开发 0 次安装 0 次浏览 更新于 3/1/2026

name: ux-evaluator description: 当需要根据UX最佳实践评估UI组件时，应使用此技能。用于审查按钮、导航元素、间距、视觉层次或任何界面元素。提供一个与行业标准（Balsamiq、尼尔森启发式原则）一致的系统性三维框架（位置、视觉权重、间距）。当用户要求“审查UX”、“检查按钮设计”、“评估布局”或参考设计指南时调用。

UX评估器

概述

使用三维框架，根据既定的UX原则系统地评估UI组件。通过对比行业惯例和权威来源，将主观的设计反馈转化为可操作的、基于证据的建议。

核心价值：通过将决策建立在有据可查的最佳实践之上，防止主观的设计争论。

何时使用此技能

触发条件：

  • 用户对某个组件提供UX反馈
  • 用户引用外部设计指南（Balsamiq、尼尔森、Material Design）
  • 用户要求“审查”、“评估”或“检查”UI元素
  • 用户质疑按钮标签、间距或视觉层次
  • 在实施影响用户交互的UI更改之前

请勿用于：

  • 纯视觉美学（颜色、字体）且不涉及UX影响
  • 后端或非UI更改
  • 当用户已做出坚定决定，仅需实施时

评估框架

三维分析

对于任何UI组件，评估以下三个维度：

维度 分析内容 关键问题
1. 位置 相对于其他元素，它位于何处？ 位置是否符合惯例？是否易于发现？
2. 视觉权重 视觉上有多突出？ 是否与主要操作竞争？层次是否清晰？
3. 间距 与相邻元素的间隙是多少？ 是否有足够的分离？间距是否一致？

评估工作流

步骤 1: 收集上下文
├── 正在评估什么组件？
├── 是什么用户反馈或担忧触发了这次评估？
├── 是否有外部参考（文章、指南）？
└── 组件的目的是什么（主要CTA、实用功能、导航）？

步骤 2: 分析当前状态
├── 位置：记录在布局中的确切位置
├── 视觉权重：描述样式（填充、幽灵、仅图标等）
├── 间距：测量与相邻元素的间隙
└── 与行业惯例进行比较（参见参考资料/）

步骤 3: 生成结论
├── 对于每个维度：正确 / 需要更改 / 可接受
├── 如果需要更改：提供具体建议及理由
├── 为每条建议引用权威来源
└── 对更改进行优先级排序（P1：破坏UX，P2：次优，P3：优化）

组件特定指南

按钮（操作元素）

位置：

  • 主要操作（注册、提交、购买） → 右侧
  • 次要操作（取消、登录） → 主要操作的左侧
  • 实用控件（主题、设置） → 主要操作之后的远右侧

视觉权重：

  • 主要：填充背景、品牌色、阴影
  • 次要：幽灵/轮廓、无填充、细边框
  • 实用：仅图标或最小化文本、中性色

间距：

  • 按钮组之间：最小1.5rem（24px）
  • 同一组内按钮之间：0.5rem-0.75rem（8-12px）
  • 触摸目标：移动端最小高度44px

标签：

  • 使用常规标签：“注册”而非“开始使用”，“登录”而非“登陆”
  • 准确说明会发生什么：“删除账户”而非“继续”
  • 动作优先使用动词：“创建项目”、“发送消息”

导航元素

位置：

  • 徽标 → 左侧
  • 主导航 → 居中或在徽标之后
  • 实用项（搜索、认证、主题） → 右侧

视觉权重：

  • 活动状态清晰可辨
  • 当前页面指示器可见
  • 不与页面内容竞争

间距：

  • 将相关项目视觉分组
  • 导航组之间有清晰的间隔
  • 足够的点击/触摸目标

表单元素

位置：

  • 标签位于输入框上方或左侧
  • 提交按钮在底部，右对齐或全宽
  • 错误消息紧邻字段

视觉权重：

  • 必填字段标记清晰
  • 错误状态突出（红色边框/文本）
  • 成功状态具有确认性（绿色对勾）

间距：

  • 字段间保持一致的垂直节奏
  • 标签到输入框的间隙：0.25-0.5rem
  • 字段到字段的间隙：1-1.5rem

行业惯例参考

按钮顺序（主要网站）

网站 模式
GitHub [登录] [注册] - 次要左，主要右
Stripe [登录] [立即开始 →] - 次要左，主要右
Google [登录] [创建账户] - 相同模式
Notion [登录] [免费获取Notion] - 相同模式

结论：次要左，主要右是标准。

主题切换器放置位置

网站 放置位置
GitHub 远右侧，用户菜单之后
VS Code 文档 远右侧
Stripe 文档 远右侧
Discord 在设置中，不在导航栏

结论：远右侧（认证之后）或在设置下拉菜单中。

实用控件视觉权重

控件 预期权重
主题切换器 仅图标、微妙、不与CTA竞争
搜索 图标触发器或紧凑输入框、可展开
语言选择器 图标或紧凑下拉菜单

结论：实用功能应易于访问，但应服从于主要操作。

输出格式

评估组件时，生成以下结构化输出：

## [组件名称] 评估

### 当前状态
- **位置**：[描述]
- **视觉权重**：[描述]
- **间距**：[测量值]

### 分析

| 维度 | 评估 | 理由 |
|-----------|------------|-----------|
| 位置 | [正确/需要更改] | [原因，附参考] |
| 视觉权重 | [正确/需要更改] | [原因，附参考] |
| 间距 | [正确/需要更改] | [原因，附参考] |

### 结论：[正确 / 需要更改]

### 建议（如有）
| 优先级 | 更改内容 | 理由 |
|----------|--------|-----------|
| P1 | [具体更改] | [引用原则] |
| P2 | [具体更改] | [引用原则] |

参考资料

参见 references/ 获取详细的UX原则：

  • balsamiq-button-principles.md - 按钮设计最佳实践
  • nielsen-heuristics.md - 10条可用性启发式原则（待添加）

自我监控

最终确定评估前：

  • [ ] 已分析所有3个维度（位置、视觉权重、间距）
  • [ ] 当前状态已用具体细节记录（非模糊描述）
  • [ ] 每条建议都引用了权威来源或惯例
  • [ ] 已与行业惯例（GitHub、Stripe等）进行比较
  • [ ] 已根据UX影响分配优先级（P1/P2/P3）
  • [ ] 结论清晰且可操作