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

Разбираемся с типографикой в visionOS

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров1K
Автор оригинала: Emanuele Agosta

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

Системный шрифт и Extra Large Title

В visionPro есть системный шрифт SF Pro, который отличается исключительной удобочитаемостью в различных операционных системах Apple. Цвет текста по умолчанию — белый, что обеспечивает высокую контрастность на более тёмном фоне для оптимальной читаемости.

Иерархия стилей типографики, размеров и насыщенности шрифта в visionOS
Иерархия стилей типографики, размеров и насыщенности шрифта в visionOS

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

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

Также в visionOS представлено два новых стиля шрифта: Extra Large Title 1 и Extra Large Title 2. Они идеально подходят для крупных, привлекающих внимание заголовков в широкоформатных макетах.

Пример стиля Extra Large Title в интерфейсе приложения для visionOS
Пример стиля Extra Large Title в интерфейсе приложения для visionOS

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

Контраст, цвета и яркость

Глубина — основной принцип проектирования интерфейсов в visionOS, но и тут нужно быть внимательным. К примеру, 3D-текст визуально может визуально отвлекать и очень тяжело читается. Кроме того, под некоторыми углами он может выглядеть деформированным. Поэтому отдавайте предпочтение привычному двумерному тексту.

Сравнение трёхмерного и обычного текста в visionOS
Сравнение трёхмерного и обычного текста в visionOS

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

Пример правильного использования цвета на материале с эффектом стекла
Пример правильного использования цвета на материале с эффектом стекла

Эффект vibrancy в visionOS предлагает дополнительный слой, повышающий контрастность и удобочитаемость. У эффекта есть три уровня для разных типов текста:

  • .primary — для обычного текста;

  • .secondary — для описаний, сносок или субтитров;

  • .tertiary — для неактивных элементов.

Пример использования эффекта vibrancy для работы с иерархией текста
Пример использования эффекта vibrancy для работы с иерархией текста

Теги:
Хабы:
Если эта публикация вас вдохновила и вы хотите поддержать автора — не стесняйтесь нажать на кнопку
+2
Комментарии1

Публикации

Истории

Работа

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

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

Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область