10个关于劣质UI的特征

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

中文
复制
Cloudflare slop website

最近我们学校的 App 更新了「小幅 UI 改进」,结果是我见过最 slop 的用户界面。 旧 UI 确实笨重,但比起他们那个 AI agent 端出来的一坨,我宁愿用旧的。

什么是 Slop?

Slop UI 就是 AI 做出来的界面:看着不对劲、出现在不该出现的地方、没有实际用途,或者整个 UI 太没个性。

这种问题常见于没有想法的 vibe-coded UI。vibe coding 做得好确实能出好界面,但大多数都做不好。结果就是 App 看起来廉价,用起来也提不起劲。

Slop 网站的例子:

Cloudflare 最近就 slop 了一个网站。

Cloudflare slop 网站

CloudSlop2

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

slop 仪表盘

总之。以下是构成 slop 的几样东西。

到处都是渐变。

最大、最明显的标志就是渐变。到处渐变,随时渐变,什么东西上都渐变。按钮上有,背景里有,只要能塞进去的地方基本都有。

Slop 大炮不知为何特别爱紫色

紫色 slop

彩虹呕吐物。

AI 喜欢用毫无意义的颜色,纯粹就是一堆不同的颜色。

你得到的就是这个:满屏颜色,彼此根本不搭,但就是被涂成那样。因为在做 UI 的时候,字段之间总得有点区分之类的。

它不遵守 70-30-10 法则。它就是到处乱加颜色。

颜色 slop

脉冲徽章

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

pulse slop

我大学那个 app 的“”“升级版”“”里,有个叫数字 ID 的东西,就是显示一个二维码和你的脸。上面有个脉动徽章,写着它是“active”。

问题在于,它从来就不是 inactive 的。如果它是 inactive,app 直接就把你登出了。这信息纯属多余。

active slop

而且我的个人资料上还有个“active student”徽章。

谁能告诉我 inactive student 长什么样??

active slop 2 electric boogaloo

同样在这个数字 ID 界面里,它在我学校 logo 旁边加了个小小的“verified”徽章。

为什么啊。

因为它又不是在调什么 api 然后说“哦对,这人是 verified”。

而且就算它真在调,那也说明不了什么,比如,如果我在伪造我的数字 ID,我会故意加个“unverified”吗????

verified slop

指甲卡片。

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

fingernail slop

这玩意到处都是,兄弟。

倒不是说它本身有多烂;只是每个 LLM 在每个地方都把它用烂了,现在看着就是难看。

问题是,我不觉得有任何人曾经有意识地坐下来想过,“你知道吗,加个指甲会让这个更好看”

Emoji Slop

AI 出于某种原因特别爱 emoji。它爱 emoji 的程度,超过 Sam Altman 爱假装他们在引领前沿。

emoji slop

没对齐的东西。

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

misaligned slop

字体选择

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

还有这玩意儿:

font slop

只要提到任何跟技术沾边的东西,它就会加上这些 //。

因为聊天上下文而产生的冗余文字

它仅仅因为聊天上下文就加一堆冗余文字。比如说,我在做之前那个博客网站时,跟它说:“行,我不想写任何 HTML;我要在我舒服的 Neovim 里写,我不想碰任何跟网页相关的东西。”

结果它加了句“Built with Hugo. Written from Neovim”。

不行,因为没人在乎我是在哪写的。AI 在 readme 里也这么干。它会写“Built with Modern CPP 20 features”。兄弟,谁在乎啊。

我大学的 app 启动界面上就有这个。

redundent slop

问题在于,你几乎能从这个东西里闻出触发它的那条 prompt。

比如“one campus. one app.”。对,肯定是某个管理层的人说:“咱们把 3 个 app 统一一下吧;我们有 3 个分支,就有 3 个 app。”

玻璃拟态

它就爱玻璃拟态。别的设计语言一概不碰(除了粗野主义,而粗野主义做出来全都一模一样)。

glass slop

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

brutalist

我得承认,粗野主义我还能忍。在被用烂之前,它看着还挺酷,然后你就开始讨厌它了。

千篇一律的标语和没必要的吹嘘

它对“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 出来的,但它看着挺可爱。问题在于,这些人根本不肯花一丁点力气让它哪怕稍微好看一点。

来源: hereticpleb.vercel.app← 返回首页