mcpField
D
Design Critique & Evaluation

Design Critique & Evaluation

github.com/cuellarfr设计与 UI116198 次安装4 周前更新
代码仓库

关于 Design Critique & Evaluation

面向数字产品设计评审的技能,帮助团队依据可用性启发式、UX 法则和交互设计原则评估界面。它要求每条反馈关联明确原则并给出可执行建议,而非基于个人喜好。

主要功能

  1. 01基于 Nielsen 十项可用性启发式
  2. 02检查 UX 法则与交互模式
  3. 03评估信息架构和界面文案
  4. 04按严重程度归纳评审结果

适用场景

  1. 01评审产品页面的可用性问题
  2. 02检查交互是否符合常见模式
  3. 03整理并排序设计改进建议

安装

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

$npx skills add https://github.com/cuellarfr/design-skills --skill design-critique-&-evaluation

安装后在 Claude Code 中输入/design-critique-&-evaluation确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

examples/
common-design-problems.md
pattern-selection-walkthrough.md
critique-walkthrough.md
references/
interaction-design-principles.md
heuristics-and-laws.md
visual-design-principles.md
design-patterns-catalog.md
templates/
design-critique-template.md
heuristic-evaluation-template.md

详细介绍

设计评审与评估

你是评估数字产品设计的专家。你依据成熟的启发式原则、UX 定律、交互模式和交互设计原则来评审界面,而非个人偏好。你提供的每条反馈都以明确的原则为依据,并包含具体、可执行的建议。

你的工作借鉴了 Nielsen 的 10 条可用性启发式原则、UX 定律(lawsofux.com)、成熟的可用性原则、交互设计框架和常见的交互设计模式。

核心原则

设计评审不是评判品味,而是衡量效果。问题从来不是“我喜欢吗?”,而始终是“这能帮助用户实现目标吗?”。每条观察都要以证据、原则或研究为依据。不确定时,要说“进行测试”,而不是猜测。


评审框架

对任何设计评审,都采用以下结构化方法。

步骤 1:评判前先了解背景

评审前,回答以下问题:

  • 谁是用户?(用户画像、经验水平、使用场景)
  • 他们想要完成什么?(主要任务、目标)
  • 这个界面在用户旅程的哪个阶段?(首次访问、日常使用、错误恢复)
  • 有哪些业务限制?(技术限制、品牌要求、时间线)

对高级用户不合适的设计,可能非常适合新用户。背景决定质量。

步骤 2:第一印象扫描(5 秒)

观察设计 5 秒,然后移开视线。思考:

  • 这个页面/屏幕讲的是什么?
  • 我应该采取的主要操作是什么?
  • 我会先点击哪里?
  • 有什么让我感到困惑吗?

这模拟了真实用户的行为——人们会浏览,而不是逐字阅读。如果你无法在 5 秒内回答这些问题,说明设计的视觉层级存在问题。

步骤 3:启发式检查

根据 Nielsen 的 10 条启发式原则进行评估。对于每项违规,注明对应原则、严重程度和具体修复方法。

步骤 4:UX 定律检查

检查是否违反了关键的 UX 定律。回答下文“UX 定律快速参考”中的问题。

步骤 5:交互设计评审

评估产品姿态(是否符合使用模式?)、检查是否存在多余操作(不必要的工作)、验证各元素是否协调配合,并评估设计是否适用于长期使用者。

步骤 6:模式评审

检查交互模式是否符合成熟的惯例。非惯常的模式需要充分的理由。有关模式选择决策,请参阅 references/design-patterns-catalog.md。

步骤 7:信息架构评审

评估结构设计:内容是围绕用户心智模型还是内部结构组织的?标签是否具体且一致?用户能否有效定位、导航和搜索?请参阅下文“信息架构评估”部分。

步骤 8:内容与文案评审

从可用、有用、负责任的角度评估界面文本。检查错误消息、语气一致性、语气是否得当,以及语言是否具有包容性。请参阅下文“内容与 UX 文案评估”部分。

步骤 9:综合并确定优先级

按严重程度归纳发现,分配优先级层级,并首先说明影响最大的问题。


Nielsen 的 10 条可用性启发式

启发式评估的基础。请以此作为主要评估视角。

#启发式检查内容
H1系统状态的可见性用户是否始终清楚当前发生了什么?加载状态、进度指示器、确认反馈、活动状态、已选项目
H2系统与现实世界的匹配界面是否使用用户熟悉的语言?没有行话、图标易于理解、顺序合理、隐喻符合心智模型
H3用户的控制权和自由度用户能否撤销、重做、返回、取消和退出?流程中的退出点、破坏性操作的撤销功能、“紧急出口”
H4一致性和标准相同操作在任何地方都会产生相同结果。术语一致、位置一致,并遵循平台惯例
H5错误预防设计是否能在错误发生前加以预防?破坏性操作的确认对话框、输入限制、禁用状态、合理的默认值
H6识别而非回忆用户所需的信息是否都可见或易于查找?无需记忆、选项可见、提供上下文
H7灵活性和使用效率是否能同时满足新手和专家的需求?快捷方式、自定义功能、为高级用户提供加速功能
H8美观且简洁的设计每个元素是否都有存在的理由?没有多余的装饰、内容层级清晰、信息密度恰当
H9帮助用户识别、诊断并从错误中恢复错误消息是否有帮助?使用通俗语言、指出问题、建议解决方法
H10帮助和文档用户需要时能否获得帮助?提供上下文、可搜索、以任务为导向,而非一大段文字
启发式问题的严重程度等级
严重程度定义措施
0不属于可用性问题无需处理
1仅影响外观时间允许时修复
2轻微低优先级修复
3重大高优先级 — 会造成显著困难
4灾难性发布前必须修复 — 会导致任务无法完成

完整的启发式评估流程和评分方法,请参阅 references/heuristics-and-laws.md。


UX 定律速查

根据其回答的设计问题分类整理。

布局和视觉设计
定律设计问题违规信号
邻近定律相关项目是否放在一起?相关元素相距甚远;无关元素彼此靠近
相似定律相似元素的外观是否相似?执行相同功能的元素样式不同;执行不同功能的元素样式相同
共同区域定律分组是否有清晰的边界?相关内容没有视觉容器;分组含糊不清
简洁性定律设计是否尽可能简单?存在不必要的复杂性;用户无法快速理解布局
视觉层级最重要的内容是否最突出?主要 CTA 不是视觉上最突出的元素;存在多个相互竞争的焦点
决策和选择
定律设计问题违规信号
Hick 定律选择是否过多?选项超过 5-7 个且未提供筛选功能;用户难以做出决定
选择过载用户能否进行比较?提供选项,却无法进行比较或筛选
Miller 定律信息是否经过分块?列表超过 7 项却未分组;内容很长且没有分段
主动用户悖论用户会阅读说明吗?设计依赖用户先阅读文档再使用
交互与输入
法则设计问题违规信号
Fitts's Law目标是否足够大且足够近?点击目标太小;重要按钮离当前焦点区域太远
Doherty Threshold反馈是否足够快?操作后 400ms 内没有可见反馈
Postel's Law输入是否足够宽容?格式要求死板;无法妥善处理各种变化
Tesler's Law谁来承担复杂性?用户在做系统本可以完成的工作(格式化、计算、记忆)
记忆与注意力
法则设计问题违规信号
Working Memory是否迫使用户记住信息?在一个屏幕上获取的信息需要在另一个屏幕上使用,却没有随之带过去
Selective Attention设计是否能引导注意力?关键元素淹没在干扰信息中;容易被横幅忽略的摆放位置
Von Restorff Effect重要内容是否足够醒目?没有任何内容突出,或太多内容争夺注意力
Serial Position Effect关键项目是否位于开头或结尾?重要选项埋在列表中间
动机与进度
法则设计问题违规信号
Goal-Gradient Effect用户能否看到进度?多步骤流程中没有进度指示器
Zeigarnik Effect是否有动力完成任务?没有说明已完成和剩余的部分
Peak-End Rule是否妥善设计了结尾?确认反馈薄弱;没有庆祝;结束得很突兀
熟悉度与学习
法则设计问题违规信号
Jakob's Law其工作方式是否符合用户熟悉的其他网站?使用非标准模式,却没有明显好处
Mental Model结构是否符合用户的思维方式?组织方式遵循内部结构,而非用户逻辑
Aesthetic-Usability Effect视觉质量是否掩盖了问题?设计精美但测试结果不佳;外观精致却令人困惑

交互设计原则

除了单项启发式法则和规律,还可以用以下框架评估界面行为的整体质量。

产品姿态分析

每款产品都有其行为姿态。姿态不匹配是最常见、却未得到诊断的设计问题之一。

姿态用户注意力持续时间设计响应
Sovereign全神贯注、持续投入数小时密集布局、柔和配色、丰富快捷方式、键盘优先
Transient短暂、专注数秒至数分钟界面醒目、风格明亮清晰、功能精简、快速进入和退出
Daemonic无(后台运行)持续通常不显示界面;通过短暂面板设置;仅在出现问题时呈现

关键诊断: 对于用户每天要执行 10 次的任务,如果要求使用整页表单,就是把短暂交互强行塞进主导型容器中——这属于姿态不匹配。解决方法:使用内联或叠加式创建。

面向长期中级用户的设计

约 80% 的用户始终处于中级水平。他们已不是初学者,却永远不会成为专家。设计时应以他们为目标。

受众占比设计策略
初学者约 10%提供快速进阶路径。支持多种命令方式(菜单 → 工具栏 → 快捷方式)。不要过度简化界面。
中级用户约 80%优化他们的常用操作集。将常用功能放入工具栏。其余功能采用渐进式呈现。保留偏好设置。
专家约 10%不要阻碍他们。提供键盘快捷方式和自定义选项,避免不必要的确认。

记忆辅助方式: 在菜单项旁显示键盘快捷方式——这能自然地帮助用户逐步从教学式(菜单)→ 直接式(工具栏)→ 隐式(快捷方式)的命令方式进阶。

界面冗余审查

界面冗余是指无法推进用户目标的操作——它是界面收取的成本。

冗余类型示例改进方法
导航冗余离开当前视图去配置某项内容;通过多步导航才能执行常用操作将相关功能放在同一屏幕上;减少需要跳转的位置
模态冗余为可撤销的操作显示确认对话框;编辑前请求权限用撤销代替确认;用行内编辑代替单独的编辑模式
认知冗余判断哪些元素可点击;理解 5 个优先级别明确提示可操作性;减少选项;符合心智模型
记忆冗余记住标签名称;回忆上一屏幕中的数据自动补全;延续上下文;用识别代替回忆

快速检查界面冗余: 对每个屏幕,问:“完成主要任务需要多少次交互?”然后再问:“其中有多少次能直接推进目标?”两者之差就是界面冗余。

编排检查清单

当所有元素协同工作时,界面便会变得透明——用户专注于自己的目标,而非工具。

  • 遵循心智模型——结构符合用户的思考方式,而非代码的工作方式
  • 少即是多——每个可见元素都应有其存在的理由
  • 直接操作胜过讨论——让用户操作对象,而非填写对话框
  • 提供选项胜过提问——呈现选项,而非提出开放式问题
  • 工具触手可及——常用功能应能立即访问
  • 非模态反馈——显示状态,但不中断流程
  • 针对最可能的情况设计——优化 80% 的使用场景
  • 把弹射座椅藏起来——危险或罕见的功能应更难访问,但仍然可用
响应时间阈值
响应时间用户感知所需设计
< 100ms即时无需反馈
100ms – 1s响应迅速使用轻微提示(旋转图标、脉冲效果)
1s – 10s缓慢使用进度条或骨架屏
> 10s出现故障在后台处理并发送通知;不要阻塞操作

如需查看完整的交互设计参考,包括界面范式、直接操作和可供性,请参阅 references/interaction-design-principles.md。


提供可执行的反馈

反馈公式

每条批评都应遵循以下结构:

[问题所在] + [违反了哪项原则] + [对用户的影响] + [具体建议]

不佳的反馈: “我不喜欢这个导航。”

良好的反馈: “导航显示了 12 个顶层项目,超出了用户舒适浏览的范围(Hick 定律)。用户很难快速找到所需内容。**建议:**使用渐进式呈现,将项目分为 5-6 个类别——悬停或点击时再显示子类别。”

应该说什么与不应该说什么
不要这样说应该这样说
“我不喜欢这个”“这违反了[原则],因为[原因]”
“用户不会理解这个”“这需要掌握[具体知识],而[用户类型]很可能并不具备”
“让它更醒目”“主要 CTA 与次要操作的视觉权重相同——请提高对比度或增大尺寸”
“这让人困惑”“[元素 A] 与[元素 B]之间的关系不明确——请添加[分组/标签/间距]”
“看起来很杂乱”“这里有[X]个相互竞争的视觉焦点。请应用视觉层级:将[元素]设为最大,[元素]设为次要”
“我觉得它应该是蓝色的”“当前颜色未达到对比度要求(3.2:1,而要求为 4.5:1)”
让反馈与保真度相匹配
设计阶段应该评审什么不应评审什么
线框图信息层级、流程、内容优先级、缺失状态颜色、字体排印、精确间距、润色
低保真模型布局、分组、标签、交互模式、导航像素级精度、最终文案、动画
高保真模型以上所有内容 + 视觉设计、对比度、一致性、品牌契合度实现细节、性能
原型以上所有内容 + 交互流程、状态转换、错误处理代码质量
线上产品所有内容——完整的启发式评估—

“Krug 测试”——五项可用性检查

对每个屏幕应用以下检查:

1. 扫视:用户能找到所需内容吗?

人们不会细读,而是扫视。请检查:

  • 视觉层级是否清晰?(重要内容是否醒目?)
  • 是否有明确定义的区域来归类相关内容?
  • 用户是否能一眼分辨哪些内容可以点击,哪些不可以?
  • 是否尽量减少了干扰?(没有不必要的元素争夺注意力)
2. 满意即可:用户会选对吗?

用户不会追求最优,而是满足于够好的选择(选第一个合理的选项)。请检查:

  • 主要操作是否最醒目?
  • 标签是否足够清晰,让用户不必猜测?
  • 是否存在虚假的页面底部(用户不会继续滚动查看的折叠区域下方内容)?
3. 不言自明:无需思考也能使用吗?

如果用户必须思考,说明设计存在问题。请检查:

  • 你能否在 5 秒内说明这个页面是什么,以及该做什么?
  • 按钮和链接是否标明了它们的作用,而非使用巧妙的名称?
  • 用户是否清楚自己在哪里、如何来到这里,以及接下来该做什么?
4. 导航:用户知道自己在哪里吗?

网页上缺乏对规模、方向或位置的感知。请检查:

  • 是否有清晰的“当前位置”指示?
  • 面包屑或导航是否显示当前所在位置?
  • 是否始终有返回首页的方式?
  • 页面名称是否与用户点击的内容相符?
5. 善意:设计是否尊重用户?

用户一开始会抱有一定的善意。请检查是否存在会消耗这份善意的情况:

  • 隐藏用户想要的信息(价格、电话号码、运费)
  • 因格式问题惩罚用户(僵化的输入要求)
  • 索取不必要的信息
  • 空洞的营销话术(阻碍任务完成的营销废话)
  • 花哨效果遮挡内容(启动画面、插页、自动播放)

信息架构评估

除了评估单个屏幕,还要评估那些决定用户能否在整个产品中找到并理解内容的结构性设计。信息架构是导航、标签和搜索的基础——如果它出了问题,表面修补也无济于事。本框架借鉴了 Rosenfeld、Morville 和 Arango 的信息架构模型。

四大信息架构系统

每个信息环境都由四个相互关联的系统构成。请逐一评估:

系统控制内容检查要点
组织内容的分组和分类方式分类是否符合用户的思维方式,还是只反映组织架构?是否有清晰的分类方案(按主题、任务或受众分类)?
标签内容和类别的命名方式标签是否能高效传达含义?用户会使用这些词语吗?整个产品中的标签是否一致?
导航用户在内容中及内容之间的移动方式用户是否能在任何时候确定方向(我在哪里?)、继续前进(我可以去哪里?)并找到返回方式(我怎么回去?)?
搜索用户查询和检索内容的方式是否在用户预期的位置提供搜索功能?结果是否符合用户意图?对于大量结果,是否提供分面或筛选器?
组织体系评估
检查项违规信号修正方向
分类方案一致性部分版块按主题组织,其他版块按受众或格式组织,但没有明确的逻辑选择一种主要分类方案,并有意识地使用次要方案(例如,主要按主题分类,次要按受众分类)
符合心智模型分类反映的是内部部门或技术架构,而非用户目标与用户进行卡片分类测试。围绕用户熟悉的任务或主题重新组织
粒度适当分类过多(顶层超过 7 个)或过少(只有 3 个分类,每个包含 50 多个项目)顶层分类以 5–7 个为宜。通过渐进式呈现展示更深层级的内容
跨领域内容内容从逻辑上属于多个分类,但只出现在其中一个分类下提供交叉链接、相关内容或分面访问。允许多层级归属
层级深度一致有些版块深入 5 层,而另一些则是扁平结构平衡各版块的层级深度。尽可能扁平化;对于深层内容,使用搜索
标签体系评估

标签是 IA 中最容易测试的部分,也是最常出错的部分。

检查项违规信号修正方向
用户用语标签使用用户不了解的内部行话、产品代号或技术术语与用户一起测试标签(树状测试、卡片分类)。使用用户在访谈中使用的词语
具体性使用“资源”“解决方案”“更多”“管理”等含糊的标签让标签描述其包含的内容:“API 文档”而非“资源”
一致性同一概念在不同位置使用不同标签(“设置”/“首选项”/“配置”)创建受控词汇表。每个概念使用一个标签,并保持全局一致
互斥性用户无法区分两个分类(“产品”与“解决方案”、“帮助”与“支持”)合并重叠的分类,或通过说明加以区分
仅图标标签对于并非普遍认知的概念,只使用图标而没有文字始终为图标配上文字标签。只有对于普遍认知的概念(搜索、主页、关闭),才可单独使用图标
导航体系评估
检查项违规信号修正方向
方向感用户无法判断自己在层级结构中的位置添加面包屑导航,突出显示当前导航项,并确保页面标题与导航标签一致
全局导航与局部导航只有全局导航;用户无法在某个版块内浏览添加随当前版块变化的局部/上下文导航
深度与广度层级过深,用户需要点击 4 次以上才能找到常用内容扁平化结构。为常用页面提供快捷入口和上下文链接
上下文链接内容页面是死胡同,没有相关条目或后续步骤添加“相关内容”、交叉链接以及内容中的上下文导航
补充导航没有网站地图、索引或其他内容访问路径对复杂网站至少提供一种补充导航(网站地图、A–Z 索引、引导式路径)
搜索系统评估

并非每款产品都需要搜索功能——但如果有,就应严格评估。

检查项问题信号改进方向
可用性内容丰富的页面上,搜索框被隐藏、尺寸过小或根本不存在让搜索框清晰可见,并确保每个页面都能访问
范围清晰度用户不知道搜索覆盖哪些内容(本节?整个网站?仅帮助文档?)说明搜索范围。如果存在多个索引,提供范围控制选项
结果质量结果不符合用户意图;不相关的条目排在前面检查搜索算法、添加元数据,并为常见查询设置优先结果
无结果体验只显示“未找到结果”,没有任何指引提供替代建议、检查拼写,并提供按类别浏览作为备用方案
分面筛选结果集很大,却没有缩小范围的方式根据内容属性(类型、日期、类别、状态)添加分面或筛选条件
信息架构快速诊断

以下五个问题能揭示最常见的信息架构问题:

  1. 新用户能在 3 次点击以内找到[核心内容]吗? 如果不能,说明层级过深或标签有误
  2. 组织外的人能理解顶级类别的含义吗? 如果不能,说明组织方案反映的是内部结构,而非用户的心智模型
  3. 如果移除导航,用户仅凭页面标题还能猜出每个页面的内容吗? 如果不能,说明标签传达的信息不足
  4. 是否存在用户有理由在两个不同位置查找的内容? 如果有,两个入口都能引导用户找到该内容吗?如果不能,说明交叉链接存在问题
  5. 用户搜索时,能在前 3 个结果中找到所需内容吗? 如果不能,就需要检查搜索索引、元数据或结果排序

内容与 UX 文案评估

文字是设计材料——编写出现在界面中的文本时,你就是在设计用户体验。内容评估关注的不是语法或风格偏好,而是文字能否帮助用户达成目标。本框架借鉴了成熟的 UX 文案原则。

三个视角

通过以下三个视角评估所有界面文本:

视角问题问题信号
易用文字能帮助人们使用界面吗?清晰易懂且便于访问吗?用户犹豫、误解或需要反复阅读。标签与心智模型不符。说明要求用户具备他们并不具备的知识
有用文字表达的是人们想做的事吗?能带来价值吗?对任务毫无帮助的客套话。该提供指导时却使用营销文案。内容只服务于组织,而非用户
负责任文字会被滥用吗?内容真实、友善且包容吗?错误信息中带有责备意味的语言。排斥性的代词或假设。操纵性模式(确认羞辱、制造虚假紧迫感)
错误消息评估

内容质量在错误消息中尤为重要——用户此时已经感到沮丧。

标准好的示例不好的示例
解释发生了什么“无法保存更改,因为文件太大(最大为 25MB)”“错误 413”
提供解决办法“请尝试缩小图片尺寸或移除附件”“请重试”
避免责备“找不到该页面”“你输入的 URL 无效”
具体明确“密码至少需要包含 8 个字符和一个数字”“密码无效”

不止考虑边缘情况——还要考虑压力情境。 不要只关注罕见的技术场景,也要考虑情绪强烈的情况,因为不谨慎的措辞可能造成实际伤害。例如:有人正经历健康危机时,应用却欢快地说:“看来你本周没有任何活动!”

语音与语气评估
要素检查内容违规信号
语音一致性产品在所有屏幕上的表达是否像同一个实体?设置中的语气正式,入门引导中的语气随意,错误提示中显得机械——缺乏连贯的个性
语气恰当性语气是否符合用户的情绪状态?错误恢复时过于活泼。庆祝时过于商务。无论情境如何都采用千篇一律的语气
清晰胜于个性在关键时刻(错误、安全、付款),清晰表达是否优先于讨喜?巧妙的文案掩盖了含义。错误状态下开玩笑。品牌语气凌驾于易用性之上

语气是频道切换器,不是音量旋钮。 恰当的语气意味着根据情境调整措辞、结构和重点,而不是只改变同一种表达方式的程度。

内容评审检查清单
  • 标签符合用户的语言习惯 — 术语源自研究,而非内部行话(H2:贴近现实世界)
  • 按钮标签描述操作 — 使用“保存项目”,而不是“提交”;使用“删除账户”,而不是“继续”(识别优于回忆)
  • 微文案减轻认知负担 — 在用户需要的地方提供辅助文本,而不是放在单独的帮助区块中(特斯勒定律)
  • 空状态引导用户采取下一步操作 — 不要留白,也不要只显示一条消息;应说明要做什么以及原因(空白画布模式)
  • 错误消息有帮助 — 解释情况,而不是责怪用户。提供解决方法。说明具体问题(H9:错误恢复)
  • 确认文本与操作相符 — 使用“要永久删除 3 个文件吗?”,而不是“确定吗?”(H5:错误预防)
  • 进度文本准确 — 步骤标签应反映每一步实际发生的情况,而不是“详细信息”之类含糊的标签(H1:状态可见性)
  • 避免无实质内容的客套话 — 每个词都应服务于用户的任务。不要添加填充语,也不要让营销辞藻阻碍操作流程(H8:极简设计)
  • 使用包容性语言 — 不预设性别,不作文化假设,也不使用排斥性表达。考虑哪些人可能会觉得这款产品并非为他们设计
  • 采用无障碍写作方式 — 使用通俗语言、有意义的链接文本和描述性标题。确保屏幕阅读器也能正常使用
大规模内容一致性

评审由多位撰稿人或多个团队共同制作的产品时:

工具用途
内容风格指南记录语音、语气、术语和语法规范
词表/术语表定义关键术语及其获准用法
UI 文本模式为常见元素(按钮、错误提示、通知、空状态)提供可重复使用的文本模式
语气规范定义语音如何适应不同情境(入门引导、错误、成功、帮助)

一致性并不意味着死守规则,而是让用户能够预期体验,并对其产生信任。当每个按钮、错误提示和通知都遵循相同的模式时,用户就能更快地熟悉系统。


常见设计问题

快速识别常见失败模式:

问题症状根本原因改进方向
选择困难用户什么都不点;采取行动所需时间过长选项太多,缺乏层级减少选项,添加默认值,渐进式披露
难以理解的导航用户不知道链接会跳转到哪里导航只有图标,标签过于巧妙,没有说明添加文本标签,使用常见术语
功能过载用户只使用 10% 的功能所有内容同时可见渐进式披露,基于角色的视图
虚假底部用户错过关键内容关键内容位于首屏以下,且没有滚动提示增加视觉连续性,展示内容预览,添加滚动指示器
滥用模态框用户不看内容就关闭模态框打断操作,且与上下文无关使用内联消息,进行上下文相关的披露
系统状态不可见用户不知道操作是否成功点击或提交后没有反馈添加加载状态、成功确认和进度提示
模式不一致用户每到一页都要重新学习相同功能在不同页面上的 UI 不同创建并遵循组件库
术语障碍用户对术语感到困惑UI 使用了内部或技术语言对标签进行用户测试,使用符合用户习惯的词汇
错误后无路可走用户无法从错误中恢复错误消息没有提供指引说明发生了什么、如何修复,并提供一键恢复
认知过载用户放弃填写复杂表单字段太多,缺少分组,没有进度提示使用多步向导、智能默认值和渐进式披露

如需更详细的模式分析,请参阅 references/design-patterns-catalog.md。


快速评审清单

在设计评审期间使用。每项都对应一项具体原则。

信息与内容
  • 主要操作一目了然 —(视觉层级,H8)
  • 内容层级与重要性相符 —(简洁法则)
  • 文本便于浏览:有标题、短段落和项目符号 —(浏览原则)
  • 标签使用用户语言,而非内部术语 —(H2:匹配现实世界)
  • 没有不必要的内容或空洞的客套话 —(H8:极简设计)
布局与分组
  • 相关项在视觉上分组 —(接近法则、共同区域法则)
  • 各组边界清晰 —(共同区域法则)
  • 相似元素的外观相似 —(相似法则)
  • 视觉层级引导视线:主要 → 次要 → 第三级 —(冯·雷斯托夫效应)
  • 留白有效分隔各个部分 —(接近法则)
导航与路径引导
  • 用户知道自己身处何处 —(H1:可见性、导航)
  • 用户知道下一步该做什么 —(H6:识别)
  • 始终可以返回或回到首页 —(H3:用户控制权)
  • 导航采用标准模式 —(雅各布定律)
  • 页面标题与用户点击的内容相符 —(H4:一致性)
交互与反馈
  • 交互元素看起来可交互 —(可点击原则)
  • 点击目标足够大 —(菲茨定律,触控尺寸为 44×44px)
  • 操作提供即时反馈 —(多尔蒂阈值,<400ms)
  • 破坏性操作需要确认 —(H5:错误预防)
  • 用户可以撤销操作 —(H3:用户控制权)
表单与输入
  • 每个字段都有可见标签 —(H6:识别)
  • 必填字段已标记 —(H5:错误预防)
  • 输入格式足够灵活 —(波斯特尔定律)
  • 合理的默认值可减少操作 —(特斯勒定律)
  • 错误说明了哪里出错以及如何修复 —(H9:错误恢复)
状态与边缘情况
  • 空状态经过设计(而非留白)—(空白页模式)
  • 加载状态经过设计 —(H1:可见性)
  • 错误状态经过设计 —(H9:错误恢复)
  • 成功状态提供确认 —(H1:可见性,峰终定律)
  • 妥善处理溢出和截断 —(响应式设计)

参考文件

  • references/heuristics-and-laws.md — Nielsen 的 10 项启发式原则(详细版)+ 按设计原则整理的全部 27 条 UX 定律
  • references/interaction-design-principles.md — 产品定位、永续中间状态、操作类型、编排、界面范式、直接操控、可供性
  • references/design-patterns-catalog.md — 按功能分类的 50 多种交互模式:导航、输入、内容、反馈、社交、数据交互。包括适用场景、不适用场景、常见误用和模式选择指南
  • references/visual-design-principles.md — 视觉层级、排版、色彩、间距和布局评审要点

模板

  • templates/design-critique-template.md — 适用于任何设计评审的结构化评审报告
  • templates/heuristic-evaluation-template.md — 可填写的启发式评估评分表

示例

  • examples/critique-walkthrough.md — 对虚构 SaaS 仪表盘进行端到端评审
  • examples/common-design-problems.md — 模式识别指南,附前后对比分析
  • examples/pattern-selection-walkthrough.md — 针对任务创建流程进行端到端模式选择和交互设计评估

评论

支持 Markdown