Списки

Примечание

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

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

screen shot of single-selection list box

Типичное поле с одним выбором.

Примечание

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

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

Чтобы определиться, ответьте на вопросы:

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

Списки с одним выбором

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

screen shot of highest quality as default button

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

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

screen shot of list of options such as plain text

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

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

Стандартные списки выбора нескольких элементов и флажки

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

Предварительный просмотр списков

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

Построитель списков и добавление и удаление списков

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

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

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

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

В списках есть несколько шаблонов использования:

Метка Значение
Списки с одним выбором Разрешите пользователям выбирать один элемент за раз.
Screen shot of list box with one item selected
В этом примере пользователи могут выбрать только один отображаемый элемент.
Стандартные списки выбора нескольких элементов Разрешить пользователям выбирать любое количество элементов, в том числе нет.
Стандартные списки с несколькими выборами имеют точно такой же внешний вид, что и списки с одним выбором, поэтому нет визуальной подсказки о поддержке нескольких вариантов выбора. Так как пользователи должны обнаруживать эту возможность, этот шаблон списка лучше всего использовать для задач, где выбор нескольких элементов не является важным и редко используется.
Существует два разных режима выбора: несколько и расширенных. Расширенный режим выбора является гораздо более распространенным, где выделение может быть расширено путем перетаскивания или нажатия клавиш SHIFT+click и CTRL+click, чтобы выбрать группы смежных и несмежных значений соответственно. В режиме множественного выделения щелчок любого элемента переключает его состояние выделения независимо от клавиш SHIFT и CTRL. Учитывая необычное поведение, режим множественного выбора не рекомендуется использовать, и вместо этого следует использовать списки флажок.
Screen shot of list box with several items selected
В этом примере пользователи могут выбрать любое количество элементов с помощью режима множественного выбора.
Списки флажок Как и стандартные списки с множественным выбором, списки флажков позволяют пользователям выбирать любое количество элементов, в том числе нет.
В отличие от стандартных списков с множественным выбором, флажки четко указывают на возможность выбора нескольких элементов. Используйте этот шаблон списка для задач, в которых выбор нескольких элементов является важным или часто используемым.
Screen shot of Toolbars check-box list
В этом примере пользователи обычно выбирают несколько элементов, поэтому используется список флажок.
Учитывая это четкое указание на множественный выбор, можно предположить, что списки флажок предпочтительнее стандартных списков с несколькими выборами. На практике мало задач требует выбора нескольких задач или их использования в значительной степени; Использование списка флажка в таких случаях привлекает слишком много внимания к выделению. Следовательно, стандартные списки с множественным выбором гораздо чаще.
Предварительный просмотр списков Может быть одним или несколькими выделениями, но они показывают предварительный просмотр эффекта выделения, а не просто текста.
Screen shot of Window Color options preview
В этом примере предварительный просмотр каждого параметра четко показывает результат выбора, что является более эффективным, чем использование текста в одиночку.
Построитель списков Разрешите пользователям создавать список вариантов, добавляя один элемент за раз и при необходимости устанавливая порядок списка.
Построитель списков состоит из двух списков с одним выбором: список слева является фиксированным набором параметров, а список справа — это создаваемый список. Между списками есть две кнопки команд:
  • Кнопка "Добавить ", которая перемещает выбранный в данный момент параметр в создаваемый список, вставленный перед выбранным элементом. (Двойной щелчок элемента параметра имеет тот же эффект.)
  • Кнопка "Удалить ", которая удаляет выбранный элемент из созданного списка и возвращает его в список параметров. (Двойной щелчок элемента в встроенном списке имеет тот же эффект.) При необходимости в созданном списке могут быть команды "Переместить вверх " и "Вниз" , чтобы упорядочить элементы списка.
Screen shot of Toolbar buttons list builder
В этом примере построитель списков используется для создания панели инструментов, выбирая элементы из набора доступных параметров и устанавливая их порядок.
Добавление и удаление списков Разрешить пользователям создавать список вариантов, добавляя один или несколько элементов одновременно и при необходимости устанавливая порядок списка (например, построители списков).
В отличие от построителя списков, при нажатии кнопки "Добавить" отображается диалоговое окно для выбора элементов для добавления в список. Использование отдельного диалогового окна обеспечивает значительную гибкость при выборе элементов, которые можно использовать специальное средство выбора объектов или даже общее диалоговое окно. По сравнению с построителем списков этот вариант является более компактным, но требует немного больше усилий для добавления элементов.
Screen shot of Menu contents list
В этом примере пользователи могут добавлять или удалять инструменты из меню, а также задавать порядок.
Хотя построитель списков и шаблоны добавления и удаления списков значительно тяжелее, чем другие списки с множественным выбором, они предлагают два уникальных преимущества:
  • Пользователи имеют контроль над порядком списка, как при создании списка, так и после.
  • Пользователи могут просматривать сводку выбранных элементов, что может быть значительным преимуществом, если количество вариантов большое.
Их недостатки в том, что им требуется гораздо больше места на экране и может быть трудно использовать при создании большого списка элементов с нуля. Следовательно, они лучше всего используются для создания коротких списков или изменения списков, которые уже существуют.

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

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

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

Правильно:screen shot of alignment (left, center, right)

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

Неправильный:screen shot of disorganized list

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

Правильно:screen shot of alphabetized list

В этом примере элементы списка легче найти, так как они отсортированы в алфавитном порядке. Однако элемент "Все продукты Windows" находится в начале списка, независимо от порядка сортировки.

  • Поместите параметры, представляющие все или нет в начале списка, независимо от порядка сортировки оставшихся элементов.
  • Заключите мета-параметры в круглые скобки.

screen shot of drop-down list with none selected

В этом примере "(none)" является мета-параметром, так как он не является допустимым значением для выбора, а указывает, что сам параметр не используется.

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

Неправильный:screen shot of drop-down list with blank selected

В этом примере значение пустого элемента неясно.

Правильно:screen shot of drop-down list with none selected

В этом примере используется мета-параметр "(none)".

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

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

Правильно:screen shot of list of wizard changes completed

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

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

Хорошо:screen shot of details of list item selected

В этом примере изменение выбранного элемента изменяет описание.

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

Хорошо:screen shot of list of folders in windows explorer

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

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

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

screen shot of list box with four items selected

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

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

screen shot of check-box list of windows features

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

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

Значения по умолчанию

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

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

screen shot of list-box sizing and spacing

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

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

Подписи

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

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

Исключение: Опустите метку, если это просто повторная инструкция диалогового окна. В этом случае основная инструкция принимает двоеточие (если это не вопрос) и ключ доступа.

Хорошо:screen shot of list with redundant label

В этом примере метка списка просто переначисляет основную инструкцию.

Лучше:screen shot of list of without redundant label

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

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

screen shot of button and list using same label

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

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

Правильно:screen shot of list with left-aligned label above screen shot of list with text-aligned label to left

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

Неправильный:screen shot of list with text-aligned label above screen shot of list with top-aligned label on left

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

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

Правильно:screen shot of list with select one or more label

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

Неправильный:screen shot of list box with add-ons label

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

Лучшие:screen shot of check-box list with add-ons label

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

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

Текст параметра

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

Обучающий и дополнительный текст

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

screen shot of check-box list and descriptive text

В этом примере дополнительный текст помещается под списком.

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

При обращении к спискам:

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

Пример. В списке "Перейти к чему" выберите "Закладка".