За последние пару лет мы в Purrweb сделали 5 проектов с арабским интерфейсом. Это, конечно, не 50, но какой-то опыт уже есть. Пока работали, собрали базу знаний. Решили, что такое нельзя держать только у себя в Notion, поэтому делимся с вами, как адаптировать приложения для Ближнего Востока.
26 показов
11K открытий
Проблема: на первый взгляд разработка арабской версии дизайна выглядит просто: перевели текст, выровняли по правому краю = 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» — переносит вперед. Эти иконки меняются местами, как и предыдущие.
«Redo» и «Undo»
Элементы управления. Ползунки, переключатели и другие элементы, где есть начальная и конечная точка должны быть зеркально отражены.
Блоки с элементами управления
Не переворачиваем
Изображения. Не делаем этого по двум причинам:
- Фотограф или иллюстратор продумывает ракурсы, под которым изображение смотрится оптимально и передает контекст. Если мы переворачиваем изображение, его смысл может теряться.
- Автор изображения имеет полное право подать на вас жалобу за использование его интеллектуальной собственности в неправильном виде.
Одинаковое изображение для обеих версий
Иногда направление изображения обязательно нужно менять, чтобы не пострадал общий визуал страницы. В таком случае подумайте над тем, чтобы использовать разные изображения в LTR и RTL версиях.
Круговое отображение времени. В отличие от кнопок «Undo» и «Redo», которые указывают направление времени, иконки «История» и «Обновить» изображают реальные часы. Они показывают движение по или против часовой стрелки в любой версии дизайна.
Самые распространенные примеры кругового отображения времени
Реальные объекты. Все, что является моделью реально существующего объекта и не указывает направление. То есть движущаяся машина — это иконка направления, ее мы переворачиваем. А наушники или открытая книга — это просто моделька, ее оставляем неизменной.
Эти и другие подобные предметы мы не переворачиваем
Псевдо-направленные иконки. Реальные объекты, которые, на первый взгляд, имеют направление. На самом деле эти предметы просто предназначены для правшей.
Подобные иконки также необязательно переворачивать
Логотипы и универсальные знаки. А вот эти визуальные элементы отражать категорически нельзя. Так вы только запутаете пользователя и можете нарушить авторские права.
Логотипы и универсальные знаки не переворачиваем никогда
Иконки с буквами и цифрами. Их можно переворачивать по необходимости, но чаще всего это необязательно. Главное — перевести символы во всех подобных иконках.
Переводить — обязательно, переворачивать — по необходимости
Видео- и аудиоплееры. Визуально похожи на элементы управления, но отличаются своей универсальностью. В любом дизайне дорожка плеера будет направлена слева — направо.
Подобные элементы оставляем в LTR формате
На этом у нас все. Если мы не раскрыли какую-то тему, пишите в комментариях — ответим на все вопросы.
Бонус: рекомендации по работе с макетом в Figma
Делимся алгоритмом для адаптирования дизайна под арабский язык, который мы используем в своих проектах.
1. Настраиваем рабочее пространство. Решите, будете вы отрисовывать все версии приложения в одном файле или в нескольких. Если используете несколько файлов, то лучше создать библиотеку стилей и подключать ее к новым файлам.
Лайфхак: настройте Figma в зависимости от размера проекта.
— небольшой проект (несколько экранов или лендинг): работаем на отдельной странице, в том же файле;
— средний (версии для разных пользовательских ролей): переносим все в отдельный файл и работаем там;
— большой (дизайн для веб и мобильного приложения): работаем в нескольких файлах.
2. Адаптируем UI-kit под RTL версию. Создаем RTL варианты уже существующих компонентов. Начинайте с мастер-компонентов, затем переходите к иконкам и прочим элементам UI.
3. Меняем элементы на RTL версию UI-kit. Параллельно открываем обе версии и последовательно заменяем все элементы.
4. Подготавливаем текстовые поля. Применяем текстовый стиль с новым шрифтом, если текущий стиль не поддерживает арабский язык. После этого выравниваем по правому краю весь текст, который будем переводить.
5. Меняем текст на арабский. Переводим текст в Google Translate или отдаем на перевод специалисту. Далее вставляем в наш макет.
Интерфейс арабской версии приложения готов!
Хотите еще больше полезных советов по дизайну, менеджменту и разработке? Тогда подписывайтесь на наш блог, где мы делимся подробными кейсами из разных индустрий:
Читайте, ставьте лайки, задавайте вопросы, делитесь с друзьями. А мы пойдем готовить новый материал 🙂
65 комментариев
Написать комментарий.
A вам не кажется, что звездочку в оценке нужно тоже отзеркалить? Ведь по сути это шкала, где заполнено 4,5 из 5.
Развернуть ветку
Развернуть ветку
2 комментария
Вам кажется. Все правильно. Зеркалить кнопочки не нужно. Сколько раз лазил по арабским сайтам, тотального следования чтения контента справа налево у них не наблюдается от слова совсем, цифры например в привычной для нас последовательности, иконки тоже нигде нет зазеркаливания, ровно как и логики размещения контента на фото справа налево.
Если зеркалить абсолютно все, есть риск свести бедного араба с ума. Все равно что утверждать, что в английском языке есть слово бест, а не лучший. Полазьте сами по арабским сайтам.
Развернуть ветку
Да, вы правы! Мы проглядели, сейчас исправим.
Развернуть ветку
Уважаемый автор, а как вы решили (или не решили ) проблему thumb zone и в целом того факта, что в RTL юзеры держат телефон в большинстве случаев всё той же правой рукой?
Ведь в RTL все кнопки «уезжают» в обратную сторону от удобного нажатия
Развернуть ветку
Для RTL дизайна все-таки важнее направление чтения, и в рекомендациях от iOS thumb zone тоже не учитывается.
Развернуть ветку
Про кнопку «назад» — разрыв шаблона. Интересно, как реализован возврат назад в нативных приложениях на iOS и Android в арабской локализации? Ведь именно они в основном формируют пользовательские привычки.
Развернуть ветку
можете поставить себе арабский и у вас весь паттерн поменяется на тот, который у них
все работает один в один, как мы привыкли, только в другую сторону. для нас крайне непривычно выходит
Развернуть ветку
1 комментарий
Интересно как BPMN по ближневосточному выглядит.
Развернуть ветку
Комментарий удален модератором
Развернуть ветку
Скорее всего, iOS тоже отзеркалит, про Android — не уверены.
Развернуть ветку
Спасибо, интересно.
Появился вопрос по поводу половинчатых звёзд в оценках. Кажется в вариантах с RTL-цифрами их тоже надо зеркалить. Это же типа метафора прогресс-бара, заполняющего ряд звёзд. Если не зеркалить, то прогресс визуально выглядит «поломанным»
Развернуть ветку
Да, это мы не заметили) Сейчас поправим в статье
Развернуть ветку
они английский не знают что ли?
Развернуть ветку
Иврит слегка другой всё-таки)
Знак вопроса на иврите не отображается зеркально. ?שאלות
Развернуть ветку
К удивлению США, кронпринц Мухаммед бин Салман становится звездой Востока новый мир
Ситуация выглядит иррациональной, нелогичной и обидной для американских аналитиков. В течение последнего года саудовские чиновники говорили всем, кто был готов их слушать, о том, что их страна занимает центральное место в мировой экономике, является геополитической державой, динамично развивается и является бесспорным лидером Ближнего Востока. Реакцией американского внешнеполитического сообщества были ухмылки. Но хорошо смеется тот, кто смеется последним, не так ли?
С 2022 года мировые лидеры торили тропу к дверям кронпринца Мухаммеда бин Салмана в поисках всего — от контрактов на поставку оружия и валютных свопов до увеличения добычи нефти
Недавний опрос Gallup, проведенный среди жителей 13 стран с мусульманским большинством, показал, что Саудовская Аравия пользуется в регионе гораздо большей популярностью, чем Иран. Конечно, Иран – это низкая планка, но вот свежие данные авторитетного «Арабского барометра», согласно которым в Иордании Саудовская Аравия занимает второе место после Турции по одобрению населения.
Почти половина тунисцев положительно относятся к Саудовской Аравии — наряду с Францией и Турцией. Иракцы предпочитают Саудовскую Аравию больше, чем любую другую страну, кроме Китая, а Мухаммед бин Салман является их любимым лидером после президента Объединенных Арабских Эмиратов Мохаммеда бин Зайеда.
Казалось бы, логики в этом нет никакой, поскольку саудиты не совершили ничего выдающегося, более того, на некоторых направлениях потерпели поражение, в том же Йемене. Не сумев выпутаться из этой авантюры, саудовцы обратились за помощью к Пекину и Тегерану. А ценой, которую они заплатили за прекращение обстрелов саудовской территории из Йемена, стали Ливан и Сирия, где иранцы теперь могут свободно укреплять свое и без того значительное влияние.
Парадокс: рост популярности и влияния произошел на фоне провала саудитов в Йемене
Нынешние же экономические успехи Королевства обусловлены тем, что саудиты оказались в нужном месте и в нужное время. Сначала – когда закончилась пандемия COVID-19, что вызвало оживление мировой экономики. Затем – конфликт в Украине, потрясший мировые энергетические рынки и существенно сокративший долю на нем России.
Никакой уникальной мудрости или политической прозорливости Эр-Рияд в этих ситуациях не продемонстрировал, но с 2022 года мировые лидеры торили тропу к дверям кронпринца Мухаммеда бин Салмана в поисках всего — от контрактов на поставку оружия и валютных свопов до увеличения добычи нефти. Это первое, что опровергает американский скепсис о возросшей роли Эр-Рияда в международном сообществе.
А вот и второе – рост популярности внутренней и внешней политики Мухаммеда бин Салмана среди тех, кого принято обобщенно называть «арабской улицей». И пусть это не слишком подробно фиксируется в результатах социологических опросов, изрядное количество неофициальных данных свидетельствует о том, что МБС этой «арабской улице» нравится с каждым днем все больше.
И не по тем причинам, на которые обращают пристальное внимание аналитики. А по другим, порою выглядящим странными. Мои ближневосточные собеседники указывают на социальные изменения, происходящие в Саудовской Аравии, — изменения, которые являются реальными и важными и положительно повлияли на жизнь многих саудовцев.
«Арабская улица» боготворит своего кумира
И их совершенно не смущает то, что реформы проводятся исключительно сверху, активисты, требующие перемен снизу, подвергаются жестким расправам, а наблюдение государства за обществом в Саудовской Аравии за последнее время усилилось.
Кроме того, по словам местных аналитиков, молодые специалисты из Ближнего Востока все чаще ищут возможности в Эр-Рияде, Джидде и Неоме — футуристическом городе и любимом проекте Мухаммеда бин Салмана, для реализации которого потребуется целая армия квалифицированных и неквалифицированных рабочих.
И в то время как американцы, британцы, австралийцы и европейцы не хотят переезжать в Королевство, поскольку алкоголь и другие пороки остаются там харамом и запрещены, для талантливых молодых арабов и вообще мусульман жизнь в Саудовской Аравии становится все более привлекательной.
Мечта талантливого араба — город-мечты МБС
Но дело не только в этом. Пожалуй, то главное, что демонстрирует Королевство окружающим – это то, что саудиты формируют свой Ближний Восток, стараясь как можно меньше, пусть и на словах, привлекать к этому американцев, которых здесь все сильнее не любят и которым здесь все сильнее не доверяют. Королевство в представлении «арабской улицы» все больше воспринимается как двигатель процветания и стабильности в регионе.
Пусть это несколько наивное и преувеличенное видение, но оно становится реальностью. И всякому, кто хочет продвижения своих интересов на Ближнем Востоке и в Персидском заливе, было бы неплохо учитывать эту новую реальность.
Источник: haqqin.az
Аниме и арабские страны
В отношении фанатов аниме всегда была определенная социальная стигма, касающаяся того, что аниме несет собой негативные ценности, а некоторые страны даже специально предпринимают усилия для того, чтобы бороться с аниме-культурой, якобы она пропагандирует ЛГБТ-ценности, и даже иногда пропаганду вещей, запрещенных Роскомнадзором. К нашумевшей новости недавних дней из Санкт-Петербурга можно добавить случаи, когда в Дагестане отменили аниме-фестиваль из-за угроз организаторам, якобы фестивали неформалов ведут к будущим фестивалям геев и трансвеститов. Думаю, тех людей бы удивило отношение к аниме в Саудовской Аравии, которая является центром ислама, и в других соседних арабских странах, а также Ирана — аниме там любят. Как же так получилось?
Арабы уже в 80-х хотели потреблять иностранный контент, но при этом — для них, Америка это идеологический враг, и правительства США и Королевства Саудовская Аравия (дальше КСА) дружат, хотя КСА это монархия и диктатура с угнетением женщин, пока США вроде как за демократию и равные права. Тем не менее, по телевидению редко, хоть и показывали американский продукт, а своего анимированного контента у КСА мало, — так что там решили, что японское аниме, — это оптимальный вариант. Убили трех зайцев одним выстрелом. Стоит так же уточнить, что Япония — это один из главных партнеров КСА и один из основных покупателей саудовской нефти.
914×221
Список стран-покупателей нефти из Саудовской Аравии.
Особенно популярны такие аниме, как Captain Tsubasa, про футбол; Грендайзер — меха аниме, и молодое поколение также любит более популярные аниме типа Драгонболла, Покемонов или Детектива Конана, которые были дублированы на арабский и показывались по телевизору с 80-х годов. Точно так же, среди фанатов аниме пользуются почетом такие аниме как Naruto, Bleach, Fullmetal Alchemist, что показывает, что особой разницы между вкусами любителей аниме по всему миру нет.
youtube
Первый опенинг Покемонов. Хотя это переработанная западная версия.
youtube
Вот опенинг Detective Conan, если вам интересно, как он звучит на арабском.
Можно отдельно выделить самого Кронпринца Королевства Саудовская Аравия Мухаммеда бин Салмана (Mohamme D. bin Salman), ведь когда приезжал в Японию, заодно еще попросил автограф у Оды Эйчиро, потому что он большой фанат аниме, и Ван Писа в частности. Тут надо сказать, что раз он такой большой фанат, либо кто-то из принцев или принцесс, то у него появилась идея про то, чтобы финансировать аниме, а также, даже начать делать собственное аниме, Так появился проект «Рыцарь Пустыни», и даже вышел трейлер, который был создан в сотрудничестве с Gainax. Оригинальное видео удалено, так что есть только такое, в плохом качестве. О проекте уже давно не слышно, так что не понятно, что с ним.
youtube
youtube
Источник: shikimori.me