Когда мне понадобился дашборд для мониторинга AI-агентов, я открыл Dribbble. Закрыл через 10 минут. Одинаковые карточки. Одинаковые графики. Потом вспомнил про Detroit: Become Human — и понял, что игровые UI-дизайнеры давно решили задачи, которые мы игнорируем в продуктовом дизайне.
Почему игровой UI — это не «красиво», а функционально
В играх UI должен работать в стрессовых условиях. Игрок принимает решения за доли секунды. Информация должна считываться периферийным зрением. Ошибка в восприятии = смерть персонажа.
Сравните это с обычным SaaS-дашбордом: пользователь листает 15 вкладок, ищет нужную метрику, щурится на мелкий текст. Игровой UI такого не простит.
Detroit: Become Human особенно интересен, потому что весь интерфейс — это буквально дашборд. Андроид Коннор видит мир через HUD: статусы, вероятности, системные диагностики. Это функциональный UI для принятия решений.
Три принципа CyberLife UI, которые я украл
1. LED-индикаторы вместо текста
В игре у андроидов на виске светится кольцо:
- Синий — всё стабильно
- Жёлтый — стресс, обработка
- Красный — критическая ошибка
Никакого текста «System Healthy» или «Warning: Performance Degraded». Цвет считывается за доли секунды.
Claude Code воспроизвёл это в CSS:
.led-ring {
width: 80px;
height: 80px;
border: 4px solid transparent;
border-top-color: var(--cl-blue);
border-right-color: var(--cl-blue);
border-radius: 50%;
animation: spin 3s linear infinite;
box-shadow: 0 0 15px rgba(51, 181, 229, 0.3);
}Анимация вращения — не декорация. Она показывает, что система «думает», обрабатывает данные. Статичный круг = ошибка связи.
2. Glassmorphism с функцией
Полупрозрачные панели в Detroit — не про «модный тренд 2024». Они решают задачу контекста: андроид видит интерфейс поверх реального мира. Blur-фон показывает, что за панелью что-то есть.
В дашборде это работает так: пользователь понимает иерархию. Чёткий контент — фокус. Размытое — фон, контекст.
.glass-panel {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.6);
}Важно: blur должен быть сильным (15-25px). Лёгкий blur в 5px выглядит как баг.
3. «Software Instability» вместо «Error Rate»
В Detroit есть метрика «Software Instability» — насколько андроид близок к девиации. Это не сухая статистика, это нарратив. Пользователь чувствует напряжение.
Claude Code переименовал скучный «Error Rate» в «Software Instability» и добавил визуал:
<div class="instability-bar-container">
<div class="instability-label">SOFTWARE INSTABILITY</div>
<div class="instability-track">
<div class="instability-fill" style="width: 18%;"></div>
</div>
<div class="instability-val">18.0%</div>
</div>18% ошибок звучит плохо. 18% нестабильности — интригующе. Контекст меняет восприятие.
Типографика: Saira вместо Inter
Каждый второй SaaS использует Inter. Он хорош, но безлик. Detroit использует шрифты с технологическим характером — узкие, геометрические, с характерными Q и R.
Я выбрал Saira и Saira Condensed:
h1, h2, h3 {
font-family: 'Saira Condensed', sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
}
body {
font-family: 'Saira', sans-serif;
}Uppercase + letter-spacing = мгновенное ощущение «системного интерфейса». Без единой строчки дополнительного CSS.
Что не сработало: V2 и откат
Первая версия получилась хорошей. Потом я решил «улучшить»: сменил палитру на более яркий #00BFFF, добавил шрифт Orbitron, усложнил геометрию.
Результат выглядел как sci-fi фильм категории B. Слишком много «футуризма», слишком мало функциональности. Вернул V1 за 2 минуты.
Урок: референс — это про принципы, а не про копирование. Detroit работает, потому что сдержан. Синий + белый + минимум акцентов. Добавляешь третий цвет — и всё ломается.
Где найти игровые референсы
Не обязательно играть 20 часов. Есть ресурсы:
- Game UI Database (gameuidatabase.com) — скриншоты UI из сотен игр
- YouTube: [Game Name] UI Analysis — разборы от дизайнеров
Detroit, Cyberpunk 2077, Death Stranding — в каждой игре свой подход к визуализации сложных систем. Они прошли тысячи часов плейтестов. Мы можем украсть результат.
Вывод
Dribbble показывает, как дизайнеры хотят, чтобы выглядели дашборды. Игры показывают, как дашборды работают под давлением. Detroit: Become Human — это не просто красивая игра. Это UI-библиотека для мониторинга сложных систем.
Синий LED, стекло, сдержанная типографика — и твой B2B-дашборд выглядит как интерфейс андроида из 2038 года. А главное — пользователи перестают искать. Они видят.