Наличие многоязычного сайта не только фокусируется на переводе контента на различные языки, но и локализует дизайн и макет сайта, чтобы соответствовать культуре целевого языка.
Согласно статье приложения OneSky, 52% сайтов в мире говорят на английском языке, но только 25% из них могут охватить всех пользователей в интернете. Таким образом, локализация имеет потенциал увеличить охват пользователей.
В этой статье мы обсудим, что такое локализация веб-сайта и как локализовать дизайн и макет в несколько шагов. Продолжайте читать эту статью до конца!
Почему дизайн и макет веб-сайта нуждаются в адаптации?
Прежде чем приступить к этапу локализации дизайна и макета, убедитесь, что вы знаете причины, по которым дизайн должен быть адаптирован к языку страны назначения.
Вот несколько причин, по которым дизайны и макеты должны быть адаптированы и локализованы.
- Уважайте культурное разнообразие: каждый регион имеет культурное разнообразие с предпочтениями цветов и символов. Адаптируя дизайн, сайт уважает и принимает это разнообразие, обеспечивая опыт, более близкий к местным ценностям.
- Адаптация к конкретным языкам и письменностям: локализация предполагает адаптацию к конкретным языкам и письменностям, используемым местными сообществами. Настройка макета и дизайна обеспечивает понятность текстового и визуального контента и соответствие местным языковым нормам.
- Соблюдение местных технических требований: технические аспекты, такие как формат даты и валюты, необходимо корректировать в соответствии с местными стандартами. Это повышает удобство для пользователей и делает веб-сайт более функционально актуальным.
- Обеспечивает непрерывность бренда: локализованный дизайн поддерживает непрерывность бренд-идентичности. Включая визуальные элементы или сообщения, более связанные с местной культурой, веб-сайты сохраняют целостность бренда, адаптируясь к местному контексту.
- Повышение уровня вовлеченности:дизайны, учитывающие местные предпочтения, могут повысить уровень вовлеченности. Это создает более тесную связь между веб-сайтом и пользователем, увеличивая удержание пользователей и удовлетворенность.
- Преодоление многоязычных проблем: выбор шрифта, навигация и другие элементы дизайна могут помочь преодолеть проблемы предоставления многоязычного контента. Локализованный дизайн эффективно реагирует на эту сложность.
- Преимущества SEO и глобальная конкурентоспособность: локализованный дизайн может улучшить производительность SEO на местных рынках и повысить глобальную конкурентоспособность. Веб-сайты, которые хорошо адаптируются к местным предпочтениям, с большей вероятностью займут высокие позиции в поисковых системах и привлекут больше посетителей.
7 шагов для локализации дизайна и макета сайта
После того, как мы разобрались, почему необходимо локализовать дизайн и макет вашего сайта, мы обсудим несколько шагов, которые необходимо предпринять для локализации вашего сайта, включая следующие.
Сохраняйте последовательность дизайна
Первый шаг в локализации сайта - это обеспечение того, чтобы дизайн и макет сайта оставались последовательными, даже если к нему обращаются на разных языках. Это не только гарантирует включение визуальных элементов, но и облегчает пользователям навигацию и обеспечивает ясность.
Поддерживая последовательность дизайна, веб-сайт становится основным каналом передачи дифференцирующих элементов и идентичности бренда. Последовательные цвета, типография и другие элементы дизайна помогают создать сильный, запоминающийся образ бренда.
Пример реализации последовательности веб-дизайна можно увидеть на изображении ниже. Первое изображение - когда вы заходите на сайт Airbnb на английском языке, а второе изображение - на корейском.
As can be seen below, the layout, navigation, button locations, and icons are still the same as before.
Используйте подходящие цвета
Выбор цвета является одним из этапов локализации веб-дизайна, поскольку существуют различия в интерпретации цвета в разных странах. Например, если вы находитесь в некоторых частях Соединенных Штатов, вы можете рассматривать желтый цвет как яркий и веселый.
Однако в индийской культуре желтый цвет считается символом удачи, а не просто приятным цветом.
Даже так, остается под вопросом, соответствует ли локальный цвет цвету бренда. Обычно небольшие изменения в палитре бренда могут быть очень заметными.
Сделайте переключение языков легким
Следующий шаг - убедиться, что кнопка сохранения языка легко находится и проста в использовании.
Разместите кнопку сохранения языка в видном месте, например, в верхней или нижней части страницы, и обеспечьте последовательное расположение на всех страницах перевода сайта. Это помогает пользователям легко найти возможность переключения языков.
На переключателе языка используйте значки или символы, которые визуально представляют сохранение языка. Это может быть флаг, значок глобуса или название языка. Правильная иконография может дать мощные визуальные подсказки.
Например, на следующем изображении есть кнопка переключения языка, которая использует иконку флага и название страны в правом верхнем углу.
Когда сайт доступен на английском или немецком языке, кнопка остается в правом верхнем углу.
Адаптация языка справа налево (RTL)
Адаптация языкового макета справа налево является одним из способов локализации дизайна. Для тех из вас, кто ориентируется на пользователей, использующих языки, такие как арабский, иврит и т. д., сайт должен учитывать направление письма справа налево. Другие элементы, такие как навигация, кнопки и другие, должны быть отражены.
Как в примере ниже на сайте Facebook. На изображении ниже представлены веб-сайты Facebook для английского и арабского языков. Вы можете видеть, что написание контента на арабском языке выполняется справа; это адаптируется к процедуре написания на арабском языке.
Используйте изображения, соответствующие культуре
Используйте изображения, которые подходят и соответствуют местной культуре каждого целевого рынка. Это помогает завоевать доверие местных пользователей.
Следующий пример по-прежнему взят с веб-сайта Coca-Cola, который обеспечивает полный целевой язык. На этот раз он из Кореи.
В этой локализации используются изображения, показывающие страну Корею, а именно одну из популярных женских групп из Кореи.
Настройка форматов даты, валюты и номера телефона
Когда вы находитесь в процессе локализации дизайна и макета вашего веб-сайта, важно убедиться, что форматы даты и другие технические форматы соответствуют местным предпочтениям. Поскольку это повлияет на визуальное представление веб-сайта.
Например, формат даты в Индонезии - ДД/ММ/ГГГГ, а в Америке - ММ/ДД/ГГГГ.
Не только дата, но и формат валюты должен быть скорректирован в соответствии с языком страны, используемой в данный момент.
Одним из примеров применения технической локализации является сайт Airbnb, который предоставляет различные варианты валют.
Как и на следующей странице, есть различия при переводе на арабский и итальянский языки. Не только контент переводится, но и производится корректировка валюты.
Далее, что не менее важно, идет формат номера телефона. В каждой стране, безусловно, есть свой формат номера телефона. Чтобы локализовать ваш сайт, вы можете создать разные коды номеров телефонов для каждого существующего языка.
Например, на следующем изображении есть различия в кодах телефонных номеров при переводе на английский и немецкий языки.
Используйте шрифты, совместимые со всеми языками
Наконец, убедитесь, что вы используете шрифты, совместимые со всеми языками, которые вы выбираете.
Если все языки, которые вы отображаете, используют латинский алфавит, проблем, скорее всего, не возникнет. Однако при включении на ваш сайт языка с кириллическим алфавитом или языка, который пишется справа налево (RTL), не все шрифты поддерживают этот тип алфавита.
Итак, необходимы некоторые корректировки. Для начала нужно добавить поддержку языков RTL в вашем CSS-коде. Это может вызвать изменения шрифта, когда посетители переключаются с языка слева направо (LTR) на язык справа налево (RTL).
Хорошей рекомендацией является использование набора шрифтов, а не только одного шрифта для всего сайта. Используя наборы шрифтов, вы можете делать замены, если первый шрифт не подходит для конкретного языка.
Локализуйте дизайн и макет с помощью Linguise
После ознакомления с пошаговой инструкцией, сейчас мы попробуем локализовать дизайн и макет с помощью Linguise.
Linguise - это служба перевода, которая может автоматически переводить контент на более чем 85 языков, которые вы можете выбрать. Помимо этого, Linguise также поддерживается многими функциями, которые помогают с локализацией сайта. Итак, как вы локализуете дизайн и макет сайта? Вот шаги.
Шаг 1: Автоматическое обнаружение контента
Linguise запускает процесс локализации, предлагая автоматическое обнаружение контента. На этом шаге платформа сканирует ваш веб-сайт, выявляя текст и элементы, требующие перевода.
Этот автоматизированный процесс помогает сэкономить время и обеспечивает всесторонний обзор всего контента, подлежащего локализации.
Шаг 2: Создайте переключатель языка
Одним из шагов для локализации дизайна и макета является сделать кнопку переключения языка легко находимой и согласованной во всех языковых переводах.
Linguise позволяет настроить переключатель языка в соответствии с вашими потребностями. Чтобы настроить, вы можете пройти через Linguise панель управления > Настройки > Отображение флагов языков.
В следующем отображении вы можете настроить форму иконки, например, рядом, всплывающее окно или выпадающий список.
Затем вы также можете выбрать положение кнопки переключения языка, которая будет отображаться на веб-сайте. Для получения полных шагов вы можете прочитать настройку переключателя языка из панели управления.
Шаг 3: Редактируйте локализованный контент с помощью живого редактора
Если содержимое было переведено автоматически, вы можете отредактировать перевод, если что-то не подходит, используя функцию живого редактора. Эта функция может быть использована для локализации содержимого, содержащегося в дизайне.
Например, мы хотим изменить код номера телефона с предыдущего +01 на +49 в разделе адреса, потому что мы переводим на немецкий язык.
Если да, то выберите Сохранить, чтобы сохранить изменения. С помощью живого редактора пользователи могут напрямую локализовать сайт, выбрав его на главной странице веб-страницы.
Это результат локализации, проведенной в живом редакторе, а именно изменения кода телефонного номера страны.
Шаг 4: Исключить содержимое с помощью правил перевода
Локализация может быть выполнена не только через живой редактор путем непосредственного редактирования перевода. Чтобы максимизировать локализацию, вы можете воспользоваться функцией правил перевода, которая активирует перевод.
С помощью функции перевода вы можете локализовать контент, который не хотите переводить, и оставить его как оригинальный. Например, доставка переводов по URL, по строке или по странице.
Эту функцию можно найти в Linguise > Правила. Как показано на следующем изображении, это пример использования текста Правил перевода для замены.
Здесь мы заменим слова “Мои подкасты” на “Моя музыка”, что будет применяться каждый раз при переводе на французский язык.
Шаг 5: Локализуйте сайт с помощью переводчика
Наконец, вы также можете локализовать свой веб-сайт с помощью переводчика. Linguise позволяет добавлять и настраивать переводчиков на сайте, который вы хотите локализовать.
Как добавить его довольно просто, перейдите в Linguise панель > Участники > Пригласить нового участника.
Функция добавления нового участника позволяет локализовать ваш веб-сайт с помощью более профессионального переводчика. Чтобы результаты локализации могли быть более созвучны культурным предпочтениям каждой целевой страны.
Заключение
Это объяснение того, как локализовать дизайн и макет веб-сайта. В этой статье вы также лучше поймете, что такое локализация веб-сайта, разница с переводом и преимущества локализации веб-сайта.
После понимания важности локализации сайта, теперь пришло время локализовать ваш сайт, чтобы охватить более широкую аудиторию.
С помощью Linguiseвы можете локализовать дизайн и макет веб-сайта с помощью различных отличных функций, таких как правила перевода, живой редактор и даже возможность добавлять переводчиков.
Зарегистрируйте Linguise аккаунт бесплатно на 1 месяц и локализуйте сайт, переведя до 600 тысяч слов!
