Работа с текстом при дизайне игровых интерфейсов

bf3d016836a61801f4057d6f0568b835.png

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

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

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

a84abc686fd6820f940c8ef5f492a573.png

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

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

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

37a2134f3229af15c1aa1e43fe4d83f5.png

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

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

a548eccd0c494bef725e609a9b17d3a0.png

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

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

07e8132eea6563425342b3c08cb06b14.pnge86f1d952e875fe26813afdac29c26b7.png

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

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

3f1d23f52ade9b3792d36013f8c11329.png

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

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

6408a0e941ff45f00e36597abea3dfe3.png

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

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

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

c112294172bddee473a1260edbd77bdf.png3dce0dc64e388154901db550d9bee30a.png

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

4d151e81d886711dbb13a92863bea5b1.png

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

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

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

3c117d966228beeacdda7d1572c939e5.png

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

15b786cca370bc38dd288940cf355e9c.png

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

5b17980beafd7a35cd00d68d258b6ca2.png

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

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

5c2af8f8b2bba1ac9e8532504c2e04db.png9950ea22e7fc7ee1ff0cee9d1211d885.png

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

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

20abd5bbbfdd346ccae2b5172e940c9d.png

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

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

32dfb594c29bfbdfa78672e50548bba4.pngea4ab43fd4971834a6f28dd4bd41dc48.png

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

20e5301c737e290a211e7a3cda20cea7.png

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

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

  • Заголовки 

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

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

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

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

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

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

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

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

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

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

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

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

72335a3b4bc4d8c9f19bfb4e43c99ef7.pngdda11232da534205a162ea47c5b1d52a.png30610b151d72ad52bb7992c1b75cc411.png3b6c92316e7f5fe8021776b4c596670f.png

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

88f2337dcebf880647d0a2f89df451f3.png

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

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

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

7d8712b967efea58dcba7e111a38b8e7.pngad9f9def60341ce11b64b527064f17d8.png

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

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

ea83ec0fc70f82adfd6dfd2ee007f553.png

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

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

3a5625692951e25c33e40a4dee0eea43.png

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

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

90daa3e6b0b156a89958cd948a5d47e2.png

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

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

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

2cf9de9460cd8ebbcb7c5c5339be5240.png

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

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

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

29f04f531fec3b9689b68b75310e954a.png

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

16e605c47e2ed3c27bbc3cd70e9c7c54.png

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

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

c3236b660f5533e4a1f893312b135620.png

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

28ecb8ad51c37c1dc0e0ce91c07b95e8.png

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

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

2b7324e785619aecf743898f93eb0a85.png

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

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

f564c07468e34f069a08c8da2d629a17.png

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

4fd4c4562b5c69ef65de8a3667c9eb09.png

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

f1bbcb21dac954f668e5f6558bc92a6f.png

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

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

fca3c1d4b4d0212ff6e74ff0b44ed190.png

Длина строки

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

f61bb2b7d85430f7018f1a3e9b077366.png

Заключение

1fb3de2a805d9bdda50879a5203ef8c8.png

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

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

1500865f31e12257c73aa8023e18dbed.png

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

Соцсети для вопросов и связи  Вконтакт Беханс

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

© Habrahabr.ru