10个关于劣质UI的特征
AI 生成的 slop 界面有一套共同痕迹:到处都是渐变、彩虹呕吐物式的配色、脉冲徽章、Emoji 泔水和玻璃拟态;文章逐条列出这些信号,好让人一眼认出它。
中文
复制

最近我们学校的 App 更新了「小幅 UI 改进」,结果是我见过最 slop 的用户界面。 旧 UI 确实笨重,但比起他们那个 AI agent 端出来的一坨,我宁愿用旧的。
什么是 Slop?
Slop UI 就是 AI 做出来的界面:看着不对劲、出现在不该出现的地方、没有实际用途,或者整个 UI 太没个性。
这种问题常见于没有想法的 vibe-coded UI。vibe coding 做得好确实能出好界面,但大多数都做不好。结果就是 App 看起来廉价,用起来也提不起劲。
Slop 网站的例子:
Cloudflare 最近就 slop 了一个网站。


还有这种网站,看一眼就知道。就跟现在那些 AI 视频一样:

总之。以下是构成 slop 的几样东西。
到处都是渐变。
最大、最明显的标志就是渐变。到处渐变,随时渐变,什么东西上都渐变。按钮上有,背景里有,只要能塞进去的地方基本都有。
Slop 大炮不知为何特别爱紫色

彩虹呕吐物。
AI 喜欢用毫无意义的颜色,纯粹就是一堆不同的颜色。
你得到的就是这个:满屏颜色,彼此根本不搭,但就是被涂成那样。因为在做 UI 的时候,字段之间总得有点区分之类的。
它不遵守 70-30-10 法则。它就是到处乱加颜色。

脉冲徽章
我完全不知道它为什么要加这些东西,但它就是会加。我猜是训练数据里就有吧。总之它会给所有东西都加上这种脉动徽章。

我大学那个 app 的“”“升级版”“”里,有个叫数字 ID 的东西,就是显示一个二维码和你的脸。上面有个脉动徽章,写着它是“active”。
问题在于,它从来就不是 inactive 的。如果它是 inactive,app 直接就把你登出了。这信息纯属多余。

而且我的个人资料上还有个“active student”徽章。
谁能告诉我 inactive student 长什么样??

同样在这个数字 ID 界面里,它在我学校 logo 旁边加了个小小的“verified”徽章。
为什么啊。
因为它又不是在调什么 api 然后说“哦对,这人是 verified”。
而且就算它真在调,那也说明不了什么,比如,如果我在伪造我的数字 ID,我会故意加个“unverified”吗????

指甲卡片。
我几乎在每个 vibecoded 的 ui 里都能看到这玩意,每次看到都让我火大。

这玩意到处都是,兄弟。
倒不是说它本身有多烂;只是每个 LLM 在每个地方都把它用烂了,现在看着就是难看。
问题是,我不觉得有任何人曾经有意识地坐下来想过,“你知道吗,加个指甲会让这个更好看”
Emoji Slop
AI 出于某种原因特别爱 emoji。它爱 emoji 的程度,超过 Sam Altman 爱假装他们在引领前沿。

没对齐的东西。
如果你有 SVG 或者 ASCII art 或者某种不在盒子里的元素,它几乎总是没对齐。

字体选择
这些网站通常不会在字体选择上花什么心思。一般就是 Inter;要是你的网站跟编程哪怕沾一点边,那就给你上 JetBrains Mono。
还有这玩意儿:

只要提到任何跟技术沾边的东西,它就会加上这些 //。
因为聊天上下文而产生的冗余文字
它仅仅因为聊天上下文就加一堆冗余文字。比如说,我在做之前那个博客网站时,跟它说:“行,我不想写任何 HTML;我要在我舒服的 Neovim 里写,我不想碰任何跟网页相关的东西。”
结果它加了句“Built with Hugo. Written from Neovim”。
不行,因为没人在乎我是在哪写的。AI 在 readme 里也这么干。它会写“Built with Modern CPP 20 features”。兄弟,谁在乎啊。
我大学的 app 启动界面上就有这个。

问题在于,你几乎能从这个东西里闻出触发它的那条 prompt。
比如“one campus. one app.”。对,肯定是某个管理层的人说:“咱们把 3 个 app 统一一下吧;我们有 3 个分支,就有 3 个 app。”
玻璃拟态
它就爱玻璃拟态。别的设计语言一概不碰(除了粗野主义,而粗野主义做出来全都一模一样)。

而这就是所谓的“粗野主义美学”:

我得承认,粗野主义我还能忍。在被用烂之前,它看着还挺酷,然后你就开始讨厌它了。
千篇一律的标语和没必要的吹嘘
它对“Elevate”“Seamless”“Next-Generation”“Supercharge”“Unleash”和“Empower”这些词特别着迷。
每个 H1 后面都跟着一句灰扑扑的副标题,写着类似:“Experience the power of task management with our cutting-edge intuitive interface.”
它还爱用“Welcome to your Dashboard, [Name] ✨”或者“Revolutionise your workflow”。它
把每个界面都当成落地页来做,而不是一个能凑合用的工具。
结语
说实话,这些不过是我看到垃圾作品时会觉得烦的东西。我也不是反对 vibecoding。这个网站就是 vibe code 出来的,但它看着挺可爱。问题在于,这些人根本不肯花一丁点力气让它哪怕稍微好看一点。