Консистентность интерфейса — это отсутствие противоречий в его оформлении и  принципах работы 

Консистентность упрощает работу с интерфейсом для игроков и удешевляет производство интерфейса для разработчиков

Пример консистентности в оформлении

На скриншотах ниже выбранные объекты оформлены похожим образом, это помогает игрокам в работе с интерфейсом

Пример консистентности в принципах работы интерфейса

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

А ещё блок с боковым меню - это один и тот же модуль, который используется в разных интерфейсах для экономии ресурсов команды

Если бы меню каждый раз было в новом месте, его приходилось бы искать, и это усложнило бы работу с интерфейсом

Как сделать консистентное оформление интерфейса

Чтобы оформление интерфейса было консистентным, нужно собирать все экраны из одного набора элементов и по одним и тем же принципам

Ниже показано несколько скриншотов с частями такого набора, весь набор можно посмотреть тут  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 канал с роликами про интерфейсы: Mikhail Kravchenko UI

Telegram канал со ссылками на ролики и статьи: GoodGameUI

Telegram с игровым концепт-артом и другими художествами: Художества Михаила Кравченко

Присоединяйтесь!