Селектор языка — это важный элемент, на который следует обратить пристальное внимание при создании многоязычного веб-сайта , поскольку переключатель языка — это то, что пользователи часто посещают, когда хотят переключить язык.
Эффективная кнопка переключения языка может обеспечить веб-сайту несколько преимуществ: от повышения веб-оптимизации до увеличения продаж.
В этой статье мы обсудим лучшие практики разработки языковых селекторов. Давайте обсудим это подробнее в следующей статье.
Селектор языка — это элемент или функция пользовательского интерфейса, которая позволяет пользователям выбирать язык, на котором они хотят взаимодействовать с веб-сайтом, приложением или любой цифровой платформой. Его обычно можно встретить на веб-сайтах, в программных приложениях и других цифровых интерфейсах, которые подходят пользователям, говорящим на разных языках.
Селектор языка обычно отображает список доступных языков, и пользователь может выбрать язык по своему выбору из этого списка. После выбора содержимое интерфейса, включая текст, метки и иногда изображения, будет отображаться на выбранном языке. Это особенно важно для веб-сайтов и приложений, которые обслуживают глобальную аудиторию или разнообразную базу пользователей.
Средства выбора языка способствуют улучшению пользовательского опыта, делая цифровой контент доступным для более широкой аудитории, независимо от уровня ее языковых навыков. Они являются ключевым компонентом усилий по локализации, позволяя разработчикам и дизайнерам адаптировать свои продукты к различным языковым и культурным контекстам.
Настройка переключателя языка на многоязычном веб-сайте имеет несколько важных преимуществ.
Каждый владелец веб-сайта, безусловно, внимательно продумает, как выглядит его средство выбора языка; у каждого веб-сайта, конечно, будут разные предпочтения. Для тех из вас, кто ищет тип переключателя языка, который можно использовать, вот некоторые из них.
Это один из часто используемых типов переключателя языка. Кнопка выбора языка обычно представляет собой значок или текст, обозначающий отображаемый язык, например «EN» для английского языка или флаг страны для обозначения определенного языка. Когда пользователи нажимают кнопку выбора языка, они будут перенаправлены на версию веб-сайта на соответствующем языке.
Для языковых кнопок рекомендуется отображать ограниченное количество языков, чтобы избежать загромождения дисплея. Как правило, наличие более 4–5 языков может создать перегруженный визуальный эффект. Важно расположить кнопку на видном месте, чтобы пользователи могли легко ее найти. Мы обсудим эти аспекты подробнее в следующем разделе этой статьи.
Языковые кнопки могут подойти компаниям, ориентированным на определенные рынки или обслуживающим международные сообщества в определенных местах. Пример использования кнопки языка на веб-сайте ВОЗ приведен ниже.
Текстовые ссылки — это тип переключателя языка, который использует в качестве ссылки текст в виде названия языка. Например, вы можете отображать текстовые ссылки, такие как «Английский», «Французский» или «Испанский», которые перенаправляют пользователей на версию веб-сайта на выбранном языке. Эта текстовая ссылка обычно размещается в списке или раскрывающемся меню, чтобы пользователям было проще выбрать нужный язык.
Один из типов выбора языка ссылок используется крупной компанией Facebook. Помимо перечисленных языков, вы также можете нажать значок (+), чтобы найти больше языков.
После этого страница будет сразу переведена на выбранный ранее язык.
Меню выбора — это тип переключателя языка, в котором для выбора языка используется раскрывающееся или открытое меню. Когда пользователи нажмут на меню параметров, они увидят список доступных языков и смогут выбрать нужный язык. Меню параметров может содержать значки или флаги стран в качестве индикаторов языка, а также названия языков в тексте.
Меню выбора сильно отличается от кнопки языка, этот тип сложнее, чем просто кнопка. Как пример ниже, взятый с сайта Porsche.
Они предоставляют веб-сайт выбора языка, где пользователи могут напрямую указать свой язык или страну назначения.
После понимания различных типов языковых селекторов, которые можно использовать на веб-сайтах, при создании языкового селектора важно применять лучшие практики, чтобы вы могли создать эффективный и удобный для пользователя селектор языка. Вот некоторые лучшие практики.
На данный момент вы знаете лучшие практики для выбора языка. Этот перевод можно выполнить после того, как вы воспользуетесь услугой перевода веб-сайта. Однако не все службы перевода обеспечивают гибкость настроек выбора языка.
Но не волнуйтесь, потому что Linguise не такой. Linguise — это служба автоматического перевода, которая позволяет пользователю настраивать переключатель языка. Некоторые из преимуществ, которые вы получите при использовании Linguise , включают:
В этом уроке мы будем использовать WordPress в качестве примера используемой CMS.
Чтобы получить доступ к переключателю языка на Linguise , первым делом вам необходимо зарегистрировать учетную запись на Linguise . Linguise также предлагает бесплатную пробную версию на один месяц, которая включает в себя множество функций, которыми вы можете воспользоваться.
Второй шаг — уже принадлежащий вам домен веб-сайта в Linguise Linguise . Есть несколько вещей, которые вам нужно заполнить, начиная с.
После этого вам необходимо активировать ключ API и установить URL-адрес языка. Полное руководство по добавлению домена веб-сайта вы можете прочитать в документации, а специально для WordPress вы можете просмотреть его, установив автоматический перевод Linguise WordPress или посмотрев видеоурок ниже.
После успешного добавления веб-сайта откройте WordPress и установите Linguise . Для этого выберите «Плагины» > «Добавить новый» > Linguise > «Установить» > «Активировать».
Если плагин уже установлен, перейдите в панель управления Linguise и скопируйте ключ API.
Затем откройте плагин Linguise и вставьте код API, полученный из панели управления Linguise в следующий столбец.
Чтобы настроить переключатель языка или отобразить языковые флаги, выполните действия через Linguise в меню «Настройки» > «Отображение языковых флагов».
Во время первоначальной настройки мы внесем коррективы в основной дисплей с учетом различных компонентов.
Одним из первоначальных соображений является настройка формата отображения списка языков, который предлагает три варианта на выбор: рядом, раскрывающийся список или всплывающее окно. С левой стороны имеется предварительный просмотр для каждого формата.
Первый формат, как показано ниже, представляет собой макет «бок о бок».
В следующем формате используется стиль раскрывающегося списка, как показано на рисунке ниже.
Наконец, у нас есть формат всплывающего окна в качестве последнего варианта.
Далее переходим к следующему шагу, который предполагает настройку положения переключателя языка. У вас есть возможность выбирать из различных вариантов позиции, поэтому важно выбрать позицию, которая будет легко заметна посетителям.
Наконец, вам нужно определиться с предпочтительной комбинацией отображения языковых опций. Вы можете выбирать между такими вариантами, как флаг + название языка, флаг + короткое имя или просто отображение только флага. Это решение будет зависеть от ваших конкретных дизайнерских предпочтений и предпочтений вашей целевой аудитории.
После этого под основным разделом дисплея вы увидите конфигурации дизайна специально для флага. Изображение, представленное ниже, демонстрирует некоторые доступные параметры настройки.
После того, как дизайн флага настроен, следующим шагом будет настройка цвета, размера и других элементов. В следующем интерфейсе вы найдете множество настраиваемых параметров, в том числе:
На заключительном этапе у вас есть возможность настроить параметры тени для флага. Первоначальная настройка позволяет вам указать тень для каждого флага, отображаемого на вашем веб-сайте, а последующая настройка относится к эффекту тени при наведении курсора на флаг языка.
Не забудьте нажать «Сохранить» , чтобы сохранить настройки, выполненные вами для переключателя языка. Это гарантирует, что выбранные вами конфигурации эффектов тени будут реализованы и сохранены для использования в будущем.
После того, как все настройки были выполнены, вот пример отображения выбора языка с использованием всплывающего окна, расположенного в верхнем правом углу, и с использованием инициалов. Это всего лишь пример, остальное вы можете настроить по своему желанию и в соответствии с потребностями сайта.
Помимо WordPress , вы также можете использовать другие платформы веб-сайтов и следовать подробному руководству, такому как переключатель настройки для OpenCart , переключатель языка для Drupal и переключатель настроек для PrestaShop .
Здесь вы узнали о лучших методах разработки языковых селекторов и о том, как это сделать с помощью Linguise ! Поверьте, создание переключателя языков может дать множество преимуществ и обеспечить оптимизацию на основе упомянутых выше моментов.
При создании средства выбора языка обязательно следуйте советам и рекомендациям, которые мы объяснили выше, начиная с использования значков и выбора соответствующих языков и заканчивая позиционированием.
Теперь зарегистрируйте учетную запись Linguise , добавьте свой веб-сайт и настройте переключатель языка, чтобы обеспечить лучший пользовательский опыт. Не забудьте попробовать бесплатную пробную версию на 1 месяц, чтобы насладиться превосходными функциями Linguise Linguise
Получайте новости об автоматическом переводе веб-сайтов, международном SEO и многом другом!
Не уходите, не поделившись своей электронной почтой!
Мы не можем гарантировать, что вы выиграете в лотерею, но можем обещать интересные информационные новости о переводах и периодические скидки.
