10 правил использования шрифтов в виртуальной реальности

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

Размер

Я хотел бы начать с размера шрифта. С современным оборудованием и особенно с разрешениями экранов это чрезвычайно важно.
К сожалению, обычные метрики, такие как пиксели и символы, не работают в трехмерном пространстве. Для определения размера объекта в 3d используется воспринимаемый размер, который измеряется в градусах.
Да, выглядит странно. Но так как мы знаем оптимальный размер шрифта для мобильного телефона и среднее расстояние экрана телефона от глаз, мы можем посчитать рекомендуемый воспринимаемый размер. Итак, давайте сделаем некоторые расчеты. Вы можете пропустить эту часть и прокрутить немного вниз, чтобы получить сводку.

Давайте возьмем оптимальный размер 16 пикселей для мобильного дизайна. Для этого случая я возьму в качестве примера телефон Google Pixel. Этот телефон имеет экран с разрешением 441 пикселей на дюйм и плотностью xxdpi 2.6 начальный. Таким образом, 16 пикселей будут иметь 41,6 пикселей на реальном экране и 0,093 дюйма или примерно 0,24 см физического размера. Чтобы получить воспринимаемый размер, я буду использовать 25 см как среднее расстояние от глаз до экрана.
Степень воспринимаемого размера шрифта 16 пикселей мобильного телефона составляет 0,55 °.
Давайте разберемся, каким должен быть размер текста в виртуальной реальности, когда он будет размещен на расстоянии 1 метра от наблюдателя с предполагаемым размером 0,55 °. Существует отличный простой калькулятор, который помогает сделать такие оценки очень легко (sizecalc.com)
Там написано, что шрифт должен быть 0,96 см в высоту. Я не думаю, что смогу прочитать один сантиметровый шрифт с расстояния 1 метр так же легко, как 16-пиксельный шрифт с телефона.
Но есть и другая проблема. Насколько детальным будет такой шрифт на экране мобильного телефона, когда наблюдатель использует картонные очки? Это также легко сосчитать. Так как поле зрения на гарнитуре Daydream составляет 90 °. Пиксельный телефон имеет экран шириной 1080 пикселей. Это означает, что на один градус приходится всего 12 пикселей. А для нашего текста, который занимает всего 0,55 ° воспринимаемого изображения, составляет всего 6,6 пикселей. Что точно даже близко не достаточно.
Давайте перейдем с другой стороны и скажем, что для удобочитаемости шрифта 16 пикселей этот шрифт должен иметь размер не менее 16 пикселей. Как известно, в одной степени воспринимаемый вид составляет 12 пикселей.
Что означает, что шрифт с размером 16 физических пикселей, в гарнитуре Daydream будет восприниматься размером 1,33 °. И если вы хотите разместить этот шрифт в сцене VR на расстоянии 1 метра от наблюдателя, этот шрифт должен иметь высоту 2,32 см.
Это уже должно быть хорошо. Прежде чем приступить к тестированию, давайте посчитаем, какой должен быть размер шрифта в виртуальной реальности, который будет использовать все 41,6 физических пикселей на экране мобильного телефона. Этот размер имеет предполагаемый размер 3,46 °. И помещенный в 1 метр текст должен быть 6,04 см в высоту.

Вот так будут выглядеть 3 типа шрифтов в VR:
Слева: 6,6 пикселей на экране мобильного телефона, видимый обзор 0,55 °, высота 0,96 см на 1 метр
Спереди: 16 пикселей на мобильном экране, 1,33 ° видимого изображения, 2,32 см в высоту на 1 метр
Справа: 41,6 пикселей на мобильном экране, 3,46 ° видимого изображения, 6,04 см в высоту на 1 метр.

Попробуйте эту сцену VR
1) Минимальный читаемый размер шрифта в VR составляет 1,33o или высота 2,32 см на расстоянии одного метра. Рекомендуемый размер шрифта - 3.45o или высота 6.04cm на расстоянии одного метра.

Положение в пространстве

Положение и вращение являются уникальными характеристиками для шрифтов VR. И это чрезвычайно важно. Для предыдущего примера мы взяли случай, когда шрифт находится на уровне глаз, и мы сказали, что это точно 1 м далеко. Но если пользователь переместится на половину метра любовника или выше, мы получим 1,12 метра расстояния. Что определенно не улучшает читаемость. Поэтому, размещая шрифты в трехмерном пространстве, мы должны помнить, что это будет примерно на уровне глаз пользователей. С 3-мя гарнитурами легче добраться, так как положение зрителя фиксировано и определено заранее. Например, для A-Frame по умолчанию это 1,6 м. Но с учетом масштаба комнаты это немного сложно, так как измеряет реальный рост пользователя. Взять среднюю высоту в 1,6 метра нормально. В случае, если мы хотим разместить шрифт ниже, мы можем повернуть его в пространстве, чтобы получить то же перпендикулярное расстояние. Например, шрифт, расположенный на 75 см ниже уровня глаз пользователя и на 75 см от пользователя, повернутый на 45 °, будет также виден глазом пользователя на 1 метр.

2) Шрифт должен быть направлен перпендикулярно наблюдателю.

Есть два примера размещения контента.
1. На плоской поверхности:

Попробуйте эту сцену VR

2. Вращается вокруг наблюдателя:

Попробуйте эту сцену VR

Длина линии

Как мы знаем, 50–75 для настольных компьютеров и 30–40 для мобильных устройств являются предпочтительной длиной линии. Кроме того, разрешение экрана VR и самосознание пользователя хуже, что ухудшит способность поддерживать линию. Но чтобы выяснить предпочтительные варианты, давайте посмотрим на примеры. Легко понять, что в виртуальной реальности длина строки должна зависеть от размера самого шрифта, так как даже 60 букв с размером 3,45 ° уже слишком длинные.

Попробуйте эту сцену VR
3) Длина строки в VR должна составлять около 20–40 символов на строку. При большем шрифте строка должна быть короче.

гарнитура

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

Попробуйте эту сцену VR
4) В VR лучше работать без гарнитур.

Вес

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

Попробуйте эту сцену VR
5) Шрифты в VR должны быть смелее, чем на экранах.

Высота линии

На рабочем столе хорошей идеей является сохранение межстрочного интервала между 1,2 и 1,5. На ВР работает такой же подход. Это также зависит от длины линии. Но так как в VR для наблюдателя сложнее удерживать фокус, я бы рекомендовал сместить это окно на 1–1.3. И, конечно же, лучше избегать уменьшения расстояния менее 1.

Попробуйте эту сцену VR
6) Высота строки для шрифта VR должна быть около 1–1,5.

центровка

В настольных и мобильных устройствах выравнивание по центру не является предпочтительным, а выравнивание по правому краю - нет-нет (конечно, если это не арабский язык). Но в VR любое выравнивание хорошо, это разумно и объяснено. Например, если это аннотация к объекту, ее можно разместить практически с любой стороны. Например, будет выглядеть странно, если выровненный по левому краю текст будет относиться к объекту, расположенному справа.

Попробуйте эту сцену VR
7) Выравнивание шрифтов в виртуальной реальности зависит от контекста.

Цвет и контраст

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

Попробуйте эту сцену VR
8) Убедитесь, что шрифты имеют достаточный цветовой контраст в VR.

Анимация

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

Попробуйте эту сцену VR
9) Для привлечения внимания пользователя шрифт может быть анимирован в VR.

действия

Это легко заслуживает отдельной статьи. А пока давайте помним, что некоторые концепции, которые годами были созданы в настольных компьютерах, не работают в VR, например, blue link. Кроме того, вещи, которые переместились в пользовательский интерфейс из физического мира, могут быть полезны и в виртуальной реальности, как кнопки.

Попробуйте эту сцену VR
10) Должно быть легко определить, когда текст является действенным.

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

Вот сцена с порталами для всех протестированных сцен VR

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

И самое главное: продолжайте тестирование.

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

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