Адаптация мобильного интерфейса к десктопному на примере игры Throne: Kingdom at War

Успешный релиз десктопной версии проекта Vikings: War of Clans вдохновил специалистов краснодарской студии Plarium. Они создали аналогичную версию для Throne: Kingdom at War, чтобы наши игроки имели возможность строить свою могущественную империю, заходя в приложение с любых устройств.

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

Стадия подготовки

Мы начали с анализа мобильного приложения Throne: Kingdom at War и десктопной версии Vikings: War of Clans, а также других браузерных игр. Это стало отправной точкой в проектировании новых прототипов окон.

Технические писатели составили для разработчиков документы, в которых описывается поведение интерфейса и его функционал.

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

Преобразование интерфейса

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

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

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

Примером существенной переработки графики может служить экран Дворца. Мы не только перераспределили имеющиеся элементы во вкладках, но и добавили декор: ленты, подложку, текстуру каменной стены (вкладка “Профиль”). Это сделало окно более красочным и подчеркнуло атмосферу альтернативного Средневековья. Во вкладке “Статистика” мы разместили четыре категории данных в едином пространстве, тогда как в мобильной версии они представлены списком и для перехода из одной категории в другую пользователю нужно выполнять дополнительные действия.

По аналогии с экраном Дворца было изменено окно Бараков. В мобильной версии из-за небольшого размера экрана юниты во вкладке “Армия” представлены в виде простого списка. В веб-версии мы наглядно показали принадлежность воинов к тому или иному тиру, уменьшив размеры иконок и объединив их в общий блок.

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

Еще одной интересной задачей для UX-дизайнеров стало преобразование прелоадера. Изначально в игре было два прогресс-бара: первый загружал платформу Unity (во время этого процесса анимация не отображалась), второй — контент приложения с демонстрацией VFX-эффектов. Нас не совсем устраивал такой вариант, поэтому мы сделали простой переход от черно-белого изображения к цветному, в котором от 0% до 50% загружалась Unity и от 51% до 100% — данные игры. С помощью этого приема удалось убрать ощущение двойной загрузки.

Советы проектировщикам

Напоследок хочется дать несколько общих рекомендаций по разработке игрового интерфейса:

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

— Поддерживайте техническую документацию и UI Kit в актуальном состоянии и сохраняйте всю историю изменений. Чем подробнее гайды, тем быстрее идет работа и распределяются задачи между специалистами, вовлеченными в проект.

— Не замыкайтесь внутри своей команды. Попросите коллег из других отделов оценить получившиеся прототипы. Если действия сотрудников при тестировании соответствуют алгоритму, который вы задумали для решения конкретной задачи, значит, вы на верном пути.

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

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

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




1294

Голосование: 356
Голосов: 2 оценки

Отзывы посетителей:

аватар
 
наталяиВолкова 2 0

+

Зарегистрируйтесь, чтобы добавить комментарий.
Эту страницу просмотрели: 1294 уникальных посетителей