Дизайн
UI-kit: какой набор элементов интерфейса передают заказчику
Набор повторно используемых элементов интерфейса и их вариантов: например, кнопок, полей, карточек и навигации, подготовленных для конкретного проекта или продукта.
Редакция:
UI-kit помогает собирать страницы из согласованных элементов. В договорённостях нужно уточнить формат: библиотека в редакторе макетов, компоненты в коде или оба результата. Файл с нарисованными кнопками сам по себе не означает, что эти кнопки уже работают на сайте.
Что входит в комплект
Состав зависит от страниц и сценариев проекта. Попросите перечень компонентов, вариантов и состояний, а не обещание «полного UI-kit» без расшифровки. Кнопка основного действия и второстепенная кнопка — разные варианты; загрузка или ошибка описывают состояние конкретного взаимодействия.
Пример ниже — ориентир для обсуждения, не обязательный комплект любого сайта.
| Элемент | Что уточнить при передаче |
|---|---|
| Кнопка | Основное и второстепенное действие, фокус клавиатуры, нажатие, ожидание и недоступность, если они нужны сценарию |
| Поле формы | Подпись, подсказка, введённое значение, ошибка и способ её исправления |
| Карточка | Длинный заголовок, отсутствие изображения, разные объёмы содержания и переход по ссылке |
| Навигация | Текущий раздел, раскрытие, мобильный вариант и возврат к содержимому |
| Сообщение | Успех, ошибка или пустой результат; понятный следующий шаг посетителя |
Не каждый компонент должен иметь все перечисленные состояния. Их выбирают по реальному поведению. Например, сообщать об успехе отправки можно только после подтверждённого результата, а не просто после изменения внешнего вида кнопки.
Пример: форма запроса
Учебная ситуация: в макете есть форма с пустыми полями и кнопкой «Отправить». Для реализации остаются вопросы: где появится ошибка, что видно во время ожидания, сохранятся ли введённые данные после сбоя и как пользователь повторит действие.
UI-kit может показать необходимые варианты полей, кнопок и сообщений. Но правила самого сценария нужно согласовать отдельно. При передаче проверьте, что набор покрывает утверждённые состояния формы и разработчик понимает, какой вариант где используется.
Отличие от дизайн-системы
UI-kit прежде всего отвечает на вопрос «из каких элементов собираем интерфейс». Дизайн-система также описывает правила применения и развития: когда выбирать решение, как согласовывать изменения и поддерживать соответствие макетов и реализации.
Граница названий у подрядчиков бывает разной, поэтому сравнивайте состав результата. Например, GOV.UK Design System сопровождает компоненты рекомендациями по применению и примерами кода. Это показывает, какой дополнительный слой работы может стоять за набором элементов; переносить его целиком в небольшой проект не обязательно.
Как принять UI-kit
- Сверьте перечень с согласованными страницами и сценариями. Пометьте пробелы и объяснённые исключения.
- Откройте исходный файл с разрешённым доступом и убедитесь, что компоненты можно использовать повторно в согласованном инструменте.
- Соберите или попросите показать типичный экран из передаваемых компонентов, включая длинный текст и необходимое ошибочное состояние.
- Если в объём входит код, проверьте тот же экран в браузере: узкую ширину, клавиатуру и реальное поведение. По картинке эти свойства не подтверждаются.
- Зафиксируйте версию, расположение файлов, разрешения на используемые ресурсы и порядок обновления. Для макетов и кода укажите, что уже синхронизировано, а что ещё предстоит реализовать.
При расширении сайта новый тип взаимодействия может потребовать нового компонента. Наличие UI-kit не делает такие изменения бесплатными и не отменяет проектирование. Готовый набор уменьшает число повторных решений только там, где его элементы подходят задаче.
В разборе дизайна с подрядчиком связывайте замечания с конкретным сценарием и состоянием. Для корпоративного сайта полезнее согласовать покрытие нужных страниц и комплект передачи, чем оценивать работу по числу нарисованных элементов.