[Перевод] Разбираемся с типографикой в visionOS
visionOS вывел типографику на новый уровень, где решающую роль играет пространственное мышление. В отличие от традиционных дисплеев, текст должен быть разборчивым на разном расстоянии и под разными углами. При этом размер и насыщенность шрифта остаются основными факторами в создании чёткой типографической иерархии.
Системный шрифт и Extra Large Title
В visionPro есть системный шрифт SF Pro, который отличается исключительной удобочитаемостью в различных операционных системах Apple. Цвет текста по умолчанию — белый, что обеспечивает высокую контрастность на более тёмном фоне для оптимальной читаемости.
Иерархия стилей типографики, размеров и насыщенности шрифта в visionOS
При этом оживлённые сцены в visionOS иногда бросают вызов проработанному шрифту в вопросе читаемости и ясности. Для этого разработчики тонко скорректировали насыщенность шрифта, чтобы улучшить его контрастность.
К примеру, основной текст в iOS использует стандартную насыщенность, но для visionOS её надо повышать до средней для лучшей видимости. Аналогичным образом в заголовках используется полужирный шрифт и увеличивается расстояние между буквами.
Также в visionOS представлено два новых стиля шрифта: Extra Large Title 1 и Extra Large Title 2. Они идеально подходят для крупных, привлекающих внимание заголовков в широкоформатных макетах.
Пример стиля Extra Large Title в интерфейсе приложения для visionOS
Окна в visionOS могут масштабироваться до невероятных размеров, поэтому у некоторых пользовательских шрифтов могут быть проблемы с читаемостью. Чтобы избежать этого, увеличьте насыщенность шрифта или просто используйте системные стили, которые изначально адаптированы под visionOS.
Контраст, цвета и яркость
Глубина — основной принцип проектирования интерфейсов в visionOS, но и тут нужно быть внимательным. К примеру, 3D-текст визуально может визуально отвлекать и очень тяжело читается. Кроме того, под некоторыми углами он может выглядеть деформированным. Поэтому отдавайте предпочтение привычному двумерному тексту.
Сравнение трёхмерного и обычного текста в visionOS
Решающее значение имеет контраст, благодаря которому текст выделяется. По умолчанию visionOS использует белый текст со стандартным тёмным фоном. В таком случае сохраняется читаемость. Если вы выбираете другой цвет текста, то убедитесь, что он не сливает с различными фонами и протестируйте различные сценарии. Помните, что системные цвета эффективны для фона и кнопок, но не используйте их для самого текста. Это может поставить под угрозу читаемость.
Пример правильного использования цвета на материале с эффектом стекла
Эффект vibrancy в visionOS предлагает дополнительный слой, повышающий контрастность и удобочитаемость. У эффекта есть три уровня для разных типов текста:
.primary— для обычного текста;.secondary— для описаний, сносок или субтитров;.tertiary— для неактивных элементов.
Пример использования эффекта vibrancy для работы с иерархией текста
