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

Примечание

Это руководство по проектированию было создано для Windows 7 и не обновлялось для более новых версий Windows. Большая часть руководства по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.

С помощью представления списка пользователи могут просматривать коллекцию объектов данных и взаимодействовать с ней с помощью одного выделения или нескольких элементов.

Снимок экрана: представление списка с заголовками столбцов

Типичное представление списка.

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

Примечание

Рекомендации по макету и спискам представлены в отдельных статьях.

Выбор правильного элемента управления

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

Использование Окна со списками Представления списка
Data type
Параметры данных и программ.
Только данные.
Contents
Только метки.
Метки и вспомогательные данные, возможно, в нескольких столбцах.
Взаимодействие
Используется для выбора.
Может использоваться для выбора, но часто используется для отображения данных и взаимодействия с ними. Может быть источником перетаскивания или целевым объектом перетаскивания.
Уровень представления
Фиксированной.
Пользователи могут изменять представления, группировать, сортировать по столбцам, а также изменять ширину и порядок столбцов.

Чтобы решить, подходит ли этот элемент управления, рассмотрите следующие вопросы:

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

Представления списка флажка

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

Примечание

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

Варианты использования

Все представления поддерживают один выбор, при котором пользователи могут выбирать только один элемент за раз, и несколько элементов, где пользователи могут выбрать любое количество элементов, включая ни один. Представления списка поддерживают режим расширенного выбора, в котором выделение можно расширить путем перетаскивания или нажатия клавиш shift+щелчок или ctrl+щелчок для выбора групп смежных или несмежных значений соответственно. В отличие от списков, они не поддерживают режим множественного выбора, в котором щелчок любого элемента переключает состояние выбора независимо от клавиш SHIFT и CTRL.

Стандартное представление списка

Элемент управления представлением списка поддерживает пять стандартных представлений:

Использование Пример
Плитка
каждый элемент отображается в виде значка среднего размера с меткой и необязательными сведениями справа.
Снимок экрана: эскизы с заголовками и сведениями
В представлении плитки отображаются средние значки с метками и необязательными сведениями справа.
Большой значок
каждый элемент отображается как очень большой, большой или средний значок с меткой под ним.
Снимок экрана: представление большого списка эскизов
В представлении "Большой значок" каждый элемент отображается в виде большого значка с меткой под ним.
Маленький значок
каждый элемент отображается в виде небольшого значка с меткой справа.
Снимок экрана: представление списка маленьких эскизов
В представлении Маленький значок каждый элемент отображается в виде небольшого значка с меткой справа.
Список
каждый элемент отображается в виде небольшого значка с меткой справа.
в режиме списка это представление упорядочивает элементы в столбцах и использует горизонтальную полосу прокрутки. в представлении значков, напротив, в режиме упорядочивания элементов в строках используется вертикальная полоса прокрутки.
Снимок экрана: представление списка в режиме списка
В режиме списка каждый элемент отображается в виде небольшого значка с меткой справа.
Сведения
каждый элемент отображается в виде строки в табличном формате. Самый левый столбец содержит необязательный значок и метку элемента, а последующие столбцы содержат дополнительные сведения, например свойства элемента.
Кроме того, столбцы можно добавлять или удалять, а также изменять порядок и изменять их размер. строки можно группировать, отсортировать по столбцам.
Снимок экрана: представление списка в режиме сведений
В представлении сведений каждый элемент отображается в виде строки в табличном формате.

Варианты представления списка

Метка Значение
Выбор столбцов
Представления списка иногда имеют так много столбцов, что нецелесообразно отображать их все. В этом случае лучшим подходом является отображение наиболее полезных столбцов по умолчанию и предоставление пользователям возможности добавлять или удалять столбцы по мере необходимости.
Снимок экрана: представление списка с меню
При щелчке правой кнопкой мыши по заголовку столбца отображается контекстное меню, позволяющее пользователям добавлять или удалять столбцы.
Снимок экрана: диалоговое окно
Если щелкнуть Дополнительно в контекстном меню заголовка столбца, откроется диалоговое окно Выбор столбцов, которое позволяет пользователям добавлять или удалять столбцы, а также изменять их порядок.
Представление списка флажок
Разрешить пользователям выбирать несколько элементов.
Представления списков с множественным выбором имеют точно такой же внешний вид, что и представления списка с одним выбором, поэтому нет визуального признака, что они поддерживают множественный выбор. Представление списка проверка поля можно использовать для четкого указания на возможность выбора нескольких элементов. Следовательно, этот шаблон следует использовать для задач, в которых множественный выбор является обязательным или часто используемым.
Снимок экрана: диалоговое окно с несколькими проверка полями
В этом примере представление "Маленький значок" использует проверка поля, так как для задачи необходимо выбрать несколько элементов.
Представления списка с группами
Упорядочение данных по группам.
Хотя представления сведений часто поддерживают сортировку данных по любым столбцам, представления списка позволяют пользователям упорядочивать элементы по группам. Ниже приведены некоторые преимущества группирования.
  • Группы работают во всех представлениях (кроме списка), поэтому, например, пользователи могут группировать очень большие значки представления альбомов по исполнителям.
  • Группы могут быть высокоуровневые коллекции, которые часто более значимы, чем группирование непосредственно из данных. Например, Windows Обозреватель группируют даты на сегодня, вчера, на прошлой неделе, в начале этого года и давно.
Снимок экрана: представление списка с несколькими группами данных
В этом примере центр приветствия Windows отображает сгруппированные элементы в представлении списка.

Рекомендации

Уровень представления

  • Сортировка элементов списка в логическом порядке. Сортируйте имена в алфавитном порядке, числа — в числовом порядке, а даты — в хронологическом порядке.

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

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

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

    Снимок экрана: диалоговое окно поиска с инструкциями

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

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

Взаимодействие

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

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

  • Сделайте поведение двойного щелчка избыточным. Всегда должна быть кнопка или команда контекстного меню с одинаковым эффектом.

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

    Снимок экрана: представление списка с подсказкой клавиатуры

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

  • Предоставление контекстных меню соответствующих команд. К таким командам относятся Вырезать, Копировать, Вставить, Удалить или Удалить, Переименовать и Свойства.

  • Если пользователи могут изменить порядок сортировки и группирования, укажите контекстные меню "Сортировка по" и "Группировать по". Первый щелчок по имени столбца сортирует или группирует список в порядке возрастания для этого столбца, второй щелчок сортирует или группирует по убыванию. Используйте предыдущий порядок (из другого столбца) в качестве вторичного ключа.

    Снимок экрана: представление списка с меню

    В этом примере контекстное меню "Сортировка по" изменяет порядок сортировки. При нажатии кнопки Имя выполняется сортировка по имени в порядке возрастания. При повторном нажатии кнопки Имя выполняется сортировка по имени в порядке убывания.

  • Сделайте заголовок столбца представления списка доступным с помощью клавиатуры.

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

  • Избегайте горизонтальной прокрутки. Режим списка использует горизонтальную прокрутку. Этот режим, как правило, является самым компактным, но горизонтальную прокрутку, как правило, труднее использовать, чем вертикальную прокрутку. Если компактность не важна, рекомендуется использовать представление Маленький значок. Однако режим списка является хорошим выбором, если имеется много элементов в алфавитном порядке и достаточно места на экране для широкого элемента управления.

    Хорошо:

    Снимок экрана: элемент управления в режиме широкого списка

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

Списки множественного выбора

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

    Снимок экрана: список пяти выбранных эскизов

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

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

    Снимок экрана: диалоговое окно с местом на диске

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

  • Для проверка представлений списков, если потенциально много элементов и выбор или удаление всех из них, скорее всего, добавьте кнопки Выбрать все и Очистить все.

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

Изменение представлений

Если пользователи могут изменять представления:

  • Выберите наиболее удобное представление по умолчанию. Любые изменения, внесенные пользователями, должны быть постоянными в представлении списка для каждого пользователя.

  • Измените представление с помощью разделенной кнопки, кнопки меню или раскрывающегося списка. Когда это целесообразно, используйте разделенную кнопку на панели инструментов и измените метку кнопки в соответствии с текущим представлением.

    Снимок экрана: список с кнопкой

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

  • Укажите контекстное меню Вид.

    Снимок экрана: список с контекстным меню

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

Представления сведений

  • Рассмотрите возможность использования представления плиток для повышения удобочитаемости.

    Хорошо:

    Снимок экрана: список сведений с узкими столбцами

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

    Лучше:

    Снимок экрана: список сведений с данными в группах

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

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

    • Размер каждой ширины столбца в соответствии с данными.
    • Размер ширины элемента управления в соответствии со столбцами и любыми вероятными полосами прокрутки.
    • При необходимости используйте горизонтальную прокрутку.
    • Усекаются данные только для элементов нечетного размера или в качестве крайнего средства.

    Если данные нормального размера должны быть усечены по умолчанию, сделайте окно и представление списка изменяемыми размерами. Включите дополнительные 30 процентов (до 200 процентов для более короткого текста) для любого текста (но не чисел), который будет локализован.

    Неправильно:

    Снимок экрана: столбцы списка с усеченными данными

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

    Неправильно:

    Снимок экрана: список из одного столбца с усеченными данными

    В этом примере данные усекаются без причины.

  • Выберите соответствующий порядок столбцов по умолчанию. Как правило, упорядочение столбцов выполняется следующим образом:

    • Во-первых, имя элемента или идентифицирующие данные.
    • Затем другие данные, полезные для разграничения элементов списка.
    • Далее — наиболее полезные (желательно короткие или фиксированные) данные.
    • Далее— менее полезные (предпочтительнее короткая или фиксированная длина) данные.
    • Последние, длинные данные переменной длины.

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

  • При необходимости разрешите пользователям добавлять и удалять столбцы, а также изменять порядок. Отображение наиболее полезных столбцов по умолчанию. Это достигается с помощью атрибута Header Drag Drop.

  • Выберите выравнивание, подходящее для данных. Используйте следующие правила:

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

    Снимок экрана: список сведений с отсортированных данных

    В этом примере сначала был щелкнут столбец Имя, а затем столбец Тип. В результате тип в порядке возрастания является первичным ключом сортировки, а имя в порядке возрастания — вторичным.

  • Используйте атрибут Full Row Select , чтобы пользователи могли легко определить выбранные элементы во всех столбцах.

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

  • Не используйте заголовок столбца, если имеется только один столбец и нет необходимости в обратной сортировке. Вместо этого используйте метку для идентификации данных.

    Неправильно:

    Снимок экрана: список с меткой в заголовке столбца

    Правильно:

    Снимок экрана: список с меткой над элементом управления

    В правильном примере вместо заголовка столбца используется метка.

Снимок экрана: размер списка и интервал

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

  • Выберите высоту представления списка, в котором отображается целое количество элементов. Не усекайте элементы по вертикали.
  • Выберите размер представления списка, который исключает ненужную вертикальную и горизонтальную прокрутку во всех поддерживаемых представлениях. Представления списка должны отображать от 3 до 20 элементов. Рассмотрите возможность сделать представление списка немного больше, если это позволит исключить полосу прокрутки. Списки с потенциально большим количеством элементов должны отображать по крайней мере пять элементов, чтобы упростить прокрутку, отображая больше элементов за раз и упрощая позицию полосы прокрутки.
  • Если пользователи выигрывают от того, чтобы сделать представление списка больше, сделайте представление списка и его родительское окно изменяемыми размерами. Это позволяет пользователям изменять размер представления списка по мере необходимости. Однако в представлениях списка с изменяемым размером должно отображаться не менее трех элементов.

Метки

Метки элементов управления

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

  • Назначьте уникальный ключ доступа для каждой метки. Рекомендации см. в разделе Клавиатура.

  • Используйте прописные буквы в стиле предложений.

  • Расположите метку над элементом управления и выровняйте ее по левому краю элемента управления.

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

    Правильно:

    Снимок экрана с меткой: выбор одной или нескольких надстроек

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

    Неправильно:

    Снимок экрана с меткой: надстройки

    В этом примере метка не предоставляет сведений о множественном выборе.

    Хорошо:

    Снимок экрана: проверка метка списка: надстройки

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

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

Метки заголовков

  • Держите метки заголовков краткими (три слова или меньше).
  • Используйте одно существительное или существительное фразу без конечной знаки препинания.
  • Используйте прописные буквы в стиле предложений.
  • Выравнивание заголовка так же, как и данные.

Метки групп

  • Используйте следующие метки групп для высокоуровневых коллекций:
    • Имена: используйте первую букву имени или диапазоны букв.
    • Размеры: не указано, 0 КБ, 0–10 КБ, 10–100 КБ, 100 КБ — 1 МБ, 1–16 МБ, 16–128 МБ
    • Даты: сегодня, вчера, на прошлой неделе, в начале этого года и давным-давно.
  • В противном случае метки групп используют точный текст сгруппированных данных, включая прописные буквы и знаки препинания.

Текст данных

Инструктивный текст

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

Документация

При обращении к представлениям списков:

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

Пример. В списке Программы и службы выберите Общий доступ к файлам и принтерам.

При обращении к полям проверка в представлении списка:

  • Используйте точный текст метки, включая прописные буквы, и включите слово проверка поле. Не включайте символ подчеркивания клавиши доступа.
  • Чтобы описать взаимодействие с пользователем, используйте select и clear.
  • По возможности отформатируйте метку полужирным шрифтом. В противном случае поместите метку в кавычки, только если это необходимо, чтобы избежать путаницы.

Пример. Выберите поле Подчеркивание проверка.