Инклюзивный дизайн, Часть 2. Адаптивные шрифты в мобильных приложениях. Наш опыт
В прошлом материале мы разобрались, что такое адаптивные шрифты, как их использовать и в чем заключаются особенности инклюзивного дизайна. Пришло время разобраться с этим на практике. А поможет нам с этим Таня Пожарова, ведущий продуктовый дизайнер вертикалей авторизации и плеера онлайн-кинотеатра KION.
Как мы решили внедрять адаптивные шрифты?
Как и многие другие современные компании, мы в KION стремимся создать максимально удобный и доступный продукт для своих пользователей. Внедрение адаптивных шрифтов стало логичным шагом, на который нас вдохновила совокупность причин.
Во-первых, это вопрос открытости и человечности. Обеспечение доступности для людей с ограниченными возможностями — это не только улучшение пользовательского опыта, но и социальная ответственность компании.
Во-вторых, адаптивные шрифты — тренд в индустрии. Внедрить их — значит соответствовать стандартам рынка и оставаться конкурентоспособными. Кроме того, современные рекомендации по UX/UI дизайну акцентируют внимание на доступности и адаптивности. Вдохновляясь опытом лучших, мы приняли решение внедрить адаптивные шрифты.
В-третьих, такие инновации — это всегда вклад в развитие технологий и собственное развитие. Современные мобильные платформы и фреймворки предоставляют простые способы внедрения адаптивных шрифтов, так почему ими не воспользоваться? Благодаря технологиям Dynamic Type в iOS и scalable units (sp) в Android, а также обновлениям операционных систем внедрять адаптивные шрифты довольно просто.
В-четвертых, конечно, внедрение адаптивных шрифтов приводит к улучшению бизнес-показателей. Продукт становится доступнее и удобнее, привлекает больше пользователей, аудитория увеличивается. Да и опыт тех пользователей, которые уже были лояльны к нам, улучшается, а это способствует их удержанию.
Как внедрить адаптивные шрифты в свой продукт
Если вы действительно хотите улучшить пользовательский опыт, помните, что адаптивные шрифты требуют не только правильного внедрения, но и регулярного обслуживания. Поначалу процесс может показаться сложным, но постоянное тестирование, обновление и сбор обратной связи помогут поддерживать высокое качество и доступность приложения в долгосрочной перспективе.
Теперь обсудим, как же все-таки внедрить адаптивные шрифты в продукт.
1. Проанализируйте требования и пользователей
Определите, какие размеры шрифтов необходимы для разных устройств и пользователей. Проведите исследования и тестирования для понимания потребностей пользователей.
2. Создайте типографическую шкалу
Определите базовый размер шрифта и размеры для различных типов текста (заголовки, подзаголовки, основной текст и т.д.). Используйте относительные единицы измерения для обеспечения адаптивности.
3. Обеспечьте поддержку системных настроек
В iOS используйте Dynamic Type, а в Android — масштабируемые единицы (sp), чтобы шрифты подстраивались под системные настройки пользователя.
4. Всё проверьте
Проведите тестирование на разных устройствах и с разными настройками. Соберите обратную связь от пользователей и внесите необходимые изменения.
5. Создайте и используйте токены дизайна
Определите токены дизайна для размеров шрифтов, чтобы централизованно управлять типографикой.
Безусловно, на своем пути вы наверняка столкнетесь с трудностями. Самых популярных проблем всего две. Первая связана с тем, что различные устройства имеют разные размеры экранов и плотность пикселей. Решение просто: используйте относительные единицы измерения и медиа-запросы для адаптации шрифтов под разные устройства. Вторая потенциальная проблема — перегрузка. Если увеличение размера шрифта приводит к нарушению дизайна и перегрузке интерфейса, проведите тщательное тестирование и настройте интервалы между элементами дизайна для обеспечения читаемости и удобства.
Личный опыт и механика KION
Читателям наверняка интересен реальный опыт, поэтому стоит описать механику внедрения адаптивных шрифтов в новую дизайн-систему KION.
Адаптивные шрифты в дизайн-системе играют ключевую роль в обеспечении консистентности, доступности и удобства использования интерфейсов на различных устройствах. Ниже опишу, как это будет реализовано в KION.
1. Определение типографической шкалы системных настроек
Типографическая шкала — это система размеров шрифтов, которая используется для создания иерархии текста. Шкала может включать следующие размеры.
iOS
- XS (Extra Small)
- S (Small)
- M (Medium)
- L (Large)
- XL (Extra Large)
- XXL (Extra Extra Large)
Android
- S (Small)
- M (Medium)
- L (Large)
Эти размеры определяются в относительных единицах измерения, таких как rem или em, что позволяет легко адаптировать их к различным экранам и устройствам.
2. Адаптация системных настроек
Из-за большого количества размеров шрифтов на разных платформах мы разработали следующую схему их адаптации под приложение KION. На странице отступы увеличиваются в соответствии с шагом увеличения текста. В компоненте или токене увеличение отступов задается дизайнером при разработке компонентов.
Таким образом, получается следующая градация адаптивной типографики:
3. Определения типа компонента
Каждому компоненту присваивается тип, по которому определяется масштабирование типографики в зависимости от системных настроек устройства.
- Фиксированный. Размер шрифта никогда не изменяется (например, Tabbar)
- Динамический системный. Размер шрифта увеличивается в зависимости от системных настроек (например, Toast)
- Динамический с ограничением под UI. Максимальный размер шрифта определяется индивидуально при создании компонента (например, Button)
4. Реализация на реальном компоненте
При разработке компонента учитываются его типографические возможности. Применяются варианты длинных текстовок, расположение элемента на экране и размеры компонента относительно брейкпоинта. На основе этих данных компоненту присваивается тип, например, «Динамический с ограничением под UI».
Далее компоненту прописывается ограничение по размерной типографической сетке, например, «Максимальный размер адаптированного шрифта — М». Таким образом внутри приложения KION типографика в данном компоненте никогда не будет превышать размерности +5pt от стандартного шрифта, даже если пользователь системно увеличил размер шрифта до XXL (Extra Extra Large).
Эта методика помогает выделить значимые текстовые элементы интерфейса и при этом сохраняет целостность UI приложения.