UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Локалізація дизайну
Xperience
Xperience

Опубліковано

Локалізація дизайну

Підтримка локалізації є важливою частиною процесу проектування. Важливо врахувати це, коли ви починаєте розробляти свою програму. Підтримуючи локалізацію, ви можете підвищити успіх своєї програми в різних країнах.

Що таке локалізація?

Локалізація означає адаптацію вашого вмісту до місцевих мов і культур. Це не просто переклад текстових елементів на зазначену мову, а й відображення місцевої культури на вашому веб-сайті. Це включає переконання в наступному:

  • Переконайтеся, що зображення та ілюстрації відповідають культурі
  • Одиниці вимірювання такі ж, як і місцевості
  • Формати дати, часу та валюти точні
  • Перекладені дані чіткі та зрозумілі

Динамічна ширина і висота

Важливо, щоб ви могли налаштувати свої ресурси в Auto Layout з самого початку, щоб пізніше можна було включити функції локалізації у свій дизайн. Додавання Auto Layout до текстів у вашому інтерфейсі користувача допоможе адаптувати дизайн до іншої мови.

Глобальні шрифти

Вибираючи шрифт для своєї програми, найкраще вибрати шрифти, які забезпечують багатомовну підтримку. Ви також повинні мати на увазі, що розмір шрифту може відрізнятися залежно від мови. Одним із рішень для цього було б визначення різних таблиць стилів для різних мов.

Формати дати та часу

Ці проблеми можуть здатися незначними, але вони можуть змінити все. Візьмемо для прикладу інструменти вибору дати: засоби вибору дати в США використовують формат ММ-ДД-РРРР, а в Європі — формат ДД-ММ-РРРР. Незважаючи на те, що це може здатися нам не дуже очевидним, користувачі звикли до певного формату.

Макет

Більшість мов читаються зліва направо, але це не стосується арабської. Просте додавання перекладеного вмісту тут було б марним. Коли справа доходить до локалізації, вам потрібно буде взяти до уваги макет сторінки.

Місцева культура

Хоча ваша програма та сторінка продукту повинні забезпечувати однакову взаємодію на всіх ринках, інколи важливо покращити певні елементи для культурної відповідності.
Місцева культура

Переклад проти локалізації

Незважаючи на те, що це може здатися таким, майте на увазі, що переклад і локалізація НЕ еквівалентні одне одному. Простий переклад вмісту на іншу мову ідеально підходить, коли ви говорите про документацію, оскільки здебільшого вона не вимагає особистого підходу, але локалізація – це набагато більше. Це вимагає пам’ятати про місцеву культуру та додавати вміст, який відповідає місцевості, на яку ви націлені.

Прапори країн світу

Плагін Flags of the World дає вам можливість додати прапор будь-якої країни до вашого дизайн-проекту. Ви можете завантажити його з розділу плагінів у Figma або перейти за цим посиланням.
Прапори країн світу

Локалізуйте

Lokalise — програма для керування перекладами, яка бездоганно працює з Figma, Sketch і Adobe XD. Працювати з ним дуже легко. Ви можете вибрати тексти, які хочете перекласти, зі свого макета, а потім відкрити плагін. Lokalise скопіює тексти та впорядкує їх на своїй платформі, де ви або ваша команда зможете перекласти кожне слово кількома мовами.
Локалізуйте

Перекладіть вміст інтерфейсу користувача

Для цієї вправи ми будемо використовувати плагін Translator для Figma. Давайте перейдемо до «Community», потім до плагінів, знайдемо плагін « Translator» і встановимо його.
Перекладіть вміст інтерфейсу користувача

Тепер перейдіть до файлу у Figma. Виберіть заголовок і текст, який ми хочемо перекласти. Для цього прикладу ми перекладемо наш текст з англійської на іспанську. Перейдіть на панель вкладок і клацніть Плагін < Перекладач < Іспанська (Plugin < Translator < Spanish).
Переклад

Через пару секунд ви побачите, що всі вибрані нами тексти будуть перекладені іспанською мовою. Обов’язково виправте деякі текстові блоки на випадок, якщо в цьому є потреба.

Переклад

Висновок

Розробка користувальницького інтерфейсу з урахуванням локалізації може бути трудомістким процесом, але врешті-решт це корисно з точки зору того, що ваші користувачі з усього світу відчувають себе причетними. Оскільки ви вже розробили гнучкий інтерфейс користувача, який можна легко адаптувати, це позбавить вас від перепроектування під час розгалуження.

Переклад designcode.io

Топ коментарі (1)

Згорнути/розгорнути
 
smile profile image
Mr Smile

Найскладніші кейси з локалізації це:

  1. Дуже велика різниця довжини тексту на англійській та деяких європейських мовах. Часто перекладений текст приходиться обрізати з "..." або переробляти інтерфейс
  2. Специфіка світосприйняття на азійських локаціях, якщо розбиратися - там дуже багато нюансів, але на щастя молодь тягнеться до заходу, тож добре сприймає західні стандарти
  3. Арабські локації - добре що фігма додала підтримку RTL, але якщо тотально переробляти інтерфейс під RTL - це купа роботи та підтримки