--- metadata: - name: generator content: Diplodoc Platform v5.54.5 - property: og:type content: article - property: article:section content: Платформа плагинов - property: og:title content: Рекомендации по дизайну - property: article:tag content: Сборник инструкций alternate: - https://yandex.ru/support/tracker/en/plugins/design.md - https://yandex.ru/support/tracker/ru/plugins/design.md - href: ru/plugins/design.md type: text/markdown title: Markdown version - href: ../llms.txt type: text/markdown title: llms.txt --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/tracker/ru/llms.txt # Рекомендации по дизайну ## Плагин — это часть интерфейса Трекера {#plugin} Плагин встраивается в существующие сценарии Трекера: в карточку задачи, автоматизацию, список расширений, действия и другие точки входа. Поэтому интерфейс плагина должен восприниматься как продолжение продукта, а не как отдельное приложение внутри него. Основа интерфейса плагина — это стандартный контейнер с контентом внутри. Пользователь не должен заново разбираться: - где он находится; - как устроена навигация; - что является главным действием; - как закрыть сценарий или вернуться назад. ### Рекомендации к проектированию плагина {#design-recommendations} - Использовать [систему отступов](https://gravity-ui.com/ru/design/branding/module), кратную 4 px. Самые частые варианты: 12, 16, 20, 24, 32 px. - Внутри — один понятный сценарий. - Одна основная кнопка действия, все остальные кнопки **normal** или **flat**. Рекомендуемый размер кнопки — от 28 до 36 px. - Стоит избегать вложенной навигации, если сценарий можно решить в пределах одного экрана. - Без лишнего визуального шума. - Высота блока должна быть оправдана сценарием. - Используйте цветовую схему `yandex-360` из дизайн-системы Gravity UI. - Соблюдайте иерархию заголовков: от большего к меньшему. Рекомендуем не более 3 уровней. ## Рекомендуемые компоненты для использования {#components} Разработчики могут использовать любые компоненты Gravity UI. Ниже перечислены рекомендуемые компоненты, которые чаще всего подходят для интерфейсов плагинов в Трекере. ### Button {#button} **Компонент Button** — используется как триггер для выполнения действия. Основное назначение — запуск сценария: сохранение, подтверждение, запуск плагина. [Дизайн рекомендации](https://gravity-ui.com/ru/design/guides/button) [Сторибук](https://gravity-ui.com/ru/components/uikit/button) ### Text Input (однострочное поле) {#text-input} **Компонент TextInput** — используется для ввода короткого текста, чисел или значений в одну строку. [Дизайн рекомендации](https://gravity-ui.com/ru/design/guides/text-input) [Сторибук](https://gravity-ui.com/ru/components/uikit/text-input) ### TextArea (многострочное поле) {#textarea} **Компонент TextArea** — используется для ввода длинного текста и описаний. [Дизайн рекомендации](https://gravity-ui.com/ru/design/guides/text-input) [Сторибук](https://gravity-ui.com/ru/components/uikit/text-area) ### Select (одиночный и множественный выбор) {#select} **Компонент Select** — используется для выбора одного или нескольких значений из списка. Поддерживает: - одиночный выбор; - множественный выбор; - группировку (категории). [Дизайн рекомендации](https://gravity-ui.com/ru/design/guides/select) [Сторибук](https://gravity-ui.com/ru/components/uikit/select) [Примеры (showcase)](https://preview.gravity-ui.com/uikit/?path=/docs/components-inputs-select--showcase) ### Checkbox {#checkbox} **Компонент Checkbox** — используется для выбора одной или нескольких независимых опций. [Дизайн рекомендации](https://gravity-ui.com/ru/design/guides/checkbox) [Сторибук](https://gravity-ui.com/ru/components/uikit/checkbox) ### Tooltip {#tooltip} **Компонент Tooltip** — используется для кратких пояснений и подсказок при наведении. [Дизайн рекомендации](https://gravity-ui.com/ru/design/guides/tooltip) [Сторибук](https://gravity-ui.com/ru/components/uikit/tooltip) ### Progress (Progress Bar) {#progress} **Компонент Progress** — используется для отображения прогресса выполнения операции, например загрузки файла. [Дизайн рекомендации](https://gravity-ui.com/ru/design/guides/progress) [Сторибук](https://gravity-ui.com/ru/components/uikit/progress) ### SegmentedRadioGroup (Segment control) {#segmented-radio-group} **Компонент SegmentedRadioGroup** — используется для выбора одного из нескольких взаимоисключающих вариантов, обычно 2–3. [Сторибук](https://gravity-ui.com/ru/components/uikit/segmented-radio-group) ### File Upload (FileDropzone) {#file-upload} **Компонент FileDropzone** — используется для загрузки файлов через drag & drop или выбор файла. [Сторибук](https://preview.gravity-ui.com/uikit/?path=/docs/components-inputs-filedropzone--docs) ### Markdown Editor (поле ввода с редактором) {#markdown-editor} **Компонент MarkdownEditor** — используется для ввода и редактирования форматированного текста. Поддерживает как визуальный режим (WYSIWYG), так и работу с Markdown-разметкой. Это позволяет одновременно удобно писать текст и контролировать структуру контента. Используется для: - описаний; - комментариев; - форматируемого пользовательского контента; - генерации текста в плагинах. Особенности: - поддержка Markdown и YFM; - два режима: визуальный и markup; - расширяемость, например таблицы, код, диаграммы. Дизайн рекомендации - Использовать, только когда действительно нужен форматируемый текст. - Не использовать вместо обычного TextArea. [Сторибук / документация](https://gravity-ui.com/ru/libraries/markdown-editor) ### Table {#table} Используется для отображения табличных данных и результатов работы плагина. Подходит для: - отчетов; - списков сущностей; - аналитики; - результатов действий. [Сторибук](https://gravity-ui.com/ru/libraries/table) [Дизайн-рекомендации](https://gravity-ui.com/ru/design/guides/table) ### Саджесты сущностей {#entity-suggests} Используется для: - выбора проектов; - выбора тикетов; - выбора пользователей; - выбора очередей; - выбора полей. ## Состояния интерфейса {#interface-states} ![image.png](../\_assets/plugins/collab-design-manifest/img.png =600x){.border-yes} **Loading** — показывайте, что данные загружаются, используется [Loader](https://gravity-ui.com/ru/design/guides/loader) ![image.png](../\_assets/plugins/collab-design-manifest/img_1.png =600x){.border-yes} Если процесс длительный — использовать компонент [Progress](https://gravity-ui.com/ru/components/uikit/progress) ![image.png](../\_assets/plugins/collab-design-manifest/img_2.png =600x){.border-yes} **Empty** — обычно пустое состояние, с пояснением что делать, рекомендуется использовать интерфейсные элементы. Важно объяснить пользователю, что делать дальше: подключить, выбрать, загрузить или настроить ![image.png](../\_assets/plugins/collab-design-manifest/img_3.png =600x){.border-yes} Возможно, использовать иллюстрации из компонента [Placeholder Container](https://gravity-ui.com/ru/components/uikit/placeholder-container) ![image.png](../\_assets/plugins/collab-design-manifest/img_4.png =600x){.border-yes} **Error** — покажите проблему и дайте действие, компонент [Alert](https://gravity-ui.com/ru/design/guides/alert). Его также можно использовать при успешном завершении. Сообщения/ошибки можно отображать в виде всплывающего попапа, как компонент Toast. Идеально для кратких уведомлений, если не нужен отдельный блок. Для его подключения нужно использовать [API](https://yandex.ru/support/tracker/ru/plugins/tools/sdk/react.md#use-toaster) ## Чек-лист перед публикацией плагина {#checklist} - Есть понятный заголовок/название плагина. - Выбран корректный способ встраивания. - Один понятный сценарий. - Одна основная кнопка (остальные normal или flat). - Используются компоненты Gravity. - Учтены состояния loading / empty / error. - Используются Alert / Toast при необходимости. - Интерфейс не перегружен. - Высота оправдана сценарием. - Плагин выглядит нативно.