UI и дизайн-система ·
Как собрать библиотеку компонентов
Создать переиспользуемые элементы с понятным API, состояниями и правилами композиции.
Кратко: за 2 минуты
Создать переиспользуемые элементы с понятным API, состояниями и правилами композиции. Результат работы — Component Library.
Когда применять
Урок относится к этапу «UI и дизайн-система». Создать последовательный визуальный язык и устойчивые компоненты для всех состояний. Задачу выполняют до реализации или согласования зависимого решения, чтобы команда опиралась на проверенные факты и однозначные договоренности.
Что это дает
Правильно выполненная работа снижает стоимость переделок, делает решение проверяемым и дает участникам единый источник информации. Практический результат фиксируется в артефакте «Component Library».
Пошагово: как выполнить
- Выберите компоненты по частоте и риску
- Опишите variants и properties
- Добавьте content guidelines
Критерии приемки
- Покрыты interactive states
- Компоненты сопоставлены коду
- Есть do and dont
Типичные ошибки
- Делать библиотеку скриншотов
- Создавать монолитные компоненты
Инструменты
Пример
Плохой пример
Делать библиотеку скриншотов
Хороший пример
Учебный пример. Поле содержит подпись, подсказку, ошибку и состояния фокуса. В библиотеке показаны длинный текст и отключение; компонент без правил поведения не считается завершенным.
Шаблон
Компонент поля ввода
Скачать рабочий лист этого урока
Выбрать рабочий шаблонРабочий артефакт
Рабочий артефакт
Компонент поля ввода
Учебный пример. Поле содержит подпись, подсказку, ошибку и состояния фокуса. В библиотеке показаны длинный текст и отключение; компонент без правил поведения не считается завершенным.
- Компоненты
- Состояния
- Токены
- WCAG
Контроль качества
UI Specification
Покрыты interactive states
После релизов, изменения требований, обновления целей и появления новых рисков.
Контекст, проблему, доказательство, владельца, срок и критерий приемки.
Перед отметкой выполнено: Покрыты interactive states
Как применять
Начинайте с влияния на пользователя, продукт и команду. Затем проверьте реализуемость, критерии качества и формат доказательства результата. Хороший пункт чеклиста объясняет, какую проблему закрываем, как выполняем работу и по каким признакам считаем ее завершенной.
Короткие ответы
Частые вопросы
Зачем выполнять пункт «Как собрать библиотеку компонентов»?
Правильно выполненная работа снижает стоимость переделок, делает решение проверяемым и дает участникам единый источник информации. Практический результат фиксируется в артефакте «Component Library».
С чего начать выполнение?
Выберите компоненты по частоте и риску
Как понять, что пункт выполнен?
Покрыты interactive states
Какая ошибка чаще всего мешает результату?
Делать библиотеку скриншотов
Режим обучения
Тест по теме
Проверка понимания
Ответьте на вопросы по материалу и получите итоговый отчет: что понято хорошо, а что стоит перечитать.
Для углубленного изучения
Редакция Ariol · Версия 2 · Обновлено
Независимая экспертная проверка не заявлена.
Что обновлено
- — Обновлено: Название, Шаблон результата, Пример, Плохой пример, Заголовок поиска, Описание поиска, Поисковые фразы.
Материал предназначен для обучения. Адаптируйте рекомендации к внутренним регламентам компании и условиям проекта.
Предложить исправление через контакты Ariol