跳到文档正文
oh-my-design
AI slop 判定

判定标准

我们把没有产品依据却反复套用的模式称为 AI slop

这里不判断作者,也不猜使用了哪种工具。只有当熟悉的默认模式代替了产品目的和依据,并开始削弱信息层级与信任时,才会记录为 AI slop。

01 — 单个视觉特征不足以定性

圆角卡片、紫色、居中的首屏和短标题都可能适合某个产品。需要检查的是:没有理由的默认模式是否在同一页面反复叠加,并抹平了产品自己的信息结构和品牌特征。

我们无法从页面判断制作工具,只能检查设计决定是否有迹可循。每条结论都应回答:为什么这个结构和这句话适合当前产品?

每条结论都遵循四项原则

  1. 01

    先了解产品

    目标用户、核心任务、现有行为和 DESIGN.md,优先于通用的反模式清单。

  2. 02

    看组合,不看单个特征

    不会因为一个圆角或一种颜色就下结论。重复频次、同时出现的模式和实际影响都要一起判断。

  3. 03

    把质量问题单独标记

    对比度、焦点状态、内容溢出和异常状态属于质量问题,不用“像 AI”来笼统描述。

  4. 04

    只改必要的部分

    保留产品行为和内容。优先处理影响最大的重复组合,不另套一套新风格。

审查生成式 UI 的十个角度

把它们当作设计评审问题,而不是禁用清单。每项都列出容易趋同的默认做法、设计师通常会保护的判断,以及该模式仍然合理的条件。

01

由优先级决定构图

读完所有标签前,能否看出什么最重要?

趋同的默认做法
每个区块使用相同的标题、卡片数量、对齐和视觉重量。
设计师会保护的判断
把核心任务放在最强位置,辅助信息按实际重要性降低存在感。
仍然适用的条件
重复确实表示步骤、对比项或同类对象时。
LAYOUT-01LAYOUT-05TYPE-01
02

容器用来说明边界

每个方框是否对应对象、动作、选择或层级?

趋同的默认做法
区块外套卡片,内部面板和说明再套卡片。
设计师会保护的判断
优先用留白、对齐、文字和分隔线;只有边界本身有意义时才加容器。
仍然适用的条件
该表面可以单独移动、选择、关闭或复用时。
LAYOUT-02LAYOUT-03VISUAL-03
03

文字层级说明阅读方式

这个页面用于浏览、阅读、比较还是操作?

趋同的默认做法
流行字体、接近的字号、反复出现的小标题和满屏展示字让层级变平。
设计师会保护的判断
根据任务调整行宽、字重、行距和对比,并让同一区域的文字角色保持稳定。
仍然适用的条件
单一字体仍有清楚层级,并符合产品语气时。
TYPE-01TYPE-02TYPE-03
04

颜色和深度各有职责

每个强调色、表面、阴影和圆角都能说明用途吗?

趋同的默认做法
渐变文字、发光、玻璃、大圆角和扩散阴影同时争夺注意力。
设计师会保护的判断
把颜色映射到品牌、动作、状态或选择;同一层级只采用一种边界或 elevation 方式。
仍然适用的条件
材质与配色有品牌依据,同时保持对比和状态可辨识时。
COLOR-01VISUAL-04VISUAL-05
05

用真实内容代替装饰

页面上的什么能证明产品主张?

趋同的默认做法
通用图标、虚构指标、模糊光球和占位仪表盘代替产品内容。
设计师会保护的判断
尽量展示真实流程、素材、数据形态、状态变化或已确认的约束。
仍然适用的条件
插图承载品牌叙事,或解释产品界面无法直接表达的内容时。
EVIDENCE-01VISUAL-02VISUAL-06
06

密度服从任务

相关内容是否靠近,不同组是否明显分开?

趋同的默认做法
设置、表格、营销文案和移动端控件都使用同样宽松的留白。
设计师会保护的判断
组内紧凑、组间清楚;操作型页面优先比较效率,而不是展示型留白。
仍然适用的条件
宽松留白能降低专注流程或编辑阅读的认知负担时。
LAYOUT-05DENSITY-01DENSITY-02
07

把不完美状态也纳入产品

成功之前、之后和失败时会看到什么?

趋同的默认做法
只有精致的成功态,缺少空、加载、错误、权限和长内容状态。
设计师会保护的判断
把状态变化纳入信息架构,并为每个状态提供可执行的下一步。
仍然适用的条件
明确说明它只是静态视觉研究,并不声称可直接上线时。
STATE-01STATE-02COPY-04
08

响应式需要重新排序

空间变小时,哪些内容应该移动、堆叠、折叠或减少?

趋同的默认做法
只缩小桌面列,直到文字截断、控件乱换行、本地化内容撑破布局。
设计师会保护的判断
保留阅读顺序和核心任务;原有关系放不下时,直接改变构图。
仍然适用的条件
横向滚动是有明确提示的数据或媒体浏览方式时。
LAYOUT-06RESPONSIVE-01LOCALE-02
09

动效用来解释变化

运动在说明反馈、起点、连续性还是空间关系?

趋同的默认做法
为让静态页面显得高级,所有元素都淡入、漂浮、弹跳或依次出现。
设计师会保护的判断
只选择一个编排重点;反馈快速、可中断,并尊重减少动态效果设置。
仍然适用的条件
环境动效属于产品体验,且不干扰阅读和操作时。
MOTION-01MOTION-02MOTION-03
10

控件遵守一致的交互约定

控件的外观、名称和结果是否与实际动作一致?

趋同的默认做法
没有行为差异,却不断增加 pill、badge、button、tab 和 modal 变体。
设计师会保护的判断
用具体动词命名动作,必要时让 URL 保存状态,只把短而封闭的任务放进弹窗。
仍然适用的条件
变体区分已验证的状态、权限、风险或专家工作流时。
COMP-01COMP-02COMP-03

Anti-slop 不等于极简主义

设计师并不暗中偏爱某一种外观。他们更在意方向是否符合任务、内部逻辑是否一致,以及执行是否超越模板。

表现型编辑页面

以发现和叙事为目标时,大字、独特构图、图像和有节奏的留白都可以合理。

视觉特征来自主题本身,而不是当下流行的落地页套件。

高密度产品工具

需要反复比较和操作时,表格、紧凑控件、持久导航和克制字体更合适。

密度中仍有清楚分组和稳定扫视路径,也能容纳真实数据和状态。

聚焦式服务流程

信任和完成率更重要时,安静的单列、熟悉控件和直白文案更合适。

简洁用于减少不确定性,而不是掩盖缺失的产品判断。

保持原意,让产品判断更明确

可在“界面”“文案”“多语言”三个示例之间切换。调整后的示例保留原有任务目标,只把套路化装饰替换为具体的设计决策。

默认模式

由装饰决定布局的页面

渐变首屏、图标方块、卡片套卡片、左侧强调线和重复的三列布局,比内容本身的作用更抢眼。

OmD 建议

由用户任务决定布局的页面

只保留一种品牌表达方式。步骤按顺序展示,对比并排展示;只有彼此独立的对象才使用卡片。

LAYOUT-02LAYOUT-03VISUAL-01VISUAL-02

修改原因这不是用另一种流行风格覆盖原页面,而是移除了不能说明对象或动作的容器。

三类标签不要混用

区分模式趋同、产品质量和个人偏好,能让检查结果更准确,也能避免把审美偏好包装成统一标准。

SLOP

缺少上下文的模式组合

默认模式在没有产品依据的情况下叠加,削弱了层级、信任和品牌辨识度。

QUALITY

可以测量或复现的缺陷

无障碍、内容溢出、异常状态、性能或交互未通过检查,或不符合产品约定。

PREFERENCE

有依据的设计选择

选择符合设计简报和 DESIGN.md。即使还有其他方案,也不能算缺陷。

不推翻整套风格,也能发现、修复并复查

检查从产品依据开始,以最小修改结束。不会先选一种更流行的视觉风格。

  1. 01

    阅读产品页面

    先记录目标用户、核心操作、必须保留的行为和设计依据。

  2. 02

    收集可核验的证据

    记录 DOM、CSS、重复次数、代码位置和浏览器结果,再结合产品上下文判断。

  3. 03

    确认模式组合

    对照频次、同时出现的模式、DESIGN.md 例外和页面影响,删除没有依据的结论。

  4. 04

    针对性修复

    只修改恢复产品层级所需的容器、文案和视觉处理。

  5. 05

    在同一页面复查

    在与修改前相同的条件下,复查桌面端、移动端、交互、无障碍和各语言页面。

判定标准参考了哪些研究

分类体系由 OmD 定义。保留原意、综合多项信号判断和依据优先等原则参考了以下公开项目。

im-not-ai识别韩语翻译腔,并在保留原意的前提下局部修改。Humanizer按多项信号共同判断,在保留原意的前提下修改。stop-slop减少赘词、套路化对比和空泛主张,补充具体信息。Impeccable Slop Detector将 slop 模式与一般质量问题分开整理的公开清单。Taste Skill先读设计简报和目标用户,再限制生成式默认模式。Anthropic frontend-design从具体主题确定方向,只保留一个有依据的特征,并在实现前后自我审查。Vercel Web Interface Guidelines面向生产环境检查交互、长内容、响应式、状态、动效和多语言。Carbon Design System按任务调整密度、空间分组、网格节奏,以及操作型和表现型字体。W3C Cards优先安排内容顺序,并让卡片边界具有可访问的结构含义。GOV.UK Design System可读行宽、小屏优先构图、明确动作和组件适用条件。Apple Human Interface Guidelines优先级、分组、自适应层级、渐进披露和平台上下文。Atlassian Elevation让表面深度对应真实层级和交互;不需要抬升时优先使用留白或边界。Microsoft Language Style Guides将韩语、日语、简体中文和繁体中文分别作为独立的本地化版本处理。Primer 产品 UI 模式把空状态、加载、降级、导航和保存放进真实产品流程中说明。Carbon 数据表根据任务选择行密度、对齐表头和工具栏,并判断何时应使用表格而非卡片。Fluent 2 卡片卡片对应一个概念或对象,内部层级与交互方式也应服从这个边界。Fluent 2 形状区分矩形、圆形、胶囊形和浮层指示形,并按尺寸与上下文选择圆角。USWDS 卡片卡片用于集合中的模块化摘要,不应替代装饰、简单操作、表格或连续正文。Primer 空状态与加载把状态说明、恢复操作、进度范围和加载时机作为产品界面的一部分。