Халяльный дизайн: как делать приложения на арабском

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В последнем кейсе мы использовали шрифт Dubai по просьбе заказчика.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Хотите еще больше полезных советов по дизайну, менеджменту и разработке? Тогда подписывайтесь на наш блог, где мы делимся подробными кейсами из разных индустрий:

Читайте, ставьте лайки, задавайте вопросы, делитесь с друзьями. А мы пойдем готовить новый материал :)