The Outer Worlds UI (PC version)

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

Главное меню

The Outer Worlds UI (PC version)

Михаил Ротфорт:

Классная идея совместить направление названия с направлением корабля.

Павел Турчин:

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

The Outer Worlds UI (PC version)

Новая игра

The Outer Worlds UI (PC version)

Михаил Ротфорт:

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

Что сейчас выбрано? Куда нажимать? Что вообще происходит?

Решение может быть следующим:

  • Не снимать фокус с элемента
  • Добавить возможность продолжить, отличный от клика мыши по элементу (хотя и клик можно оставить)
  • Либо кнопку “Продолжить”, что они и сделали в следующем экране.
The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

Павел Турчин:

Модальное окно выбора сложности в контексте такого главного меню вполне выгодное решение в плане разработки. Фактически, здесь полностью отсутствуют трудозатраты на арт. Полупрозрачная подложка, полупрозрачные кнопки. Привычно, минималистично, хорошо. Хинт Esc расположен в традиционном месте для консолей, в ПК-версии более стандартным было бы использование крестика. Сразу напрашивается вывод, что UI был сделан универсальным для разных платформ. Я бы в ПК-версии крестик всё же вернул. А еще мне кажется не слишком верным делать на этом экране кнопки без подтверждения, а на следующем с подтверждением. Не вполне очевидное поведение.

Михаил Ротфорт:

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

The Outer Worlds UI (PC version)

Павел Турчин:

Ну кроме неконсистентности с предыдущим экраном я обратил здесь внимание на вид самих опций. И сразу же пошёл посмотреть, как сделаны все остальные настройки. Тут интересно, что для дискретных опций вида On/Off используется последовательный селектор. Это опять же явно консольное решение. Для UI с мышкой удобней и наглядней было бы применение двух кнопок ( On )(/////Off//////). Так что тут явно виден курс на кроссплатформенность. А вот в опциях при этом была замечена галочка “Вертикальная синхронизация”. Я бы предположил, что это артефакт от ранней стадии разработки. Иначе не объяснить, почему тут тоже не сделать по аналогии с другими опциями. Вообще использовать чекбокс при такой вёрстке очень странно.

The Outer Worlds UI (PC version)

Михаил Ротфорт:

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

The Outer Worlds UI (PC version)

Диалоговое окно, кстати, симпатичное, опять же почему не использовали этот арт на первых экранах “Новой Игры”.

Чарген — Показатели, Навыки, Абилки

Михаил Ротфорт:

Здесь в плане UI ничего интересного, нужно сначала распределить очки, после чего можно будет продолжить нажав кнопку “E”.

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

А если ничего не делать, он начинает подгонять игрока.

Павел Турчин:

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

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

The Outer Worlds UI (PC version)

Михаил Ротфорт:

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

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Чарген — Внешность

The Outer Worlds UI (PC version)

Павел Турчин:

Мне хочется отметить здесь слайдер для выбора безымянных опций. Вместо выбора вида Лицо1, Лицо2, Лицо3 слайдер, очевидно, лучше для этого подходит.

Чарген — Имя

The Outer Worlds UI (PC version)

Павел Турчин:

Интересно, что здесь есть ограничение знаков и количество символов отображается. Приятная мелочь.

The Outer Worlds UI (PC version)

Павел Турчин:

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

SaveLoad

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

In Game

HUD

Михаил Ротфорт:

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

The Outer Worlds UI (PC version)

Подсказка о новом уровне сделана заметно, но не раздражающе.

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Dialogue

The Outer Worlds UI (PC version)

Михаил Ротфорт:

Хороший диалог, но из проблем я бы выделил следующее:

  1. На чеке скила нет обозначения текущего значения этого скила у персонажа. Хотя бы в тултип засунули это что ли. Или в историю.
  2. Чтобы посмотреть историю нужно нажать специальную кнопку, при этом размер окна истории оставляет желать лучшего. Плюс к этому, это окно закрывается как только диалог продолжается.

Я бы предложил не закрывать окно при продолжении диалога и сделать его побольше процентов на 30% по вертикали и процентов на 10% по горизонтали.

The Outer Worlds UI (PC version)

Павел Турчин:

Меня здесь заинтересовало решение с историей диалога. Особенно, в плане технической реализации. Действительно, история нужна чуть больше, чем никогда. Так зачем же держать её где-там, под скроллом, если можно подгрузить только, если она понадобится.

Quest Notification

The Outer Worlds UI (PC version)

Loot

Михаил Ротфорт:

Окно появляется автоматически при наведении на объект имеющий лут. Удобное, сразу с тултипом, вся как у людей. Есть одна минорная проблема: “взять все” очень долгий, пользоваться им мягко говоря не хочется, проще закликать и собрать по одному предмету.

The Outer Worlds UI (PC version)

Tutorial

Михаил Ротфорт:

Общий: как ходить, бегать, прыгать и вот это вот все.

The Outer Worlds UI (PC version)

Про фичи: стена текста, но оформление отличное, связанное с лорной компанией которая предоставляет эту самую фичу.

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Павел Турчин:

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

Отдельно хочется остановиться, что такие же экраны появляются между страницами левелапа (почему-то не чаргена) и это здорово упрощает понимание процесса развития персонажа.

Character / Level Up

Summary

The Outer Worlds UI (PC version)

Skills

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Abilities

The Outer Worlds UI (PC version)

About

The Outer Worlds UI (PC version)

Reputation

The Outer Worlds UI (PC version)

Михаил Ротфорт:

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

Павел Турчин:

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

Inventory

The Outer Worlds UI (PC version)

Tooltip

The Outer Worlds UI (PC version)

Михаил Ротфорт:

Для того что сравнить один предмет с другим, его нужно тегнуть с помощью клавиши “C” (при этом на иконке предмета появится соответствующий знак <=>) и навестись на любой другой предмет того же типа. В случае если типы не совпадают, то и сравнения не будет.

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

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

Помимо этого можно предмет “Осмотреть”

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

Journal / Codex

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Map

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Companions

Михаил Ротфорт:

Инвентарь, такой же как и у основного персонажа, только из фильтров остались только оружие и броня.

The Outer Worlds UI (PC version)

Способности, также похожи на способности персонажа, с той разницей что их меньше.

The Outer Worlds UI (PC version)

Общее, и тут же настраивается AI компаньона.

The Outer Worlds UI (PC version)

Выбор компаньон

The Outer Worlds UI (PC version)

Global Map

Михаил Ротфорт:

Красивая, слов нет. Понятно куда тебе нужно. Но иконка корабля - fail. Я ее теряю постоянно.

The Outer Worlds UI (PC version)

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

The Outer Worlds UI (PC version)

Как вариант.

The Outer Worlds UI (PC version)

Vendor

The Outer Worlds UI (PC version)
The Outer Worlds UI (PC version)

Михаил Ротфорт:

Вопросы:

  • Почему ограничен доступ?
  • Почему не показывается мой текущий вес?
  • Как сравнить с тем что на мне одето?
The Outer Worlds UI (PC version)

Со сравнением с текущей экипировкой несколько сложнее. Самым очевидным решением видится отдельная кнопка, так для сравнения игра просит нажать “C”, а для сравнение с текущим, можно было бы сделать удержание “С”. Но вопрос как сравнить оружие, которых у персонажа 4 слота, тогда удержание не подойдет, и нужно выделить отдельную клавишу под это дело.

Loading Screen

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

А в нижней части хинты и анимация.

The Outer Worlds UI (PC version)

Итог

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

6868
40 комментариев
[]