Что такое слоп в UI?
Слоп-UI — это интерфейс, который AI генерирует, но он выглядит не на месте, не служит никакой цели или просто выглядит слишком обобщённо. Это вибиковано спроектированный интерфейс без видения. Вибикод может выглядеть отлично, когда это сделано правильно, но в большинстве случаев он делает приложение дешёвым и непривлекательным в использовании.
Примеры слопа в реальных сайтах
Недавно Cloudflare запустил сайт, который может служить учебником по слопу:
И сайты наподобие этого тоже демонстрируют слоп — заметить его можно интуитивно. Это похоже на AI-видео в наши дни:
Рассмотрим основные признаки, из которых складывается слоп.
Градиенты. Градиенты везде.
Самый очевидный признак — градиенты. Они повсюду: на кнопках, в фоне, практически на всём, что можно покрыть. AI просто обожает градиенты.
Особенно полюбились фиолетовые градиенты
Радужная рвота
AI тащится от цветов, которые ничего не значат и просто отличаются друг от друга. Результат — экран, наводненный разными цветами, которые плохо сочетаются, но расставлены туда ради различия полей при генерации интерфейса.
Не соблюдается правило 70-30-10 для цветовой схемы. Цвета просто добавляются повсеместно.
Пульсирующие бейджи
Непонятно, почему AI это делает, но добавляет пульсирующие бейджи на всё подряд. Видимо, это просто присутствует в обучающих данных. В обновлённом приложении университета появился цифровой ID, показывающий QR-код и фотографию. И на нём пульсирует бейдж, говорящий, что ID "активен".
Вот в чём проблема: это НИКОГДА не неактивно. Если бы цифровой ID был неактивен, приложение просто разлогинило бы пользователя. Информация совершенно избыточна.
В профиле появился бейдж "активный студент".
Кто-нибудь может мне объяснить, как выглядит неактивный студент?
Также в интерфейсе цифрового ID добавлен маленький бейдж "проверено" рядом с логотипом университета.
Зачем?
Потому что это же не как будто API вызывается и говорит: "О да, этот парень проверен".
И ДАЖЕ ЕСЛИ БЫ ЭТО БЫЛО ТАК, ЭТО НИЧЕГО НЕ ЗНАЧИТ. Если бы кто-то подделывал цифровой ID, зачем бы он намеренно добавил метку "не проверено"???
Карточки-ногти
Эти штуки встречаются буквально в каждом вибикод-интерфейсе, и это раздражает каждый раз.
Видишь их везде. И дело не в том, что они плохие; просто они настолько переиспользованы каждой нейросетью буквально везде, что теперь просто выглядят ужасно.
Никто НИКОГДА осознанно не думал: "Знаешь, что бы улучшило это? Ноготь".
Эмодзи-слоп
AI обожает эмодзи, почему-то больше, чем Сэм Альтман обожает говорить о том, что он идёт в авангарде прогресса.
Неравномерное выравнивание
Если в интерфейсе есть SVG, ASCII-арт или какой-то элемент вне боксов, он практически всегда неправильно выравнен.
Вот, например, список в расписании приложения университета:
Выбор шрифтов
Такие сайты обычно не стремятся к интересному выбору шрифтов. Чаще всего это Inter или, если сайт хоть как-то связан с программированием, JetBrains Mono.
И ещё вот это:
Везде, где упоминается что-то技术, добавляются //.
Избыточный текст из-за контекста диалога
AI просто напихивает кучу избыточного текста из-за контекста диалога. Например, когда он делал предыдущий блог-сайт и сказал ему: "Слушай, я не хочу писать HTML; я буду писать в своём уютном Neovim, и я не хочу иметь дело с веб-штуками".
Оно добавило текст: "Построено на Hugo. Написано из Neovim".
Нет, потому что никому не важно, откуда я это пишу. AI делает то же самое в README файлах. Пишет "Построено на Modern C++ 20 features" — БРО, КОГО ЭТО ВОЛНУЕТ?
В приложении университета это есть на стартовом экране:
Интересно то, что можно практически ПОЧУВСТВОВАТЬ ПРОМПТ, который это вызвал. "One campus. One app." Ясно, какой-то менеджер сказал: "Давайте унифицируем наши 3 приложения; у нас есть 3 приложения для 3 филиалов".
Glassmorphism
AI просто обожает glassmorphism. Не стремится ни к какому другому языку дизайна (кроме брутализма, и брутализм у всех выглядит АБСОЛЮТНО ОДИНАКОВО).
А вот это "брутальная эстетика":
Признаю, брутализм можно прощить. Выглядит довольно круто, пока не переиспользуется, а потом начинаешь его ненавидеть.
Универсальные слоганы и ненужный хайп
AI одержимо использует слова "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". Каждый экран трактует как посадочную страницу, а не как функциональный инструмент.
Заключение
Честно говоря, это просто набор вещей, которые раздражают при виде слопа. И я не против вибикода вообще. Этот сайт вибикод, и он выглядит мило. Просто такие люди не прикладывают НИКАКОГО труда, чтобы сделать хотя бы немного хорошо.