Карточки объектов

Карточка является альтернативой табличному представлению.

Типы карточек

Существует два типа карточек:

1. Карточка общая. Ее цель - привлечь внимание пользователя, заинтересовать, поэтому она может содержать изображение;
2. Карточка для доски. Ее цель - сделать работу пользователя на доске задач удобной.

Общую карточку можно использовать, когда

1. В рамках работы с PBC не нужно обрабатывать большое количество информации, то есть карточки не используются в PBC для работы операционистов;
2. Необходимо добавить графический атрибут, чтобы отобразить информацию об объекте в полной мере (например, в дизайнере интерфейсов предпросмотр макета необходим для ускорения навигации, а в маркетплейсе изображение необходимо для презентации товара);
3. Нужно отобразить краткую информацию об объекте, которая легко воспринимается (не больше 7-8 атрибутов);

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

Правила построения общей карточки

1, 2, 3 — Бейджи, статусы, теги или другое. Компоненты должны убираться в одну строку. Наполнение определяется прикладной командой и согласуется с UX-сообществом.
4 — Кнопка (максимум одна). Если действий нужно больше, то используется кнопка с иконкой pi-ellipsis-h, которая вызывает контекстное меню;
5 — Изображение, которое иллюстрирует объект, описанный на карточке;
6 — Заголовок карточки. Не более двух строк, далее - многоточие + подсказка при наведении. Заголовок должен быть краткий и говорящий;
7 — Описание. Не более двух строк, далее - многоточие + подсказка при наведении;
8 — Дополнительные атрибуты. Например, прогресс или текст. Не более двух строк;
9 — Кнопка.

Примеры карточек для разных PBC

Шаблоны карточек для некоторых PBC:

Правила использования общей карточки

1. Карточка содержит только самые важные атрибуты;
   
2. К карточкам может применяться фильтрация и пагинация;
   
3. Карточное представление может иметь табличный аналог;
   
4. Минимальная ширина карточки 280px;
   
5. Карточка строится по утвержденной сетке;
   
6. Карточка не должна содержать элементов больше, чем предусмотрено сеткой;
   
7. Карточка может не содержать элементы, которые описаны в сетке. Например, цену, прогресс и т.д;
   
8. Вся карточка, кроме кнопок на ней, кликабельная и ведет внутрь объекта, который на ней описан;
   
9. Высота карточки определяется максимальной высотой карточки в ряду. Например, если объем текста разный, то карточка подстраивается следующим образом:

Карточку для доски можно использовать, когда

1. Необходимо работать с задачами на доске задач.

Правила построения каточки для доски

Карточка может быть в двух состояниях, в свернутом и в развернутом. Карточка в свернутом состоянии:

1, 2, 3 — Бейджи, статусы. Компоненты должны убираться в одну строку. Наполнение определяется прикладной командой и согласуется с UX-сообществом.
4 — Кнопка (максимум одна). Если действий нужно больше, то используется кнопка с иконкой pi-ellipsis-h, которая вызывает контекстное меню;
5 — Номер задачи;
6 — Заголовок задачи. Не более двух строк, далее - многоточие + подсказка при наведении. Заголовок должен быть краткий и говорящий;
7 — Исполнитель. Содержит аватар;
8 — Трудозатраты;
9 — Кнопка для раскрытия карточки.

Карточка в развернутом состоянии:

1, 2, 3 — Бейджи, статусы. Компоненты должны убираться в одну строку. Наполнение определяется прикладной командой и согласуется с UX-сообществом.
4 — Кнопка (максимум одна). Если действий нужно больше, то используется кнопка с иконкой pi-ellipsis-h, которая вызывает контекстное меню;
5 — Номер задачи;
6 — Заголовок задачи. Не более трех строк, далее - многоточие + подсказка при наведении. Заголовок должен быть краткий и говорящий;
7 — Исполнитель. Содержит аватар;
8 — Трудозатраты;
9 — Кнопка для закрытия карточки;
10 — Описание. Не более 15 строк, далее - многоточие + подсказка при наведении;
11 — Список тегов. Компоненты должны убираться в одну строку. Если их больше, то полный список выводится в всплывающей панели;

Правила использования карточки задачи

1. Карточка содержит только самые важные атрибуты;
   
2. К карточкам может применяться фильтрация и пагинация;
   
3. Карточное представление может иметь табличный аналог;
   
4. Минимальная ширина карточки 280px;
   
5. Карточка строится по утвержденной сетке;
   
6. Карточка не должна содержать элементов больше, чем предусмотрено сеткой;
   
7. Карточка может не содержать элементы, которые описаны в сетке. Например, теги и т.д;
   
8. Вся карточка, кроме кнопок на ней, кликабельная и ведет внутрь объекта, который на ней описан.
   

Примеры карточек для доски