Я — Александр Щеблыкин, дизайнер. Уже 6 лет создаю, проектирую и развиваю цифровые продукты. В команде 2ГИС Платформа я работал над картоцентричными сценариями и навигационными интерфейсами для тач-панелей и мобильных устройств.

Также я занимался дизайном и развитием дизайн-системы для B2B-продуктов, ориентированных на крупный бизнес и государственные департаменты в ОАЭ, Саудовской Аравии, Омане и России. Именно там я впервые столкнулся с настоящим вызовом: как сделать интерфейс, который одинаково хорошо работает и слева направо, и справа налево.

Так началась моя история с мультиязычностью, RTL и арабским языком. Вместе с командой Urbi Touch (это партнёр 2ГИС на рынке ближнего зарубежья) мы разработали дизайн-систему, которая позволяет переключать язык, направление, шрифт и тему буквально в один клик.

Почему мультиязычность — боль 

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

Что не так:

• Нет фреймворка для локализации под специфические языки (например, арабский и его диалекты).

• Нет поддержки RTL на уровне дизайн-системы.

• И нет возможности переключать язык, направление, шрифт и тему в один клик.

Нужна устойчивая и быстрая дизайн-система, которая позволит сломать барьер между LTR и RTL, позволив менять направление интерфейсов, шрифты, темы и язык также просто как выпить стакан воды.

Именно с этим мы столкнулись, когда начали работать с ближневосточными рынками. И тут стало понятно: арабский — это не просто «ещё один язык». Это другой способ восприятия интерфейса со своими правилами, визуальной логикой и культурным кодом. И чтобы сделать по-настоящему универсальную дизайн-систему, нужно было начать именно с него.

Арабский контекст

Арабский рынок — огромен. ОАЭ, Саудовская Аравия, Оман — это быстрорастущие рынки с высоким спросом на поддержку арабского языка в цифровых продуктах. Но у них есть свои особенности. Например, слово «Назад» в ОАЭ и Омане пишется одинаково, а в Саудовской Аравии — по-другому. Такие нюансы встречаются постоянно.

Направление чтения 

Арабоговорящие пользователи читают интерфейс справа налево. 

Выравнивание контента

Все элементы интерфейса должны быть выровнены по правому краю. Исключение составляет текст на латинице, который все также остается по левую сторону.

А ещё также в исключения можно включить списки: если слово написано на латинице, как в примере с «Lego», его следует выравнивать по правому краю.

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

Текст и типографика

Арабский текст визуально меньше, чем латиница и кириллица, поэтому для визуальной компенсации увеличиваем изначальный размер текста на 10%. Аналогично делаем и с межстрочным расстоянием.

В арабском языке могут использоваться как западно-арабские цифры, так и восточно-арабские. Например, в Саудовской Аравии используют оба варианта. Важно помнить, что цифры в арабском читаются слева-направо, менять порядок цифр не нужно! Текст читается и остается справа-налево, а цифры нет.

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

Арабы начали пользоваться знаками припинания примерно 100 лет назад и унаследовали их из других языков. По сути в арабском прекрасно можно выразиться и без них. Тем не менее, рассмотрим примеры:

Иконки

Отражаем иконки, отображающие текст или направление чтения. Если иконка содержит текст, например, для размера шрифта или подписи, стоит отразить ее. Также отражаем иконки, которые показывают движение вперед или назад. 

Не переворачивайте иконки, изображающие реальные объекты — это может сбивать с толку. Прежде чем просто отзеркалить сложную иконку, оцениваем её элементы и общий визуальный баланс — не всё отражается одинаково удачно.

Иногда нужно не только отразить иконку, но и изменить позицию её элементов, чтобы она оставалась логичной в RTL-контексте. Например, элемент, отражающий часть UI, должен следовать за направлением интерфейса. А если элемент меняет смысл иконки — подумайте, сохранится ли смысл и баланс после отражения.

Логотипы и универсальные символы не отражаем — они должны оставаться как есть. Исключение: если есть арабская версия логотипа у отдельной компании.

А сейчас рассмотрим как все эти знания применить на практике в дизайн-системе. 

Мультиязычная дизайн-система

Ключевой способ сделать дизайн-систему мультиязычной — использовать переменные. 

В Urbi Touch мы используем переменную RTL, которая переключает интерфейс на арабский. Достаточно скопировать компонент с этим свойством и использоваться в своих сценариях. Когда нужно сменить интерфейс, достаточно внутри коллекции выбрать режим AR (арабский).

Также есть переменные EN, AR Only, которые позволяют не плодить сущности в простых компонентах.

С помощью них можно менять направление иконок, скрывая и показывая их в одном из режимов, например, в хлебных крошках.

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

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

Для иконок у нас есть отдельные коллекции для LTR и RTL. Автоматическое отражение работает не всегда, поэтому лучше группировать их в общей директории с разделением на LTR и RTL.

И самое главное, что объединяет нашу мультиязычную дизайн-систему — Dictionary. Это универсальный набор переводов, которые когда-либо встречались в проектах Urbi Touch. Словарь поддерживается на английском, русском, арабском. Словарь структурирован по смыслу, что позволяет быстро находить нужные фразы.

Это омниканальное решение, которое упрощает и сокращает время дизайнера в разы!

И всё это прекрасно работает благодаря коллекциям. Больше не нужно задумываться о всех правилах арабского: дизайн-система делает все сама, а дизайнер занимается действительно важными и нужными вещами.

На этом мы не остановились и пошли дальше. Так появилась идея плагина, который автоматизирует локализацию прямо в Figma, но он ещё в разработке — расскажу о нём чуть позже! 

В заключении 

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

Если будете работать с рынками Ближнего Востока — надеюсь, мой опыт окажется полезным. Если остались вопросы — пишите, буду рад поделиться.

Есть вопросы — пишите. А если захотите работать в 2ГИС, заглядывайте в наши вакансии.