UI/UX-дизайнер в геймдеве: почему рисовать кнопки уже недостаточно

Введение

Привет! Меня зовут Дима, я Senior UI/UX-дизайнер в Tanks Blitz. В этой статье я хочу разобрать, чем на практике занимается UI/UX-дизайнер в современной игровой разработке и почему его работа давно не сводится к созданию красивых экранов.

Когда игрок впервые запускает игру, ему нужно быстро разобраться в большом количестве вещей: что происходит на экране, куда идти, что означают незнакомые элементы, какую цель выполнять и где искать нужную функцию. Если интерфейс не помогает пройти этот путь, игрок скорее скажет «игра неудобная» или «я не понимаю, что делать», чем будет искать конкретную проблему в UX.

При этом современная игра сама по себе стала заметно сложнее. Помимо основного геймплея, в ней могут быть прогрессия, экономика, события, Battle Pass, магазин, социальные функции, рейтинги и десятки других систем. UI оказывается точкой взаимодействия игрока со всеми ними.

Отсюда и тема статьи: что входит в работу UI/UX-дизайнера сегодня, какие задачи он решает вместе с командой и какие компетенции для этого нужны. Чтобы не превращать текст в теоретический обзор, я буду опираться на конкретные игровые примеры meta- и core-механик различных тайтлов, в том числе и нашего, и кейсы из разработки.

Как изменилась роль UI/UX-дизайнера

Если спросить человека, далёкого от игровой разработки, чем занимается UI/UX-дизайнер, его ответ прозвучит просто: рисует кнопки, меню и экраны. Исторически в этом действительно было больше правды, чем сейчас.

В более ранних играх интерфейс чаще выполнял вспомогательную функцию: давал доступ к меню, инвентарю, карте, настройкам и нескольким основным системам. Это не делало работу простой, но масштаб UI-задач был ограничен самим количеством игровых систем.

Современная LiveOps-игра устроена иначе. Сезонные события, задания, временные режимы, магазины, прогрессия и социальные механики постоянно добавляют новые сценарии взаимодействия. Приходится не просто «оформлять» UI, а поддерживать целую систему взаимосвязанных состояний и пользовательских маршрутов.

Показательный пример — Hearthstone. Blizzard в рамках переработки прогрессии объединила достижения, единую Rewards Track, ежедневные и еженедельные задания и обновлённый профиль игрока. Это уже не один экран, а целая система, которую игрок должен понимать как единый продукт.

Источник: Blizzard — Revamping Progression & Rewards in Hearthstone

Поэтому вместе с играми изменился и набор задач дизайнера. Вопрос теперь не только в том, как выглядит экран, а в том, как игрок проходит сценарий, какую информацию получает на каждом шаге и как этот интерфейс связан с игровой системой.

Коротко: UI/UX-дизайнер всё ещё отвечает за визуальную часть интерфейса, но теперь визуал — это не вся работа, а лишь один из её этапов.

Что на самом деле делает UI/UX-дизайнер сегодня

Удобнее всего посмотреть на профессию через типовые задачи, которые возникают в реальной разработке.

1. UI/UX-дизайнер управляет вниманием

На одном экране могут находиться десятки элементов, но игрок не воспринимает их как равнозначные. Дизайнеру нужно определить, что человек должен заметить первым, что может прочитать позже, а что вообще не должно конкурировать с основным действием.

Например, в лобби Fortnite игрок видит множество функций: режимы, задания, события, косметику, социальные элементы. Но основной сценарий — начать игру — получает очевидный визуальный приоритет. Это не сводится к «большой кнопке»: важны позиция, контраст, размер и окружение элемента.

Практический вывод: визуальная иерархия — это способ расставить приоритеты между действиями игрока.

На уровне HCI это связано, в том числе, с Fitts's Law: скорость взаимодействия зависит от размера цели и расстояния до неё. Для игрового UI это особенно заметно там, где действие нужно совершать быстро или регулярно.

Источник: Nielsen Norman Group — Fitts's Law

2. UI/UX-дизайнер помогает принимать решения

Игрок постоянно выбирает: какой режим запустить, какую награду забрать, какой предмет купить, какое событие открыть. Чем больше вариантов и чем сложнее их сравнить, тем больше работы приходится делать интерфейсу, чтобы не превращать выбор в поиск нужной информации.

Хороший пример — VALORANT. Riot несколько раз перерабатывала клиентскую навигацию именно из-за проблем с читаемостью и юзабилити. В одной из обновлённых версий компания отдельно отмечала, что упростила геометрию, усилила контраст и сделала призывы к действию более заметными. В более раннем обновлении Riot также унифицировала навигацию подробных экранов, добавив единый паттерн возврата назад.

Источники: VALORANT — Updated Interface · VALORANT Patch 1.02

Задача здесь не в том, чтобы «сделать магазин красивым». Дизайнер работает с порядком выбора: что показать первым, что объединить, какой уровень детализации дать сразу, а какой оставить на следующий шаг.

3. UI/UX-дизайнер делает прогресс и результат понятными

Многие игровые системы существуют в числах: опыт, уровень, рейтинг, редкость предмета, накопленные награды. Игроку, однако, нужен не только факт изменения числа, но и понятная обратная связь.

В Hearthstone Rewards Track прогресс собран в последовательную ленту наград: игрок видит уровни, будущие награды и связь между получаемым опытом и следующим результатом. Blizzard прямо описывает Rewards Track как карту наград, которую игрок проходит, зарабатывая XP.

Источник: Blizzard — Rewards Track & Tavern Pass

Другой пример — Diablo IV. Blizzard рассказывали, как перерабатывали инвентарь: меняли контраст, цвет, размер иконок и добавляли дополнительные визуальные признаки редкости через рамки. Это хороший пример того, как UI должен не просто показать предмет, а быстро сообщить о его статусе.

Источник: Blizzard — Diablo IV UI update

В этом же направлении работает motion и звуковая обратная связь. В Diablo IV, например, визуальные и звуковые сигналы используются, чтобы игрок быстрее находил выпавшие предметы и различал их редкость.

Источник: Blizzard — Accessibility in Diablo IV

4. UI/UX-дизайнер проектирует взаимодействие с игровыми системами

Это самая «невидимая» часть работы. Когда в игре появляется новая система, дизайнеру нужно не только собрать экран, но и разобраться в самом сценарии: что игрок должен знать до начала действия, какое состояние увидит после него, где может ошибиться и какие ограничения задаёт сама игра.

Хороший пример — Dead Space. В этой серии здоровье, боезапас, навигация и меню были встроены в мир игры через RIG и голографические интерфейсы. Но важнее самой стилистики то, что такой подход был связан с конкретной целью: сохранить функциональность интерфейса, не превращая его в отдельный слой поверх хоррора. При этом команда столкнулась и с ограничениями: например, первоначальная 3D-карта не справлялась с навигационной задачей, поэтому появился дополнительный локатор.

Источники: Game Developer — Game UI Discoveries: Dead Space · Game Developer — Diegesis and designing for immersion

Именно здесь UI/UX-дизайнер становится полноценным участником разработки функции: ему нужно понимать не только экран, но и систему, сценарий, ограничения реализации и поведение игрока.

Практический кейс: обновлённый Премиум Аккаунт

Чтобы не оставаться на уровне чужих примеров, приведу кейс из нашей разработки. Фичу делал другой дизайнер, поэтому здесь я расскажу именно о командном процессе и решениях, которые были приняты в рамках проекта.

Премиум Аккаунт был старой системой, которую решили переработать одновременно с обновлением интерфейса и визуального стиля игры. Целью было расширить функциональность премиума и увеличить пользу от его использования. В итоге фича выросла примерно до двадцати экранов и состояний: страница премиума, сессионная статистика, armor viewer, ban карт, paywall и дополнительные экраны для игроков без премиума.

Главная UX-проблема оказалась не в количестве экранов как таковом, а в количестве информации. В сессионной статистике и отдельных вкладках armor viewer можно было показать гораздо больше данных, чем игрок способен быстро обработать. Поэтому приходилось решать, что должно быть видно сразу, что можно перенести на второй уровень и какие части лучше разделить по отдельным экранам.

Самый показательный пример — armor viewer. Нам нужно было отображать модели техники и информацию о броне, хотя раньше в игре подобного решения не было. В начале разработки мы не до конца понимали даже технические ограничения. Поэтому интерфейс проектировался итерационно: разные подходы проверялись непосредственно в билдах, после чего некоторые решения приходилось переделывать.

Ещё один важный фактор — плотная работа с геймдизайном. Премиум Аккаунт затрагивал разные части игры, поэтому флоу и интерфейс нельзя было рассматривать отдельно от игровых систем. Геймдизайнеры сопровождали работу на всех основных этапах, а параллельно команда закладывала базу для аналитики и тестировала прототипы в UX-лаборатории на потенциальных пользователях.

В этом кейсе хорошо видно, где заканчивается «рисование экранов». Работа UI-дизайнера включала структуру информации, сценарии, прототипирование, проверку технической реализуемости, работу с геймдизайном, UX-тестирование и подготовку к сбору данных.

Какие знания нужны современному UI/UX-дизайнеру

Из этих задач довольно легко вывести и набор компетенций. Не обязательно становиться экспертом во всех смежных областях, но понимать их на рабочем уровне необходимо.

При этом Figma, Photoshop и другие инструменты остаются важными. Просто они отвечают на вопрос «как реализовать решение», а не «какое решение нужно принять».

Заключение

Я по-прежнему рисую кнопки. Только теперь понимаю их как одну из частей гораздо более широкой задачи.

UI/UX-дизайнер в геймдеве работает на стыке игрока, игры и команды. Он помогает игроку замечать важное, принимать решения, понимать сложные системы и получать понятную обратную связь. А для этого ему приходится разбираться не только в визуальном дизайне, но и в UX, геймдизайне, продукте, аналитике и технических ограничениях.

Именно поэтому хороший UI/UX-дизайнер нужен не только тогда, когда команде «некому нарисовать экран». Он нужен раньше — когда ещё предстоит решить, какую информацию показать, как построить сценарий и как сделать новую игровую систему понятной для игрока.

Источники и материалы

·       Blizzard — Revamping Progression & Rewards in Hearthstone

·       Blizzard — Diablo IV: UI / Inventory update

·       Blizzard — Accessibility in Diablo IV

·       Riot Games — Updated VALORANT interface

·       Riot Games — VALORANT Patch 1.02

·       Nielsen Norman Group — Fitts's Law

·       Nielsen Norman Group — Text Scanning Patterns: Eyetracking Evidence