Состав списка

Списки используются для отображения большого количества объектов одного типа.

image-01-list

Панель инструментов (Toolbar)

Элементы управления списком включаются в панель инструментов списка.

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

  • кнопки, которые добавляют в список новые элементы,
  • кнопки, которые изменяют состояние элементов списка (редактируют, обновляют, клонируют, синхронизируют и т.п.),
  • кнопки, которые удаляют элементы или свойства.

Элементы второй группы управляют отображением списка. Эта группа выравнивается по правому краю списка и включает в себя следующее:

  • сортировку,
  • фильтры,
  • режим отображения (таблица, карточки, плитка).

Если список содержит большое количество объектов, он разбивается на страницы, при этом отображаются элементы управления страницами.

Режимы отображения списков

Таблица (Table)

Режим таблицы используется для отображения списков с большим количеством объектов, для которых не требуется визуальное представление. Такие списки могут содержать данные, информацию о статусе, а также небольшое количество инструментов или ссылок.

image-02-table-small

Столбцы должны всегда располагаться в следующем порядке:

  • флажок (если требуется),
  • имя,
  • атрибуты (все свойства, которые необходимо отобразить),
  • информация о статусе,
  • действия,
  • дополнительные данные и операции.

Все доступные столбцы отображать необязательно – наилучшей практикой считается отображение необходимого минимума.

К элементам списка можно применять групповые операции. Для выполнения групповых операций со списком используются следующие элементы управления: флажки для выбора объектов операции и кнопки в панели инструментов над списком для запуска нужных действий (удаление, клонирование, активация/деактивация и т.п.).

Список элементов (Item list)

Список элементов показывает объекты в форме сетки. Каждый элемент такого списка имеет изображение, имя и элемент управления для запуска какого-либо действия.

image-03-items

Списки элементов подходят для отображения объектов, свойства которых можно отобразить визуально. Например, список элементов используется для отображения списка расширений, где значок расширения – уникальное свойство идентификации каждого объекта. Кроме того, отображаются имя расширения, номер его версии и кнопка Открыть (или Купить и т.д.).

Карточный список (Card list)

Объекты карточных списков отображаются в форме карточек, содержащих снимки экрана или предварительные изображения, а также уникальные наборы инструментов. Этот режим отображения подходит для таких объектов, как сайты, экземпляры WordPress и т.д.

image-04-cards

Такими списками можно управлять так же, как и списками других типов, в частности, применять к ним групповые операции.

Карточные списки дополнительно позволяют отображать объекты различными способами: в виде карточек (на которых видна вся информация и элементы управления), в виде плитки (меньшего размера, чем „карточки“, при этом некоторая информация и элементы управления скрыты), в виде списка или таблиц.

Разбивка на страницы

Разбивка на страницы – это способ отображения больших объемов содержимого путем разделения его на отдельные страницы. Разбивку на страницы следует использовать, когда все прочие способы структурирования информации (категории, фильтры) уже применены. Размер страницы должен выбираться так, чтобы она была не слишком длинной и не слишком короткой. Оптимальный размер страницы – 2-3 экрана.

image-06-pagination

Элементы управления страницами включают в себя кнопки с номерами страниц и кнопки «назад» и «вперед». В зависимости от ситуации, могут использоваться либо все эти элементы, либо только номера страниц, либо только кнопки «назад» и «вперед». Последняя опция оптимальна в случае, когда список предполагается просматривать на экране малого размера. Кнопки «назад» и «вперед» должны использоваться вместе с кнопками с номерами страниц в случае, когда в списке 7 или более страниц, в противном случае достаточно только кнопок с номерами страниц.

Поиск и фильтрация

Панель поиска используется для поиска конкретных объектов. Обычно она является частью панели инструментов или панели вкладок. В некоторых случаях она может быть независимым элементом, который размещается над списком справа.

image-07-search

Фильтрация – это другой подход к поиску, который представляет собой создание отдельных наборов объектов в зависимости от их конкретных атрибутов, таких как статус, даты и т.д. Фильтрация может быть быстрой и полной.

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

image-08-quick

Другой способ реализации быстрого фильтра – использование раскрывающегося списка, в котором содержатся заранее определенные значения для фильтрации.

image-09-dropdown

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

image-10-plugins

Сортировка

В списках, отображаемых в форме таблицы, объекты можно сортировать просто путем нажатия на заголовок соответствующего столбца.

image-11-sort

Для карточных списков используется специальный раскрывающийся список, который позволяет сортировать объекты в зависимости от содержащихся в нем параметров.

image-12-sortdropdown