UI kit: набор элементов интерфейса и зачем он нужен проекту

UI kit — набор готовых элементов интерфейса: кнопок, полей ввода, карточек, меню, иконок и сообщений, у каждого из которых нарисованы все состояния и варианты. Дизайнер собирает из них страницы сайта, а разработчик верстает по одному образцу. UI kit — часть дизайн-системы, но не вся она: система добавляет к набору компонентов правила их использования, токены и команду, которая всё это поддерживает.

Что такое UI kit простыми словами

UI kit — это библиотека деталей, из которых собирают интерфейс сайта или приложения. Вместо того чтобы рисовать кнопку заново на каждой странице, дизайнер один раз создаёт её со всеми вариантами и дальше только вставляет готовый элемент.

В редакторах интерфейсов, например в Figma, такие детали называют компонентами. Есть главный компонент, где задано, как элемент выглядит, и экземпляры — его копии на страницах. Правка главного компонента доходит до экземпляров: поменяли скругление кнопки в одном месте — оно поменялось на всех экранах.

Для заказчика сайта UI kit — это гарантия, что одинаковые элементы выглядят и ведут себя одинаково. Кнопка «Оставить заявку» на главной и в карточке услуги не будет отличаться цветом, размером и шрифтом, потому что это один и тот же компонент.

UI kit — библиотека деталей интерфейса. Элемент рисуют один раз со всеми вариантами и дальше только переиспользуют.

Что входит в UI kit сайта?

Состав зависит от сайта, но у большинства проектов набор похож. Его удобно собирать от простого к сложному: сначала базовые стили, потом элементы, потом блоки.

• Базовые стили — цвета, начертания текста, сетка, отступы, тени и скругления.
• Кнопки и ссылки — основная, второстепенная, текстовая, с иконкой; несколько размеров.
• Поля форм — текстовое поле, телефон, список, флажок, переключатель, загрузка файла, сообщение об ошибке.
• Навигация — шапка, меню, мобильное меню, хлебные крошки, пагинация, вкладки.
• Карточки и блоки — карточка услуги или товара, отзыв, тариф, блок преимуществ.
• Иконки — единый набор одного стиля и толщины линии.
• Сообщения — уведомление об успехе, предупреждение, ошибка, всплывающее окно.

Сайту-визитке хватит короткого набора: кнопки, поля формы, карточка, шапка. Интернет-магазину нужны фильтры, карточка товара в нескольких видах, корзина и шаги оформления заказа — и UI kit вырастает в разы.

Какие состояния элементов рисуют и зачем?

Состояние показывает человеку, что элемент делает прямо сейчас: можно ли на него нажать, выбран ли он, идёт ли загрузка. Nielsen Norman Group выделяет пять основных состояний кнопки: активное, неактивное, наведение курсора, фокус с клавиатуры и нажатие.

Кроме этих пяти, в набор включают ещё несколько состояний — например, загрузку и выбор. Без нарисованных состояний разработчик придумывает их сам, и на сайте появляются кнопки, которые не реагируют на наведение, или формы, где непонятно, в каком поле курсор.

Факт. Nielsen Norman Group выделяет пять основных состояний кнопки: активное, неактивное, наведение, фокус и нажатие.

Чем UI kit отличается от дизайн-системы

UI kit и дизайн-систему часто называют одним словом, но это разные уровни. Nielsen Norman Group определяет дизайн-систему как полный набор стандартов для управления дизайном с помощью переиспользуемых компонентов и паттернов. Репозиторий такой системы обычно включает гайд по стилю, библиотеку компонентов и библиотеку паттернов.

Короче: UI kit отвечает на вопрос «из чего собирать», дизайн-система — ещё и на вопросы «как, когда и почему именно так». NN/g разводит и соседние понятия: библиотека компонентов описывает отдельные элементы, а библиотека паттернов — их группы и раскладки.

Как UI kit устроен в Figma

В Figma UI kit живёт в виде библиотеки — набора компонентов, стилей и переменных, которые хранятся в одном файле и подключаются к другим. Дизайнер публикует библиотеку, а все макеты сайта берут элементы из неё.

Внутри библиотеки три вида ресурсов. Компоненты — сами элементы: кнопки, поля, карточки. Стили — повторяющиеся свойства: цвета заливки, параметры текста, тени. Переменные хранят значения, которые можно применить к разным свойствам, — на них удобно строить дизайн-токены, если дело идёт к дизайн-системе.

Похожие компоненты объединяют в варианты. Например, у кнопки может быть свойство «состояние» со значениями default, hover, pressed и disabled, а ещё свойства размера и цвета. Вместо десятка отдельных кнопок в библиотеке лежит один набор, где нужная комбинация выбирается переключателями.

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

Готовый UI kit или свой: что выбрать?

Готовый UI kit экономит время на старте, свой — делает сайт узнаваемым. Готовые наборы есть прямо в Figma и в её сообществе: в них уже собраны компоненты, стили и примеры экранов, так что начать можно и без собственной дизайн-системы.

Готовый набор хорош для внутренних систем, личных кабинетов и прототипов, где важнее скорость и привычность элементов, чем характер бренда. Пользователи знакомы с такими интерфейсами, и NN/g отмечает: когда сайт следует стандартам, люди понимают, чего ожидать, и меньше путаются.

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

Мнение. Если делаете корпоративный сайт или магазин, берите готовый UI kit за основу структуры компонентов и перекрашивайте его под фирменный стиль. Полностью свой набор с нуля оправдан, когда интерфейс нестандартный или у бренда строгий гайдлайн.

Последний шаг часто пропускают, и UI kit остаётся отдельным файлом «для красоты», а страницы нарисованы вручную. Тогда правка в наборе ничего не меняет в макетах.

Зачем UI kit заказчику сайта

Заказчик напрямую с UI kit не работает, но получает от него три выгоды. Первая — одинаковость: элементы на всех страницах выглядят и работают одинаково, и посетителю не приходится заново разбираться в каждом разделе. Вторая — скорость доработок: новая страница собирается из готовых деталей, и дизайнеру не нужно рисовать её с нуля. Третья — понятная передача в разработку: верстальщик делает каждый компонент один раз и переиспользует его в коде.

Есть и честная граница. Для одностраничного лендинга, который запускают на короткий срок и не собираются развивать, полноценный UI kit — лишняя работа: хватит описанных в макете стилей кнопок и формы. NN/g предупреждает о том же для дизайн-систем: для проекта, который ещё будет сильно меняться, полная система вряд ли окупится в ближайшее время. UI kit дешевле системы, но логика та же — чем дольше живёт и растёт сайт, тем выгоднее набор.

Чем UI-дизайн отличается от проектирования сценариев, разобрано в статье UX и UI-дизайн: в чём разница.

Что делать дальше

Если сайт только проектируется, попросите дизайнера показать UI kit вместе с макетами: так видно, продуман ли интерфейс целиком или только отдельные экраны. Проверьте, есть ли у кнопок и полей состояния и мобильные варианты, и собраны ли страницы из компонентов.

Если сайт уже работает, но выглядит лоскутно — разные кнопки, шрифты и отступы на разных страницах, — UI kit помогает навести порядок без полного редизайна: сначала собирают набор, потом по нему перерисовывают и перевёрстывают страницы. О том, что ещё входит в работу дизайнера, — в статье кто такой веб-дизайнер и как проверить результат.

Мы собираем UI kit в каждом проекте, где сайт будет расти. Если нужен корпоративный сайт с продуманным набором элементов, оставьте заявку — начнём с макетов ключевых страниц и набора компонентов к ним.

Источники

• Button States: Communicate Interaction — Nielsen Norman Group
• Design Systems 101 — Nielsen Norman Group
• Maintain Consistency and Adhere to Standards — Nielsen Norman Group