Принципы дизайна UI Kit Битрикс24

Выберите инструмент для разработки с AI-агентом:

  • используйте Битрикс24 Вайбкод, чтобы создать приложение для Битрикс24 по описанию задачи без знания языков программирования. Агент напишет код и разместит приложение на сервере без ручной настройки хостинга
  • используйте MCP-сервер, чтобы разрабатывать интеграцию через REST API в своем проекте. Агент будет обращаться к официальной REST-документации

UI Kit Битрикс24 собран так, чтобы экран приложения выглядел и работал как часть Битрикс24, а не как внешний сайт во фрейме. Шесть принципов ниже показывают, из чего складывается это сходство и чем каждый из них обеспечен в библиотеке: компонентом, готовым оформлением или поведением по умолчанию.

Подключить библиотеку помогает статья Быстрый старт: подключение UI Kit к проекту, выбрать готовые элементы — статья Компоненты и шаблоны. Параметры отдельных компонентов и интерактивные примеры остаются в документации библиотеки.

1. Последовательность

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

  • одинаковые отступы, размеры и сетки
  • повторяемая логика взаимодействия
  • унифицированные цвета и типографика

Воспроизводить эти паттерны вручную не нужно. Отступы, выравнивание и сетки в компонентах повторяют интерфейс Битрикс24, а модальные окна, шторки и выпадающие списки открываются и закрываются так же, как в остальном продукте. Готовые элементы собраны в статье Компоненты и шаблоны.

2. Адаптивность и масштабируемость

Компоненты работают корректно на разных экранах — от ноутбуков до встроенных шторок в мобильных приложениях.

  • Ширина компонента подстраивается под контейнер, без отдельной верстки под каждый экран.
  • Адаптивность задается классами Tailwind CSS прямо в шаблоне, без ручных медиазапросов.
  • Размеры и отступы берутся из общего набора дизайн-токенов, а не задаются на каждом экране заново.

Дизайн-токены — это готовые значения оформления: палитра Битрикс24 со светлой и темной темой, типографика, отступы, размеры и границы. Они входят в библиотеку и доступны в разметке как классы Tailwind CSS, писать CSS вручную не нужно. Подробнее — в статье Быстрый старт: подключение UI Kit к проекту.

3. Инклюзивность и доступность

Компоненты построены на библиотеке Reka UI — это набор элементов без собственного оформления, который берет на себя работу со вспомогательными технологиями и клавиатурой. Reka UI следует паттернам WAI-ARIA, рекомендациям консорциума W3C по доступности веб-интерфейсов. Это дает:

  • корректные семантику и роли элементов
  • клавиатурную навигацию в составных компонентах, включая вкладки
  • закрытие модальных окон и шторок клавишей Escape
  • изоляцию содержимого диалога от остальной страницы для программ чтения с экрана
  • совместимость с темной темой

Этим доступность экрана не исчерпывается: за порядок заголовков, тексты подписей и понятные подсказки отвечает ваш код.

Переключение светлой и темной темы собрано в компонентах категории Color Mode — они перечислены в статье Компоненты и шаблоны.

4. Простота

Чем меньше лишнего, тем понятнее пользователю, какое действие сделать дальше. Простым экран делают:

  • минимум посторонней информации
  • логичная иерархия
  • значения по умолчанию, которые уже соответствуют Битрикс24

Настраивать оформление компонента перед первым использованием не нужно. Начать проект можно с готовой заготовки: в ней библиотека уже подключена. Заготовки перечислены в статье Быстрый старт: подключение UI Kit к проекту.

5. Компонентность

Библиотека построена как набор Vue-компонентов, которые можно использовать поодиночке или собирать в шаблоны.

  • Компонент можно поставить на экран отдельно от других элементов библиотеки.
  • Поведение компонента настраивается параметрами props, вложенное содержимое передается через слоты slots.
  • Компоненты объединяются между собой без дополнительной обвязки.

В шаблоне компонент вызывается по имени с префиксом B24. Полный состав библиотеки по категориям — в статье Компоненты и шаблоны.

6. Брендовая идентичность

UI Kit соблюдает визуальный язык Битрикс24: цвета, типографика, форма кнопок, иконки и логика уведомлений совпадают с оформлением остального продукта.

Палитра и типографика приходят вместе с дизайн-токенами библиотеки, иконки поставляются отдельным пакетом @bitrix24/b24icons-vue. Подключение токенов и иконок описано в статье Быстрый старт: подключение UI Kit к проекту.

Что соблюдается само, а что остается на вашей стороне

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

Приложение целиком нужно обернуть в компонент B24App. Без этой обертки не работают уведомления, подсказки и модальные окна, которые открываются из кода. Порядок подключения описан в статье Быстрый старт: подключение UI Kit к проекту.

Библиотека работает только во фронтенде на Vue версии 3.5 и выше: компоненты написаны на Vue, а дизайн-токены собираются вместе с проектом и отдельно не подключаются.

UI Kit отвечает только за интерфейс. Данные для экрана и проверку прав пользователя приложение получает отдельно — через методы Битрикс24, серверную часть или SDK. Это описано в статье Интеграция UI Kit с REST API и бизнес-логикой.

Продолжите изучение

Предыдущая
UI Kit - интерфейс, единый с платформой
Следующая
Компоненты