UX Notes
Александр Щеблыкин рассказал о RTL-адаптации интерфейса и показал, как её упростить с помощью переменных в Фигме. — Написание слов может отличаться в разных диалектах. Например, «Назад» пишется по-разному в Саудовской Аравии и ОАЭ с Оманом; — Если на английском написан целый абзац, стандартно выровненный по левому краю, его не выравнивают по правому краю в RTL-режиме; — А вот отдельный пункт ненумерованного списка, даже если он на английском, стоит выровнять как и все остальные пункты; — Изображения отражать не надо, но композицию с картинками и текстом надо адаптировать под направление чтения. То есть если в LTR текст был слева, а картинка справа, в RTL они поменяются местами; — Размер текста и межстрочное расстояние для компенсации увеличивают на 10%, так как арабский текст визуально меньше; — Числа, записанные и западно-арабскими, и восточно-арабскими цифрами, читают слева направо; — Знак вопроса пишется зеркально, отличаются и другие знаки препинания. Но появились они 100 лет назад, и на арабском спокойно можно выражаться без них; — Отражают иконки, отображающие текст или направление чтения (есть пример и с отражённой иконкой с текстово-графической композицией), а также движение вперёд и назад; — Не отражают иконки, изображающие реальные объекты, а также логотипы и универсальные символы вроде знака «✓»; — В дизайн-системе переменная RTL переключает интерфейс на арабский; — Есть переменные EN Only и AR Only, которые позволяют не усложнять простые компоненты. Например, хлебных крошках могут лежать «шеврон вправо» и «шеврон влево», связанные с переменными EN Only и AR Only так, что одновременно отображаться будет только один шеврон; — Есть отдельные коллекции иконок для RTL, так как автоматическое отражение работает не всегда; — Также в Фигме в виде переменных есть словарь — набор переводов на английском, русском и арабском, когда-либо использовавшихся в проекте. #localization #figma
Если у вас установлено приложение,
вы можете сразу перейти в канал