Консистентность в оформлении игровых интерфейсов
Консистентность интерфейса — это отсутствие противоречий в его оформлении и принципах работы
Консистентность упрощает работу с интерфейсом для игроков и удешевляет производство интерфейса для разработчиков
Пример консистентности в оформлении
На скриншотах ниже выбранные объекты оформлены похожим образом, это помогает игрокам в работе с интерфейсом
Пример консистентности в принципах работы интерфейса
На примерах ниже основное меню каждого раздела всегда находятся в левой части экрана. Так разработчики учат игроков определённому паттерну работы с интерфейсом
А ещё блок с боковым меню - это один и тот же модуль, который используется в разных интерфейсах для экономии ресурсов команды
Если бы меню каждый раз было в новом месте, его приходилось бы искать, и это усложнило бы работу с интерфейсом
Как сделать консистентное оформление интерфейса
Чтобы оформление интерфейса было консистентным, нужно собирать все экраны из одного набора элементов и по одним и тем же принципам
Ниже показано несколько скриншотов с частями такого набора, весь набор можно посмотреть тут https://www.behance.net/gallery/60073341/Destiny-2-UI-Visual-Design
Дальше рассмотрим базовый набор элементов, которые скорее всего понадобятся при оформлении интерфейса игрового проекта
Разные типы надписей
Скорее всего в игре будет текст, а значит понадобится разные типы надписей для разных случаев — заголовки, подзаголовки, обычный текст, важные части текста, второстепенные надписи и так далее
Интерактивные элементы
Для работы с интерфейсом понадобятся кнопки и другие элементы, на которые можно нажимать. Одни действия будут более важными чем другие, поэтому понадобится несколько типов кнопок — более заметные для основных действий и менее заметные для второстепенных
Всплывающие окна
В игре скорее всего нужно будет подтверждать разные действия, для этого понадобятся всплывающие окна. Они пригодятся и для других случаев, например для обучения в начале игры
Подсказки при наведении
На ПК есть возможность наводиться на элементы интерфейса и читать их описание. Это довольно удобная история, так что тултипы тоже могут понадобиться
Способ оформления выбранных объектов
В игре скорее всего будут списки с одинаковыми элементами, магазины с одинаковыми слотами, вкладки и другие наборы похожих элементов. Чтобы отличать выбранные объекты от остальных, их нужно будет оформить особым образом
Способ для привлечения внимания
Скорее всего будет нужно привлекать внимание к каким-то объектам интерфейса, например, к вкладкам в которых появилось что-то новое, или к новым предметам. Для этого можно нарисовать специальные маркеры
Также полезно придумать цвет который будет контрастировать совсем остальным интерфейсом и применять его только для привлечения внимания к важным объектам
Оформление позитивных и негативные событий
В игре скорее всего будут позитивные и негативные события, поэтому полезно придумать оформление и подобрать цвета для этих случаев. Для вещей, связанных с негативными событиями, часто используют красный цвет, а для позитивных событий зелёный
Иконки биндов
Если игра для ПК и консолей, понадобятся иконки биндов. Выгодно использовать один набор таких иконок везде, потому что так людям будет проще учиться работе с интерфейсом, а дизайнерам не нужно будет рисовать дополнительные элементы
Способ оформления иконок предметов и умений
Ещё в игре будут иконки предметов, их оформление тоже должно быть консистентным. Про то как попадать в стиль при отрисовке элементов интерфейса есть статья https://habr.com/ru/articles/721766/ И ещё есть статья про рисование пака иконок https://habr.com/ru/articles/477562/
Способ показывать качество предметов
Может понадобиться способ обозначения качества предметов. Часто это делают с помощью цветов, ниже несколько примеров
Фон для полноэкранных интерфейсов
Интерфейсные модули будут лежать на каком-то фоне. Если фон будет шумным и броским, некоторые элементы будут плохо читаться, и работать с интерфейсом станет сложнее. Поэтому выгодно подобрать спокойный и однородный фон, на котором все элементы будут хорошо считываться
Ниже пара примеров с фонами, усложняющими читабельность элементов интерфейса
Конечно элементов которые можно заготовить на старте проекта, заметно больше чем я описал выше, но думаю базовый набор уже есть. Так что сейчас рассмотрю ещё пару примеров консистентности в оформлении игровых интерфейсов и перейду к итогам
Пример консистентности в оформлении Prey
Но скриншотах ниже показано как стиль оформления обычного текста применяется в модальных окнах, хаде и на модельках в игровом мире
Пример консистентности в оформлении Warhammer 40000 Dark Tide
На примере ниже показано как оформление подложки интерфейсных модулей используется В полноэкранных интерфейсах, и в хаде
Заключение
Консистентность — это отсутствие противоречий в оформлении и принципах работы интерфейса
Делать консистентный интерфейс выгодно, потому что с таким интерфейсом удобно работать если ты игрок, и такой интерфейс легче и дешевле создавать если ты разработчик
Чтобы оформление интерфейса было консистентным, нужно собирать все экраны из одного набора элементов и по одним и тем же принципам
Вот базовый набор элементов и принципов, которые понадобятся для оформления интерфейса:
Стили оформления надписей — заголовки, подзаголовки, обычный текст, важный текст, второстепенные надписи
Оформление интерактивных элементов — важные кнопки, обычные кнопки, второстепенные кнопки, вкладки, интерактивные панели, слоты для предметов
Оформление подсказок при наведении
Способ выделения объектов
Способ для привлечения внимания к объектам
Оформление позитивных и негативных событий
Иконки биндов для ПК и консолей
Визуальный стиль иконок предметов и умений
Способ обозначения качества предметов
Оформление для фонов
Надеюсь вам пригодится что-то из описанного выше
Полезные ссылки:
📺 Видео про консистентность в игровых интерфейсах
📺 Youtube канал «Good Game UI»
🔗 Телеграм-канал «Good Game UI»
Плейлисты с пользой:
⚙️ Как проектировать игровой UX дизайн
🎨 Как рисовать UI art
🧩 Как верстать игровой UI
🧰 Как собирать интерфейсы в Figma
🪶 Как работать с текстом при дизайне UI