Расскажите о списке

Редакторы: Александра Озкан, Настасья Тулаева

Список, поле‑список, listbox. Элемент графического интерфейса, используемый как для выбора значений, так и для составления самого их перечня. Список выглядит как многострочное поле, где каждая строка показывает одно значение, а выбранное подсвечивается фоном. Если все значения не помещаются в высоту, список прокручивается:

Редакторы: Александра Озкан, Настасья Тулаева

В списке с одиночным выбором пользователь выбирает значение, кликая в него. Встречаются реализации, где повторный клик отменяет выбор, и список остаётся без выбранного значения.

В ХТМЛ поле‑список задаётся элементом <select>. Атрибут size определяет количество видимых строк списка, но при size=1 получается не однострочный, а выпадающий список. Может показаться, что две или три строки лучше, чем одна, но если в списке много значений, то выбирать нужное из выпадающего будет намного удобнее, чем прокручивая трёхстрочный.

Список может поддерживать выбор сразу нескольких значений:

В списке с множественным выбором могут поддерживаться клавиши‑модификаторы как при выделении объектов. Например, Команд‑ или Контроль‑клик добавляет или убирает значение из выбранных; клик по одному значению и последующий Шифт‑клик по другому — выбирает весь диапазон значений между ними. При этом в части реализаций выделение за пределами диапазона будет сброшено, в части — сохранено. Часто диапазон значений можно выбрать проведя по нему с нажатой кнопкой мыши, снова, как при выделении.

Такое смешение выбора и выделения приводит к тому, что любой клик сбрасывает всю хрупкую конструкцию, а выбор с клавиатуры становится сложным или невозможным. Иногда стрелки клавиатуры «ходят» по списку вверх и вниз, не изменяя выделения, а лишь перемещая «внутренний фокус» между значениями; ввод букв переносит фокус на значение, начинающееся с этих букв; тогда добавляет или убирает значение клавиша Пробел. Встречаются реализации, где клик без модификаторов добавляет или убирает значение из выбранных.

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

Иногда в списках с множественным выбором значения сопровождают чекбоксом, чтобы решить проблему смешения выбора и выделения. Такое решение тоже небезупречно, потому что выделенное контрастным фоном «текущее» значение выглядит более выбранным, чем отмеченные чекбоксом:

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

С появлением Айфона список был переосмыслен для тактильных устройств и избавлен от основных проблем. Выбранные элементы отмечаются галочками, а тап добавляет или снимает галочку. Понятия «выделенного» элемента нет, так что практически и получается группа чекбоксов в рамке:

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

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

Когда список можно ставить лишь из предзаданного набора значений, часто используют паттерн с двумя списками. Их располагают рядом и дают перебрасывать элементы между ними:

В этом случае каждое значение отображается в одном и только одном из списков.

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

Уважаемые советчики! Что бы вы исправили или дополнили?

Интерфейс
Отправить
Поделиться
Запинить

Комментариев пока нет

Рекомендуем другие советы