Как стать автором
Обновить

Как оформлять текст в игровых интерфейсах

Время на прочтение5 мин
Количество просмотров3.1K

Статья про приёмы, упрощающее восприятие текста игроками и про особенности работы с текстом на игровых проектах.

Как подобрать шрифт

Ниже описаны моменты на которые стоит обратить внимание при подборе шрифта.

Поддержка нескольких языков

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

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

Сколько шрифтов нужно

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

Декоративные шрифты 

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

Ультра тонкие шрифты

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

Шрифты для объёмных текстов

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

Поддержка визуального стиля игры

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

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

Особенности игровых проектов

Ниже моменты, которые стоит помнить при работе с текстовыми блоками игровых интерфейсов.

Изменение объёма текста при локализации

При переводе на другие языки объём текста может меняться.. Например, если переводить с русского на немецкий, длина текста может увеличиться на 10-15%. 

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

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

Фон под текстом может меняться

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

Длина надписей может меняться

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

Уменьшение размера надписи если она не влезает

Даже небольшое уменьшение размера надписи заметно понижает её читабельность. Вместо этого лучше придумать способ показывать надпись целиком.

Контекст влияет на читабельность

Базовый набор типов надписей

Скорее всего в большинстве проектов понадобятся следующие типы надписей: 

  • Заголовки 

  • Подзаголовки 

  • Обычный текст 

  • Важные места обычного текста 

  • Второстепенные надписи 

  • Малозначимые но иногда полезные надписи 

  • Позитивные сообщения

  • Негативные сообщения 

  • Надписи для главных кнопок 

  • Надписи для второстепенных кнопок

  • Надписи для вкладок 

  • Контекстные действия

При создании нового дизайна может быть полезно иметь этот список перед глазами.

Как обеспечить читабельность текстов

Ниже набор приёмов, упрощающих чтение текстов.

Однородный фон

Тексты, лежащие на однородном фоне читать проще чем тексты, лежащие на шумном фоне.

Контрастность надписи

Когда есть контраст надписи к фону, её удобно читать.

Размер надписей

Маленькие надписи не так удобно читать как большие. Это особенно актуально для консольных проектов, потому что расстояние от дивана до телевизора обычно больше чем от стула до монитора.

Жирность начертания

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

Декоративные шрифты

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

Ниже примеры неправильного и правильного использования декоративного шрифта.

Набор заглавными буквами

Заглавные буквы отличаются друг от друга не так сильно как обычные. Поэтому большие объёмы текста, набранные заглавными буквами, сложно читать

Очень яркий пример этого подхода — блог Юрия Вафина в ВК. Содержание у него шикарное, но читать не просто.

Лучше набирать заглавными буквами короткие фразы и слова, а для больших объёмов текста использовать малые (строчные) буквы.

Разбиение на абзацы

Большие объёмы текста лучше разбивать на абзацы, это упрощает чтение.

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

Визуальная иерархия

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

Выравнивание текста

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

Небольшие объёмы текста можно выравнивать по центру без потери удобства чтения.

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

Межстрочное расстояние

Сложно читать текст с маленьким межстрочным расстоянием, лучше сделать расстояние между строчек в районе 1,4 от размера шрифта.

Длина строки

Для удобства чтения лучше сделать длину строки в районе 70 символов. Ниже примеры обычно и слишком большой длины строки.

Заключение

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

В итоге должно получиться примерно вот так  ^_____^

У меня есть Youtube канал с роликами про интерфейсы: Mikhail Kravchenko UI

Telegram для напоминаний о новых статьях: GoodGameUI

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

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

Всем удачи и творческих успехов! 

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Про что лучше написать в следующей статье
54.55% Базовые принципы проектирования игровых интерфейсов18
24.24% Техпроцесс проектирования игровых интерфейсов8
21.21% Как попадать в стиль при оформлении интерфейса7
Проголосовали 33 пользователя. Воздержались 2 пользователя.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Как вам статья?
43.24% Было полезно, весело и прикольно, узнал много нового16
48.65% Умеренно полезно и прикольно, узнал пару новых вещей18
8.11% Совсем не полезно, скучно и неинтересно, не узнал ничего нового3
Проголосовали 37 пользователей. Воздержались 3 пользователя.
Теги:
Хабы:
Всего голосов 19: ↑18 и ↓1+19
Комментарии6

Публикации

Истории

Работа

Веб дизайнер
31 вакансия

Ближайшие события