Исследование · UX-паттерны · Геймдизайн
Деревья навыков: 6 эталонных визуальных паттернов
Анализ лучших визуальных систем прокачки из AAA-игр. Что делает skill tree запоминающимся — и как это применить за пределами геймдева.
6
Паттернов
1300+
Узлов (PoE рекорд)
1997
Год рождения (Diablo)
3
Оси выбора
2×2
Матрица качеств
∞
Комбинаций
01
Паттерн · Свободный граф (Free-form Graph)
Гигантская паутина без центра
Все классы начинают с разных точек одного графа. 1300+ узлов. Ключевые камни (Keystones) радикально меняют механику. Ощущение: космическая карта персонажа.
💡 Секрет PoE: дерево одно на всех — но точка старта определяет «гравитацию» билда. Свобода с якорем.
02
Паттерн · Иерархическое дерево (Top-down Tree)
Три столбца, читается сверху вниз
Каждый столбец — отдельная специализация (tab). Пререквизиты идут строго вниз. Простота чтения + глубина через синергии между ветками. Определил жанр на 20 лет.
Почему это работает: Человеческий глаз читает сверху вниз. Вертикальная иерархия — самый интуитивный способ показать прогрессию. Не требует обучения.
03
Паттерн · Нарративная метафора (Narrative Metaphor)
Созвездия на ночном небе
Каждый навык — созвездие. Перки — звёзды внутри. Камера буквально поднимается к небу при открытии меню. Ты «читаешь свою судьбу по звёздам» — это не UI, это переживание.
⭐ Skyrim доказал: skill tree может быть арт-объектом. Эмоция важнее информационной плотности.
Лучшие деревья навыков работают на трёх уровнях: ясная иерархия (куда идти), emergent выбор (как совместить) и визуальная метафора (почему это красиво).
Принцип трёх осей · Game UX Design04
Паттерн · Пространственное движение (Spatial Movement)
Настольная игра внутри RPG
Персонажи двигаются по общей гексагональной сетке. Активируют узлы по пути. Пути пересекаются — можно «вторгнуться» в чужую ветку. Это не выбор из меню, а физическое путешествие.
Ключевое отличие: В Sphere Grid ты не «выбираешь навык» — ты «идёшь к нему». Путь и есть прокачка. Каждый узел по дороге — осознанная цена.
05
Паттерн · Гейтинг по очкам (Point-gated Tiers)
Максимальная читаемость
Три колонки, 5–6 тиров в каждой. Вложи N очков — открывается следующий тир. Никаких пререквизитов внутри тира. Идеально для быстрого планирования и сравнения билдов.
📐 Borderlands-формат — лучший выбор, если нужно объяснить систему за 5 секунд. Без обучения, без подсказок.
06
Паттерн · Концентрические кольца (Concentric Rings)
Часовой механизм прокачки
Вращающиеся кольца с сегментами. Внешние кольца — специализации. Визуально: астролябия или часовой механизм. Максимальная плотность информации на единицу площади.
Лучший для ограниченного экрана: Радиальная раскладка вмещает в 2 раза больше узлов на ту же площадь по сравнению с линейными деревьями. Идеален для мобильных.
⊞
Сравнение · Матрица позиционирования (Positioning Matrix)
Какой паттерн для какой задачи
Два измерения: Свобода выбора (горизонталь) и Читаемость (вертикаль).
← Линейная структураСвободная структура →
Читаемость →
Свобода выбора
Ясно + Линейно
Лучший UX, минимум глубины
Column Tiers (Borderlands)
Ясно + Свободно
«Золотая зона» — баланс
Star Map (Skyrim)
Vertical Branches (Diablo II)
Сложно + Линейно
Нишевые решения
Radial Wheel (Wolcen)
Сложно + Свободно
Максимум глубины, хардкор
Constellation Web (PoE)
Sphere Grid (FFX)
🧭 Для консалтинга: Borderlands-формат для матрицы компетенций, Skyrim-формат для визуального roadmap.
| Паттерн | Игра-эталон | Свобода | Читаемость | Лучшее применение |
|---|---|---|---|---|
| Constellation Web | Path of Exile | Макс | Низкая | Сложные экосистемы, системы с emergence |
| Vertical Branches | Diablo II | Средн | Высокая | Иерархии навыков, карьерные карты |
| Star Map | Skyrim | Средн | Высокая | Визуальные roadmap, презентации |
| Sphere Grid | Final Fantasy X | Макс | Низкая | Обучение, мультидисциплинарные пути |
| Column Tiers | Borderlands 2 | Средн | Макс | Матрицы компетенций, быстрые оценки |
| Radial Wheel | Wolcen | Макс | Средн | Мобильные интерфейсы, дашборды |
🔑 Правило: Чем больше свободы — тем ниже читаемость. Всегда выбирай ось, которая важнее для задачи.
Ключевой вывод
Иерархия × Emergence × Метафора
Три оси, которые определяют качество любого дерева навыков — в игре, в обучении, в консалтинге