Дневники разработчиков #32 — Пользовательский интерфейс 2.0

Добро пожаловать! Перед вами ещё один выпуск дневников разработчиков!

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

Почему мы решили начать работу над новым пользовательским интерфейсом?

В начале этого года к нам обратились из Microsoft с предложением выпустить версию Battlerite для игровой консоли Xbox One, и первой темой, с которой мы начали обсуждение, стал пользовательский интерфейс. Нам необходимо было сделать удобный для использования на игровой консоли, подходящий для других платформ, более гибкий и простой для манипуляций в будущем интерфейс. Старый был далеко не конфеткой. С “ядром интерфейса” (как его называют программисты) было страшно работать, любые изменения в нём могли поломать всю систему. Внесение изменений в главное меню (например, игровое меню) или добавление новых игровых режимов создавало множество сложностей, а для новых программистов изучение принципа работы интерфейса требовало слишком много времени.

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

Как интерфейс выглядит сейчас: окна меню накладываются друг на друга и на окружение

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

Это игра про PvP на арене и нам хотелось, чтобы это становилось понятно уже после первого взгляда на логотип игры.

Когда мы попросили тех, кто до этого не играл в Battlerite, взглянуть на старый пользовательский интерфейс и рассказать, о чём по их мнению эта игра, то получили множество различных ответов. Но никто не сказал, что это “командная многопользовательская соревновательная PvP игра” или что-то близкое к этому. Стиль старого интерфейса не соответствовал содержанию, был слишком специфичным, более подходил жанру RPG и вводил игроков в заблуждение уже с самого начала знакомства с игрой. Мы знали, что ещё только взглянув на элементы меню, у игроков создаётся неверное представление об игре.

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

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

Ниже представлены самые ранние варианты интерфейса. Мы использовали их в обсуждениях. Создает ли дизайн интерфейса для нас какие-то ограничения и какие возможности он нам открывает?

Мы обсудили все плюсы и минусы и пришли к единому мнению, что нам необходимы:

  • Главное меню с возможностью навигации при помощи LB и RB клавиш геймпада
  • Отображение более чем одной записи в новостной ленте на главной странице и простой способ обновления этой ленты

Количество новостей, которыми мы готовы делиться с нашим игровым сообществом, настолько велико, что мы не смогли бы реализовать решение, использованное в игре Heroes of the Storm, где публикуются максимум три записи, в большинстве своём посвящённые акциям в игровом магазине. Нам хочется, чтобы записи на главном экране помогали росту игрового сообщества и общению игроков друг с другом.

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

Исходный вариант начальной страницы на веб-основе на HTML

Однако, наши старания не были напрасными. В итоге нам удалось настроить эту технологию и мы используем её для работы новой начальной страницы (также называемой Главная) в новом пользовательском интерфейсе. У нас также есть Лиза (она просто умничка), которая теперь занимается вопросами связи с игровым сообществом, а Крис может полностью сосредоточиться на работе над игровым дизайном. Ура!

И всё же, зачем эти прямоугольные вкладки в верхнем меню? По мнению множества людей, это очень в стиле “Windows 10”. Надо полагать, что именно навигация при помощи так называемых “плиток” напоминает всем о Windows 10, и да, это не очень удобная функция этой операционной системы. Но я не думаю, что использование вкладок в интерфейсе тоже будет не очень удобным. В большинстве программ пользовательский интерфейс выполнен в виде вкладок, всё зависит лишь от умения их “замаскировать” и оформить. Если взглянуть на большинство игр, разработанных как для ПК, так и игровых консолей (а это не так сильно влияет на отличия в интерфейсе для обеих версий), то можно заметить, что использование вкладок очень распространённое решение.

Изменения на экране Тренировки: новые изображения для каждого игрового режима

Основная причина, почему мы приняли такое решение — нашей главной задачей в процессе работы над новым пользовательским интерфейсом была возможность масштабирования. И исключительно важной для нас является возможность менять контент, добавлять новый, добавлять новые игровые режимы и вкладки. Так перед нами открывается множество вариантов для развития нашей игры. Следует учитывать, что мы не располагали огромным количеством времени и сотрудников, поэтому нам не удалось разработать какую-то потрясающую систему навигации в меню, как в Destiny. Мы выбрали проверенный и испытанный метод — плитки, что упрощает навигацию с крупными элементами меню или большим количеством параметров/опций. Такое решение позволяет нам упорядочить контент, разработать подходящее под стиль игры визуальное оформление (чего явно не хватало в старом интерфейсе) и даже добавить описание в элементы меню.

Зачем нужен новый UI?

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

  • Масштабируемость. На каждом экране должно оставаться место для реализации существующих идей, а также для возможных нововведений в будущем. Поэтому местами дизайн может казаться пустоватым. Мы просто не хотим загнать себя в угол.
  • Соответствие новым задачами брендинга. Быть ярче, привлекательнее, динамичнее (в противовес атмосфере, которую легко спутать с RPG), подчеркнуть обрядно-племенную тематику и PvP-ориентированность арены.
  • Кросс-платформенность. Возможность легко адаптировать игру к Xbox и любой другой платформе без особых изменений.
  • Интуитивная понятность. Конечно же, чтобы пользователи могли самостоятельно разобраться где что искать.

Что нового добавлено, что старого улучшено?

Есть так много вещей, которые хотелось бы включить в новый UI, но факт остаётся фактом: скоро F2P, и мы должны подготовиться. Да, нам хочется улучшить социальные системы, переделать таблицу статистики, и так далее. Но что важнее прямо сейчас, перед запуском Free-to-Play? Новая модель монетизации означает, что мы полностью становимся зависимы от внутриигровых покупок за самоцветы и продаж комплектов в Steam, если хотим развивать игру дальше. Глупо игнорировать способы финансового обеспечения, не улучшать их как-нибудь, чтобы косметические предметы продавались эффективнее.

Вот что мы сделали:

  • Сундуки стали открываться красивее
    Добавлен ещё один шаг между нажатием на кнопку и получением предметов. Теперь вы видите редкость предмета, прежде чем узнать что именно вы получили. Открытие сундуков станет более интересным и волнующим.
  • Добавлен раздел “Коллекция”
    Теперь видно всё, что у вас есть и чего не хватает.
  • Статистика по вашей коллекции
    В профиле игрока и в его коллекции отображается информация по наполнению его собрания предметов. Нововведение должно понравиться любителям собирать в игре всё.
  • 3D Сцена
    Чемпионы и их косметические предметы теперь лучше видны с новым освещением, и в принципе выглядят лучше, чем раньше.
  • Цветовые вариации
    Игроки теперь могут выбирать вид предмета из нескольких расцветок. И это больше не выглядит так, будто мы притворяемся, что сделали новую модель, добавив новый вид раскраски старого костюма.

Что ещё важного должно быть сделано к Free-to-Play? Мы понимали, что нужно — если это возможно — добавить поддержку для каждой функции, которая нравится игрокам в существующем интерфейсе. Это было непросто, поскольку этот UI был построен по-новому с нуля. Нам нужно было упростить экспериментирование с новыми режимами для геймдизайнеров, чтобы нам не приходилось создавать для них каждый раз специальные лобби, как в случае с потасовками. Это главная причина почему вам больше не показываются модельки чемпионов ваших друзей в лобби. Важнее разработать больше режимов, чем поглядеть на 3D-модельки напарников. Хорошая новость в том, что вы можете разглядывать других чемпионов и их предметы пока ищется игра! Ещё и маунтов можно выбирать для каждого чемпиона отдельно! Круто ведь.

Подождите, есть ещё кое-что:

Улучшенный список друзей

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

Отдельные настройки управления для каждого чемпиона

Теперь можно иметь разное управление на каждом чемпионе, это должно помочь вам подобрать подходящие настройки клавиш.

Нет картинкам-заглушкам! (популярные предсмертные слова)

Мы совершили большую работу, чтобы заменить последние оставшиеся картинки из Bloodline Champions, которые служили заглушками для иконок способностей. Они всех только путали. Возможно часть ещё останется в предстоящем обновлении, но к запуску F2P мы сделаем всё возможное, чтобы новый UI был идеален.

Новое оформление

У нас новое оформление карточек обрядов (пока только в меню), заданий, достижений, иконок лиг и режимов.

Новый чат

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

Новый звук

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

Над чем мы работаем сейчас:

Прямо сейчас мы полируем мельчайшие детали UI, пытаясь при этом определить и исправить наиболее значительные ошибки. У нас в команде, работающей с интерфейсом, сформировалось явление — “проверка пикселей”. Это когда я проверяю каждую часть меню и передаю программистам, когда что-то не на своём месте или цвет/текст/стиль не тот. Появилась локальная шутка про фразы вроде “сдвинь немного вправо”, или ещё лучше — “детализируй” (“enhance”):

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

Пока мы не решили над чем будем работать в первую очередь после релиза игры, но у нас много идей, а некоторые уже даже воплощаются в жизнь. Интерфейс внутри матча и HUD пока не тронуты, к ним мы вернёмся когда-нибудь после запуска F2P, но так, чтобы они были завершены к выпуску версии для Xbox. Несомненно вместе с этим мы внесём улучшения для HUD, а также он будет сделан в той же стилистике, что и меню.

Когда выйдет новый интерфейс и остальные изменения?

Я понимаю, вы уже хотите узнать, когда же выйдет большое октябрьское обновление. Хотела бы я сказать, но сначала мы должны на 100% утвердить дату. Не переживайте, мы сразу же оповестим вас как только сможем!

Почему он ГОЛУБОЙ?!

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

Новый экран выбора чемпиона (ещё будет улучшаться!)

Не забывайте делиться впечатлениями!

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

Ещё одна вещь, которая была бы очень полезна лично для меня, это стрим как вы впервые играете с новым интерфейсом. Так я могу своими глазами увидеть действия нового пользователя. Это очень сильно мне поможет! Если вы транслировали игру, но боитесь, что я не видела, просто отправьте мне запись. Меня можно найти на канале Battlerite в Discrod’е под именем Katey.

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

Удачи!

/Katey

Комментарии закрыты.