Карта экранов в разработке игрового интерфейса

Как упростить работу при создании UI.

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

Борис Киселев, ведущий дизайнер интерфейсов студии Rocket Jump, написал для DTF колонку о картах экранов — удобном инструменте для упрощения разработки интерфейса игры.

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

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

Обычно хранение и просмотр файлов организованы иначе — дизайнеры ограничиваются набором поэкранных превью, названных по определённой системе. То есть, скорее всего, многие привыкли к примерно такой картинке.

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

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

Вкратце перечислю основные преимущества их использования.

С картой становятся понятны связи и переходы между экранами. Никаких вопросов по поводу того, что, откуда и куда ведет. Это особенно актуально для вложенных друг в друга экранов или частей игры, до которых игроку трудно добраться (например, интерфейс лидера клана или окно повышения N-го уровня).

На карте с первого взгляда становится понятно, в каком состоянии находится интерфейс в целом, каких экранов не хватает, а какие уже закончены. Project-менеджерам легче отслеживать и контролировать прогресс разработки интерфейса. Карта экранов — одновременно и превью, и отчёт по проделанной работе, и задел на будущее.

Новым людям на проекте (или тем, кто раньше работал с другой его частью) легче понять и удержать в голове общую структуру игры. Также становится проще ориентироваться на экранах и быстро находить интересующую часть интерфейса.

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

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

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

Пару слов о минусах подхода.

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

Теперь несколько практических советов, которые помогут получить удобную для работы карту экранов.

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

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

Однако это вопрос привычки. Photoshop также прекрасно справляется с подобными задачами. Кроме того, есть ряд весьма неплохих онлайн-сервисов вроде realtimeboard, conceptboard или mural.co, позволяющих составлять карты экранов онлайн, а кто-то вообще работает с ними в Google Docs. Попробуйте разные варианты, чтобы понять, что лучше подходит именно вам и вашей команде.

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