UI и дизайн-система ·
Как определить дизайн-токены
Зафиксировать семантические решения цвета, типографики, отступов и размеров.
Кратко: за 2 минуты
Зафиксировать семантические решения цвета, типографики, отступов и размеров. Результат работы — Token Set.
Когда применять
Урок относится к этапу «UI и дизайн-система». Создать последовательный визуальный язык и устойчивые компоненты для всех состояний. Задачу выполняют до реализации или согласования зависимого решения, чтобы команда опиралась на проверенные факты и однозначные договоренности.
Что это дает
Правильно выполненная работа снижает стоимость переделок, делает решение проверяемым и дает участникам единый источник информации. Практический результат фиксируется в артефакте «Token Set».
Пошагово: как выполнить
- Проведите audit существующих значений
- Создайте primitive и semantic tokens
- Согласуйте naming с разработкой
Критерии приемки
- Токены покрывают темы и состояния
- Нет значений без назначения
- Экспорт проверен в коде
Типичные ошибки
- Называть токены по цвету компонента
- Создавать токен на каждый пиксель
Инструменты
Пример
Плохой пример
Называть токены по цвету компонента
Хороший пример
Учебный пример. Для основного текста, ошибки и фокуса созданы семантические роли. Значения проверены на светлом и темном фоне; название токена описывает назначение, а не только текущий оттенок.
Шаблон
Набор токенов
Скачать рабочий лист этого урока
Выбрать рабочий шаблонРабочий артефакт
Рабочий артефакт
Набор токенов
Учебный пример. Для основного текста, ошибки и фокуса созданы семантические роли. Значения проверены на светлом и темном фоне; название токена описывает назначение, а не только текущий оттенок.
- Компоненты
- Состояния
- Токены
- WCAG
Контроль качества
UI Specification
Токены покрывают темы и состояния
После релизов, изменения требований, обновления целей и появления новых рисков.
Контекст, проблему, доказательство, владельца, срок и критерий приемки.
Перед отметкой выполнено: Токены покрывают темы и состояния
Как применять
Начинайте с влияния на пользователя, продукт и команду. Затем проверьте реализуемость, критерии качества и формат доказательства результата. Хороший пункт чеклиста объясняет, какую проблему закрываем, как выполняем работу и по каким признакам считаем ее завершенной.
Короткие ответы
Частые вопросы
Зачем выполнять пункт «Как определить дизайн-токены»?
Правильно выполненная работа снижает стоимость переделок, делает решение проверяемым и дает участникам единый источник информации. Практический результат фиксируется в артефакте «Token Set».
С чего начать выполнение?
Проведите audit существующих значений
Как понять, что пункт выполнен?
Токены покрывают темы и состояния
Какая ошибка чаще всего мешает результату?
Называть токены по цвету компонента
Режим обучения
Тест по теме
Проверка понимания
Ответьте на вопросы по материалу и получите итоговый отчет: что понято хорошо, а что стоит перечитать.
Для углубленного изучения
Редакция Ariol · Версия 2 · Обновлено
Независимая экспертная проверка не заявлена.
Что обновлено
- — Обновлено: Название, Шаблон результата, Пример, Плохой пример, Заголовок поиска, Описание поиска, Поисковые фразы.
Материал предназначен для обучения. Адаптируйте рекомендации к внутренним регламентам компании и условиям проекта.
Предложить исправление через контакты Ariol