Перейти к руководству
Localization Designавтор Owl-Listener

Localization Design Skill.

Готовьте интерфейс к языковым различиям, а не только к переведённым строкам.

  • Дизайн-системы
  • Локализация
Обзор источника · Localization DesignSKILL.md
Задача Дизайн-системы Результат • Аудит компонентов на предмет увеличения длины текста, обрезки и гибких размеров. • Спецификация RTL, различающая зеркалируемые и сохраняемые элементы. • Чек-лист по локальным форматам и тестированию письменностей. Перед началом Нужны тексты для целевых локалей, шрифты и подходящая проверка языка или культуры; платформа автоматической локализации не входит в комплект.
Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Проектируйте интерфейсы для разных языков

Руководство по UI с учётом локализации: гибкие текстовые макеты, направление письма, нелатинские письменности и локальные соглашения.

Рабочий процесс на основе источникаНе тест выполнения

Принцип работы

Localization Design рассматривает, что ломается, когда макет выходит за пределы исходного языка: более длинные подписи, другое направление письма, типографика конкретных письменностей и локальные форматы дат, чисел, денег или адресов. Он рекомендует гибкие контейнеры, логические свойства CSS и тестирование как с длинным текстом, так и с RTL-локалью.

Он также отделяет перевод от культурной проверки. Технически зеркалированный макет всё равно может использовать неподходящие символы или допущения. В источнике есть иллюстративные культурные обобщения и диапазоны увеличения длины; они должны побуждать к проверке на целевом рынке, а не становиться универсальными правилами о каждом пользователе в стране.

Ожидаемые результаты

  • Аудит компонентов на предмет увеличения длины текста, обрезки и гибких размеров.
  • Спецификация RTL, различающая зеркалируемые и сохраняемые элементы.
  • Чек-лист по локальным форматам и тестированию письменностей.
Смотреть пример задания

От задания к проверке

  1. 01
    Тестируйте увеличение текста

    Используйте удлинённые или псевдолокализованные строки, чтобы выявить фиксированную ширину и обрезанные подписи навигации до появления окончательных переводов.

  2. 02
    Опишите поведение направления

    Замените физические допущения о левой и правой стороне семантикой начала и конца (start/end). Решите, какие значки зеркалируются, а какие знаки, числа или медиа остаются без изменений.

  3. 03
    Проверьте локальный смысл

    Проверьте шрифты, форматы, структуру адреса и культурно чувствительные изображения с привлечением специалистов по языку или рынку.

02 Когда использовать

Когда использовать

Нужны тексты для целевых локалей, шрифты и подходящая проверка языка или культуры; платформа автоматической локализации не входит в комплект.

Хорошо подходит

  • Перед многоязычным запускомПомогает выявить проблемы макета, пока компоненты ещё можно согласованно изменить.
  • Готовность дизайн-системыДобавляет требования локализации в рекомендации по компонентам, а не исправляет каждый переведённый экран отдельно.

Ограничения

  • Не служба переводаОн не создаёт и не подтверждает окончательные локализованные формулировки.
  • Не культурная сертификацияОбщие примеры не заменяют проверку людьми, знающими конкретный рынок и аудиторию.

Что подготовить

  • Целевые локалиПеречислите нужные письменности, направления письма и правила форматирования.
  • Примеры компонентовПредоставьте навигацию, формы, карточки, кнопки и плотные представления данных.
  • Шрифты и контентДобавьте реальные или псевдолокализованные строки и утверждённые запасные шрифты.

03 Важные решения

Важные решения

  1. Зеркалируйте выборочно

    Направленные стрелки и поток макета могут разворачиваться; фирменные знаки и математическую запись не следует механически отражать.

  2. Локализуйте систему

    Семантические имена токенов и гибкие размеры компонентов делают последующие локали менее зависимыми от разовых переопределений.

04 Пример задания

Попробуйте сфокусированное задание

Пример задания ниже не тестировался. Проверьте настройку навыка перед использованием.

Проверьте настройку

Используйте описанный в репозитории способ установки и сохраните все упомянутые дополнительные файлы. Эта запись описывает сфокусированный метод проектирования, а не исполняемое приложение.

Исходный файл в репозитории
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md

Нужны тексты для целевых локалей, шрифты и подходящая проверка языка или культуры; платформа автоматической локализации не входит в комплект.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Используйте localization-design, чтобы проверить наши настройки аккаунта для немецкого и арабского языков. Проверьте увеличение подписей, логические отступы, направленные значки, номера аккаунтов со смешанным направлением и форматы дат. Подготовьте изменения на уровне компонентов и матрицу тестов. Отметьте культурные допущения для проверки людьми вместо того, чтобы считать стереотипы о странах правилами.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Длинные подписи остаются читаемыми без обрезки из-за фиксированной ширины.
  • Поведение RTL отличает направленные элементы управления от ненаправленных ресурсов.
  • Даты и числа используют форматирование с учётом локали, а не перестановку строк.

OpenDesign предоставляет локальное дизайн-пространство для кодирующих агентов. Это описание не означает, что навык включён в комплект или что его внешние инструменты, учётные данные и программные зависимости входят в него.

05 Источник и лицензия

Источник и лицензия

Эта страница описывает зафиксированную версию источника по ссылке ниже. Поведение и требования исходного проекта могут измениться.

Владелец источника
Owl-Listener
Репозиторий
Owl-Listener/designer-skills
Лицензия
MIT
Проверенный снимок
2026-10-07 · 9a6930cf84a8
Редакционное резюме источника
Руководство по UI с учётом локализации: гибкие текстовые макеты, направление письма, нелатинские письменности и локальные соглашения.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Значит ли RTL, что нужно отражать каждое изображение?

Нет. Источник называет исключения, включая логотипы, числа и многие изображения. Перед зеркалированием оцените смысл.

Может ли псевдолокализация заменить QA перевода?

Нет. Она может выявить слабые места макета и обработки символов до появления реальных переводов, но не оценивает естественность и культурную уместность.

Следует ли считать проценты увеличения точными?

Нет. Это приблизительные ориентиры для стресс-тестов. Надёжнее тестировать реальный текст и макет.

OpenDesign

Оставьте место для следующей итерации дизайна.

Храните задание, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Проверьте настройку самого навыка, прежде чем добавлять его в рабочий процесс.

Исходный файл в репозитории
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md