Проблема: на первый взгляд разработка арабской версии дизайна выглядит просто: перевели текст, выровняли по правому краю = profit. На деле это сложный процесс со множеством нюансов.
При этом русскоязычных источников информации по этой теме мало, плюс ее нужно собирать и структурировать.
Решение: взять эту статью и пройтись по каждому пункту. В результате получится корректный и удобный дизайн для пользователей из арабских стран.
Начнем с краткого экскурса в арабский дизайн.
2 пользовательских сценария
Направление интерфейса справа — налево (далее RTL — Right-To-Left) предназначено для пользователей из стран Ближнего Востока. Далее мы будем рассматривать версию приложения на арабском, но все советы также применимы для интерфейса на иврите.
RTL отличается от привычного нам LTR (Left-To-Right) тем, как пользователь просматривает контент на экране:
- LTR — пользователь читает слева — направо;
- RTL — пользователь читает справа — налево.
LTR и RTL дизайн главной страницы приложения
Рассмотрите это изображение подробнее. Мы не только выровняли текст по правому краю, но также изменили расположение элементов интерфейса. Кроме того, некоторые иконки и кнопки мы перевернули, а другие — оставили как есть.
Во всем этом есть своя логика, и связана она с тем, в каком порядке пользователь просматривает содержимое экрана приложения. Начнем с текста.
Как оформить текст на арабском
Выровнять текст по правому краю. Важно, чтобы текст был переведен и зеркально отражен для чтения справа налево. Мы не востоковеды, чтобы на глаз определять, правильно ли выглядит текст. Поэтому ставим в конец блока несколько вопросительных знаков. Если все ок, они будут отображаться, как на скриншоте. Очень облегчает жизнь 🙂
Проверяем корректность написания текста
Слова или предложения, которые нужно оставить на языке оригинала следует выровнять по правому краю без переворачивания. Текст всегда должен быть расположен в правильном направлении для своего языка.
Небольшие фрагменты текста на другом языке просто выравниваем по правому краю
Не стоит переводить имена собственные, а также слова и предложения, которые несут смысловую нагрузку только на языке оригинала.
❗️Исключение: бывает, что по просьбе клиента нужно оставить на языке оригинала целый абзац. В таком случае фрагмент текста выравнивается по левому краю, несмотря на правостороннее расположение других элементов.
Абзацы на языке оригинала размещаем как в LTR сценарии
Проверить, что шрифты поддерживают арабский язык. Если шрифты основной версии не поддерживают арабский, придется применять к этой версии дизайна другой стиль с подходящими шрифтами. К примеру, Apple в апреле 2022 года добавила шрифт SF Arabic в свое семейство шрифтов. Google предлагает семейство Noto.
В последнем кейсе мы использовали шрифт Dubai по просьбе заказчика.
Увеличить текст в заголовках и кнопках. Если в английской версии вы выделяете кнопки и заголовки капс-локом, то текст на арабском в них может казаться мелким, потому что в арабском и иврите нет заглавных букв. Чтобы исправить это, в арабской версии увеличьте кегль шрифта для этих элементов примерно на 10%.
Небольшое изменение кегля помогает сбалансировать шрифты
Корректно адаптировать цифры. В разных странах и даже регионах одной страны могут использоваться либо западные, либо восточные цифры. Например, в Египте и Судане используют оба вида. А в Иране и Афганистане преобладают восточные цифры. Этот момент лучше заранее уточнить у заказчика.
Западные и восточные цифры
Сохраняйте правильный порядок цифр вне зависимости от языка. Западные цифры даже не нужно переворачивать — просто выровняйте их по правому краю. При этом цифры на арабском отображаются справа — налево.
4 варианта расположения цифр
❗️Исключение: элементы, которые демонстрируют прогресс, например, оценка. Они должны располагаться в соответствии с направлением чтения. При этом сами цифры переворачивать не нужно.
Варианты дизайна оценки для разных языков
UI элементы
Если в предыдущем разделе мы разбирали все, что связано с текстом, то в этом речь пойдет о визуальной составляющей интерфейса. Иконки, указатели, панели управления — некоторые из этих элементов нужно переворачивать, другие — нет. Давайте разбираться, какие и почему.
Переворачиваем
Иконки, где есть движение. Если пользователь читает текст справа — налево, объекты, направленные в ту же сторону, для него движутся «вперед». Соответственно все иконки, которые указывают движение «вперед» в LTR дизайне, в RTL должны быть направлены в противоположную сторону: курьер едет не вправо, а влево.
Переворачиваем иконки, которые двигаются «вперед»
Иконки с имитацией текста. Значок сообщения и другие изображения, имитирующие полосы текста. Поворачиваем их так, как пользователь читает этот текст.
Изображения текста
Переадресация. Иконки «вперед» и «назад» меняются местами. Если в LTR дизайне кнопка «назад» показывает влево, в RTL она смотрит вправо.
Навигация
«Undo» и «redo». Указывают направление времени: «undo» возвращает нас назад, «redo» — переносит вперед. Эти иконки меняются местами, как и предыдущие.
«Undo» и «Redo»
Элементы управления. Ползунки, переключатели и другие элементы, где есть начальная и конечная точка должны быть зеркально отражены.
Блоки с элементами управления
Не переворачиваем
Изображения. Не делаем этого по двум причинам:
- Фотограф или иллюстратор продумывает ракурсы, под которым изображение смотрится оптимально и передает контекст. Если мы переворачиваем изображение, его смысл может теряться.
- Автор изображения имеет полное право подать на вас жалобу за использование его интеллектуальной собственности в неправильном виде.
Иногда направление изображения обязательно нужно менять, чтобы не пострадал общий визуал страницы. В таком случае подумайте над тем, чтобы использовать разные изображения в LTR и RTL версиях.
Еще больше полезных материалов в нашем Telegram-канале Стартап-пикап.
ПодписатьсяКруговое отображение времени. В отличие от кнопок «Undo» и «Redo», которые указывают направление времени, иконки «История» и «Обновить» изображают реальные часы. Они показывают движение по или против часовой стрелки в любой версии дизайна.
Самые распространенные примеры кругового отображения времени
Реальные объекты. Все, что является моделью реально существующего объекта и не указывает направление. То есть движущаяся машина — это иконка направления, ее мы переворачиваем. А наушники или открытая книга — это просто моделька, ее оставляем неизменной.
Эти и другие подобные предметы мы не переворачиваем
Псевдо-направленные иконки. Реальные объекты, которые, на первый взгляд, имеют направление. На самом деле эти предметы просто предназначены для правшей.
Подобные иконки также необязательно переворачивать
Логотипы и универсальные знаки. А вот эти визуальные элементы отражать категорически нельзя. Так вы только запутаете пользователя и можете нарушить авторские права.
Логотипы и универсальные знаки не переворачиваем никогда
Иконки с буквами и цифрами. Их можно переворачивать по необходимости, но чаще всего это необязательно. Главное — перевести символы во всех подобных иконках.
Переводить — обязательно, переворачивать — по необходимости
Видео- и аудиоплееры. Визуально похожи на элементы управления, но отличаются своей универсальностью. В любом дизайне дорожка плеера будет направлена слева — направо.
Подобные элементы оставляем в LTR формате
На этом у нас все. Если мы не раскрыли какую-то тему, пишите в комментариях — ответим на все вопросы.
Бонус: рекомендации по работе с макетом в Figma
Делимся алгоритмом для адаптирования дизайна под арабский язык, который мы используем в своих проектах.
1. Настраиваем рабочее пространство. Решите, будете вы отрисовывать все версии приложения в одном файле или в нескольких. Если используете несколько файлов, то лучше создать библиотеку стилей и подключать ее к новым файлам.
Лайфхак: настройте Figma в зависимости от размера проекта.
- небольшой проект (несколько экранов или лендинг): работаем на отдельной странице, в том же файле;
- средний (версии для разных пользовательских ролей): переносим все в отдельный файл и работаем там;
- большой (дизайн для веб и мобильного приложения): работаем в нескольких файлах
2. Адаптируем UI-kit под RTL версию. Создаем RTL варианты уже существующих компонентов. Начинайте с мастер-компонентов, затем переходите к иконкам и прочим элементам UI.
3. Меняем элементы на RTL версию UI-kit. Параллельно открываем обе версии и последовательно заменяем все элементы.
4. Подготавливаем текстовые поля. Применяем текстовый стиль с новым шрифтом, если текущий стиль не поддерживает арабский язык. После этого выравниваем по правому краю весь текст, который будем переводить.
5. Меняем текст на арабский. Переводим текст в Google Translate или отдаем на перевод специалисту. Далее вставляем в наш макет.
Интерфейс арабской версии приложения готов!
Хотите еще больше полезных советов по дизайну, менеджменту и разработке? Тогда подписывайтесь на наш блог, где мы делимся подробными кейсами из разных индустрий.
В последней статье рассказали, как сделать понятным дизайн для криптоиндустрии на примере приложения Броекс. А в кейсе фудтех приложения Grecha.pro — как защитить дизайн перед требовательным заказчиком. Еще у нас есть история об эко-приложении для одного зарубежного стартапа, который помогает бизнесу стать экологичнее.
