Инклюзивный дизайн, Часть 2. Адаптивные шрифты в мобильных приложениях. Наш опыт

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

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

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

Во-вторых, адаптивные шрифты — тренд в индустрии. Внедрить их — значит соответствовать стандартам рынка и оставаться конкурентоспособными. Кроме того, современные рекомендации по UX/UI дизайну акцентируют внимание на доступности и адаптивности. Вдохновляясь опытом лучших, мы приняли решение внедрить адаптивные шрифты.

В-третьих, такие инновации — это всегда вклад в развитие технологий и собственное развитие. Современные мобильные платформы и фреймворки предоставляют простые способы внедрения адаптивных шрифтов, так почему ими не воспользоваться? Благодаря технологиям Dynamic Type в iOS и scalable units (sp) в Android, а также обновлениям операционных систем внедрять адаптивные шрифты довольно просто.

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

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

Теперь обсудим, как же все-таки внедрить адаптивные шрифты в продукт.

1. Проанализируйте требования и пользователей

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

2. Создайте типографическую шкалу

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

3. Обеспечьте поддержку системных настроек

В iOS используйте Dynamic Type, а в Android — масштабируемые единицы (sp), чтобы шрифты подстраивались под системные настройки пользователя.

4. Всё проверьте

Проведите тестирование на разных устройствах и с разными настройками. Соберите обратную связь от пользователей и внесите необходимые изменения.

5. Создайте и используйте токены дизайна

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

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

Читателям наверняка интересен реальный опыт, поэтому стоит описать механику внедрения адаптивных шрифтов в новую дизайн-систему KION.

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

1. Определение типографической шкалы системных настроек

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

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

2. Адаптация системных настроек

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

Таким образом, получается следующая градация адаптивной типографики:

3. Определения типа компонента

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

4. Реализация на реальном компоненте

При разработке компонента учитываются его типографические возможности. Применяются варианты длинных текстовок, расположение элемента на экране и размеры компонента относительно брейкпоинта. На основе этих данных компоненту присваивается тип, например, «Динамический с ограничением под UI».

Далее компоненту прописывается ограничение по размерной типографической сетке, например, «Максимальный размер адаптированного шрифта — М». Таким образом внутри приложения KION типографика в данном компоненте никогда не будет превышать размерности +5pt от стандартного шрифта, даже если пользователь системно увеличил размер шрифта до XXL (Extra Extra Large).

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