Наличие многоязычного сайта не только предполагает перевод контента на различные языки, но и локализацию дизайна и макета сайта в соответствии с культурой целевого языка.
Согласно статье OneSky App, 52% сайтов в мире говорят на английском языке, но только 25% из них могут охватить всех пользователей интернета. Поэтому локализация способна увеличить охват пользователей.
В этой статье мы обсудим, что такое локализация сайта и как локализовать дизайн и макет в несколько шагов. Читайте эту статью до конца!
Почему дизайн и структура веб-сайта нуждаются в адаптации?
Прежде чем перейти к этапу локализации дизайна и макета, убедитесь, что вы знаете причины, по которым дизайн должен быть адаптирован к языку страны назначения.
Вот несколько причин, по которым дизайн и макеты следует адаптировать и локализовать.
- Уважайте культурное разнообразие: в каждом регионе есть культурное разнообразие с предпочтениями в отношении цветов и символов. Адаптируя дизайн, сайт уважает и принимает это разнообразие, обеспечивая опыт, более близкий к местным ценностям.
- Адаптация к конкретным языкам и письменностям: локализация предполагает адаптацию к конкретным языкам и письменностям, которые используют местные сообщества. Настройка макета и дизайна гарантирует, что текст и визуальный контент будут легко понятны и будут соответствовать нормам местного языка.
- Соблюдение местных технических требований: такие технические аспекты, как формат даты и валюта, необходимо адаптировать в соответствии с местными стандартами. Это повышает удобство для пользователей и делает сайт более функционально релевантным.
- Обеспечивает преемственность бренда: локализованный дизайн поддерживает преемственность фирменного стиля. Включая визуальные элементы или сообщения, более связанные с местной культурой, веб-сайты сохраняют целостность бренда, адаптируясь к местному контексту.
- Повышение уровня вовлечённости: дизайн, учитывающий местные предпочтения, может повысить уровень вовлечённости. Это создаёт более тесную связь между сайтом и пользователем, увеличивая удержание и удовлетворённость пользователей.
- Преодоление проблем многоязычности: выбор шрифтов, навигация и другие элементы дизайна помогают справиться с задачами предоставления многоязычного контента. Локализованный дизайн эффективно отвечает на эту сложность.
- Преимущества для SEO и глобальная конкурентоспособность: локализованный дизайн может улучшить показатели SEO на местных рынках и повысить глобальную конкурентоспособность. Сайты, которые хорошо адаптируются к местным предпочтениям, с большей вероятностью будут занимать высокие позиции в поисковых системах и привлекать больше посетителей.
7 шагов для локализации дизайна и макета сайта
Узнав, почему необходимо локализовать дизайн и макет вашего сайта, мы обсудим несколько шагов, которые нужно предпринять для локализации вашего сайта, включая следующие.
Сохраняйте единообразие дизайна
Первый шаг в локализации веб-сайта — убедиться, что дизайн и макет сайта остаются единообразными, даже если к нему обращаются на разных языках. Это не только гарантирует наличие визуальных элементов, но и упрощает работу пользователей и обеспечивает ясность навигации.
Поддерживая единообразие дизайна, сайт становится основным каналом для передачи отличительных элементов и идентичности бренда. Последовательные цвета, типографика и другие элементы дизайна помогают создать сильный и запоминающийся образ бренда.
Пример реализации единообразия веб-дизайна можно увидеть на изображении ниже. Первое изображение — это когда вы заходите на сайт Airbnb на английском языке, а второе — при входе на корейском.
Как видно ниже, макет, навигация, расположение кнопок и значки остаются такими же, как и раньше.
Используйте подходящие цвета
Выбор цвета — это один из этапов локализации веб-дизайна, поскольку в разных странах существуют различия в восприятии цвета. Например, если вы находитесь в некоторых частях США, жёлтый цвет может восприниматься как яркий и весёлый.
Однако в индийской культуре жёлтый цвет считается символом удачи, а не просто приятным цветом.
Тем не менее, остается выяснить, по-прежнему ли локальный цвет соответствует цвету бренда. Обычно небольшие изменения в цветовой палитре бренда могут быть очень заметными.
Упростите переключение между языками
Следующий шаг — убедиться, что кнопка сохранения языка легко находится и проста в использовании для пользователей.
Разместите кнопку сохранения языка на видном месте, например в верхней или нижней части страницы, и обеспечьте единообразное размещение на всех страницах перевода сайта. Это помогает пользователям легко находить возможность переключения языка.
В переключателе языков используйте иконки или символы, которые визуально обозначают сохранение языка. Это может быть символ флага, иконка глобуса или название языка. Правильная иконография может дать мощные визуальные подсказки.
Например, на следующем изображении в правом верхнем углу есть кнопка переключения языка, использующая иконку флага и название страны.
Когда сайт открывается на английском или немецком языке, кнопка остаётся в правом верхнем углу.
Адаптация для языков с письмом справа налево (RTL)
Адаптация языковой разметки справа налево — одна из задач локализации дизайна. Если вы ориентируетесь на пользователей, говорящих на таких языках, как арабский, иврит и т. д., сайт должен поддерживать направление письма справа налево. Другие элементы, такие как навигация, кнопки и прочее, также должны быть зеркально отражены.
Как в примере ниже на сайте Facebook. На изображении ниже представлены сайты Facebook на английском и арабском языках. Вы можете видеть, что написание контента на арабском языке выполняется справа; это адаптируется к порядку написания на арабском.
Используйте изображения, соответствующие культурным особенностям
Используйте изображения, которые соответствуют и релевантны местной культуре каждого целевого рынка. Это помогает укрепить доверие местных пользователей.
Следующий пример по-прежнему взят с сайта Coca-Cola, который действительно предлагает полноценную версию на целевом языке. На этот раз он из Кореи.
В этой локализации используются изображения, отражающие страну Корею, а именно одну из популярных корейских гёрл-групп.
Настройте форматы даты, валюты и номера телефона
Когда вы занимаетесь локализацией дизайна и макета своего веб-сайта, важно убедиться, что даты и другие технические форматы соответствуют местным предпочтениям. Потому что это повлияет на визуальное оформление веб-сайта.
Например, формат даты в Индонезии — ДД/ММ/ГГГГ, а в Америке — ММ/ДД/ГГГГ.
Не только дату, но и формат валюты также необходимо адаптировать к языку страны, используемой в данный момент.
Один из примеров применения технической локализации можно увидеть на сайте Airbnb, который предлагает различные варианты валют.
Как и на следующей странице, при переводе на арабский и итальянский языки есть различия. Переводится не только контент, но и корректируются валюты.
Далее, что не менее важно, — формат телефонных номеров. В каждой стране, безусловно, есть свой формат телефонных номеров. Чтобы локализовать свой сайт, вы можете создать отдельный код телефонного номера для каждого существующего языка.
Например, на следующем изображении есть различия в кодах телефонных номеров при переводе на английский и немецкий языки.
Используйте шрифты, совместимые со всеми языками
И наконец, убедитесь, что вы используете шрифты, совместимые со всеми выбранными вами языками.
Если все языки, которые вы отображаете, используют латиницу, скорее всего, проблем не возникнет. Однако если на вашем сайте есть язык с кириллическим алфавитом или язык с письмом справа налево (RTL), не все шрифты поддерживают такой алфавит.
Поэтому необходимы некоторые корректировки. Начать следует с добавления поддержки языков с письмом справа налево (RTL) в ваш CSS-код. Это может вызвать изменения шрифта, когда посетители переключаются с языка с письмом слева направо (LTR) на язык с письмом справа налево (RTL).
Рекомендуется использовать набор шрифтов, а не один шрифт для всего сайта. Использование наборов шрифтов позволяет заменять шрифты, если первый не подходит для конкретного языка.
Локализация дизайна и макета с помощью Linguise
После изучения пошагового руководства на этот раз мы попробуем локализовать дизайн и макет с помощью Linguise.
Linguise — это сервис перевода , который может автоматически переводить контент на более чем 85 языков на выбор. Кроме того, Linguise также поддерживается множеством функций, которые помогают с локализацией сайта. Итак, как локализовать дизайн и макет сайта? Вот шаги.
Шаг 1: Автоматическое обнаружение контента
Linguise управляет процессом локализации, предлагая автоматическое обнаружение контента. На этом этапе платформа сканирует ваш сайт, выявляя текст и элементы, требующие перевода.
Этот автоматизированный процесс помогает сэкономить время и обеспечивает всесторонний обзор всего контента, подлежащего локализации.
Шаг 2: Создайте переключатель языков
Одним из шагов по локализации дизайна и макета является обеспечение легкодоступности кнопки переключения языка и ее единообразия во всех языковых переводах.
Linguise позволяет настроить переключатель языка в соответствии с вашими потребностями. Для настройки вы можете перейти в Linguise панель управления > Настройки > Отображение языковых флагов.
В следующем отображении вы можете настроить форму значка, например, рядом, во всплывающем окне или в раскрывающемся списке.
Затем вы также можете выбрать положение кнопки переключения языка, которая будет отображаться на сайте. Полные инструкции можно прочитать в разделе настройка переключателя языка из панели управления.
Шаг 3: Редактируйте локализованный контент с помощью редактора в реальном времени
Если контент был переведён автоматически, вы можете отредактировать перевод, если что-то не подходит, используя редактор в реальном времени . Эта функция позволяет локализовать контент, содержащийся в дизайне.
Например, мы хотим изменить код телефонного номера с предыдущего +01 на +49 в разделе адреса, потому что мы переводим на немецкий.
Если да, выберите «Сохранить», чтобы сохранить изменения. С помощью редактора в реальном времени пользователи могут напрямую локализовать сайт, выбрав его на главной странице веб-сайта.
Это результат локализации, выполненной в live-редакторе, а именно изменение кода телефонного номера страны.
Шаг 4: Исключите контент с помощью правил перевода
Локализацию можно выполнять не только через живой редактор, редактируя перевод напрямую. Чтобы максимально упростить локализацию, вы можете воспользоваться функцией правил перевода, которая активирует перевод.
С помощью функции перевода вы можете локализовать контент, который не хотите переводить, и оставить его в оригинальном виде. Например, доставка переводов по URL, по строкам или по страницам.
Вы можете найти эту функцию в Linguise панели управления > Правила. Как показано на следующем изображении, это пример использования текста Правил перевода для замены.
Здесь мы заменим слова «Mes podcasts» на «Ma musique», что будет применяться каждый раз при переводе на французский язык.
Шаг 5: Локализуйте сайт с помощью переводчика
Наконец, вы также можете локализовать свой веб-сайт с помощью переводчика. Linguise позволяет добавлять и настраивать переводчиков для сайта, который вы хотите локализовать.
Добавить его довольно просто: перейдите в Linguise панель управления > Участники > Пригласить нового участника.
Функция добавления нового участника позволяет локализовать ваш сайт с помощью более профессионального переводчика. Благодаря этому результаты локализации могут лучше соответствовать культурным предпочтениям каждой целевой страны.
Conclusion
Это объяснение того, как локализовать дизайн и макет веб-сайта. В этой статье вы также лучше поймёте, что такое локализация веб-сайта, чем она отличается от перевода и какие преимущества даёт локализация веб-сайта.
После того как вы осознали важность локализации сайта, настало время локализовать свой сайт, чтобы охватить более широкую аудиторию.
С Linguiseвы можете локализовать дизайн и макет сайта с помощью различных превосходных функций, таких как правила перевода, живой редактор и даже возможность добавлять переводчиков.
Зарегистрируйте Linguise бесплатно на 1 месяц и локализуйте сайт, переведя до 600 тысяч слов!
