На конференции Games Gathering выступил UI/UX дизайнер Слава Леонов (Murka, BetterMe). Он занимается дизайном уже семнадцать лет, в том числе проектирует и игры. Слава рассказал, как правильно организовать процесс создания интерфейса, чтобы существенно сократить расходы и увеличить скорость разработки, а также объяснил, чем плохой UX отличается от хорошего, и порекомендовал несколько инструментов, которыми пользуется сам. Выбрали из выступления самое главное.
Как отметил Слава, если разработка UX не разбита на понятные для исполнителей этапы, продуктивность их работы сильно падает: вместо того, чтобы думать над задачей, дизайнерам, аниматорам и художникам приходится самим заниматься организацией процесса, экспериментировать, и по нескольку раз переделывать с нуля готовые версии.
Чтобы этого избежать, Слава советует разделить разработку на семь шагов.
Исполнитель: геймдизайнер или UI дизайнер (зависит от того, у кого больше опыта).
Варфрейм — это примерная структура макета с приоритетами элементов интерфейса, которые расставляет и прописывает в техническом задании геймдизайнер. Как объяснил Слава, чем выше приоритет кнопки, вкладки или, к примеру, иконки, тем больше она должна обращать на себя внимание игрока. Это даёт возможность управлять действиями пользователя, ясно давая ему понять, какой элемент наиболее важен для решения текущей задачи. Именно такой интуитивной понятностью приоритетов, по словам Славы, хороший интерфейс отличается от плохого.
Как отметил Слава, для создания варфреймов хорошо подходит Figma.
Исполнитель: UI дизайнер при помощи геймдизайнера.
На этом шаге утверждается расположение элементов интерфейса, их форма и шрифты.
О цвете пока думать рано, но можно окрасить более тёмным тоном наиболее приоритетные элементы.
На первых двух этапах разработки интерфейса особенно важны пять факторов:
видение проекта целиком — за это отвечает геймдизайнер;
анализ опыта конкурентов — за это отвечает геймдизайнер или UI дизайнер;
приоритеты элементов — за это отвечает геймдизайнер или UI дизайнер;
понимание форм — за это отвечает UI дизайнер;
понимание пропорций — за это отвечает UI дизайнер.
По словам Славы, анализом конкурентов и расставлением приоритетов может заниматься как геймдизайнер, так и UI-специалист, в зависимости от сроков проекта и опыта исполнителей. Чем меньше времени на исправления, тем больше аналитики ложится на плечи геймдизайнера.
Исполнитель: геймдизайнер или UI дизайнер.
Карта экранов — это схема переходов между всеми окнами игры. Слава отметил, что карта полезна для всей команды — она может понадобиться как самим геймдизайнерам, так и программистам и тестировщикам.
Два способа представления карты экранов
При этом есть два подхода к созданию карты экранов. Можно оформить её в виде схемы с названиями окон и переходами между ними: Меню → Экран загрузки → Геймплейный уровень → Экран победы.
А можно сделать её прямо из скетчей и заменять их на финальные версии UI по мере готовности — так карта превратится в дашборд, по которому удобно будет отслеживать, насколько готова задача.
Исполнитель: UI дизайнер или аниматор.
На этом этапе настраиваются переходы между окнами. Появляются предварительные версии важных эффектов (мерцание кнопок, вылет поп-апов), для финальной версии которых нужно будет задействовать специалистов из других отделов (например, программистов или аниматоров).
По словам Славы, одна из самых удобных программ для прототипирования интерфейсов — это Principle, однако она не рассчитана на приложения с большим количеством переходов между окнами и поэтому не всегда подходит для крупных проектов.
Исполнители: UI дизайнер и художник.
На этом шаге к созданию интерфейса подключается художник, рисуются наброски фонов, выбираются цвет и форма деталей.
Исполнители: UI дизайнер и художник.
На этом шаге утверждаются цвета, более детально прорисовываются все формы.
Исполнители: UI дизайнер и художник.
В конце седьмого шага арт и логика полностью готовы и больше не изменятся.
Слава отметил, что в некоторых случаях, чтобы упростить себе задачу, часть шагов можно пропустить. Для этого при составлении технического задания на фичу геймдизайнер должен определить и указать её сложность. Ему потребуется оценить три параметра:
количество окон;
частоту использования фичи игроком;
новизну механики — нужно ли будет проектировать логику UI с нуля.
Таким образом, по сложности задачи можно разделить на четыре типа:
Лёгкая (Easy) — одно окно, редко используется игроком, механика уже существует, достаточно просто нарисовать новые скины. Примером такой задачи может быть создание простого события или поп-апа;
Средней сложности (Medium) — одно-два окна, редко используется игроком, новая механика. Пример: простое событие или информационный поп-ап;
Сложная (Hard) — от двух до четырех окон, часто нужна игроку, новая механика. Пример: событие или несложная фича;
Очень сложная (Extra Hard) — больше пяти окон, часто нужна игроку, новая механика. Пример: сложная фича или полноценная разработка новой игры.
На диаграмме ниже — то, какие шаги можно пропускать в зависимости от сложности задачи.
Слава отметил, что эту схему и классификацию задач можно и нужно менять под себя. Так, к примеру, если у вас сильно поменяется логика перехода между тремя старыми окнами, новые скетчи не понадобятся, но без прототипа будет не обойтись.