7 этапов создания интерфейса в играх: интеграция дизайна и функционала в интерфейсах игровых проектов

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

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

Первый этап - определяем структуру и основные функциональные части интерфейса

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

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

Второй этап - собираем прототип, ищем стилистику

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

Вообще само общение с заказчиком – это одна из важных частей работы, которая поможет вам сэкономить или наоборот потерять время, деньги и конечно же ваши нервы, потраченные на огромное количество правок. Мы очень рекомендуем фиксировать все сказанное вашим заказчиком в письменной форме, таким образом это позволит вам избежать таких слов как: «я передумал, я забыл сказать что-то важное». Результаты, которые вы должны получить на втором этапе: начинается сборка прототипа интерфейса или она уже закончена; собран набор референсов для визуала, которые нравятся или уже даже одобрены вашим заказчиком – про момент согласования не забудьте.

Третий этап - обкатка прототипа, отрисовка превью экрана

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

Четвертый этап - отрисовка экрана, документация и прочее

На самом деле вот этот четвертый этап – это самый объемный этап работы с интерфейсом, он занимает примерно 70% всего рабочего времени. Для него у меня нет каких-то хитрости, лайфхаков, только кропотливая и усердная работа. Постепенно начинают отрисовываться экран за экраном, потом внедряются в движок, одновременно с этим процессом обновляются их состав и функционал, и конечно же составляется документация. Кстати, скажем немного слов про документацию. На нашей практике было очень много моментов, когда письменное описание функционала и экранов спасли ситуацию. Если вы не будете это делать, то есть большой риск столкнуться со всеми проблемами, которые связаны с человеческим фактором, забывчивостью и проблемами в коммуникации между командой. Например, ваш дизайнер может внезапно уволиться и улететь на Бали, при этом вся работа возлагается на программистов, и они собирают экран не так как им задумывалось раньше, аргументируя это тем, что им никто не рассказал, никто в деталях не описал. Геймдизайнер тоже человек он может забыть про принятые решения, так как они документально не были зафиксированы и выдавать постоянно новые версии. Поэтому наш совет: приучайте себя работать с документами, фиксировать в них все основные детали разработки.

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

Пятый этап - внедрение в игровой движок и осуществление контроля качества

Этот этап мы решили выделить условно, так как сборка интерфейса в движке обычно идет параллельно его разработки. Необходимо взять экран схему, отрисовать ее, нарезать, потом отдать программистам и так продолжить работу до того момента пока все экраны не закончатся. При этом вы как будто ведете экран, находящийся на производстве до конечного результата. Только в том случае, когда он полностью стал версией для целевых устройств, выглядит и работает на них так как вы планировали изначально, то можно выдохнуть и поставить галочку в графе «выполнено». Необходимо помнить, что итог работы UX/UI специалиста — это не просто статичная картинка с огромным количеством фотошопа, не абстрактная схема, а именно красивый и главное функциональный интерфейс, с которым удобно будет работать пользователю. То насколько хорош конечный продукт показывает, насколько хороши вы как специалист. Поэтому нужно быть очень внимательным ко всем деталям в производственной цепи и в первую очередь быть внимательным и строгим к себе. Нельзя закрывать глаза на всякие ошибки под предлогом того, что это не ваша ответственность - так до успешного проекта вы точно не дойдете.

Шестой этап - работа с деталями и добавление анимаций

Это бонусный этап разработки, так как в большинстве случаев при приближении дата релиза, который уже скорее всего несколько раз переносился по некоторым причинам, у всей команды начинает судорожно меняться настрой. Времени на работу с деталями, в особенности на полировку интерфейса, которому часто отводят второстепенное значение, крайне не хватает. Поэтому очень важно изначально задумываться о том, что и когда вы будете доделывать – помните об интерфейсной анимации. Если есть такая возможность добавьте ее сразу еще при первой сборке экрана, если такой возможности нет, то выделите на это отдельное конкретное время в плане общей разработки. Постоянно напоминаете про шлифовку деталей и анимацию, эти две работы должны быть выполнены также в срок, как и все остальные. Качественный игровой интерфейс должен постоянно динамично реагировать на действия игроков. Интерфейс и анимация как специя в уже готовом блюде - она может преобразить «вкус». Анимация делает интерфейс более плавным, последовательным и связно сглаживает резкий переход, привлекает внимание в необходимых для этого местах, развлекает пользователей и просто улучшает весь игровой опыт в целом. Но здесь очень важно не переборщить и не заанимировать все подряд, необходимо знать меру.

Последний седьмой этап - аналитика

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

Но в реальности такое встречается довольно редко так как не все разработчики могут позволить себе дорогостоящие плей-тесты, также мало кто умеет с ними работать. Основным методом принятия решений всегда была так называемая экспертная оценка: это когда решение по теме принимает только одно лицо, небольшая группа лиц, которые якобы считают себя профессионалами в игровой сфере с достаточным опытом и компетенцией. Это довольно субъективный метод, к тому же очень неточный. Полноценные плей-тесты проводит лишь ограниченное количество игровых компаний, которые имеют на это финансовые возможности – они достаточно активно ими пользуются.

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