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

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

68d16a86f99771b967c2c758e312b416.jpg

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

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

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

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

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

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

4d56d94d9a5dfdae6a4caba7b5c30b13.jpg

Также в 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 для работы с иерархией текста

© Habrahabr.ru