Вселенная UI

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

Что за событие “Реставрация комнат”

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

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

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

RR_finish.jpg


Сюжет события

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

Для первого события было решено подготовить сразу двух новых персонажей — главных героев Жака и его жену Софию. Жак очень любит морскую жизнь и по совместительству является заядлым аквариумистом. Он давно мечтал перебраться поближе к морю, чтобы чаще заниматься любимым делом. И вот ему удалось найти подходящее жилье, но теперь нужна помощь с обустройством. Зная о том, каким прославленным аквариумистом является игрок, он решил, что никто другой не поможет ему лучше. Жак переезжает с женой, она и является вторым действующим героем. Сейчас мы, конечно, создаем и другие события, каждое со своим набором уникальных героев и комнат, но для примера хочется разобрать опыт именно первого такого ивента.

Структурно у события три нарративные части:

  1. Завязка — знакомство с новыми героями. Объяснение, как герои нашли игрока и почему обратились с нему. Их обращение к игроку с просьбой о восстановлении комнаты.
  2. Диалоги в ходе редизайна — короткие диалоги после некоторых действий, чтобы поддержать сюжет и сделать событие более интересным.
  3. Завершение — завершающий комикс, в котором персонажи общаются друг с другом и благодарят игрока.


Разработка UI для комнат

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

В основании идей всегда было удержание фокуса внимания на важных составляющих интерфейса и управление поведением игрока при помощи цветовых приемов.

RR_Interface_1.png

RR_Interface_2.png

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

RR_EndWindow (1).png

Особое внимание уделяем кнопкам, которые всегда должны быть максимально заметны по сравнению с другими объектами. Все остальные части несут задачу дополнять и поддерживать общее впечатление.

Основные требования при создании окон:

  • Текст должен быть читабельным;
  • Плашка под текстом должна помогать отделять текст от иллюстрации и концентрировать на нем внимание;
  • Эмоция персонажа, его облик должны располагать к действию и контактировать с игроком.

Центральная часть окна отражает основной смысл окна и максимально доносит тему сообщения через иллюстрацию.

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

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

RR_infowindow (1).png


Уникальные окна

При этом мы рисовали и уникальные окна, созданные с нуля, никак не повторяющие друг друга из события в событие. Например:

  • Стартовое послание

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

RR_Letter.png

FD_WA_UI_StartLetter (1).jpg

  • Окно скидки

Его мы используем для предложения совершить выгодную покупку валюты для более комфортной игры. Начиная от основания окна, персонажа и объектов декора — все создается в тематике события. Главная задача окна — сразу притянуть внимание к плашкам с предложениями, в то время как весь остальной декор поддерживает эмоциональное восприятие события.

RR_Offer.png

FD_WA_UI_OfferWindow.png

FD_HSR_UI_OfferIcon.png

  • Полноэкранная выдача награды

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

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

FD_WA_UI_RewardScreen.jpg

79592f45c350a56a69348d401c8de458.jpeg

85a6d6da461f421d7b07b613dcfc613f.jpeg

FD_UI_WA_Reward_Iphone_Ipad.jpg


Иконки для UI

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

All_icons.jpg


a15b738d2a90d6f587fabb2ebb2648ef.jpeg

c12fd0387b151d2d003f6073d01f5049.png

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

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

В исходниках мы придерживались следующих принципов:

  • Создавали смарт-слои, внутри которых иконка увеличивалась в 3 раза;
  • При помощи основного векторного слоя или обтравочной маски мы добивались четких границ маленького изображения.
  • Использовали обводку на пару тонов темнее под цвет объектов.

2f5211cf59da4f8a8251105b452c69f1.png

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

RR_SelectionScreen (1).png

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

FD_WA_UI_FinishWindow (1).jpg

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

745 0 850 5
1
2021-04-27
благодарю за статью, было очень интересно!
RENDER.RU