Меня зовут Саша Шульгин, я руковожу агентством Purrweb. За последние пару лет наша команда сделала 5 проектов с арабским интерфейсом. Это, конечно, не 50, но какой-то опыт уже есть. Пока делали проекты, собрали базу знаний. Я решил, что такое нельзя держать только у нас в Notion, поэтому делюсь с вами, как адаптировать приложения для Ближнего Востока.

Проблема: на первый взгляд разработка арабской версии дизайна выглядит просто: перевели текст, выровняли по правому краю = profit. На деле это сложный процесс со множеством нюансов.  

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

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

Начнем с краткого экскурса в арабский дизайн. 

2 пользовательских сценария

Направление интерфейса справа — налево (далее RTL — Right-To-Left) предназначено для пользователей из стран Ближнего Востока. Далее я буду рассматривать версию приложения на арабском, но все советы также применимы для интерфейса на иврите. 

RTL отличается от привычного нам LTR (Left-To-Right) тем, как пользователь просматривает контент на экране: 

LTR — пользователь читает слева — направо; 

RTL — пользователь читает справа — налево. 

Рассмотрите это изображение подробнее. Здесь не только выровнен текст по правому краю, но также изменено расположение элементов интерфейса. Кроме того, некоторые иконки и кнопки перевернуты, а другие — оставлены как есть. 

Во всем этом есть своя логика, и связана она с тем, в каком порядке пользователь просматривает содержимое экрана приложения. Начнем с текста. 

Как оформить текст на арабском

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

Слова или предложения, которые нужно оставить на языке оригинала следует выровнять по правому краю без переворачивания. Текст всегда должен быть расположен в правильном направлении для своего языка. 

Не стоит переводить имена собственные, а также слова и предложения, которые несут смысловую нагрузку только на языке оригинала.

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

Проверить, что шрифты поддерживают арабский язык. Если шрифты основной версии не поддерживают арабский, придется применять к этой версии дизайна другой стиль с подходящими шрифтами. К примеру, Apple в апреле 2022 года добавила шрифт SF Arabic в свое семейство шрифтов. Google предлагает семейство Noto.

Увеличить текст в заголовках и кнопках. Если в английской версии вы выделяете кнопки и заголовки капс-локом, то текст на арабском в них может казаться мелким, потому что в арабском и иврите нет заглавных букв. Чтобы исправить это, в арабской версии увеличьте кегль шрифта для этих элементов примерно на 10%. 

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

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

❗️Исключение: элементы, которые демонстрируют прогресс, например, оценка. Они должны располагаться в соответствии с направлением чтения. При этом сами цифры переворачивать не нужно. 

UI элементы

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

Переворачиваем

Иконки, где есть движение. Если пользователь читает текст справа — налево, объекты, направленные в ту же сторону, для него движутся «вперед». Соответственно все иконки, которые указывают движение «вперед» в LTR дизайне, в RTL должны быть направлены в противоположную сторону: курьер едет не вправо, а влево. 

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

Переадресация. Иконки «вперед» и «назад» меняются местами. Если в LTR дизайне кнопка «назад» показывает влево, в RTL она смотрит вправо. 

«Undo» и «redo». Указывают направление времени: «undo» возвращает нас назад, «redo» — переносит вперед. Эти иконки меняются местами, как и предыдущие. 

Элементы управления. Ползунки, переключатели и другие элементы, где есть начальная и конечная точка должны быть зеркально отражены. 

Не переворачиваем

Изображения. Не делаем этого по двум причинам: 

1. Фотограф или иллюстратор продумывает ракурсы, под которым изображение смотрится оптимально и передает контекст. Если перевернуть изображение, его смысл может теряться. 

2. Автор изображения имеет полное право подать на вас жалобу за использование его интеллектуальной собственности в неправильном виде.

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

Круговое отображение времени. В отличие от кнопок «Undo» и «Redo», которые указывают направление времени, иконки «История» и «Обновить» изображают реальные часы. Они показывают движение по или против часовой стрелки в любой версии дизайна. 

Реальные объекты. Все, что является моделью реально существующего объекта и не указывает направление. То есть движущаяся машина — это иконка направления, ее нужно переворачивать. А наушники или открытая книга — это просто моделька, ее нужно оставлять неизменной. 

Псевдо-направленные иконки. Реальные объекты, которые, на первый взгляд, имеют направление. На самом деле эти предметы просто предназначены для правшей. 

Логотипы и универсальные знаки. А вот эти визуальные элементы отражать категорически нельзя. Так вы только запутаете пользователя и можете нарушить авторские права. 

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

На этом у меня все. Если я не раскрыл какую-то тему, пишите в комментариях — отвечу на все вопросы.  

Бонус: рекомендации по работе с макетом в Figma

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

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

Лайфхак: настройте Figma в зависимости от размера проекта.

• небольшой проект (несколько экранов или лендинг): работаем на отдельной странице, в том же файле;

• средний (версии для разных пользовательских ролей): переносим все в отдельный файл и работаем там;

• большой (дизайн для веб и мобильного приложения): работаем в нескольких файлах.

2. Адаптируем UI-kit под RTL версию. Создаем RTL варианты уже существующих компонентов. Начинайте с мастер-компонентов, затем переходите к иконкам и прочим элементам UI. 

3. Меняем элементы на RTL версию UI-kit. Параллельно открываем обе версии и последовательно заменяем все элементы. 

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

5. Меняем текст на арабский.  Переводим текст в Google Translate или отдаем на перевод специалисту. Далее вставляем в макет. 

Интерфейс арабской версии приложения готов!