Рекомендации по дизайну

Плагин — это часть интерфейса Трекера

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

Пользователь не должен заново разбираться:

• где он находится;

• как устроена навигация;

• что является главным действием;

• как закрыть сценарий или вернуться назад.

Рекомендации к проектированию плагина

• Использовать систему отступов, кратную 4 px. Самые частые варианты: 12, 16, 20, 24, 32 px.

• Внутри — один понятный сценарий.

• Одна основная кнопка действия, все остальные кнопки normal или flat. Рекомендуемый размер кнопки — от 28 до 36 px.

• Стоит избегать вложенной навигации, если сценарий можно решить в пределах одного экрана.

• Без лишнего визуального шума.

• Высота блока должна быть оправдана сценарием.

• Используйте цветовую схему yandex-360 из дизайн-системы Gravity UI.

• Соблюдайте иерархию заголовков: от большего к меньшему. Рекомендуем не более 3 уровней.

Рекомендуемые компоненты для использования

Разработчики могут использовать любые компоненты Gravity UI. Ниже перечислены рекомендуемые компоненты, которые чаще всего подходят для интерфейсов плагинов в Трекере.

Button

Компонент Button — используется как триггер для выполнения действия. Основное назначение — запуск сценария: сохранение, подтверждение, запуск плагина.

Дизайн рекомендации
Сторибук

Text Input (однострочное поле)

Компонент TextInput — используется для ввода короткого текста, чисел или значений в одну строку.

Дизайн рекомендации
Сторибук

TextArea (многострочное поле)

Компонент TextArea — используется для ввода длинного текста и описаний.

Дизайн рекомендации
Сторибук

Select (одиночный и множественный выбор)

Компонент Select — используется для выбора одного или нескольких значений из списка.

Поддерживает:

• одиночный выбор;

• множественный выбор;

• группировку (категории).

Дизайн рекомендации
Сторибук
Примеры (showcase)

Checkbox

Компонент Checkbox — используется для выбора одной или нескольких независимых опций.

Дизайн рекомендации
Сторибук

Tooltip

Компонент Tooltip — используется для кратких пояснений и подсказок при наведении.

Дизайн рекомендации
Сторибук

Progress (Progress Bar)

Компонент Progress — используется для отображения прогресса выполнения операции, например загрузки файла.

Дизайн рекомендации
Сторибук

SegmentedRadioGroup (Segment control)

Компонент SegmentedRadioGroup — используется для выбора одного из нескольких взаимоисключающих вариантов, обычно 2–3.

Сторибук

File Upload (FileDropzone)

Компонент FileDropzone — используется для загрузки файлов через drag & drop или выбор файла.

Сторибук

Markdown Editor (поле ввода с редактором)

Компонент MarkdownEditor — используется для ввода и редактирования форматированного текста. Поддерживает как визуальный режим (WYSIWYG), так и работу с Markdown-разметкой. Это позволяет одновременно удобно писать текст и контролировать структуру контента.

Используется для:

• описаний;

• комментариев;

• форматируемого пользовательского контента;

• генерации текста в плагинах.

Особенности:

• поддержка Markdown и YFM;

• два режима: визуальный и markup;

• расширяемость, например таблицы, код, диаграммы.

Дизайн рекомендации

• Использовать, только когда действительно нужен форматируемый текст.
• Не использовать вместо обычного TextArea.

Сторибук / документация

Table

Используется для отображения табличных данных и результатов работы плагина.

Подходит для:

• отчетов;

• списков сущностей;

• аналитики;

• результатов действий.

Сторибук

Дизайн-рекомендации

Саджесты сущностей

Используется для:

• выбора проектов;

• выбора тикетов;

• выбора пользователей;

• выбора очередей;

• выбора полей.

Состояния интерфейса

Loading — показывайте, что данные загружаются, используется Loader

Если процесс длительный — использовать компонент Progress

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

Возможно, использовать иллюстрации из компонента Placeholder Container

Error — покажите проблему и дайте действие, компонент Alert. Его также можно использовать при успешном завершении.

Сообщения/ошибки можно отображать в виде всплывающего попапа, как компонент Toast. Идеально для кратких уведомлений, если не нужен отдельный блок. Для его подключения нужно использовать API

Чек-лист перед публикацией плагина

• Есть понятный заголовок/название плагина.
• Выбран корректный способ встраивания.
• Один понятный сценарий.
• Одна основная кнопка (остальные normal или flat).
• Используются компоненты Gravity.
• Учтены состояния loading / empty / error.
• Используются Alert / Toast при необходимости.
• Интерфейс не перегружен.
• Высота оправдана сценарием.
• Плагин выглядит нативно.