Привет, это разработчики из Лиги А.! Представьте, что вам прилетела задача по дизайну сайта на арабском языке. Полезных статей под рукой не так уж много, а ещё меньше — статей с примерами и культурными нюансами, которые важно учесть при разработке сайта. Рассказываем, без чего арабская версия не будет арабской. И сложно ли реализовать такой дизайн в коде.
Немного о нас
Мы разрабатываем проекты для дизайн-студий, диджитал-агентств и продуктовых команд. Работаем с разными форматами — от простых лендингов до сложных сервисов.
Ведём телеграм канал и другие соцсети про нашу айтишную жизнь — пишем о проектах, клиентах и работе с дизайнерами.
Откуда мы знаем то, о чём будем писать дальше? Недавно мы разрабатывали арабскую версию сайта. Учитывали много нюансов культуры, чтобы сохранить UX для арабских пользователей.
Поэтому всё в статье — наш опыт)
Чем арабская версия сайта отличается от обычной
Вы точно слышали о том, что в арабской культуре пользователи читают справа налево. Причём, некоторые элементы интерфейса меняются, а некоторые — остаются прежними.
Разница в LTR и RTL
Подъехали аббревиатуры. LTR (Left to Right) и RTL (Right to Left) описывают, как текст и элементы интерфейса должны быть организованы на веб-странице. По сути, они отличаются тем, как пользователь просматриваем контент на экране.
Просто запомните, что:
LTR — читаем и пишем слева направо, используем в русском и английском языках.
RTL — читаем и пишем справа налево, используем в арабском и иврите.
Далее пройдёмся по каждой группе элементов, на которые надо обратить внимание и продумать в процессе дизайна.
Оформление текста
- Арабский неудобно читать с жирным выделением, а курсив там вообще не используется. Поэтому текст лучше писать обычно, а важную информацию выделять с помощью отступов или цвета.
-
Буквы арабского алфавита меньше букв латинского. Поэтому можете на пару пунктов уменьшить размер шрифта, чтобы улучшить читаемость.
- Выравнивайте текст по правому краю.
-
Учитывайте длину слов — большинство арабских слов короче русских или английских.
-
Не сокращайте дни недели и месяцы.
- Не меняйте направление слов, которые пишутся латиницей и заимствованы из языков LTR. Например, название компании Apple так и будет выглядеть на сайте, без перевода.
- Не меняйте направление цифр, номера телефона, авиарейсов и брендов. То есть, номер +7 911 123 45 67 будет написан также, без изменений. по арабской логике должен быть написан так — 76 54 321 119 7+, но корректно всё таки писать +7 911 123 45 67.
- Плюс и минус будут написаны по правилам RTL.
Багаж +3 000 ₽ → RUB 3,000+ أمتعة
-
Выбирайте для дизайна шрифты, поддерживающие арабский язык. Например, Noto Sans Arabic ExtraCondensed или IBM Plex Sans Arabic → https://fonts-online.ru/languages/arabic
Оформление цифр
В арабском интервал пишут по правилам RTL. Например, если вы выберете на сайте даты с 2-9, они должны быть написаны так — 9-2.
Валюты
- Символ валюты находится слева от числа — RUB 10,000
- В качестве разделителя тысячной или десятичной части используется запятая. 10 000 → 10,000
- Для рублей используйте код RUB
Изображения
- Если порядок изображений имеет значение — есть какая-то история, хронология или алфавит, поменяйте их местами по правилам RTL.
- В векторных иллюстрациях есть смысл менять расположение элементов с направлением.
Иконки
- Не переворачивайте симметричные иконки и иконки без явного направления. Например, камеру, корзину, профиль пользователя и другие.
- Не меняйте универсальные символы и знаки — например, галочку.
- Иконки с явным направлением делайте зеркальными. Например, в RTL кнопка «Назад» должна указывать направо.
- Учитывайте культурные особенности и альтернативные значения символов. Некоторые иконки — значок копилки или бокал с алкоголем — неуместны на сайтах с RTL.
Недавно на проекте (под NDA)
К нам пришёл клиент с задачей — отзеркалить все возможные элементы на сайте так, чтобы сохранить читабельность для арабских пользователей. После изучения макетов в Фигме, мы уточняли детали — как писать номер телефона, поворачивать ли иконки и так далее.
Самое интересное, что финальных текстов на арабском языке у нас не было. Заказчик хотел его внести далее при интеграции, то есть, вариант ждать был невозможен. Поэтому мы предложили использовать рыбный текст на арабском. В итоге, добавили его на сайт, при этом не забыли учесть детали написания элементов и сохранили читабельность для арабских пользователей.
Сложно ли реализовать арабскую версию сайта в коде?
С точки зрения вёрстки особо ничего не усложняется. Для перевода с одного языка на другой есть специальный HTML атрибут dir.
dir определяет направление текста на веб-странице.
Он может принимать значения LTR, RTL или AUTO, где последний позволяет браузеру определить направление текста на основе его содержимого. Особенно полезно, когда на одной странице смешиваются тексты разных направлений.
Как происходит адаптация сайта под RTL и LTR
Для этого у разработчиков есть специальные инструменты автоматизации, которые могут автоматически генерировать стили для написания RTL.
Например, CSS Flexbox и Grid могут автоматически изменять расположение элементов в зависимости от значения атрибута dir .
С помощью свойств dir и direction сетка с лёгкостью отражается по горизонтали, а какие-то детали можно доработать вручную.
Что это значит для веб-дизайнера, который отдаёт макет разработчикам?
Ничего отдельно готовить для разработчика в макете не нужно, только учесть все особенности дизайна, которые мы прописали выше)
Но важно кое-что учесть — проверить макет перед тем, как отдавать в разработку. Почему?
Лишние детали/элементы/страницы мешают разработчикам быстро анализировать макет и оценивать работу.
Минимализм должен активно войти в чат.
Несколько советов по оформлению макета от разработчиков Лиги
Для чистоты и порядка в макетах:
- Используйте в работе компоненты
- Делайте UI-kit для цветов, текста и компонентов
- Цвета в макете задавайте не наложением нескольких цветов друг на друга, а просто одним цветом
- Продумывайте логику перестроения блоков на адаптиве
- Однотипные svg оборачивайте во фрейм одного размера
- Больше общайтесь с разработчиками. Можно даже не по работе)
И ещё несколько деталей, которые помогут разработчиками быстрее прочитать макет и начать работу, мы расписали в другой статье на DSGNERS!
Мы всегда изучаем детали проекта перед тем, как заняться разработкой — учитываем культуру, сферу компании, ресурсы, макеты и другое. Поэтому можем разработать даже сайт на китайском, с учётом всех нюансов дизайна и разработки.
Можем многое, главное — ваше желание. Пишите нам на почту или мне в телеграм — @gingerliza. В любом случае, вам отвечу я)
