Главная » Hi-Tech » Типографика в дополненной реальности: сделать шрифт более читаемым под разным углом обзора

Типографика в дополненной реальности: сделать шрифт более читаемым под разным углом обзора

Перевод материала из блога Aetherpoint.

В закладки

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

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

Мы уже готовы рисовать, опускаем кисть, и вдруг происходит неожиданное: выходит нечто не совсем похожее на птицу. После этого инструктор дал немного рисовой бумаги.

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

Но это относится и к инструментам и коду, которые мы используем.

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

Эволюция носителей, начиная с ксилографии (гравирование по дереву), используемой с 200 года нашей эры, до цифровой печати, появившейся в 1991 году

В своей статье “What Is Code” писатель и программист Пол Форд написал:

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

Они часть среды. В дополненной реальности все устройства ввода — это компьютерная периферия.

Было много экспериментов, больше, чем у меня есть время вам представить, но из последних могу отметить 3D-тип шрифта от Вишну Ганти, вариативный шрифт Jabin от Фриды Медрано, эксперименты Энди Клаймера с сенсорами для Arduino, отзывчивый леттеринг Эрика Вана Блоклэнда и работы студентов вроде Юна Ю Ноха.

Справа вверху Jabin Фриды Медрано, слева вверху 3D-тип шрифта Вишну Ганти, слева в середине отзывчивый леттеринг Эрика Вана Блоклэнда и Юна Ю Ноха, слева внизу — эксперименты с Arduino Энди Клаймера

Как это отражается на типографике? 3D в режиме реального времени — это ещё одна среда, которая влияет на нашу типографику и дизайн. Придётся ли нам проектировать по-другому?

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

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

Скриншоты статьи

Через некоторое время я всё же захотел найти другие варианты использования вариативных шрифтов. В ней я показал, как важно создавать и использовать вариативные шрифты для веб-страниц. Есть ещё проблемы, которые можно решить с их помощью?

Вначале мне пришла мысль, что мы можем манипулировать 3D-точками, как в стандартных шрифтах. Работая с Эриком Ваном Блоклендом, я понял, что в AR мы легко можем понять, где относительно текста находится тот, кто его читает.

При 3D-рендеринге в режиме реального времени сетки в определённый момент должны превратиться в треугольники. Но в 3D всё сложнее.

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

Мы смогли собрать всё вместе и создать типографику, которая менялась в зависимости от расстояния до букв.

Это интересно, потому что этот пример означает, что визуальная иерархия может изменяться, ориентируясь на то, как далеко находится пользователь.

Это привело к тому, что мы решили объединить усилия с Си Джеем Данном и сделать образец типа шрифта для его неизданной гарнитуры Louvette в AR .

Мы хотели продемонстрировать оптическую ось Louvette (её засечек), основываясь на расстоянии от наблюдателя до неё.

В Unity мы пробовали как стандартные текстовые компоненты, так и signed distance fields.

Чтобы симулировать вариативные шрифты, мы загрузили набор файлов шрифта, в результате с изменением расстояния менялись очертания букв.

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

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

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

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

В инсталляции «Лес чисел» Эммануэля Моро использовались случайно расположенные слои чисел, которые отражали 2017 год. Размещение букв и цифр в трёхмерном пространстве не является чем-то новым.

Я начал сотрудничать с Дэвидом Джонатаном Россом и экспериментировать с идеями, навеянными «Лесом чисел».

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

Метод проб и ошибок привёл нас к упрощению вещей.

Это дало нам более привлекательный эффект в AR, который позволял людям сосредоточиться на одном объекте. Дэвид предложил сделать так, чтобы при приближении цифры увеличивались в размере. Мы смогли разместить цифровую панель в пространстве реального мира.

Но главное здесь то, что сам контент может меняться в зависимости от близости человека к объекту, а не только от своего стиля. Оказалось, довольно эффектный каскадный эффект.

В ней изложены способы адаптации наших средств к различным условиям. В 2011 Итан Маркотт написал книгу «Отзывчивый веб-дизайн».

«Отзывчивый веб-дизайн» Итан Макотт

Её можно разделить на две категории. В одной из глав Итан упоминает отзывчивую архитектуру.

  1. Способность здания удовлетворять изменяющиеся потребности его жителей.
  2. Способность здания адаптироваться к внешним климатическим условиям.

Это был механический фасад, который деформировался в ответ на звук, свет и движение находящихся рядом людей. Гиперповерхность Aegis, созданная в 2001 году компанией dECOi, отвечала как нуждам потребителя, так и окружающей среде.

По аналогии с гиперповерхностью я смог исказить тип шрифта, перемещая вершины сетки.

Это вызвало довольно интересный волновой эффект.

Это означает, что мы можем толкать и вытягивать типографику по оси Z, поэтому текст способен быть объёмным.

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

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

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

Белый делает изображения более яркими, а стопроцентно чёрный — просвечивающими. Поскольку такие очки полагаются на проецирование света, объекты и текст в них не полностью светонепроницаемы. Дисплеи некоторых очков по умолчанию затемнены, чтобы исправить это.

Интерфейс Magic Leap

Я сделал типографику, реагирующую на свет, которая меняла цвет текста на противоположный окружающему свету.

В AR типографика может попасть на любой фон, поэтому возможность её адаптации к освещению имеет большое значение.

Это особенно актуально для сред с постоянно меняющимися световыми условиями, такими как улица.

Они разработаны с учётом расстояния пользователя: они искажены, чтобы быть более читаемыми с определённой точки зрения. Велосипедные дорожки — обычное дело в городе, но всё же есть в них что-то захватывающее.

При приближении перекос этой иконки ещё более очевиден, но это особо не влияет на передачу информации водителю и пешеходам.

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

Есть много подобных примеров в искусстве и дизайне.

Рисунки мелом Трейси Ли Стум используют перспективу, чтобы создать иллюзию глубины.

3D-рисунок мелом Трейси Ли Стум

Анаморфная типографика, проект Джозефа Игана и Хантера Томсона, читается только под определённым углом.

Анаморфная типографика Джозеф Иган и Хантер Томсон, 2011 год

Fit Nation («стройная нация») от Pentagram умело побуждает вас двигаться по пространству, поддерживая концепцию фитнеса.

«Будь стройной». FitNation. Pentagram FitNation. Pentagram

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

Было несколько разных подходов.

  1. Ничего не делать.
  2. Трекинг букв в 3D.
  3. Интерполировать ширину шрифта.
  4. Сделать шрифт «биллбордовым».

Я попробовал разные подходы в Unity (и благодаря Бьянке Бернинг смог использовать вариативный шрифт Venn, который имеет самую большую ось ширины).

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

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

Я сделал типографику адаптивной, теперь буквы будет удобнее читать под разными углами при ходьбе.

Для вертикальных знаков диапазон движения может выглядеть примерно так.

Я также хотел попробовать поработать с плоскими предметами, лежащими на поверхности.

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

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

Это позволило управлять тем, сколько места он займёт в интерфейсе. Чтобы исправить это, я разработал шрифт с пропорциональными шириной и высотой.

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

Установка максимального угла около 60 градусов показалась мне хорошим балансом. Благодаря экспериментам я понял, что люди никогда не будут смотреть на что-то под углом 90 градусов.

Это интересный ход, который можно использовать. Фактическая площадь поверхности текста меняется.

Оптическая типографика в AR может занимать разное количество места в зависимости от вашего угла обзора.

Далее мы сосредоточились на том, чтобы наш тип шрифта помещался в блоки.

С древних времён, от подвижного шрифта.

Китайская печать с помощью подвижного шрифта Изобретён Би Шэном (990–1051 годы)

К текстовым колонкам и сеткам, которые мы используем, чтобы создать тип шрифта.

Это блоковая модель в CSS. К среде веб-пространства.

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

«CSS классный»

Мы делаем гибкие контейнеры и сетки.

Изучение гибкости: Die Neue Typographie. Автор Джен Симмонс

Делаем их содержимое адаптивным.

Pia Flower. Автор Юн Ю Нох

И создаём типы шрифта, которые могут растягиваться, чтобы заполнять пространство разного размера в AR.

Такое исполнение поможет придать гибкости нашему дизайну и макетам.

Возможно, подобно этой собаке шрифты переросли свои контейнеры.

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

1. Визуальная иерархия. 2. Оптические настройки. 3. Контент. 4. Глубина. 5. Свет. 6. Визуальное пространство

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

Отличный пример: в этой инструкции по сборке Lego нижняя панель адаптируется к оптическим потребностям типографики, а не к чему-то ещё.

Так как же выглядит наша среда?

В AR среда больше не является плоской и не ограничена блоком, мы все ещё учимся с ней обращаться.

Вместо этого типографика интерактивна, она реагирует на зрителя и делает процесс чтения приятным.

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

Пространство, в котором существует типографика, тоже должно адаптироваться.

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

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


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Anytime запустил сервис по долгосрочной аренде премиум-машин Prime для всех пользователей

Anytime запустил сервис по долгосрочной аренде премиум-машин Prime для всех пользователей — Транспорт на vc.ru Свежее Вакансии Написать Уведомлений пока нет Пишите хорошие статьи, комментируйте,и здесь станет не так пусто Войти Сервис каршеринга тестировал его с декабря. Каршеринг Anytime завершил ...

ФАС предложила банкам и регуляторам подумать о снижении комиссий на расчёты по картам

ФАС предложила банкам и регуляторам подумать о снижении комиссий на расчёты по картам — Финансы на vc.ru Свежее Вакансии Написать Уведомлений пока нет Пишите хорошие статьи, комментируйте,и здесь станет не так пусто Войти Так ритейлеры повысят доходы, но цены для ...